Tutorial Divi: Cómo crear un mega menú sin plugins ni códigos

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?

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.

Valora este artículo para mejorar la calidad del blog ...

FlojitoNo está malEstá bienMe ha servidoFantástico (5 votos, promedio: 5,00 de 5)
Cargando…

Autor: Fernando

Fernando Tellado, apasionado de WordPress, profesor, consultor y ponente. Maquero cansino, padre de tres hijos y de una perrita Beagle, Bilbaíno de nacimiento, Español de corazón y ciudadano de donde me quieran.

Autor del libro WordPress – La tela de la araña. Mi blog personal es Navegando con red, donde he crecido como escritor en la red y ofrezco mis visiones acerca de la Web 2.0 y la blogosfera.

Comparte esta entrada en
468 ad

LOS BURÓCRATAS DE LA UE ME EXIGEN QUE TE DIGA QUE SI VISITAS AYUDA WORDPRESS PUEDES RECIBIR ALGUNA COOKIE. AQUÍ NO HAY COOKIES DE PUBLICIDAD, COMO LAS QUE SI TE DEJAN GOOGLE, AMAZÓN Y MONTÓN DE SITIOS, SIN AVISAR, PERO EL QUE TE TENGO QUE AVISAR SOY YO. LAS COOKIES QUE TE DEJA AYUDA WORDPRESS SON PARA FACILITARTE LA NAVEGACIÓN, COMPARTIR Y COMENTAR. SI NO QUIERES RECIBIR COOKIES PUEDES NAVEGAR EN MODO PRIVADO, ABANDONAR ESTE SITIO Y PERDERTE EL CONTENIDO GRATIS QUE COMPARTO CADA DÍA SOBRE WORDPRESS O IRTE A UNA ISLA DESIERTA PARA VIVIR AISLADO DEL MUNDO, ESO SÍ, SIN COOKIES. O SINO, SIMPLEMENTE CIERRA ESTA VENTANA COÑAZO Y SIGUE DISFRUTANDO DEL BLOG. SI TIENES CURIOSIDAD SOBRE ESTO DE LAS COOKIES TE DEJO UN ENLACE >> MÁS INFORMACIÓN

Los ajustes de cookies de esta web están configurados para "permitir cookies" y así ofrecerte la mejor experiencia de navegación posible. Si sigues utilizando esta web sin cambiar tus ajustes de cookies o haces clic en "Aceptar" estarás dando tu consentimiento a esto.

Cerrar