Los mena menús son muy populares porque muestran elementos de navegación desplegables de un modo en que son más fáciles de visualizar.
Puedes hacer mega menús de muchas maneras, pero lo más habitual es recurrir a plugins como Max Mega Menu (gratis) o UberMenu (de pago).
De lo que estoy hablando es de pasar de algo así…
A algo como esto otro…
Ahora bien, si usas Divi no es necesario instalar ningún plugin adicional para crear mega menús, ni siquiera añadir ningún tipo de código para generarlos, Divi ya integra esta posibilidad de convertir cualquier de tus menús en un mega menú, y solo donde tú quieras.
¿Quieres saber cómo se hacen?
Índice de contenidos
Las opciones de pantalla de WordPress
No me cansaré de repetir que siempre que estés en una pantalla de WordPress, la que sea, revises las Opciones de pantalla a ver qué te ofrecen.
Pues bien, ve a Apariencia > Menús y abre las Opciones de pantalla para activar la casilla de Clases CSS.
Esto añadirá una nueva caja en los ajustes de cada elemento de tus menús.
La magia del CSS
Pues sí, la magia del CSS está en hacer que las webs cobren vida y den lo mejor de sí mismas, y Divi ya tiene clases CSS para crear mega menús en su hoja de estilos, y tiene unas cuantas líneas.
Así que lo único que tienes que hacer es, en la caja de Clases CSS recién activada en tus menús, añadir el nombre de la clase, que no es ni más ni menos que mega-menu, así…
Guarda los cambios y habrás convertido tu menú normal en un mega menú.
¿Dónde pongo el mega menú?
La única decisión que debes tomar es dónde poner el nombre de la clase CSS mega-menu, en definitiva, a partir de qué elemento de tu menú quieres crear el mega menú.
Y en la cuestión está la respuesta: en el elemento a partir del que quieras que sus subelementos se muestren en un mega menú en vez de en un menú desplegable normal.
O sea, debes añadir el nombre de la clase mega-menu en el elemento de tu menú padre, del que colgarán el resto de elementos.
Por supuesto, un mega menú muestra todo su potencial cuando hay bajo él varios subelementos, elementos desplegables.
¿Qué más puedo hacer?
Si, además, combinas este truco con el de mostrar imágenes en los menús podrás crear mega menús desplegables realmente atractivos.
Lo mejor del método Divi es que puedes tener en un mismo menú desplegables normales y en mega menú, depende de cuál se vea mejor en cada caso.
Otro día te cuento otro truco con los mega menús en Divi.
¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!
AVISO: Esta publicación es de hace 3 años o más. Si es un código o un plugin podría no funcionar en las últimas versiones de WordPress, y si es una noticia podría estar ya obsoleta. Luego no digas que no te hemos avisado. ¡Ah! ¿te funciona? pues entonces no he dicho nada :)
Si trabajas con CSS, al cerrar, pierdes los cambios? estoy errado?
Hola
Tengo un problema, a ver si puedes ayudarme. Estoy intentando hacer un megamenu, en DIVI pero en vez de colocar páginas, quiero que muestre los proyectos, por categorías. El problema es que solo me enseña las categorías de las entradas en el editor de menos de wordpress, las categorías de los proyectos no aparecen.
Una solución sería crear los productos como entradas, pero quiero utilizar las entradas para el blog, no para los productos.
Tiene esto alguna solución? Gracias de antemano
Hola, acabo de encontrar un plugin megamenu para divi que esta de pelos
http://www.quadmenu.com/divi/
Hola
Estoy pensando en comprar un megamenu para divi
He probado ubermenu y max mega menu pero ningun funciona
Alguien probo quadmenu ?
El autor dice que es compatible con Divi
http://quadmenu.com/divi/
Hola
Necesito que mi mega menú tenga dentro de este sub menus, ¿Es posible hacerlo?
Sí claro, siguiendo el mismo proceso que en lo que explico en esta guía pero aplicado a los submenús.
No funciona para móvil
Buenos días Fernando, tenia una duda, al crear el menu con la llamada mega-menu, no se puede hacer que se colapse en versión móvil (es que también estoy mirando otro tutorial de colapsar menú https://ayudawp.com/tutorial-divi-menu-movil-desplegable-extensible-y-plegable/.
¿y al indicar ‘always-visitable’, la magia de mega-menu sale por la puerta, no?
¿hay forma de compatibilizarlo?