El menú de su sitio web es uno de los elementos más importantes de su sitio web debido al impacto directo que puede tener en la forma en que los usuarios navegan por su contenido. Una barra de menú bien diseñada puede marcar una gran diferencia al simplificar la navegación, resaltar las páginas clave y mejorar la experiencia general del usuario. El módulo de menú de ancho completo de Divi ofrece una gran flexibilidad al permitirle diseñar el carrito y los íconos de búsqueda como lo desee. En este tutorial, le mostraremos tres diseños diferentes para el módulo de menú de ancho completo con diferentes estilos para los íconos de carrito y búsqueda.
¡Empecemos!
Aquí hay una vista previa de lo que diseñaremos.
primer diseño
Para el primer diseño, colocamos uno de los íconos a la izquierda y el otro a la derecha seleccionando una estructura de menú centrada. También cambiaremos el color al pasar el mouse.
Segundo Diseño
Para el segundo diseño, colocamos ambos íconos en el lado derecho y cambiamos el color al pasar el mouse.
Tercer diseño
Para el tercer diseño, estamos usando CSS adicional para diseñar los íconos. Puede usar esas mismas clases de CSS para diseñar los íconos como desee.
Lo que necesitas para empezar
Antes de comenzar, instale y active el tema Divi y asegúrese de tener la última versión de Divi en su sitio web.
Ahora, ¡estás listo para comenzar!
Construya el encabezado global
Para cada uno de los tres diseños de menú, comenzaremos abriendo Theme Builder desde la sección Divi del Panel de administración de WordPress. Seleccione Agregar encabezado global, luego seleccione Crear encabezado global.
Inserte una nueva sección de ancho completo, luego elimine la sección normal vacía.
A continuación, inserte el módulo de menú de ancho completo.
Sube tu logo al menú.
Ahora estamos listos para construir nuestro diseño.
primer diseño
Nuestro primer diseño incorporará los efectos de desplazamiento integrados de Divi para cambiar el color del texto y los íconos al pasar el mouse. Empecemos.
Comience abriendo la configuración del menú de ancho completo y agregando un fondo.
- Fondo: #fbf9f4
Navegue a la pestaña de diseño y seleccione el diseño de logotipo centrado en línea.
- Estilo: Logotipo centrado en línea
Ahora cambiemos algunas de las configuraciones de texto del menú.
- Color de enlace activo: #09148c
- Fuente del menú: Rubik
- Peso de la fuente del menú: Negrita
- Estilo de fuente del menú: en mayúscula y subrayado
A continuación, establezca el color del texto del menú, el tamaño del texto y el espaciado entre letras.
- Color del texto del menú: #000000
- Tamaño del texto del menú: 21px
- Espaciado entre letras del menú: 1px
Queremos agregar algunos efectos de desplazamiento a este menú, así que seleccione el icono de desplazamiento para el color del texto del menú. Establezca un color de texto de menú diferente al pasar el mouse.
- Color del texto del menú al pasar el mouse #b70018
A continuación, navegue a la configuración del menú desplegable en la pestaña Diseño.
- Color de fondo del menú desplegable: #fbf9f4
- Color de la línea del menú desplegable: #b70018
- Color del texto del menú desplegable: #000000
Queremos que el color del texto del menú desplegable también cambie al pasar el mouse, así que seleccione las opciones de desplazamiento para esta configuración y establezca un color de texto diferente al pasar el mouse.
- Color del texto del menú desplegable al pasar el mouse: #b70018
- Color del enlace activo del menú desplegable: #b70018
- Color de fondo del menú móvil: #fbf9f4
- Color del texto del menú móvil: #000000
Una vez más, queremos que el color del texto del menú móvil cambie al pasar el mouse por encima. Seleccione las opciones de desplazamiento para esta configuración, luego configure un color de texto diferente al pasar el mouse.
- Color de texto del menú móvil al pasar el mouse: #b70018
Personalización del carrito y el icono de búsqueda
Ahora agreguemos y personalicemos el carrito y los íconos de búsqueda. En la pestaña Contenido, vaya a Elementos y habilite el ícono del carrito de compras y el ícono de búsqueda.
- Mostrar ícono del carrito de compras: Sí
- Mostrar icono de búsqueda: Sí
Vuelva a la pestaña de diseño y abra la configuración del icono. Cada uno de nuestros íconos será negro y rojo al pasar el mouse. Primero, establezca el color negro.
- Color del icono del carrito de compras: #000000
- Color del icono de búsqueda: #000000
- Color del icono del menú de hamburguesas: #000000
A continuación, seleccione el icono de desplazamiento y agregue el color de desplazamiento.
- Color del ícono del carrito de compras al pasar el mouse: #b70018
- Color del icono de búsqueda al pasar el mouse: #b70018
- Color del icono del menú de hamburguesas al pasar el mouse: #b70018
Configure el ícono del carrito y los tamaños del ícono de búsqueda.
- Ícono del carrito de compras Tamaño de fuente: 25px
- Ícono de búsqueda Tamaño de fuente: 25px
Navegue a la sección Espaciado, luego configure el relleno superior e inferior.
- Acolchado superior: 5px
- Acolchado inferior: 5px
Finalmente, agregaremos un borde en la parte superior e inferior del módulo de menú. Abra la configuración del borde.
- Ancho del borde superior: 3px
- Ancho del borde inferior: 3px
Diseño final
Y aquí está nuestro diseño final.
Segundo Diseño
Nuestro segundo diseño utilizará los efectos de desplazamiento integrados de Divi para cambiar el tamaño de los íconos del menú y el texto al pasar el mouse. Empecemos.
Primero, agregaremos un degradado de fondo al módulo de menú. El gradiente tiene tres paradas, la configuración es la siguiente:
- Primera parada: 0%, rgba(255,255,255,0)
- Segunda parada: 23%, rgba(252,199,76,0.65)
- Tercera Parada: 82%, rgba(232,119,255,0.32)
Defina el Tipo de degradado y la Posición del degradado.
- Tipo de degradado: cónico
- Posición del degradado: inferior
A continuación, vaya a la pestaña Diseño y configure el diseño.
- Diseño: Centrado
Vaya a la sección Texto del menú para personalizar el diseño del texto del menú.
- Color del enlace activo: #FFFFFF
- Fuente del menú: Syne
- Peso de la fuente del menú: Negrita
- Estilo de fuente del menú: en mayúscula
Ahora configure el Tamaño del texto del menú y el Espaciado entre letras.
- Tamaño del texto del menú: 20px
- Espaciado entre letras del menú: 2px
Dado que queremos que el tamaño del texto de nuestro menú aumente al pasar el mouse, seleccione la opción de desplazamiento.
- Tamaño del texto del menú al pasar el mouse: 22 px
A continuación, cambie la configuración de diseño del menú desplegable.
- Color de fondo del menú desplegable: #fcda90
- Color de la línea del menú desplegable: #FFFFFF
- Color del texto del menú desplegable: #FFFFFF
- Color del enlace activo del menú desplegable: #FFFFFF
Establezca el fondo y el color del texto para el menú móvil.
- Color de fondo del menú móvil: #fcda90
- Color del texto del menú móvil: #FFFFFF
Personalización del carrito y el icono de búsqueda
Ahora comencemos a personalizar los íconos de nuestro menú. Navegue a Elementos en la pestaña Contenido y habilite el ícono del carrito de compras y el ícono de búsqueda.
- Mostrar ícono del carrito de compras: Sí
- Mostrar icono de búsqueda: Sí
Vuelva a la pestaña de diseño y abra la configuración del icono.
- Color del icono del carrito de compras: #000000
- Color del icono de búsqueda: #000000
- Color del icono del menú de hamburguesas: #000000
Los íconos tendrán un color naranja oscuro al pasar el mouse. Seleccione la opción de portada y establezca el color.
- Color del ícono del carrito de compras al pasar el mouse: #fcac00
- Color del icono de búsqueda al pasar el mouse: #fcac00
- Color del icono del menú de hamburguesas al pasar el mouse: #fcac00
A continuación, establezca el tamaño de fuente para el carrito y los iconos de búsqueda.
- Ícono del carrito de compras Tamaño de fuente: 25px
- Ícono de búsqueda Tamaño de fuente: 25px
Para configurar el tamaño del icono para que aumente al pasar el mouse, seleccione la opción de desplazamiento.
- Ícono del carrito de compras Tamaño de fuente al pasar el mouse: 30px
- Icono de búsqueda Tamaño de fuente al pasar el mouse: 30 px
Finalmente, vaya a la sección Espaciado y establezca el relleno superior e inferior.
- Acolchado superior: 5px
- Acolchado inferior: 5px
Diseño final
Aquí está el diseño final para nuestro segundo diseño de menú.
Tercer diseño
Para nuestro diseño final, agregaremos un círculo de fondo detrás de los íconos del carrito usando CSS personalizado. Empecemos.
Primero, agregue un color de fondo al módulo de menú de ancho completo.
- Fondo: #efb6ac
A continuación, vaya a la pestaña Diseño y abra las opciones de Texto del menú.
- Color de enlace activo: #e84322
- Fuente del menú: Cinzel
- Peso de la fuente del menú: ultranegrita
Queremos que el color del texto del menú cambie al pasar el mouse por encima. Primero, configure el color del texto del menú.
- Color del texto del menú: #e7644a
Haga clic en el ícono flotante y configure el color del texto flotante.
- Color del texto del menú al pasar el mouse: #e84322
A continuación, establezca el tamaño del texto del menú y el espaciado entre letras.
- Tamaño del texto del menú: 21px
- Espaciado entre letras del menú: 1px
También queremos que el espacio entre letras se expanda al pasar el mouse, así que seleccione la opción de desplazamiento para la configuración.
- Espaciado entre letras del menú al pasar el mouse: 2px
Establezca la alineación del texto a la izquierda.
- Alineación de texto: Izquierda
A continuación, cambie la siguiente configuración del menú desplegable.
- Color de fondo del menú desplegable: #efb6ac
- Color de la línea del menú desplegable: #e7644a
- Color del texto del menú desplegable: #e7644a
- Color del texto del menú desplegable al pasar el mouse: #e84322
- Menú desplegable Color de enlace activo: #e84322
Establezca el fondo y el color del texto para el menú móvil.
- Color de fondo del menú móvil: #efb6ac
- Color del texto del menú móvil: #e7644a
- Color de texto del menú móvil al pasar el mouse: #e84322
Personalización del carrito y el icono de búsqueda
Primero, navegue a Elementos en la pestaña Contenido y habilite el ícono del carrito de compras y el ícono de búsqueda.
- Mostrar ícono del carrito de compras: Sí
- Mostrar icono de búsqueda: Sí
A continuación, vuelva a la pestaña de diseño y abra la configuración del icono. Establezca el color del icono.
- Color del icono del carrito de compras: #e7644a
- Color del icono de búsqueda: #e7644a
- Color del icono del menú de hamburguesas: #e7644a
El color de estos íconos cambiará al pasar el mouse sobre ellos. Habilite las opciones de desplazamiento y establezca el color.
- Color del ícono del carrito de compras al pasar el mouse: #e84322
- Color del icono de búsqueda al pasar el mouse: #e84322
- Color del icono del menú de hamburguesas al pasar el mouse: #e84322
También queremos que el tamaño del ícono aumente al pasar el mouse por encima. Primero, establezca el tamaño de fuente del icono.
- Ícono del carrito de compras Tamaño de fuente: 22px
- Ícono de búsqueda Tamaño de fuente: 22px
Luego, configure el tamaño de fuente del ícono al pasar el mouse.
- Ícono del carrito de compras Tamaño de fuente al pasar el mouse: 26px
- Icono de búsqueda Tamaño de fuente al pasar el mouse: 26 px
A continuación, navegue a la sección Espaciado y agregue relleno superior e inferior.
- Acolchado superior: 5px
- Acolchado inferior: 5px
Finalmente, podemos agregar algo de CSS personalizado al encabezado global para agregar los círculos detrás del carrito y el ícono de búsqueda. Puede personalizar este CSS como desee para que coincida con el diseño de su módulo de menú.
Abra la Configuración de plantilla de encabezado, luego navegue a la pestaña Avanzado e inserte el siguiente CSS personalizado.
|
01
02
03
04
05
06
|
.et_pb_menu__icon.et_pb_menu__cart-button,.et_pb_menu__icon.et_pb_menu__search-button {padding: 2% 2% 2% 2%;background-color:#F7D5C2;border-radius: 50%;} |
Diseño final
Eso completa el diseño de nuestro tercer y último diseño de menú.
Resultado final
Ahora echemos un vistazo al diseño final de los tres módulos de menú.
primer diseño
Segundo Diseño
Tercer diseño
Pensamientos finales
El módulo de menú y los íconos de carro y búsqueda de Divi son fáciles de personalizar para crear diseños y diseños únicos para su sitio web. Puede mejorar fácilmente el aspecto de los módulos de su menú utilizando la configuración integrada de Divi, como efectos de desplazamiento y CSS personalizado. ¡Con suerte, este tutorial le ha dado algo de inspiración de diseño que también puede implementar en su propio sitio web! ¿Cómo ha personalizado el aspecto de su módulo de menú y sus iconos? ¡Cuéntanos en los comentarios!