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 primero la sección de héroe de sus páginas y luego obtener acceso al menú y a todos sus elementos. El estilo que estamos usando para el encabezado personalizado coincide con el Bistro Layout Pack, ¡también podrás 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

primera sección Divi

Móvil

primera sección Divi

 

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 al Divi Theme Builder y agregue una nueva plantilla.

primera sección Divi

Usar en

Use esta nueva plantilla en todas las páginas.

  • Usar en: todas las páginas

primera sección Divi

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

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

primera sección Divi

Configuraciones de sección

Color de fondo

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

  • Color de fondo: #FFFFFF

primera sección Divi

Espaciado

Elimine el relleno superior e inferior predeterminado de la sección a continuación.

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

primera sección Divi

Frontera

Agregue un borde superior e inferior también.

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

primera sección Divi

ID de CSS

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

  • ID de CSS: encabezado personalizado

primera sección Divi

Í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

primera sección Divi

Agregar nueva fila

Estructura de columna

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

primera sección Divi

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 personalizado: sí
  • Ancho de canal: 1
  • Ancho: 100%
  • Ancho Máx .: 100%

primera sección Divi

Espaciado

Elimine también todos los rellenos superiores e inferiores predeterminados.

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

primera sección Divi

Elemento principal

Para asegurarnos de que todas las columnas permanecen 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;

primera sección Divi

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.

  • Relleno superior: 20px
  • Relleno inferior: 20px

primera sección Divi

Frontera

Agregue un borde derecho a la columna también.

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

primera sección Divi

Agregar módulo de imagen a la columna 1

Subir logo

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

primera sección Divi

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

primera sección Divi

Dimensionamiento

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

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

primera sección Divi

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.

primera sección Divi

Diseño

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

primera sección Divi

Texto del menú

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

  • 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.8em

primera sección Divi

Texto desplegable

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

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

primera sección Divi

Íconos

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

primera sección Divi

Agregar módulo de botón a la columna 3

Agregar copia

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

primera sección Divi

Alineación

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

  • Alineación de botones: centro

primera sección Divi

Configuraciones de botones

Continúe peinando 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: 13 px
  • 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 (pasar el mouse)
  • Radio del borde del botón: 0px

primera sección Divi

  • Espacio 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úscula

primera sección Divi

Espaciado

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

  • Relleno superior: 16px
  • Relleno inferior: 16px
  • Acolchado 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)

primera sección Divi

Sombra de la caja

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

  • Posición horizontal de la sombra de la caja: 0px
  • Posición vertical de la sombra de la caja: 0px
  • Fuerza de la falta de definición de la sombra de la caja: 0px
  • Box Shadow Spread Strength: 2px (predeterminado), 6px (pasar el mouse)
  • Color de sombra: # 002d4c
  • Posición de la sombra de la caja: sombra interior

primera sección Divi

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.

primera sección Divi

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

primera sección Divi

4. Guardar los cambios del generador de temas y ver el resultado

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

primera sección Divi

primera sección Divi

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

You have Successfully Subscribed!