Cómo cambiar su encabezado Divi por otro en Scroll

Su encabezado sigue siendo inevitablemente 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 abrir y cerrar de ojos. Ahora, si está buscando una forma de intercambiar su encabezado Divi en el desplazamiento con otro, disfrutará de esta publicación. Le mostraremos exactamente cómo llevarlo a cabo con el creador de temas de Divi, los elementos integrados y algo de código adicional. También nos aseguramos 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.

Avance

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 tener en sus manos 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

1. Vaya a Divi Theme Builder y comience a crear un encabezado global

Ir a Divi Theme Builder

Comience por ir al 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. Cree ambos encabezados en la misma sección

Modificar sección

Dimensionamiento

Una vez dentro del editor de plantillas, verá 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
• Acolchado 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 quede en 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: Top Center

Agregar 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 columnas:

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 de la canaleta: 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
• Acolchado 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 las columnas.

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

A continuación, cambie la alineación del módulo.

• Alineación de la imagen: centro

Agregar módulo de menú a la columna 2

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

A continuación, elimine el color de fondo del módulo.

Diseño

Vaya 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

Configuración 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 cambiaremos 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: 30px (solo tableta y teléfono)
• Relleno derecho: 30px (solo tableta y teléfono)

Agregue el módulo de seguimiento de redes sociales a la columna 3

Agregue las redes sociales de su preferencia

En la última columna, el único módulo que necesitamos es un módulo de seguimiento de redes sociales. Agrega las redes sociales que prefieras.

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 también el color del icono.

• Color del icono: # 0042c9

Frontera

Y complete la configuración del módulo agregando un radio de borde.

• Todas las esquinas: 100px

Agregar encabezado de fila n. ° 2

Estructura de la columna

¡A la segunda cabecera! Agregue una nueva fila usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado 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.

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. Sube un logo de tu elección.

Alineación

A continuación, cambie la alineación de la imagen del módulo.

• Alineación de la imagen: centro

Clonar el módulo de menú y colocarlo en la columna 2 del encabezado de fila n. ° 2

Clone el módulo de menú que se utilizó 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 del texto del menú desplegable

Modifique también la configuración de texto del menú desplegable.

• Color de la línea del menú desplegable: # ffc21d

Modificar la configuración del icono

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 módulo de botones a la columna 3

Agregar copia

En la última columna de la fila, el único módulo que necesitamos es un módulo de botones. Ingrese alguna copia de su elección.

Alineación

A continuación, modifique la alineación del botó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: 20px (escritorio), 18px (tableta), 15px (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)
• Acolchado inferior: 33px (escritorio), 35px (tableta), 38px (teléfono)

2. Agregar clases 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 n. ° 1

Luego, abra el encabezado de la primera fila y use la siguiente clase CSS:

• Clase CSS: header-1

Encabezado de fila n. ° 2

Abra también la segunda fila. Utilice la siguiente clase CSS para ello:

• Clase CSS: header-2

3. Agregue 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. Agregue un nuevo módulo de código donde quiera dentro de su sección. Lo colocamos en la tercera columna de la primera fila.

Agregar código JQuery (entre etiquetas de script)

Luego, agregue las siguientes líneas de código CSS entre las etiquetas de secuencia de comandos, como puede ver en la pantalla de impresión a continuación:

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();
    }
  
});      
});

Agregar código CSS (entre etiquetas de estilo)

Agregue también el siguiente código CSS entre las etiquetas de estilo :

.et_mobile_menu {
margin-top: 20px;
width: 300%;
margin-left: -100%;
}

4. Guarde los cambios del Creador de temas y vea el resultado

En este punto, lo único que queda por hacer es guardar todos los cambios en el 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 usando el generador de temas de Divi, los elementos Divi y algo de código JQuery y CSS adicional. También hemos generado 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 obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.