Menu Primario con DIVI 5: Menú con íconos: búsqueda, carrito y logo integrado
Esta lección no crea archivos de código. En esta práctica vamos a activar los íconos integrados del módulo Menú de Divi 5: el ícono de búsqueda (lupa), el ícono del carrito de compras y el logo directamente dentro del módulo. Todo desde la pestaña Diseño → Iconos.
1. ¿Qué vas a construir?
Menú blanco con links de navegación al centro y, a la derecha, los íconos de búsqueda y carrito — todo sin escribir una sola línea de código.
2. ¿Qué son los íconos del módulo Menú?
El módulo Menú de Divi 5 tiene íconos integrados que podés activar o desactivar con un click. Estos íconos ya tienen funcionalidad propia:
| Ícono | Qué hace | Cuándo usarlo |
|---|---|---|
| 🔍 Búsqueda | Abre un campo de búsqueda de WordPress | Siempre — los visitantes buscan contenido |
| 🛒 Carrito | Muestra la cantidad de items en el carrito de WooCommerce | Si tu sitio vende cursos o productos con WooCommerce |
3. Una sola fila — usando la función de Logo del módulo Menú
Una ventaja poderosa del módulo Menú de Divi 5: tiene su propio campo de logo integrado. Esto significa que podés tener logo + links + íconos en un solo módulo, sin necesidad de crear múltiples columnas.
Analogía:
El módulo Menú con logo integrado es como un auto que ya viene con GPS de fábrica — no necesitás pegar un GPS externo. Todo en uno, más limpio y más fácil de manejar.
El módulo Menú con logo integrado es como un auto que ya viene con GPS de fábrica — no necesitás pegar un GPS externo. Todo en uno, más limpio y más fácil de manejar.
4. Paso a paso
1
Crear la sección y agregar el módulo Menú
Sección blanca → Relleno
Hacé clic en «+» → elegí módulo Menú.
Seleccioná
Crear la sección y agregar el módulo Menú
Sección blanca → Relleno
0 px → fila de 1 columna (no necesitamos columnas separadas).Hacé clic en «+» → elegí módulo Menú.
Seleccioná
Mi Menu Primario.
2
Agregar el Logo dentro del módulo (Contenido → Logo)
Módulo Menú → pestaña Contenido → expandí el bloque Logo.
Hacé clic en Elegir Una Imagen y seleccioná el logo desde la biblioteca de medios.
Aparece automáticamente a la izquierda del menú.
Agregar el Logo dentro del módulo (Contenido → Logo)
Módulo Menú → pestaña Contenido → expandí el bloque Logo.
Hacé clic en Elegir Una Imagen y seleccioná el logo desde la biblioteca de medios.
Aparece automáticamente a la izquierda del menú.
3
Activar el ícono de Búsqueda (Diseño → Iconos)
Pestaña Diseño → expandí Iconos.
Buscá la opción Mostrar Ícono De Búsqueda.
Activá el switch → el ícono de lupa aparece en el menú.
Activar el ícono de Búsqueda (Diseño → Iconos)
Pestaña Diseño → expandí Iconos.
Buscá la opción Mostrar Ícono De Búsqueda.
Activá el switch → el ícono de lupa aparece en el menú.
Configurá el color del ícono:
- Color del ícono:
#334155 - Color hover del ícono:
#2563eb
4
Activar el ícono del Carrito (Diseño → Iconos)
En el mismo bloque Iconos, buscá Mostrar Ícono Del Carrito.
Activá el switch → el ícono del carrito aparece junto a la lupa.
El carrito muestra automáticamente cuántos productos tiene el visitante.
Activar el ícono del Carrito (Diseño → Iconos)
En el mismo bloque Iconos, buscá Mostrar Ícono Del Carrito.
Activá el switch → el ícono del carrito aparece junto a la lupa.
El carrito muestra automáticamente cuántos productos tiene el visitante.
5
Ajustar el tamaño de los íconos (Diseño → Iconos)
En el bloque Iconos, buscá Tamaño Del Ícono.
Escribí
Ajustar el tamaño de los íconos (Diseño → Iconos)
En el bloque Iconos, buscá Tamaño Del Ícono.
Escribí
18px. Un tamaño cómodo, ni muy grande ni muy chico.
6
Ajustar el tamaño del Logo (Diseño → Logo)
Pestaña Diseño → expandí Logo.
Buscá Ancho Máximo Del Logo: escribí
Esto controla qué tan grande aparece el logo dentro del menú.
Ajustar el tamaño del Logo (Diseño → Logo)
Pestaña Diseño → expandí Logo.
Buscá Ancho Máximo Del Logo: escribí
130px.Esto controla qué tan grande aparece el logo dentro del menú.
7
Guardar
Guardar → Salir → Guardar Cambios.
Guardar
Guardar → Salir → Guardar Cambios.
5. Comparación: con y sin íconos
SIN ÍCONOS:
MiLMS
InicioCursosBlogContactanos
CON ÍCONOS (resultado de esta lección):
MiLMS
InicioCursosBlogContactanos
🔍🛒
Verificación:
- El logo aparece integrado dentro del módulo Menú, a la izquierda.
- Los links de navegación están en el centro.
- El ícono de búsqueda (lupa) aparece a la derecha.
- Al hacer clic en la lupa, se abre el campo de búsqueda de WordPress.
