Divi MadMenu

La cabecera se diseña dos veces, una por dispositivo

Terminas la cabecera en el escritorio y se ve limpia: logo, seis enlaces, buscador, carrito. Abres el móvil y todo eso se amontona en una barra donde cada enlace es un blanco diminuto para el dedo.

El punto en que tu cabecera deja de ser de escritorio y pasa a ser de móvil lo decides tú, y cada lado necesita su propia estructura, no la misma comprimida.

Divi MadMenu añade al constructor Divi módulos de menú y controles de navegación para cabeceras. Permite fijar puntos de cambio personalizados entre escritorio y móvil, usar una navegación distinta en cada dispositivo y ajustar, elemento por elemento, la etiqueta, la visibilidad, el orden, el ancho y la alineación para cada pantalla.

Módulos de menú y paneles para la cabecera

• Cabeceras de escritorio: se componen con menús, botones, iconos, buscador, carrito y más, en horizontal o en vertical.
• Megamenús: varias columnas con enlaces agrupados y contenido propio.
• Desplegables: eliges hacia dónde se abren y personalizas el puntero.
• Menús móviles: los submenús pueden ser plegables, de acordeón o deslizantes.
• Paneles emergentes: ventana de cabecera, panel deslizante, pantalla completa o panel lateral, con posición y animaciones de apertura y cierre a tu elección.
• Cabecera fija: cambia de logo, de estilo y de comportamiento cuando el visitante baja, y resalta el elemento del menú según el punto de la página en que se encuentra.
• Botones según sesión: el contenido de un botón puede ser distinto para quien ha iniciado sesión y para quien no.
• Plantillas de cabecera: puntos de partida que luego personalizas dentro de Divi.

Una cabecera de tienda con carrito y buscador vivos

Un montaje posible: una cabecera para una tienda WooCommerce con carrito que se actualiza en vivo, buscador de productos en vivo y un botón que muestra un texto a quien ya tiene cuenta y otro a quien no. Es una combinación de funciones que conviene probar en tu sitio antes de publicarla, sobre todo en móvil.

Para ese montaje, el carrito en vivo depende de WooCommerce y la búsqueda de productos en vivo usa FiboSearch. Los menús y paneles se estilan por separado: los enlaces, el panel desplegable y el contenido de cada submenú tienen sus propios ajustes.

Los paneles pueden impedir que la página de fondo se desplace mientras están abiertos, y los menús móviles y emergentes se cierran al pulsar fuera o al pulsar un enlace.

Dependencias y funciones según la versión

MadMenu está pensado para el Divi Builder y el Theme Builder, tanto para cabeceras globales como para las de una página concreta. Fuera de ese entorno no tiene dónde aplicarse.

Los elementos Divi anidados y el puntero personalizable del desplegable están pensados para la versión más reciente de Divi.

Montaje de la primera cabecera, paso a paso

Para empezar necesitas el constructor Divi activo en tu sitio y, si quieres carrito en vivo, WooCommerce.

1. Instala el plugin con el instalador de WordPress y actívalo.
2. Abre el Theme Builder de Divi y edita la plantilla de cabecera global o la de una página concreta.
3. Añade el módulo de menú de MadMenu o parte de una plantilla de cabecera.
4. Define los puntos de cambio entre escritorio y móvil y el tipo de submenú móvil.
5. Revisa cada dispositivo, ajusta qué elementos se ven y en qué orden, y guarda.

Menús y cabeceras para comparar

Si buscas otras formas de resolver la navegación móvil en Divi, mira Divi Mobile Menu. Si tu sitio no depende de Divi y quieres megamenús en WordPress, revisa Max Mega Menu Pro.

Respuestas sobre Divi MadMenu

¿Puedo usar menús distintos en escritorio y en móvil?

Sí. Se puede configurar navegación diferente por dispositivo, con puntos de cambio personalizados.

¿Sirve para hacer un megamenú?

Sí. Permite megamenús de varias columnas con enlaces agrupados y contenido personalizado.

¿Qué pasa con el menú móvil al pulsar un enlace?

Los menús móviles y los paneles emergentes pueden cerrarse al pulsar fuera o al pulsar un enlace.

¿Necesito WooCommerce?

Solo si quieres el carrito en vivo. Para la búsqueda de productos en vivo se usa además FiboSearch.