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ándote 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 primero la sección principal de sus páginas 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 de Bistro, ¡también podrá descargar la plantilla de página personalizada 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 personalizado GRATIS
Para poner sus manos en 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 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 agregue una nueva plantilla de página
Vaya a Divi Theme Builder y agregue una nueva plantilla
Comience yendo 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.
Ajustes de sección
Color de fondo
Una vez dentro del editor de plantillas, verás una sección. Abre esa sección y cambia el color de fondo.
- Color de fondo: #FFFFFF
Espaciado
Elimine el relleno superior e inferior predeterminado de la sección a continuación.
- Relleno superior: 0px
- Relleno inferior: 0px
Borde
Agregue un borde superior e inferior también.
- Ancho del borde superior e inferior: 1px
- Color del borde superior e inferior: #002d4c
ID de CSS
E incluye un 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 utilizando 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 del canalón: 1
- Ancho: 100%
- Ancho máximo: 100%
Espaciado
Elimine también todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno 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.
|
01
02
|
display: flex;align-items: center; |
columna 1
Espaciado
Continúe abriendo la configuración de la columna 1 y agregue un poco de relleno superior e inferior a la configuración de espaciado.
- Relleno superior: 20px
- Relleno inferior: 20px
Borde
Agregue un borde derecho a la columna también.
- Ancho del borde derecho: 1px
- Color del borde derecho: #002d4c
Agregar módulo de imagen a la columna 1
Cargar logotipo
¡Es hora de comenzar a agregar módulos! En la columna 1, necesitaremos un módulo de imagen. Cargue su logotipo.
Alineación
Pase a la pestaña de diseño del módulo y cambie la alineación de la imagen.
- Alineación de 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)
Seleccione el menú
En la segunda columna, allí, necesitaremos un módulo de menú. Seleccione un menú de su elección.
Disposición
Pase 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ú: 16 px (escritorio), 15 px (tableta), 14 px (teléfono)
- Altura de la línea del menú: 1,8 em
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 ícono del menú de hamburguesas en la configuración de íconos.
- Color del icono del menú de hamburguesas: #002d4c
Agregar copia
En la siguiente y última columna. Allí, necesitaremos un módulo de botones. Agregue alguna copia de su elección.
Alineación
Pase 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
- Espaciado entre letras de botones: 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 poco de relleno personalizado en diferentes tamaños de pantalla.
- Relleno superior: 16px
- Relleno inferior: 16px
- Relleno izquierdo: 24 px (computadora de escritorio y tableta), 13 px (teléfono)
- Relleno derecho: 24 px (computadora de escritorio y tableta), 13 px (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 cuadro: 0px
- Fuerza de propagación de la sombra del cuadro: 2 px (predeterminado), 6 px (al pasar el mouse)
- Color de sombra: #002d4c
- Posición de la sombra del cuadro: 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(function($){
$(‘#custom-header’).insertAfter(‘.et_pb_section_0’);
});
4. Guarde los cambios del generador 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, agregue 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 su sección principal 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 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.