Cómo cambiar su encabezado Divi por otro en Scroll

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.

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 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

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

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)

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

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

Clonar módulo de menú y colocar en la columna 2 del encabezado de fila n.º 2

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 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. 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.

Agregar código JQuery (entre etiquetas de script)

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

Agregar código CSS (entre etiquetas de estilo)

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.