¿Te gustaría crear un encabezado global con el módulo Menú de pantalla completa en Divi?
El encabezado es uno de los elementos más importantes de cualquier Sitio web y está en el corazón de la experiencia del usuario. El menú de navegación les da a sus usuarios una idea de lo que pueden esperar encontrar en su Sitio web y les ayuda a localizar la información que necesitan.
Además, una barra de menú secundaria puede ser un espacio ideal para resaltar un llamado a la acción o para promover una oferta. Sin mencionar que el encabezado es una de las partes más importantes de tu Sitio web, porque suele aparecer en todas las páginas. Esta es una gran oportunidad para mostrar su marca y crear un encabezado que sea coherente con el diseño del resto de su sitio web.
Las opciones de Theme Builder de Divi le permiten crear un encabezado global personalizado y personalizar la apariencia de sus módulos de encabezado y menú en todo su sitio web.
En este tutorial, le mostraremos cómo crear un encabezado global utilizando el módulo de menú de pantalla completa de Divi.
Vamos a empezar!
vista
Aquí hay una vista previa del encabezado global que vamos a diseñar.
Abra el generador de temas
Dado que estamos creando un encabezado global en este ejemplo, vayamos a "Creador de temas", que puede encontrar en el menú Divi de WordPress. Seleccione Agregar encabezado global, luego seleccione Crear encabezado global.
Crear la barra de menú secundaria
Cuando abre por primera vez el diseño del encabezado global, viene precargado con una sección normal. Modificaremos esto para que sea nuestra barra de menú secundaria, que se ubicará sobre nuestro menú de ancho completo e incluirá un texto de llamada a la acción y un botón.
Primero, abra la configuración de la sección y agregue el color de fondo.
- Fondo: #92A8A1
A continuación, el margen de la sección.
- Vértice del margen interno: 0px
- Margen interno inferior: 0px
Ahora inserte una fila. Para este ejemplo, usaremos el diseño que se muestra a continuación.
En la configuración de las filas, en Tamaño de la pestaña Estilo, armonice las alturas de las columnas.
- Armonizar alturas de columnas: SI
A continuación, establezca los márgenes superior e inferior de la siguiente manera:
- Margen interior superior: 5px
- Margen interior inferior: 5px
Dado que queremos que nuestros elementos de encabezado secundarios se alineen verticalmente, agregaremos un CSS personalizado al elemento de la fila principal.
1.
align-items:center;
Ahora que nuestra línea está configurada, podemos insertar los módulos para nuestro contenido. Primero inserte un módulo de texto en el lado izquierdo.
Modificar el contenido de texto. Este es el lugar perfecto para incluir un llamado a la acción o para promover una oferta.
- Texto: "¡Únete a nuestra lista de correo para recibir un 10 % de descuento en tu pedido!" »
Acceda a la pestaña Estilo del módulo Texto y modifique los parámetros de la siguiente manera:
- Fuente "Texto": Poppins
- “Texto” Luz tenue: Media
- Color de texto "Texto": #FFFFFF
A continuación, agregue el módulo Button a la derecha.
Añadir texto de botón.
- Texto: "Obtenga una cotización gratis"
En la pestaña Estilo, alinee el botón en el centro.
- Alineación de botones: Centro
Ahora vamos a personalizar la apariencia del botón.
- Usar estilos personalizados para "Botón": Sí
- Tamaño del texto del botón: 14px
- Color del texto del botón: #FFFFFF
- Botón de fondo: #2F5349
- Ancho del borde del botón: 0px
- Botón de radio de borde: 50px
- Espaciado entre letras de botones: 1 px
- Fuente del botón: Poppins
Agregue el módulo Menú de pantalla completa
Ahora que el menú secundario está diseñado, podemos pasar al menú principal. Construiremos el menú utilizando el módulo Menú de pantalla completa. Agregue una nueva sección de pantalla completa al encabezado global.
Seleccione e inserte el módulo de menú de pantalla completa
A continuación, personalizaremos la configuración del Menú de pantalla completa.
- Color de enlace activo: #2F5349
- Menú de fuentes: Poppins
- Menú de luz tenue: Semi negrita
- Menú de estilo de copia: TT
- Color del texto del menú: #000000
- Color del texto del menú flotante: #2F5349
- Tamaño del texto del menú: 15px
- Espaciado entre letras del menú: 2px
Cambia el color del icono del menú de hamburguesas a negro.
- Color del icono del menú de hamburguesas: #000000
Antes de agregar el logotipo a nuestro menú, cambiemos las opciones de tamaño. Usaremos las opciones de respuesta integradas de Divi para establecer una altura máxima diferente para PC y dispositivos móviles.
- Altura máxima del logo en PC: 3vw
- Altura máxima del logotipo en el móvil: 6vw
Ahora agregue su logotipo al menú de pantalla completa.
Finalmente, queremos que el menú principal permanezca en la parte superior de la pantalla cuando el usuario se desplaza por el sitio web, por lo que usaremos la configuración adhesiva integrada de Divi para esto.
- Posición pegajosa: pegar en la parte superior
Con eso, nuestro diseño de encabezado global está completo.
Crear una nueva página con un diseño predefinido
Para ver el menú y el encabezado de ancho completo en acción, creemos una nueva página con un diseño predefinido de la biblioteca Divi. Para este ejemplo, utilizaremos la página de inicio de Flooring del paquete diseño de piso.
Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción Usar Divi Builder.
Estamos utilizando un diseño prefabricado de la Biblioteca Divi para este ejemplo, así que seleccione Elegir diseño.
Busque y seleccione el diseño "Página de inicio de suelos".
Seleccione "Elegir diseño" para agregar el diseño a su página.
¡Ahora el diseño está completo!
Resultado final
Conclusión
Como dijimos anteriormente, el encabezado y el menú de navegación están en el corazón de la experiencia del usuario de su sitio web. Ahora ha visto lo fácil que es diseñar un encabezado general impresionante con el módulo "Menú de pantalla completa" de Divi.
Afortunadamente, el generador de temas de Divi te permite controlar todos los aspectos del menú y el encabezado de tu sitio web, y puedes crear diseños totalmente personalizados y únicos con solo unos pocos clics.
¿Ha utilizado las opciones de encabezado global de Divi para personalizar su encabezado y menú de navegación? ¡Cuéntanos lo que piensas en los comentarios!
