Beaver Builder Mega Menu

Si tu cabecera ya vive en Beaver Themer, este menú es para ti; si no, piénsalo dos veces

Montar un mega menú suele acabar en uno de dos sitios: un plugin de terceros con una curva de aprendizaje empinada y estilos limitados, o un menú desplegable corriente que no da para enseñar todo lo que ofreces. Beaver Builder Mega Menu parte de otra idea: cualquier fila guardada en Beaver Builder se convierte en panel de mega menú.

Está pensado para quien ya trabaja con Beaver Builder y construye su cabecera con Beaver Themer. Ahí es donde funciona y donde tiene respaldo. Si tu theme te deja insertar un shortcode o un widget en la posición de la cabecera, quizá puedas llamar a una fila guardada con el shortcode de Beaver Builder para insertar layouts, pero es un camino sin probar de forma oficial: si algo falla, estás solo. Y si no usas Beaver Builder, este plugin no te sirve de nada.

Cualquier fila guardada se convierte en panel

La lógica es sencilla: diseñas una fila en Beaver Builder y la eliges como contenido de un elemento del menú. Admite filas de ancho completo o de ancho fijo, con fondos y efectos. Lo que puedas maquetar con el builder (columnas, imágenes, textos, botones) puede aparecer al pasar el ratón.

El módulo se llama Mega Menu y aparece en los módulos estándar, en la sección Action. Lo arrastras a tu cabecera de Themer y añades los elementos desde su pestaña General.

Tres tipos de elemento en el mismo menú

No todo merece un panel enorme. Cada elemento puede ser de tres tipos:

• Mega menú: eliges una de tus filas guardadas.
• Desplegable: eliges un menú de navegación de WordPress creado en Apariencia > Menús.
• Enlace simple: solo texto y URL.

Así, una sección con dos subpáginas puede ser un desplegable clásico y reservar el panel grande para la parte del sitio con mucho que mostrar. Los estilos se configuran por separado para el nivel superior, los desplegables y el menú móvil: color, espaciado, alineación y tipografía.

En móvil no verás el mega menú, y está pensado así

En pantallas pequeñas el mega menú no aparece, porque resultaría pesado y agobiante. En su lugar se muestra un menú lateral deslizante (off-canvas). Para eso necesitas crear aparte un menú de WordPress con todos los enlaces que quieras en móvil, y elegirlo en el módulo. Puedes cambiar el icono, el lado desde el que entra, cuánta pantalla ocupa y el botón de cierre.

Las tabletas dependen del punto de corte global de Beaver Builder: con el valor por defecto usan el menú móvil, y si lo bajas a 767px verán el mega menú. Ese ajuste es global y afecta a todos los layouts. El menú móvil tampoco se ve en el editor: hay que publicar y mirarlo en tamaño pequeño, y es normal retocarlo un par de veces.

Detalles que conviene saber antes de empezar

• Tras editar, hay que refrescar la página para que el mega menú se muestre al pasar el ratón. Es la causa habitual de que los desplegables funcionen y el mega menú no.
• No es un elemento de navegación nativo de WordPress, así que no recibe la clase del elemento activo. Para dar estilo propio a un elemento concreto, puedes asignar una clase al padre.
• Un menú de este tipo no resuelve el contenido: si tus filas están vacías o mal pensadas, el panel también lo estará.

Preguntas frecuentes sobre Beaver Builder Mega Menu

¿Funciona con cualquier theme?

Está diseñado para Beaver Themer. En otros themes solo es una posibilidad si permiten insertar un shortcode o un widget donde va el menú.

¿Puedo mezclar mega menús y desplegables normales?

Sí, en el mismo módulo, elemento por elemento.

¿Se ve el mega menú en el móvil?

No. En dispositivos pequeños se muestra un menú lateral que tú configuras con un menú de WordPress aparte.

¿Puedo diseñar el panel con cualquier diseño de Beaver Builder?

Sí, cualquier fila guardada, de ancho completo o fijo, puede ser un mega menú.

¿Por qué no se abre al pasar el ratón?

Lo primero es refrescar la página tras editar. Es un paso necesario.