Divi Mobile Menú

El árbol de tu menú elige el estilo, no al revés

Pruebas los estilos de menú móvil, te quedas con el más llamativo y publicas. Al abrirlo en el teléfono descubres que tus submenús no caben en él. Servicios, Productos y sus páginas interiores se quedaron sin lugar, porque ese diseño nunca estuvo pensado para sostenerlos.

Antes de elegir por aspecto, cuenta los niveles de tu menú. Circle Stretch Down y Bottom Navigation no admiten subelementos, y Side by Side llega a dos niveles: padre e hijo. La profundidad de tu navegación reduce la lista de estilos posibles.

Divi Mobile permite crear menús móviles para el tema Divi sin escribir código. Parte de estilos prediseñados, añade control sobre la cabecera y el icono de hamburguesa, y permite colocar diseños de la biblioteca de Divi dentro del propio menú.

Controles de cabecera, icono y submenús

• Estilos prediseñados: eliges uno y ajustas colores, tipografías y espaciado.
• Cabecera propia: logotipo, fondo, altura, comportamiento fijo y posición de los iconos de búsqueda y carrito.
• Icono de hamburguesa: iconos personalizados, animaciones, colores, tamaño, posición y tu propio SVG.
• Submenús: varios estilos, con animaciones, colores y sangría.
• Ajustes generales: puntos de corte, asignación del menú, animaciones y comportamiento de la navegación.
• Hamburguesa en escritorio: el menú también puede usarse en pantallas grandes.

Un menú que también lleva buscador y llamadas a la acción

Divi Mobile puede inyectar diseños creados con el Divi Builder. Puedes colocarlos encima o debajo del menú, dentro de los submenús o sobre la cabecera. Sirve, por ejemplo, para situar un buscador, una llamada a la acción o iconos sociales dentro del propio panel.

Para los submenús, el diseño se asigna añadiendo su ID como clase CSS al elemento. Y cualquier elemento de Divi, como un botón, puede abrir y cerrar el menú con una clase CSS y un breve script de jQuery en Theme Options.

Dónde se configura y qué condiciona tu tema

Aquí están los límites que más condicionan el trabajo:

• Se configura en el Personalizador: el estilo se define en Apariencia > Personalizar. Solo los diseños inyectados se hacen con el Builder, de modo que el menú completo no se construye como un módulo.
• Los ajustes pertenecen al tema activo: si después pasas a un tema hijo, tendrás que configurar de nuevo tus menús. Activa el tema hijo primero.
• Theme Builder: si tu cabecera se hizo allí, activa el botón Theme Builder y coloca el shortcode [divi_mobile_tb_menu] en un módulo de código, una sola vez.
• Versiones preliminares de Divi: no debe usarse con ellas en sitios en producción.

Primer menú en el Personalizador

Divi Mobile necesita el tema Divi, y conviene tenerlo en su versión más reciente. Con el plugin activo:

1. Escribe en papel los niveles de tu menú y descarta los estilos que no los admiten.
2. Ve a Apariencia > Personalizar y abre los ajustes generales.
3. Selecciona un estilo prediseñado y comprueba que Mobile Header Style esté en Divi Mobile.
4. Asigna tu menú principal y elige su movimiento, como Expand from outside screen.
5. Activa la cabecera propia y sube el logotipo.
6. Ajusta el fondo, los colores y el tamaño del texto, y revisa el resultado en un teléfono real.

Caminos distintos para la navegación en Divi

Necesitas Divi como base. Si buscas botones flotantes o grupos de elementos interactivos más que tu menú de WordPress, DiviMenus trabaja en ese terreno: es un módulo que no renderiza menús de WordPress.

Si tu sitio no usa Divi, este plugin no te sirve. En ese caso, revisa Responsive Menu Pro o Max Mega Menu Pro.

Al planificar el menú móvil

¿Puedo usar submenús en cualquier estilo?

No. Circle Stretch Down y Bottom Navigation no admiten subelementos.

¿Cuántos niveles permite Side by Side?

Dos: padre e hijo.

¿Funciona con una cabecera del Theme Builder?

Sí, con el shortcode y el botón de activación en los ajustes generales.

¿Puedo usar la hamburguesa en escritorio?

Sí, el plugin lo permite.

¿Se construye todo con el Divi Builder?

No. El menú se estiliza en el Personalizador, y el Builder interviene en los diseños que inyectas.

¿Puedo poner mi propio icono?

Sí, subiendo tu código SVG.