Menu primario DIVI 5: Menú profesional completo: Contenido + Diseño + Avanzado
Esta lección no crea archivos de código. Es la práctica más completa del módulo Menú. Vamos a usar las tres pestañas juntas — Contenido, Diseño y Avanzado — para construir un menú de navegación realmente profesional, con logo, íconos, hover animado, sombra, sticky y oculto en mobile. Todo en un solo módulo, espero que les sirva y en los comentarios podamos emitir nuestro criterio para mejorar este menú primario hecho con DIVI 5, vamos con la construccion del MENU PRIMARIO.
1. ¿Qué vas a construir?
Menú blanco con logo integrado, links con efecto hover azul subrayado, ícono de búsqueda, sombra suave, sticky al hacer scroll, y oculto automáticamente en mobile.
| Pestaña | Qué configuramos |
|---|---|
| Contenido | Menú primario, Logo integrado, Ícono de búsqueda |
| Diseño | Color y hover de links, espaciado, sombra de caja |
| Avanzado | Visibilidad (ocultar en mobile), Transiciones (300ms), Sticky |
2. Preparación: crear la sección y la fila
1
Crear la sección blanca
En el Theme Builder → Encabezado Global, agregá una nueva sección.
Pestaña Diseño → Espaciado → Relleno De: todos los valores en
El fondo blanco es el predeterminado — no hace falta cambiarlo.
Crear la sección blanca
En el Theme Builder → Encabezado Global, agregá una nueva sección.
Pestaña Diseño → Espaciado → Relleno De: todos los valores en
0 px.El fondo blanco es el predeterminado — no hace falta cambiarlo.
2
Insertar una fila de 1 columna
Dentro de la sección → «+» → pestaña Nueva Fila → elegí 1 columna completa.
Usamos 1 columna porque el módulo Menú ya tiene el logo integrado — no necesitamos columnas separadas.
Insertar una fila de 1 columna
Dentro de la sección → «+» → pestaña Nueva Fila → elegí 1 columna completa.
Usamos 1 columna porque el módulo Menú ya tiene el logo integrado — no necesitamos columnas separadas.
3
Agregar el módulo Menú
«+» dentro de la columna → buscá
Agregar el módulo Menú
«+» dentro de la columna → buscá
me → elegí Menú.
3. Pestaña CONTENIDO — Qué muestra el menú
Recordá: La pestaña Contenido responde a la pregunta «¿qué pone este módulo?» No afecta el diseño visual, solo qué información aparece.
4
Seleccionar el menú de WordPress
Módulo Menú seleccionado → pestaña Contenido.
En el bloque Contenido → Menú, hacé clic en el desplegable y elegí Mi Menu Primario.
Los links aparecen: Inicio · Cursos · Blog · Contactanos.
Seleccionar el menú de WordPress
Módulo Menú seleccionado → pestaña Contenido.
En el bloque Contenido → Menú, hacé clic en el desplegable y elegí Mi Menu Primario.
Los links aparecen: Inicio · Cursos · Blog · Contactanos.
5
Agregar el Logo integrado (Contenido → Logo)
Expandí el bloque Logo.
Hacé clic en Elegir Una Imagen → seleccioná el logo desde la biblioteca de medios.
El logo aparece automáticamente a la izquierda del menú, dentro del mismo módulo.
Agregar el Logo integrado (Contenido → Logo)
Expandí el bloque Logo.
Hacé clic en Elegir Una Imagen → seleccioná el logo desde la biblioteca de medios.
El logo aparece automáticamente a la izquierda del menú, dentro del mismo módulo.
Si no tenés logo todavía: saltá este paso por ahora. Podés agregar el logo más adelante sin perder el resto de la configuración.
6
Revisar los Elementos (Contenido → Elementos)
Expandí el bloque Elementos. Vas a ver switches para mostrar u ocultar partes del menú:
Revisar los Elementos (Contenido → Elementos)
Expandí el bloque Elementos. Vas a ver switches para mostrar u ocultar partes del menú:
- Mostrar Barra De Búsqueda → activá este switch para que aparezca la lupa
- Mostrar Ícono Del Carrito → podés activarlo si usás WooCommerce
Activá al menos Mostrar Barra De Búsqueda.
4. Pestaña DISEÑO — Cómo se ve el menú
Recordá: La pestaña Diseño responde a «¿cómo se ve?» — colores, tamaños, fuentes, sombras.
7
Color normal de los links (Diseño → Texto Del Menú)
Pestaña Diseño → expandí Texto Del Menú:
Color normal de los links (Diseño → Texto Del Menú)
Pestaña Diseño → expandí Texto Del Menú:
- Color del texto:
#334155(gris oscuro) - Tamaño de fuente:
15px - Peso de fuente:
600 - Espaciado entre letras:
0.3px
8
Color hover de los links (Diseño → Texto Del Menú)
En el mismo bloque Texto Del Menú, buscá el campo de color con el ícono del mouse (hover).
Color hover del enlace:
Color hover de los links (Diseño → Texto Del Menú)
En el mismo bloque Texto Del Menú, buscá el campo de color con el ícono del mouse (hover).
Color hover del enlace:
#2563eb (azul del sitio).
Ahora cuando el visitante pase el mouse sobre un link, ese link se pone azul. Simple y efectivo.
9
Color del ícono de búsqueda (Diseño → Iconos)
Expandí el bloque Iconos:
Color del ícono de búsqueda (Diseño → Iconos)
Expandí el bloque Iconos:
- Color del ícono:
#334155 - Color hover del ícono:
#2563eb - Activá Usar Tamaño De Icono Personalizado → Tamaño:
18px
10
Tamaño del logo (Diseño → Logo)
Expandí el bloque Logo:
Tamaño del logo (Diseño → Logo)
Expandí el bloque Logo:
- Ancho máximo del logo:
130px
Esto controla que el logo no sea ni muy grande ni muy chico dentro del menú.
11
Alineación del contenido (Diseño → Diseño)
Expandí el bloque Diseño:
Alineación del contenido (Diseño → Diseño)
Expandí el bloque Diseño:
- Espaciado Horizontal (entre links):
20px - Justificar Contenido: elegí el ícono de «espacio entre» (distribuye logo a la izquierda, links al centro, ícono a la derecha)
12
Sombra de caja (Diseño → Sombra De Caja)
Expandí el bloque Sombra De Caja.
Hacé clic en el segundo preset (sombra suave, hacia abajo).
Sombra de caja (Diseño → Sombra De Caja)
Expandí el bloque Sombra De Caja.
Hacé clic en el segundo preset (sombra suave, hacia abajo).
Esto da profundidad al menú: parece que «flota» sobre el contenido de la página — un detalle que distingue los sitios profesionales de los amateur.
↑ El gradiente debajo del menú simula la sombra sutil
5. Pestaña AVANZADO — Comportamiento especial
Recordá: La pestaña Avanzado responde a «¿cómo se comporta?» — en qué dispositivos aparece, qué tan rápido anima, si queda fijo al scrollear.
13
Ocultar en mobile (Avanzado → Visibilidad)
Módulo Menú → pestaña Avanzado → expandí Visibilidad.
Desactivá el switch de Teléfono.
Ocultar en mobile (Avanzado → Visibilidad)
Módulo Menú → pestaña Avanzado → expandí Visibilidad.
Desactivá el switch de Teléfono.
🖥️ Desktop
✅ Visible
✅ Visible
💻 Tablet
✅ Visible
✅ Visible
📱 Mobile
❌ Oculto
❌ Oculto
En la lección 6.4 vamos a crear el menú hamburguesa que aparece en mobile en lugar de este.
14
Animación suave de los efectos hover (Avanzado → Transiciones)
Expandí Transiciones:
Animación suave de los efectos hover (Avanzado → Transiciones)
Expandí Transiciones:
- Duración:
300ms - Curva de velocidad:
ease
| Valor | Efecto percibido | Recomendado |
|---|---|---|
100ms |
Muy rápido, casi no se nota | No |
300ms |
Suave y natural | ✅ Sí |
700ms |
Lento, parece que está roto | No |
15
Hacer el menú sticky (Sección → Avanzado → Efectos De Desplazamiento)
Importante: este paso se hace en la Sección, no en el módulo Menú.
Hacer el menú sticky (Sección → Avanzado → Efectos De Desplazamiento)
Importante: este paso se hace en la Sección, no en el módulo Menú.
Hacé clic en el borde de la sección blanca para seleccionarla → pestaña Avanzado → expandí Efectos De Desplazamiento.
Activá Posición Fija → elegí Pegar A: Arriba.
Ahora cuando el visitante haga scroll, esta barra queda pegada en la parte superior de la pantalla.
6. Guardar y verificar
16
Guardar
Guardar → Salir → Guardar Cambios en el Theme Builder.
Guardar
Guardar → Salir → Guardar Cambios en el Theme Builder.
7. Tabla resumen de todo lo configurado
| Pestaña | Bloque | Configuración | Resultado |
|---|---|---|---|
| Contenido | Menú | Mi Menu Primario | Links Inicio, Cursos, Blog, Contactanos |
| Logo | Imagen del logo | Logo a la izquierda | |
| Elementos | Búsqueda activada | Ícono de lupa visible | |
| Diseño | Texto Del Menú | Color #334155, hover #2563eb | Links grises que se ponen azules al hover |
| Iconos | Color #334155, 18px | Lupa del tamaño correcto | |
| Logo | Ancho máximo 130px | Logo proporcional | |
| Sombra De Caja | Preset sombra suave | Menú con profundidad visual | |
| Avanzado | Visibilidad | Teléfono desactivado | Oculto en mobile |
| Transiciones | 300ms ease | Hover suave y natural | |
| Efectos Desplazamiento* | Sticky Arriba | Menú fijo al scrollear |
* Se configura en la Sección, no en el módulo Menú.
8. Vista previa final
Menú completo con las 3 pestañas configuradas:
Logo a la izquierda · Links en el centro (con hover azul en «Cursos») · Lupa a la derecha · Sombra suave debajo · Sticky al scrollear · Oculto en mobile.
Verificación — las 3 pestañas funcionando:
- Contenido: Los links Inicio, Cursos, Blog, Contactanos aparecen. El logo está visible. La lupa aparece a la derecha.
- Diseño: Los links son grises. Al pasar el mouse, se ponen azules. El menú tiene sombra debajo.
- Avanzado: Hacé scroll hacia abajo — el menú queda fijo arriba. En mobile (o reducí la ventana del navegador) el menú desaparece.
- El efecto hover se anima suavemente en ~300ms (no de golpe).
