Cómo colocar automáticamente su encabezado debajo de la primera sección Divi de cada página

Desde que salió Divi Theme Builder, hemos estado compartiendo tutoriales sobre cómo crear y personalizar un encabezado para que coincida con las diferentes necesidades que pueda tener. En el tutorial de hoy, continuaremos ese viaje mostrándole cómo colocar automáticamente un encabezado personalizado debajo de la primera sección Divi de cada página. Este enfoque permite a los visitantes ver la sección de héroe de sus páginas primero y luego obtener acceso al menú y todos sus elementos. El estilo que estamos usando para el encabezado personalizado coincide con el paquete de diseño Bistro, ¡también podrá descargar la plantilla de página personalizada 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 personalizado GRATIS

Para tener en sus manos la plantilla de encabezado personalizada gratuita, 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 agregue una nueva plantilla de página

Vaya a Divi Theme Builder y agregue una nueva plantilla

Comience por ir a Divi Theme Builder y agregue una nueva plantilla.

Usar en

Utilice esta nueva plantilla en todas las páginas.

• Usar en: todas las páginas

2. Comience a crear un diseño de encabezado personalizado

Continúe creando un encabezado personalizado dentro de la plantilla de página.

Configuración de la sección

Color de fondo

Una vez dentro del editor de plantillas, verá una sección. Abra esa sección y cambie el color de fondo.

• Color de fondo: #FFFFFF

Espaciado

A continuación, elimine el relleno superior e inferior predeterminado de la sección.

• Relleno superior: 0px
• Acolchado inferior: 0px

Frontera

Agrega un borde superior e inferior también.

• Ancho del borde superior e inferior: 1 px
• Color del borde superior e inferior: # 002d4c

ID de CSS

E incluya una ID de CSS. Más adelante en el tutorial, usaremos este ID de CSS para colocar la sección debajo de la primera sección de cada página.

• ID de CSS: encabezado personalizado

Índice Z

Por último, pero no menos importante, aumentaremos el índice z de la sección para asegurarnos de que aparezca en la parte superior de todo el contenido de la página.

• Índice Z: 99999

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de la fila y permita que la fila ocupe todo el ancho de la sección.

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

Espaciado

Elimine también todo el acolchado superior e inferior predeterminado.

• Relleno superior: 0px
• Acolchado inferior: 0px

Elemento principal

Para asegurarnos de que todas las columnas permanezcan una al lado de la otra en tamaños de pantalla más pequeños y para centrar el contenido de la columna, también agregaremos dos líneas de código CSS al elemento principal de la fila.

display: flex;
align-items: center;

Columna 1

Espaciado

Continúe abriendo la configuración de la columna 1 y agregue algo de relleno superior e inferior a la configuración de espaciado.

• Acolchado superior: 20px
• Acolchado inferior: 20px

Frontera

Agrega un borde derecho a la columna también.

• Ancho del borde derecho: 1 px
• Color del borde derecho: # 002d4c

Agregar módulo de imagen a la columna 1

Subir logotipo

¡Es hora de comenzar a agregar módulos! En la columna 1, necesitaremos un módulo de imagen. Sube tu logo.

Alineación

Vaya a la pestaña de diseño del módulo y cambie la alineación de la imagen.

• Alineación de la imagen: centro

Dimensionamiento

Modifique también el ancho del módulo en diferentes tamaños de pantalla.

• Ancho: 4vw (escritorio), 7vw (tableta), 12vw (teléfono)

Agregar módulo de menú a la columna 2

Seleccione el menú

En la segunda columna, allí, necesitaremos un módulo de menú. Seleccione un menú de su elección.

Diseño

Vaya a la pestaña de diseño del módulo y cambie la configuración de diseño de la siguiente manera:

• Estilo: centrado
• Dirección del menú desplegable: hacia abajo

Texto del menú

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

• Fuente del menú: Cabina
• Color del texto del menú: # 77848d
• Tamaño del texto del menú: 16px (escritorio), 15px (tableta), 14px (teléfono)
• Altura de la línea del menú: 1.8em

Texto desplegable

Luego, cambie algunos colores en la configuración del texto desplegable.

• Color de fondo del menú desplegable: #ffffff
• Color de la línea del menú desplegable: # 002d4c

Iconos

Y complete la configuración del módulo cambiando el color del icono del menú de hamburguesas en la configuración de los iconos.

• Color del icono del menú de hamburguesas: # 002d4c

Agregar módulo de botones a la columna 3

Agregar copia

A la siguiente y última columna. Allí, necesitaremos un módulo de botones. Agregue una copia de su elección.

Alineación

Vaya a la pestaña de diseño del módulo y cambie la alineación de los botones.

• Alineación de botones: centro

Configuración de botones

Continúe diseñando el botón en la configuración del botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 13px
• Color del texto del botón: # 002d4c
• Color de fondo del botón: #ffffff
• Ancho del borde del botón: 2px
• Color del borde del botón: #ffffff (predeterminado), # d1d1d1 (Hover)
• Radio del borde del botón: 0px

• Espacio entre letras del botón: 2px
• Fuente del botón: Cabina
• Peso de la fuente del botón: Semi negrita
• Estilo de fuente del botón: mayúsculas

Espaciado

Luego, agregue un relleno personalizado en diferentes tamaños de pantalla.

• Acolchado superior: 16px
• Acolchado inferior: 16px
• Relleno izquierdo: 24 px (escritorio y tableta), 13 px (teléfono)
• Relleno derecho: 24px (escritorio y tableta), 13px (teléfono)

Sombra de la caja

Complete la configuración del módulo agregando una sombra de cuadro.

• Posición horizontal de la sombra del cuadro: 0px
• Posición vertical de la sombra del cuadro: 0px
• Fuerza de desenfoque de sombra de caja: 0px
• Fuerza de propagación de la sombra de la caja: 2px (predeterminado), 6px (Hover)
• Color de sombra: # 002d4c
• Posición de la caja de sombra: Sombra interior

3. Coloque automáticamente el encabezado después de la primera sección de cada página usando JQuery

Agregar módulo de código a la columna 2

Ahora, para colocar automáticamente el menú debajo de la primera sección de cada página, necesitaremos un poco de código JQuery. Para incluir este código en nuestro encabezado personalizado, agregue un módulo de código a la columna 2.

Insertar código JQuery

Agregue las siguientes líneas de código JQuery, entre las etiquetas de script, como puede observar en la pantalla de impresión a continuación , al Módulo de código para aplicar el efecto:

jQuery (función ($) {
$ ('# encabezado-personalizado'). insertAfter ('. et_pb_section_0');
});

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

¡Y complete el encabezado personalizado guardando todos los cambios del generador de temas y viendo el resultado en sus páginas!

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 colocar automáticamente el encabezado personalizado que crea con el Generador de temas de Divi después de la primera sección Divi de cada página. Solo necesitará crear el encabezado personalizado una vez, agregar el código JQuery y el encabezado personalizado se reposicionará automáticamente. Esta es una excelente manera de cambiar la posición normal de la página superior del menú y permitir que la sección de héroe brille primero. ¡También pudiste descargar la plantilla gratis! 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.