Un mega menú es un menú enriquecido que muestra una estructura formada por diferentes bloques o secciones. Este tipo de menú enriquecido ha ido evolucionando desde el menú desplegable sencillo compuesto por un solo bloque o sección.

Un mega menú debe permitir estructurar el contenido en bloques o secciones, añadir imágenes, títulos, pestañas, carrsules, productos (caso de tienda online) y otros elementos. Todo esto con la finalidad de poder estructurar el contenido y hacer más sencilla la navegación en sitios web con amplias estructuras de páginas internas.

En este post se habla sobre los Mega Menús en WordPress. Si lo que quieres es saber cómo se crea un menú con WordPress, un menú normal, ve a este post: Crear Menú con WordPress

 

mega menú con WordPress

 

En este post te voy a enseñar a crear un mega menú en tu WordPress. También hablaremos del caso concreto de la plantilla Divi, que como sabéis, es mi favorita.

 

 

 

 

1.- Plugin QuadMenu para implementar un Mega Menú con WordPress

 

El plugin «Quad Menu» nos va a permitir crear un mega menú con WordPress. Quad Menu es un plugin Freemium. Es decir, dispone de una versión gratuita más limitada y de una versión premium o de pago.

La versión gratuita la puedes descargar desde aquí: Quad Menú versión gratuita

La versión premium tiene un coste de 14 $, que equivale a unos 12 € (incluye soporte de 6 meses). Un precio muy asequible para poder implementar un mega menú en WordPress con todas las funcionalidades.

COMPRAR QUAD MENU

 

 

1.1.- Plantillas WordPress compatiblidad con Quad Menú

 

El plugin es compatible en mayor o menor medida con la mayoría de las plantillas de WordPress. Pero ahora, te voy a dar un listado de plantillas con las que se ha creado un plugin específico adicional para conseguir una perfecta integración. Lee con atención los detalles para cada plantilla.

Plantillas con las que se ha creado un plugin específico para una perfecta integración de Quad Menú :

 

a.- Plantilla Divi: El plugin Quad Menú es compatible con la plantilla Divi. Si utilizas la versión gratuita del plugin tendrás que utilizar también este plugin: Divi Mega Menú – Quad Menu (Es el plugin para conseguir una perfecta integración con Divi).

En el caso de utilizar la versión de pago del plugin Quad Menu, no tendrás que instalar ningún otro plugin para la compatibilidad con Divi, ya que la integra el mismo plugin Quad Menu.

Es decir, si utilizas el plugin Quad menu gratuito con Divi, también tendrás que instalar el plugin «Divi Mega Menu – Quad Menu». Si utilizas el plugin de pago Quad Menu, no tendrás que instalar ningún otro plugin.

b.- Plantilla Astra: para utilizar Quad Menu con la plantilla Astra, deberás instalar también el plugin: Astra Mega Menu – Quad Menu

c.- Plantilla Storefront: para utilizar Quad Menu con la plantilla Storefront, deberás instalar también el plugin: Storefront Mega Menu – Quad Menu

d.- Plantilla Avada: para utilizar Quad Menu con la plantilla Avada, deberás instalar también el plugin: Avada Mega Menu – Quad Menu

e.- Plantilla OceanWP: para utilizar Quad Menu con la plantilla OceanWP, deberás instalar también el plugin: OceanWP Mega Menu – Quad Menu

f.- Plantilla Twenty Seventeen: para utilizar Quad Menu con la plantilla Twenty Seventeen, deberás instalar también el plugin: Twenty Seventeen Mega Menu – Quad Menu

g.- Woocommerce: para integrar Quad Menu con el plugin Woocommerce, deberás instalar también el plugin: Woocommerce Mega Menu – Quad Menu

h.- Plantilla EXTRA: para utilizar Quad Menu con la plantilla Extra, deberás instalar también el plugin: Extra Mega Menu – Quad Menu

i.- Generate Press: para utilizar Quad Menu con la plantilla Generate Press, deberás instalar también el plugin: Generate Press Mega Menu – Quad Menu

 

En este post se habla sobre los Mega Menús en WordPress. Si lo que quieres es saber cómo se crea un menú con WordPress, un menú normal, ve a este post: Crear Menú con WordPress

 

 

1.2.- Diseños de Quad Menú

 

El plugin Quad Menu, a aparte de permitir añadir elementos estructurados al menú, permite elegir entre diferente diseños, layouts o estructuras de menú:

a.- Collapse (Colapsable): Si elegimos este diseño de menú tendremos un mega menú horizontal en escritorio y un menú desplegable, colapsable o collapse en móviles. Los menús colapsables se caracterizan por no mostrar en un primer momento toda la estructura de subcategorías, sino que éstas se van mostrando conforme vamos haciendo clic en las categorías princiapales.

Este es layout o diseño que viene activado por defecto y también es el utilizado en la mayoría de sitios web.

 

b.- Offcanvas: con este layout tendremos un mega menú horizontal en escritorio y un menú vertical deslizante en móviles. El menú deslizante en móviles ocupará un 80% de la pantalla y aparecerá con un efecto tipo «sliding» o deslizamiento horizontal.

 

Diseño offcanvas mega menu Quad Menu wordpress

 

c.- Vertical: con este diseño tendremos un menú vertical oculto en escritorio y dispositivos móviles. En ambos casos, solo se mostrará un botón o icono tipo hamburguer o hamburguesa (3 rayas horizontales). Al hacer clic en dicho icono se desplegará el menú vertical, que se podrá mostrar en el lado izquierdo o derecho de la pantalla.

 

d.- Sidebar: con este diseño mostraremos un menú vertical fijo. Es decir, se mostrará desde el principio sin necesidad de hacer clic en ningún icono o botón.

 

 

2.- Funcionamiento esencial del plugin Quad Menú

 

Te voy a enseñar ahora cómo se construye un mega menú con Quad Menu:

 

a.- Crear menú: lo primero que debemos hacer es crear un menú, en caso de que no hayamos creado aún ninguno en WordPress. Para ello iremos a: «Apariencia > menús», pondremos nombre al menú y haremos clic en el botón «Crear menú».

A continuación, marcaremos en la parte inferior el lugar donde se visualizará el menú y guardaremos. Las zonas donde se ha activado el Quad Menú mostrarán un icono característico con forma de cuadrado negro con una punta de flecha naranja.

 

Crear menú wordpress con mega menu

En este ejemplo observamos que el Quad Menú, solo está activado para la zona: «Menú Principal» de la plantilla (Divi en este caso), ya que es la única zona que muestra el cuadrado negro

 

En este post puedes profundizar en la creación y gestión de menús con WordPress

 

NOTA: Para activar el Quad Menú en zonas de la plantilla iremos a: «Quad Menu pro > Opciones», pestaña «Configuración», elegiremos la zona y activaremos la integración. En el ejemplo anterior solo está activado el Quad Menú con la zona Menú Principal de Divi.

 

Activar Quad Menú en zonas de la plantilla