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

Activar Quad Menú en la zona «Menú Principal» de la plantilla Divi

 

b.- Añadir Mega Menú: en el lateral izquierdo veremos un bloque desplegable denominado: «QuadMenu Items», y dentro de el, varios elementos. Seleccionaremos el elemento: «Mega» y haremos clic en el botón: «Añadir al menú».

 

c.- Opciones Mega Menú: al poner el ratón sobre el elemento «Mega» verás que se muestra una especie de botón con un icono de engranaje y el texto QuadMenu PRO. Haz clic sobre este elemento y se desplegarán las opciones de personalización divididas en varias pestañas: Default, General, Icono, Background, Ancho y columnas.

En «Default > URL» pondremos la url de destino si se hace clic en el item de menú creado, y en «Default > Título» pondremos el nombre del item de menú (haremos clic con el botón izquierdo del ratón para un primer guardado)

 

Configurar mega menu

Configurar mega menú

 

d.- Añadir columnas: para añadir columnas haz clic en la pestaña: «Columnas» y después haz clic en el botón: «Añadir Columna».

 

e.- Añadir elementos a la columna: Para añadir elementos a la columna haz clic en el botón: «+» y posteriormente desde el menú lateral podrás añadir o QuadMenu Widgets o QuadMenu items. Selecciona elementos y haz clic en el botón: «Add to Column»

 

añadir widgets al mega menu

Añadir widget o elemento a una columna del mega menú

 

Sigue el mismo procedimiento seguido en el apartado d) y e) para ir añadiendo más columnas y elementos a dichas columnas.

 

f.- Anchura de columnas: puedes especificar la anchura que tendrá cada columna haciendo clic en el icono en forma de «llave inglesa» que aparece en la parte superior de la columna.

La anchura la podrás especificar de manera independiente para cada tipo de dispositivo. Para un total de 12 puntos de anchura, tendrás que establecer el número de puntos que tendrá cada columna para cada dispositivo. (a estos puntos los llaman también columnas en el plugin)

 

g.- Opciones de diseño: esto puede variar dependiendo de la plantilla que se esté utilizando. En el caso de la plantilla Divi, que es la que yo utilizo, las opciones de diseño del mega menú se suman a las que vienen por defecto con Divi y se localizan en el mismo lugar. Es decir, para el menú principal las opciones de diseño las encontrarás en: «Divi > Personalizador de temas > Cabecera y navegación > Barra de menú principal»

 

 

3.- Implementar un Mega Menú con WordPress y Divi

 

Vamos a ver ahora que opciones tenemos para implementar un mega menú con WordPress y la plantilla Divi.

 

 

3.1.- Opciones para implementar un Mega Menú con Divi

 

Tenemos diferentes opciones para implementar un mega menú con WordPress y la plantilla Divi:

a.- QuadMenú gratis: podemos utilizar el plugin QuadMenú en su versión gratuita, junto al plugin Divi Mega Menú – Quad Menú para que haya una correcta integración. Este plugin estará limitado con respecto al mismo plugin en su versión de pago.

 

DESCUENTOS PLANTILLA DIVI

 

b.- QuadMenú premium: podemos adquirir y utilizar el plugin de pago QuadMenú de 14$, que incluye todas las funcionalidades para el Mega Menú. En caso de utilizar este plugin no será necesario instalar el plugin de integración mencionado en el apartado anterior-> COMPRAR PLUGIN

c.- Opciones por defecto de Divi: La plantilla Divi incluye por defecto la posibilidad de crear un mega menú muy sencillo. No podremos utilizar imágenes y otros recursos. Simplemente podremos crear columnas con diferentes items o elementos de menú.

 

En el apartado 2, tienes la mecánica general para utilizar el plugin QuadMenú con la plantilla Divi. En el siguiente apartado te voy a mostrar cómo crear un mega menú muy sencillo con las opciones de que dispone Divi por defecto.

 

 

3.2.- Crear un mega menú simplificado con Divi y sus opciones por defecto.

 

Para crear un mega menú en wordpress accederemos al panel de administración e iremos a: “Apariencia > Menús”.

Lo primero que debemos hacer es hacer clic en el botón “opciones de pantalla” situado en la parte superior y marcar la opción “Clase CSS”. Esto lo realizamos para que nos aparezca la casilla para poder definir la clase CSS que queremos asociar con el menú.

 

Clase CSS del mega menú de WordPress

Definir clase CSS para crear el mega menú

 

A continuación añadiremos el mega menú. En el ejemplo que vamos a ver el mega menú partirá de un elemento denominado: “Recursos”.

Añadimos el item de menú “Recursos” e incluimos el texto: “mega-menu” en el campo “Clase CSS (opcional)”.

 

