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:
Índice del artículo
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.
Hola Gonzalo estoy teniendo problemas para poder usar Quad menu. no puedo usar la opción mega. solo me figura como si fueran tabs.
Buenas Pamela
Si eres alumna mía con soporte vigente, porfa escríbeme al mail de soporte que lo centralizo todo allí.
Y si no eres alumna o no tienes soporte vigente conmigo, puedes escribir al soporte del plugin directamente. Un abrazo!
Hola Gonzalo, he intentado cambiar el link del logo pero no lo encuentro. ¿Sabrías decirme dónde está?
Gracias,
Hola, a mí quadmenu se despliega solo cuando carga la web… ¿sabrías cómo arreglarlo? Gracias