Menu Primario con Divi 5: Explorando la pestaña Avanzado del módulo Menú
1. ¿Qué es la pestaña Avanzado?
Cuando configurás un módulo en Divi 5, tenés tres pestañas: Contenido · Diseño · Avanzado.
| Pestaña | ¿Para qué sirve? | Analogía |
|---|---|---|
| Contenido | Qué dice / qué muestra el módulo | Lo que escribís en una carta |
| Diseño | Cómo se ve: colores, fuentes, tamaños | El sobre y el papel que elegís |
| Avanzado | Comportamientos especiales: animaciones, condiciones, CSS personalizado | El servicio de envío exprés, certificado, y seguimiento del paquete |
La pestaña Avanzado es donde ocurre la magia para crear experiencias web realmente profesionales.
2. Mapa completo de la pestaña Avanzado
Al abrir la pestaña Avanzado del módulo Menú vas a ver estos bloques:
3. Bloque por bloque — explicación completa
Atributos — Ponerle nombre al módulo para CSS
Acá podés darle al módulo un ID y una o más clases CSS.
| Campo | Ejemplo | Para qué sirve |
|---|---|---|
| ID del módulo | menu-principal |
Identificar el módulo único en la página (para CSS o JS) |
| Clase del módulo | menu-sticky |
Aplicar estilos CSS del child theme a este módulo |
style.css tenés .menu-sticky { box-shadow: ... } y acá le ponés esa clase al módulo.
CSS — Escribir CSS directamente sobre el módulo
Podés escribir CSS personalizado que aplica solo a este módulo, sin tocar ningún archivo. Divi te da campos para CSS en diferentes «partes» del módulo:
- Antes del módulo: CSS que afecta al contenedor del módulo
- Elemento principal: CSS directo sobre el módulo
- Después del módulo: CSS que afecta a lo que viene después
Ejemplo de uso: si el menú tiene demasiado espacio arriba, podés escribir margin-top: -10px; directamente acá sin tocar ningún archivo.
⭐ Condiciones — Mostrar el módulo solo a ciertas personas
Las Condiciones son una de las funciones más poderosas de Divi 5. Te permiten mostrar u ocultar el módulo según reglas. Por ejemplo:
| Condición | Qué hace | Caso de uso en LMS |
|---|---|---|
| Usuario logueado | Solo visible si el visitante inició sesión | Mostrar «Mis Cursos» solo a estudiantes registrados |
| Usuario NO logueado | Solo visible si NO inició sesión | Mostrar «Registrarse» solo a visitantes nuevos |
| Rol del usuario | Solo visible para administradores o instructores | Mostrar «Panel Admin» solo a profesores |
| Tipo de página | Solo visible en la página de inicio | Mostrar un anuncio especial solo en el home |
Cómo activarlo: Expandí Condiciones → hacé clic en + Añadir Condición → elegí la condición del desplegable → configurá si se muestra (✅) o se oculta (❌) cuando se cumple.
⭐ Interacciones — Animaciones al hacer clic o pasar el mouse
Las Interacciones son animaciones y efectos que se disparan cuando el visitante hace algo. Es la función más avanzada de Divi 5.
| Disparador | Efecto posible | Ejemplo práctico |
|---|---|---|
| Al pasar el mouse (hover) | Cambiar color, mover, agrandar | El menú se pone más oscuro al hacer hover |
| Al hacer clic | Mostrar/ocultar otro elemento | Abrir un menú desplegable custom |
| Al hacer scroll | Cambiar la apariencia del menú | El menú cambia de transparente a sólido |
Cómo activarlo: Expandí Interacciones → + Añadir Interacción → elegí el disparador → elegí el efecto.
⭐ Visibilidad — Controlar en qué dispositivos aparece el módulo
Podés elegir que el módulo se vea solo en desktop, solo en tablet, solo en mobile, o en cualquier combinación.
✅ Visible
✅ Visible
❌ Oculto
Caso de uso en LMS: Tenés un módulo Menú completo para desktop y otro menú simplificado para mobile. Usás Visibilidad para que cada uno aparezca solo en su dispositivo.
Cómo activarlo: Expandí Visibilidad → desactivá los switches del dispositivo donde NO querés que aparezca.
Transiciones — La velocidad de las animaciones
Controla qué tan rápido o lento ocurren las animaciones del módulo (como el efecto hover).
- Duración: tiempo que dura la animación en milisegundos.
300mses el estándar. - Retraso: tiempo antes de que empiece la animación.
- Curva de velocidad: si la animación empieza lento y termina rápido (ease-in) o al revés (ease-out).
300ms con curva ease es lo ideal. Ni muy lento (que parece roto) ni muy rápido (que no se nota).⭐ Posición — Mover el módulo de su lugar natural
Por defecto, cada módulo ocupa su lugar en el flujo normal de la página. Con Posición podés sacarlo de ese flujo.
| Tipo de posición | Qué hace | Caso de uso |
|---|---|---|
| Relativa | Se mueve desde su lugar original (con offset) | Ajustes finos de alineación |
| Absoluta | Se coloca en coordenadas exactas de su contenedor | Superposiciones, badges encima de imágenes |
| Fija | Se queda fija en la pantalla aunque el usuario haga scroll | Menú sticky, botón WhatsApp flotante |
Para hacer el menú sticky: podés usar Posición → Fija → Ubicación: Arriba Centro. Esto lo clava en la parte superior de la pantalla permanentemente.
⭐ Efectos De Desplazamiento — Lo que pasa al hacer scroll
Esta sección controla cómo reacciona el módulo cuando el visitante hace scroll en la página. Es una de las opciones más visuales e impactantes de Divi 5.
| Efecto | Qué hace | Caso de uso |
|---|---|---|
| Posición Fija (Sticky) | El módulo se «pega» al tope al hacer scroll | Menú sticky — la lección 6.2 |
| Movimiento Vertical | El módulo se mueve más lento o más rápido que el scroll (parallax) | Imágenes de fondo con efecto 3D |
| Desvanecer | El módulo aparece o desaparece gradualmente al scrollear | Títulos que se revelan al bajar |
| Escalar | El módulo crece o se achica al scrollear | Efectos de presentación en secciones hero |
| Rotar | El módulo rota al scrollear | Íconos decorativos animados |
| Desenfoque | El módulo aparece borroso y se va aclarando | Efecto de revelado de contenido |
Para el menú sticky: expandí Efectos De Desplazamiento → activá Posición Fija → elegí Pegar A: Arriba.
4. Ejercicio práctico — Activar 3 opciones de Avanzado
Ahora que conocés todos los bloques, vamos a activar los 3 más útiles en el módulo Menú:
Condición: ocultar en mobile
Módulo Menú → Avanzado → Visibilidad.
Desactivá el switch de Teléfono (mobile).
En mobile vamos a usar otro módulo (el menú hamburguesa de la lección 6.4).
Transición suave de 300ms
Módulo Menú → Avanzado → Transiciones.
- Duración:
300ms - Curva de velocidad:
ease
Esto hace que los efectos hover de los links se animen suavemente.
Sticky con Efectos De Desplazamiento
Seleccioná la Sección que contiene el menú (no el módulo).
Avanzado → Efectos De Desplazamiento → Posición Fija.
Activá el switch → Pegar A: Arriba.
La barra de navegación ahora queda fija al hacer scroll.
5. Resumen visual de la pestaña Avanzado
- Podés explicar con tus palabras para qué sirven Condiciones, Visibilidad y Efectos De Desplazamiento.
- El módulo Menú tiene la Visibilidad desactivada para mobile.
- La sección del menú tiene activado el sticky en Efectos De Desplazamiento.
- Hacé scroll en el frontend — la barra de navegación queda fija arriba.
