Su encabezado inevitablemente sigue siendo uno de los elementos más importantes de su sitio web. Influye en el proceso de navegación de sus visitantes y les permite encontrar lo que buscan en un santiamén. Ahora, si está buscando una manera de intercambiar su encabezado Divi en el desplazamiento con otro, disfrutará de esta publicación. Le mostraremos exactamente cómo lograrlo con el generador de temas de Divi , los elementos integrados y algún código adicional. También nos estamos asegurando de que haya un espacio de marcador de posición generado automáticamente para el encabezado en la parte superior de su página. ¡También podrá descargar el archivo JSON de forma gratuita!
Hagámoslo.
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Descargue la plantilla de encabezado Swap Divi GRATIS
Para poner sus manos en la plantilla de encabezado Divi de intercambio gratuito, primero deberá descargarla usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Vaya a Divi Theme Builder y comience a construir el encabezado global
Ir al Creador de temas Divi
Comience yendo a Divi Theme Builder en el backend de su sitio web de WordPress y haga clic en ‘Agregar encabezado global’.
Crear encabezado global
Luego, haga clic en ‘Crear encabezado global’ para ser redirigido al editor de plantillas.
2. Crea ambos encabezados en la misma sección
Modificar Sección
Dimensionamiento
Una vez dentro del editor de plantillas, verás una sección. Abra la configuración de la sección y asegúrese de que el ancho de la sección sea ‘100%’.
- Ancho: 100%
Espaciado
Luego, vaya a la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Sombra de la caja
También estamos usando una sombra de caja sutil.
- Posición vertical de la sombra del cuadro: 15px
- Color de sombra: rgba(0,0,0,0.06)
Posición
Por último, pero no menos importante, haremos que la sección se adhiera a la parte superior central de nuestra página usando la configuración de posición en la pestaña avanzada.
- Posición: Fija
- Ubicación: Centro superior
Añadir encabezado de fila n.º 1
Estructura de la columna
Ambos encabezados que crearemos serán parte de la misma sección. Usaremos una fila separada para cada encabezado. Agregue el encabezado de la primera fila usando la siguiente estructura de columna:
Color de fondo
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie el color de fondo.
- Color de fondo: #000000
Dimensionamiento
Modifique también la configuración de tamaño.
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Luego, vaya a la configuración de espaciado y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Elemento principal
Complete la configuración de la fila agregando dos líneas de código CSS al elemento principal de la fila. Este código CSS nos ayudará a alinear todo el contenido de la columna.
01
02
|
display : flex ; align-items : center ; |
Agregar módulo de imagen a la columna 1
Cargar imagen
Es hora de agregar módulos, comenzando con un módulo de imagen en la columna 1. Cargue un logotipo de su elección.
Alineación
Cambie la alineación del módulo a continuación.
- Alineación de imagen: Centro
Seleccione el menú
En la segunda columna, el único módulo que necesitamos es un módulo de menú. Seleccione un menú de su elección.
Eliminar color de fondo
Elimine el color de fondo del módulo a continuación.
Disposición
Pase a la pestaña de diseño y cambie el diseño en consecuencia:
- Estilo: Centrado
Configuración del texto del menú
Luego, realice algunos cambios en la configuración del texto del menú.
- Fuente del menú: Roboto
- Peso de la fuente del menú: Negrita
- Color del texto del menú: #ffffff (escritorio), #000000 (tableta y teléfono)
- Tamaño del texto del menú: 18px
Ajustes de texto del menú desplegable
A continuación, cambiaremos el color de la línea del menú desplegable en la configuración de texto del menú desplegable.
- Color de la línea del menú desplegable: #000000
Configuración de iconos
También estamos cambiando el color del icono del menú de hamburguesas.
- Color del icono del menú de hamburguesas: #ffffff
Espaciado
Complete la configuración del módulo agregando un relleno personalizado a la izquierda y a la derecha en tamaños de pantalla más pequeños.
- Relleno izquierdo: 30 px (solo tableta y teléfono)
- Relleno derecho: 30 px (solo tableta y teléfono)
Agregar Redes Sociales de Elección
En la última columna, el único módulo que necesitamos es un módulo de seguimiento de redes sociales. Agrega las redes sociales de tu preferencia.
Color de fondo de la red social individual
Luego, abra cada red social individualmente y cambie el color de fondo a blanco.
- Color de fondo: #FFFFFF
Alineación
Vuelva a la configuración general del módulo y cambie la alineación del módulo.
- Alineación del módulo: Centro
Configuración de iconos
Modifique el color del icono también.
- Color del icono: #0042c9
Borde
Y complete la configuración del módulo agregando un radio de borde.
- Todas las esquinas: 100px
Añadir encabezado de fila n.º 2
Estructura de la columna
¡Vamos al segundo encabezado! Agregue una nueva fila usando la siguiente estructura de columna:
Dimensionamiento
Sin agregar ningún módulo todavía, abra la configuración de la fila y cambie la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Igualar alturas de columna: Sí
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Elemento principal
Luego, alinee todo el contenido de la columna usando dos líneas de código CSS en el elemento principal de la fila.
01
02
|
display : flex ; align-items : center ; |
Color de fondo de la columna 3
Y complete la configuración de la fila abriendo la configuración de la columna 3 y usando un color de fondo.
- Color de fondo: #0042c9
Agregar módulo de imagen a la columna 1
Cargar imagen
En la columna 1, el único módulo que necesitamos es un módulo de imagen. Cargue un logotipo de su elección.
Alineación
Cambie la alineación de la imagen del módulo a continuación.
- Alineación de imagen: Centro
Clone el módulo de menú que se usó en la fila anterior y coloque el duplicado en la columna central de la segunda fila.
Modificar la configuración del texto del menú
Abra el módulo de menú duplicado y cambie el color del texto del menú.
- Color del texto del menú: #0042c9
Modificar la configuración de texto del menú desplegable
Modifique también la configuración del texto del menú desplegable.
- Color de la línea del menú desplegable: #ffc21d
Modificar la configuración de iconos
Complete la configuración del módulo de menú cambiando el color del icono del menú de hamburguesas.
- Color del icono del menú de hamburguesas: #0042c9
Agregar copia
En la última columna de la fila, el único módulo que necesitamos es un módulo de botones. Introduzca alguna copia de su elección.
Alineación
Modifique la alineación del botón a continuación.
- Alineación de botones: Centro
Configuración de botones
Luego, diseñe el botón de la siguiente manera:
- Usar estilos personalizados para el botón: Sí
- Tamaño del texto del botón: 20 px (escritorio), 18 px (tableta), 15 px (teléfono)
- Color del texto del botón: #ffffff
- Ancho del borde del botón: 0px
- Fuente del botón: Roboto
- Peso de la fuente del botón: Negrita
Espaciado
Y complete la configuración del módulo agregando un relleno personalizado en diferentes tamaños de pantalla.
- Relleno superior: 33 px (escritorio), 35 px (tableta), 38 px (teléfono)
- Relleno inferior: 33 px (escritorio), 35 px (tableta), 38 px (teléfono)
2. Agregar clases de CSS
Sección
Una vez que haya agregado y diseñado todos los módulos, es hora de agregar las clases CSS que usaremos dentro de nuestro código JQuery. Primero, abra la configuración de la sección y use la siguiente clase CSS:
- Clase CSS: sección de encabezado
Encabezado de fila #1
Luego, abra el encabezado de la primera fila y use la siguiente clase CSS:
- Clase CSS: encabezado-1
Encabezado de fila #2
Abra también la segunda fila. Utilice la siguiente clase CSS para ello:
- Clase CSS: encabezado-2
3. Agregar código JQuery y CSS
Agregar módulo de código a la tercera columna de la primera fila
Una vez que todas las clases de CSS están en su lugar, es hora de agregar el código. Agrega un nuevo módulo de código donde quieras dentro de tu sección. Lo estamos colocando en la tercera columna de la primera fila.
Luego, agregue las siguientes líneas de código CSS entre las etiquetas de script, como puede ver en la pantalla de impresión a continuación:
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
jQuery( function ($){ var firstHeader = $( '.header-1' ); var secondHeader = $( '.header-2' ); var headerSection = $( '.header-section' ); headerSection.wrap( '<div class="header-placeholder"></div>' ); var headerWrap = $( '.header-placeholder' ); var headerHeight = firstHeader.outerHeight(); headerWrap.css( 'height' , headerHeight); secondHeader.hide(); $(window).scroll( function () { var topPosition = $(window).scrollTop(); if (topPosition >= 400) { firstHeader.slideUp(); secondHeader.slideDown(); } if (topPosition == 0) { secondHeader.slideUp(); firstHeader.slideDown(); } }); }); |
Agregue también el siguiente código CSS entre las etiquetas de estilo :
01
02
03
04
05
|
.et_mobile_menu { margin-top : 20px ; width : 300% ; margin-left : -100% ; } |
4. Guarde los cambios del generador de temas y vea el resultado
En este punto, lo único que queda por hacer es guardar todos los cambios del generador de temas y ver el resultado en su sitio web.
Avance
Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.
Escritorio
Móvil
Pensamientos finales
En esta publicación, le mostramos cómo cambiar su encabezado Divi por otro en el desplazamiento utilizando el generador de temas de Divi, los elementos Divi y algunos códigos JQuery y CSS adicionales. También generamos automáticamente algo de espacio en la parte superior del contenedor de la página que evita que el encabezado fijo se superponga al contenido de la página. ¡También pudo descargar el archivo JSON de plantilla de encabezado de intercambio Divi de forma gratuita! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Si está ansioso por aprender más sobre Divi y obtener más regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.