En este tutorial, veremos cómo crear un mega menú espectacular en Divi. Para eso, utilizaremos uno de los mejores plugins de mega menú disponibles en el mercado actualmente: QuadMenu.

Se trata de un complemento ideal para crear cabeceras interactivas y se integra armoniosamente con Divi, al igual que con todas las plantillas más populares.

QuadMenu es un plugin que ofrece innumerables opciones de diseño y personalización, es extremadamente flexible y con un rendimiento insuperable. 

Para empezar, veamos el mega menú terminado antes de pasar a explicar como lo hemos hecho:

1_  Activar QuadMenu Premium

Algunos de los elementos que usaremos -carrusel y pestañas- están disponibles solo para la versión Premium, así que tendremos que descargar el archivo .zip donde hayamos comprado la licencia, instalarlo y activarlo junto a la versión gratuita de QuadMenu.

Ambos plugins son necesarios para acceder a las características Premium, el de gratis y el de pago.

1.1_ Integración con Divi

La integración del menú provisto por QuadMenu con Divi es automática. Esto significa que basta con encender el boton de “integración” para que todo funcione. 

En el panel de control de QuadMenu, seleccionamos la localización de menú de Divi “Menú principal” y encendemos el plugin.

El tema del menú es donde haremos todas las ediciones del menú. 

Seleccionamos “Customizer” para controlar nuestro menú desde el personalizador de Divi, de esta forma podemos ver los cambios en tiempo real mientras vamos construyendo nuestro mega menu.

Pasaremos por alto la personalización del menú, colores y demás elementos de diseño que se encuentran en Apariencia >> Personalizar>> Cabecera y Navegación. Utiliza las  múltiples opciones disponibles para darle un toque único a tu menú 

2_  Opciones Generales: Añadir Iconos e Insignias (etiquetas) y mucho más.

Insertamos la insignia “premium” a las pestañas y el icono al elemento “home” accediendo a estos elementos desde la página de editor de menú, haciendo click en el boton azul. 

En la pestaña “icono” seleccionamos alguno de los iconos disponibles, mientras que en la pestaña “general” podremos ingresar la insignia.

También tenemos otras opciones que están presentes en todos los tipos de elementos, como el subtítulo, posición del desplegable o añadir enlace.

3_ Agregando contenido a las columnas.

Los desplegables de QuadMenu funcionan en base al sistema grid de BootsTrap. De esta forma podemos mostrar nuestro contenido en columnas y elegir el número y la disposición de las mismas. 

Como ejemplo, veamos el desplegable de “mega” en nuestro menú.

Como podemos observar, tenemos 4 columnas con distinto tipo de contenido cada una. Para lograr esto, en el backend hemos seleccionado la opción de cuatro columnas, antes de insertar nuestro contenido.

La imagen refleja la configuración de la pestaña “mega” de nuestro menú. Como vemos, el contenido se organiza de la misma manera que los widget de la barra lateral, o cualquier otra área de widgets posible. Cada columna funciona de esta misma manera, mostrandose en orden descendente.

En el ejemplo, hemos insertado un widget para cada enlace, uno para cada post, para las páginas y el calendario de WordPress en la última columna.

Pero también es posible utilizar cualquier otro tipo de widget aquí, los widgets disponibles aparecerán en la lista de widgets, en la página de edición del menú.

De esta forma podemos generar contenido dinámico dentro de nuestro menú. Como por ejemplo últimos posts publicados, ultimos comentarios, productos mas vendidos, mas populares, paginas o taxonomías actualizadas.

4_ Añadiendo widgets a las columnas

Para añadir cualquier widget a una columna, hacemos click en el signo mas (+) en la columna a la cual queremos añadir un widget.

La lista de widgets de QuadMenu se mostrará para que podamos seleccionar uno o varios.

Finalizamos la acción dándole click al boton de “añadir a columna”  o “add to column”.

5_ Creación del Mega Menú

Añadimos un elemento “mega” a nuestro menú y abrimos el editor de elemento con el boton azul. Ahora vemos algunas otras pestañas que están ausentes en otros elementos, fondo, ancho y columnas.

En la sección de columnas es donde pondremos nuestro contenido en forma de widgets. Ya hemos visto antes cómo añadir columnas predefinidas, en nuestro mega menú usamos cuatro columnas de igual ancho.

En la sección “fondo” es posible poner una imagen de fondo al desplegable. 

En la sección “ancho”, encontramos tres opciones: ancho completo, encajonado o personalizable. En caso de elegir el ancho personalizable es necesario especificar el ancho sobre un total de doce columnas para cada tamaño de pantalla.

Si bien esto puede sonar algo difícil de entender, es fácil ir probando con distintas combinaciones hasta encontrar el ancho deseado.

6_ Crear el elemento TAB

Como vemos en nuestro menú de ejemplo, la pestaña TABS despliega el contenido agrupado a su vez en otras pestañas, como si fueran sub niveles del elemento padre.

Cada pestaña dentro de nuestro desplegable funciona como un elemento mega, en el que podemos organizar el contenido en columnas y mostrarlo mediante el uso de widgets.

Para añadir una nueva pestaña, vamos a la sección “pestañas” y damos click al signo mas (+). Hacia la derecha, encontramos los botones para borrar o editar cada pestaña

7_ Crear elemento carrusel

De la misma manera que creamos nuestros desplegables anteriormente, crearemos cada una de las pantallas o paneles de nuestro carrusel.

Además de todas las que vimos antes, el carrusel de QuadMenu tiene otras opciones que hacen a su funcionamiento.

Entre las opciones que se encuentran en la sección “carrusel” podemos ajustar la velocidad de animación y ponerlo en reproducción automática, mientras que en la sección “paneles” vamos a construir cada uno de nuestros paneles de la misma forma que lo hicimos con el contenido del elemento TABS. 

Creamos un nuevo panel dando click al signo mas (+) y añadimos nuestro contenido para cada panel en las columnas que hayamos dispuesto previamente.

>> VALORA Y COMPARTE ESTE ARTÍCULO:
[Total: 1 Media: 5]

No te vayas sin tu regalo, es gratis.

Mis 10 secretos para crear webs de éxito

+ trucos y recursos gratis para Divi

Tengo regalitos
para ti 😉

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Dime dónde te envío el descuento cuándo saque el curso

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Dime dónde te debo contactar
si te toca el Pack

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Dime dónde te envío

tus regalos

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

218813

¿Te vas sin tu regalo?

Mis secretos para crear una web de exito

+ trucos y recursos gratis para Divi

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Profesional Hosting (UE)
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Dime dónde te envío

el enlace al webinar

Responsable de los datos: Gonzalo de la Campa Marinas
Finalidad de los datos: Enviarte información.
Almacenamiento de los datos: Base de datos alojada en Mailchimp.
Derechos: En cualquier momento puedes limitar, recuperar y borrar tu información.

Abrir chat
1
1. ¿Quieres apuntarte a algún curso? Soy Gonzalo, cuéntame y te ayudo encantado.

2. Si eres ya alumno y tienes dudas de soporte debes escribirme a soporte@cursowordpress-online.com

3. Si no eres alumno y necesitas soporte no podré responderte salvo que contrates soporte en la web o te apuntes a alguno de mis 9 cursos con soporte.