Establecer clase mega menu en la plantilla Divi

Establecemos la clase mega-menu en el item o elemento del menú

 

 

A continuación vamos a crear la siguiente estructura que se desplegará del ítem de menú “Recursos”. En el ejemplo seguiremos la siguiente estructura:

 

1.- Recursos

1.1.- CMS

1.1.1.- WordPress

1.1.2.- Prestashop

1.1.3.- Drupal

1.1.4.- Joomla

1.2.- Hosting

1.2.1.- Webempresa

1.2.2.- Loading

1.2.3.- Raiola

1.2.4.- 1&1

1.3.- E-commerce

1.3.1.- Prestashop

1.3.2.- Magento

1.3.3.- Woocommerce

1.3.4.- Opencart

1.4.- Plantillas

1.4.1.- Divi

1.4.2.- Avada

1.4.3.- CpoThemes

1.4.4.- Extra

 

En la siguiente imagen puedes ver cómo se va creando la estructura antes comentada en el mega menú de WordPress.

 

Añadir los elementos del mega menu en WordPress

Creando la estructura del mega menú

 

Tras crear la estructura, seleccionamos la zona en la que queremos que aparezca el menú, en el apartado: “Ubicaciones del tema”.

En el caso de la plantilla Divi marcaremos la opción “Menú principal” que se corresponde con el menú superior (el del header).

A continuación guardamos.

El resultado será el que se ve en la siguiente imagen.

 

Forma del mega menú creado con wordpress y la plantilla Divi

Apariencia del mega menú realizado con Divi

 

Seguro que te habrás preguntado, ¿y qué ocurre si introducimos 5 secciones en el mega menú en vez de 4? Lo que ocurre es que la quinta sección se coloca bajo la primera sección como te muestro en este ejemplo

 

mega menu con 5 secciones

Mega menú realizado con Divi con 5 secciones

 

Como puedes ver en la imagen la sección correspondiente al Máster de Recursos humanos se ha colocado bajo la sección correspondiente al MBA 2016.

 

Cómo crear una barra de menú transparente con WordPress y Divi

 

 

3.3.- Modificar aspectos del diseño del mega menú por defecto de Divi

 

Vamos a ver ahora cómo podemos modificar el diseño de los textos de encabezamiento de sección o textos de cabecera, así como la línea que aparece bajo dichos textos de encabezamiento con la plantilla Divi. Ya que en mi opinión tanto el texto de cabecera como la línea que aparece bajo él salen poco destacados.

Recuerda que lo que vamos a ver solo es válido si estás utilizando la plantilla Divi.

Añade el siguiente código al archivo style.css de tu tema hijo o child theme:

 

 

/* Modificar grosores cabezas mega menu */

#top-menu li.mega-menu > ul > li > a:first-child {

padding-top: 0 !important;

border-bottom: 3px solid rgba(0, 0, 0, 0.03);

font-weight: 700;

color:#326626;

}

/* Modificar grosores cabezas mega menu */

 

 

Puedes modificar el código anterior a tu gusto para personalizar el diseño. Ten en cuenta:

  • Font-weight: nos da el grosor del texto de cabecera. Los valores posibles: 100,200,300,400,500,600,700,800, 900.
  • Color: color html del texto de cabecera
  • Border-bottom: línea que aparece bajo el texto de cabecera. El grosor se corresponde con el primer dato que aparece, en el ejemplo 3px.

 

En la siguiente imagen puedes ver un mega menú de divi personalizado. Se ha modificado el color y grosor de los textos de cabecera así como el grosor de la línea que aparece bajo ellos.

 

personalizar cabeceras del mega menu

Mega menú con elementos de cabecera con diseño personalizado

 

Compártelo ya!!

ACCEDE A TODOS MIS CURSOS POR SOLO 10€/MES

1.- CURSO WORDPRESS (44 Clases)
2.- CURSO DIVI (33 Clases)
3.- CURSO BLOOM + MAILCHIMP (7 Clases)
4.- CURSO SEO (19 Clases)
5.- CURSO BLOG WORDPRESS (32 Clases)
6.- CURSO WOOCOMMERCE (39 Clases)
7.- CURSO FLATSOME WORDPRESS (36 Clases)
8.- CURSO COLORES WEB (9 Clases)
9.- CURSO ANALYTICS (10 Clases)
10.- CURSO GESTIÓN IMÁGENES WEB (15 Clases)
11.- CURSO SEO PARA TIENDAS ONLINE (12 Clases)
12.- ETC. ETC.
*** ADEMÁS TIENES MI SOPORTE VÍA EMAIL***

IR A LOS CURSOS

Vé a tu buzón de correo y confirma la suscripción. Si no encuentras el correo de confirmación mira en la carpeta de SPAM.