¿Te gustaría saber cómo personalizar el carrito y los iconos de búsqueda del módulo Divi Fullwidth Menu?
El menú de tu Sitio web es una de las partes 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 páginas clave y mejorar la experiencia general del usuario.
El módulo "Menú de ancho completo" de Divi ofrece una gran flexibilidad al permitirle personalizar el carrito de compras y los íconos de búsqueda como mejor le parezca.
En este tutorial, le mostraremos tres diseños diferentes para el módulo "Menú de ancho completo" con un estilo diferente para el carrito de compras y los íconos de búsqueda.
Vamos a empezar!
vista
Aquí hay una vista previa de lo que estaremos diseñando.
primer diseño
Para el primer diseño, colocamos uno de los iconos 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 los dos íconos en el lado derecho y cambiamos el color al pasar el mouse.
tercer diseño
Para el tercer diseño, usamos CSS adicional para personalizar los íconos.
Lea también: Divi: cómo personalizar el módulo "Temporizador de cuenta regresiva" con un GIF
Personalización del carrito de compras y los íconos de búsqueda del módulo "Menú de ancho completo" de Divi
Crear el encabezado global
Para cada uno de los tres diseños de menú, comenzaremos abriendo el generador de temas de divi.
Para hacer esto, desde el tablero de WordPress, vaya a Divi > Creador de temas
A continuación, haga clic Agregar encabezado global
Entonces escoge Crear encabezado global
Inserte una nueva sección de ancho completo.
Luego elimine la sección anterior.
Insertar el módulo Menú de ancho completo.
Sube tu logo desde el menú.
Ahora estamos listos para continuar.
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.
Ver también: Divi: Cómo agregar un ícono de hamburguesa al módulo Menú
Comience abriendo la configuración del módulo y agregando un fondo.
- Fondo: #fbf9f4
Ir a la pestaña Diseño y seleccione el diseño del logotipo.
- Estilo: Logotipo centrado en línea
Ahora cambiemos algunas de las configuraciones de texto del menú.
- Color de enlace activo: #09148c
- Fuente del menú: rubí
- Peso de la fuente del menú: Negrita
- Estilo de fuente: TT y U (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: 1px
Queremos agregar efectos de desplazamiento a este menú, así que cambie el color del texto del menú al pasar el mouse. Establezca un color de texto de menú diferente al pasar el mouse.
- Color del texto del menú (pasar el cursor): #b70018
Luego ve a la configuración Menú desplegable debajo de 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ú: #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.
- Color del texto del menú desplegable (pasar el cursor): #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
Nuevamente, 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 establezca un color de texto diferente al pasar el mouse.
- Color del texto del menú móvil (pasar el cursor): #b70018
Personalización del carro de la compra y del icono de búsqueda
Ahora agreguemos y personalicemos el carrito de compras y los íconos de búsqueda. Debajo de la pestaña Contenidoir a Elements y habilite el ícono del carrito de compras y el ícono de búsqueda.
- Mostrar icono del carrito de compras: SÍ
- Mostrar icono de búsqueda: SÍ
Volver a la pestaña Diseño y abra la configuración de iconos. Cada uno de nuestros íconos será negro y rojo al pasar el mouse. Primero, establece 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 ícono de desplazamiento y agregue el color al pasar el mouse.
- Color del icono del carrito de la compra (pasar el cursor): #b70018
- Color del icono de búsqueda (pasar el cursor): #b70018
- Color del icono del menú de hamburguesas (pasar el cursor): #b70018
Establecer el tamaño del icono.
- Ícono del carrito de compras Tamaño de fuente: 25 px
- Ícono de búsqueda Tamaño de fuente: 25 px
Ir a la sección Distanciamiento, luego establezca el relleno superior e inferior.
- Relleno (superior e inferior): 5px
Finalmente, agregaremos un borde en la parte superior e inferior del módulo Menú. Configuración de borde abierto.
- 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 Menú. El gradiente tiene tres paradas, la configuración es la siguiente:
- Paradas de gradiente:
- 0%: rgba(255,255,255,0)
- 23%: rgba(252,199,76,0.65)
- 82%: rgba(232,119,255,0.32)
Configure el tipo de degradado y la posición del degradado.
- Tipo de degradado: cónico
- Posición del degradado: inferior
Luego ve a la pestaña Diseño y establecer el diseño (Disposición).
- Estilo: Centrado
Ir a la sección Texto del menú para personalizar el diseño del texto del menú.
- Color del enlace activo: #FFFFFF
- Menú de fuentes: Syne
- Peso de fuente: Negrita
- Estilo de fuente del menú: TT (mayúsculas)
- Menú de colores de texto: #FFFFFF
Ahora configure el tamaño del texto del menú y el espacio 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ú: 22px
A continuación, cambie la configuración de diseño desde el menú desplegable.
- Color de fondo del menú desplegable: #fcda90
- Color de la línea del menú desplegable: #FFFFFF
- Menú de colores de texto: #FFFFFF
- Color del enlace activo del menú desplegable: #FFFFFF
Configure el fondo del menú móvil y el color del texto.
- Color de fondo del menú móvil: #fcda90
- Color del texto del menú móvil: #FFFFFF
Personalización del carro de la compra y del icono de búsqueda
Ahora comencemos a personalizar los íconos de nuestro menú. Ir Elements debajo de la pestaña Contenido y habilite el ícono del carrito de compras y el ícono de búsqueda.
- Ícono del carrito de compras de Sow: SÍ
- Mostrar icono de búsqueda: SÍ
Volver a la pestaña Diseño y abra la configuración de iconos.
- Color del icono del carrito de compras: #ffffff
- Color del icono de búsqueda: #ffffff
- Color del icono del menú de hamburguesas: #ffffff
Los íconos tendrán un color naranja oscuro al pasar el mouse. Seleccione la opción de portada y establezca el color.
- Color del icono del carrito de la compra (pasar el cursor): #fcac00
- Color del icono de búsqueda (pasar el cursor): #fcac00
- Color del icono del menú de hamburguesas (pasar el cursor): #fcac00
A continuación, configure el tamaño de fuente para el carrito de compras y los íconos de búsqueda.
- Ícono del carrito de compras Tamaño de fuente: 25 px
- Ícono de búsqueda Tamaño de fuente: 25 px
Para hacer que el tamaño del ícono aumente al pasar el mouse, seleccione la opción de pasar el mouse.
- Ícono del carrito de compras Tamaño de fuente (Hover): 30 px
- Icono de búsqueda Tamaño de fuente (Hover): 30 px
Finalmente, vaya a la sección Distanciamiento y establezca el relleno superior e inferior.
- Relleno (superior e inferior): 5px
Diseño final
Aquí está el diseño final de 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.
Lea también: Divi: cómo crear un menú flotante pegajoso y ampliable
Vamos a empezar.
Primero, agregue un color de fondo al módulo.
- Fondo: #efb6ac
Luego ve a la pestaña Diseño y abre la opción Texto del menú.
- Color de enlace activo: #e84322
- Fuente del menú: Cinzel
- Menú de peso de fuente: ultra negrita
Queremos que el color del texto del menú cambie al pasar el mouse por encima. Primero, configure el color del texto del menú.
- Menú de color de texto (escritorio): #e7644a
Haga clic en el ícono flotante y configure el color del texto flotante.
- Color del texto del menú (pasar el cursor): #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 extienda al pasar el mouse, así que seleccione la opción de desplazamiento para la configuración.
- Espaciado entre letras del menú: 2px
Establezca la alineación del texto a la izquierda.
- Alineación de texto: izquierda
A continuación, cambie la siguiente configuración en el menú desplegable.
- Color de fondo del menú desplegable: #efb6ac
- Color de la línea del menú desplegable: #e7644a
Lea también: Divi: Cómo crear una sección de Testimonios en forma de cuadrícula
- Color del texto del menú desplegable
- Escritorio: #e7644a
- Pase el cursor: #e84322
- Menú desplegable Color de enlace activo: #e84322
Configure el fondo del menú móvil y el color del texto.
- Color de fondo del menú móvil: #efb6ac
- Color del texto del menú móvil:
- Escritorio: #e7644a
- Pase el cursor: #e84322
Personalización del carro de la compra y del icono de búsqueda
Primero, ve a Elements debajo de la pestaña Contenido y habilite el ícono del carrito de compras y el ícono de búsqueda.
- Mostrar icono del carrito de compras: SÍ
- Mostrar icono de compras: SÍ
Luego vuelve a la pestaña Diseño y abra la configuración de iconos. 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 configure el color.
- Color del icono del carrito de compras (pasar el cursor): #e84322
- Color del icono de búsqueda (pasar el cursor): #e84322
- Color del icono del menú de hamburguesas (pasar el cursor): #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: 22 px
- Ícono de búsqueda Tamaño de fuente: 22 px
A continuación, establezca el tamaño de fuente del icono al pasar el mouse.
- Ícono del carrito de compras Tamaño de fuente (Hover): 26 px
- Icono de búsqueda Tamaño de fuente (Hover): 26 px
Luego ve a la sección Distanciamiento y agregue relleno superior e inferior.
- Relleno (superior e inferior): 5px
Finalmente, podemos agregar CSS personalizado al encabezado global para agregar los círculos detrás del carrito de compras 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 la plantilla de encabezado, luego vaya a la pestaña Avanzado e inserte el siguiente CSS personalizado.
.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
Esto 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 menús diferentes.
primer diseño
¡¡¡Descarga DIVI ahora!!!
segundo diseño
tercer diseño
¡¡¡Descarga DIVI ahora!!!
Conclusión
El módulo de menú de Divi y los íconos de búsqueda y carrito 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.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
