En el menú de una web se concentra la información más importante y relevante de ésta, con lo cual, ofrecer los enlaces de forma ordenada y visual servirá de gran ayuda para que el visitante de la web encuentre lo que busque.

El menú de cabecera de Divi tiene varias opciones de configuración, pero por defecto, no incluye una de las tendencias de diseño que más se viene usando últimamente, sobre todo en webs de eCommerce.

Y eso es lo que vamos a ver en este post, cómo crear un Mega Menú en Divi, paso por paso.

¿Qué es un Mega Menú?

Se trata del gran desplegable que aparece en una web al clicar en el icono del Menú de cabecera.

En este desplegable aparecen todas las secciones de la web al mismo tiempo, ordenadas de forma jerárquica: elementos y subelementos.

Este tipo de menú se suele usar en webs con mucho contenido, sobre todo en eCommerce.

De esta forma, el Menú de cabecera se muestra limpio y al clicar en el icono de la esquina superior, se despliegan todas las categorías ordenadas y accesibles a un solo vistazo para el usuario.

cómo diseñar un mega menú en divi

Muchas de las grandes webs que visitas frecuentemente usan este diseño de menú, por ejemplo, Asos, Adidas, Nike, Bobby Brown… Pues son webs con muchísimo contenido y esta es una de las mejores formas de hacer que el usuario encuentre fácilmente lo que busca.

Diseñar un Mega Menu en Divi paso a paso

Lo primero que tienes que hacer es crear un menú en tu panel de WordPress.

Para ello, dirígete a Apariencia -> Menús, clica en crea un nuevo menú y nómbralo «Mega Menú».

Después clica en el botón de guardar cambios para empezar a editar este nuevo menú.

tema divi nuevo menú

En la parte superior de esta página verás una pestaña que indica «Opciones de pantalla». Clica en ella, y en el desplegable que aparecerá, activa la casilla «Clases CSS».

crear menú desplegable plantilla divi

A continuación, crea todos los elementos que quieres incluir en tu menú, tal y como cualquier menú que creas en WordPress.

Para ello, puedes ir añadiéndolos desde la barra derecha, donde tienes acceso directo para incluir páginas, entradas, categorías, variables para WooCommerce o incluso enlaces personalizados.

Ayúdate del sistema de arrastrar y soltar con el ratón para crear las jerarquías.

El elemento «padre», que en mi caso será la Página de Tienda, debe de encabezar el listado de elementos y ocupar la primera jerarquía para que el Mega Menú de Divi que voy a crear funcione correctamente.

crear un mega menú en wordpress

Una vez, hayas creado todos los elementos que aparecerán en el Mega Menú, selecciónalo como Menú Principal, para que WordPress sepa que esta será su ubicación, y guarda cambios.

menú cabecera desplegable divi

Ahora, para indicarle a la plantilla Divi que quieres mostrar este menú como un Mega Menú desplegable, entra en el elemento padre (Tienda en mi caso) y modifica lo siguiente:

  • Etiqueta de navegación: escribe aquí el título que quieres que aparezca en el desplegable.
    En este caso, he puesto «Menú».
    O si quieres mostrar solo el icono del desplegable, escribe <div class=»hamburger»></div>.
  • Clases CSS: escribe mega-menu
  • Si es un enlace personalizado, sustituye # por el enlace en cuestión.

cómo hacer mega menú en divi

Guarda cambios.

Y por último ve a Divi -> Personalizador de temas -> Cabecera y navegación y haz lo siguiente:

EN FORMATO DE CABECERA: Selecciona la opción «Por defecto» para que el menú se visualice correctamente.

mega menú cabecera

EN BARRA DE MENÚ PRINCIPAL: Modifica los colores de texto, el color de fondo, el tamaño de menú, elige tipografía, el color de línea del menú desplegable…

plantilla divi personalizar mega menú

Por último, comprueba que tu Menú de cabecera se ha convertido en un Mega Menú, con el estilo que tú querías y que funciona correctamente.

Si te ha gustado esta forma tan sencilla de crear un Mega Menú en Divi, no dudes en aplicarlo a tu sitio y coméntanos cuáles son tus preferencias a la hora de diseñar un Menú de cabecera.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (2 votos, ¿Te ha resultado útil? ¡Danos un 5!)
Cargando…

Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.plugin cookies

ACEPTAR
Aviso de cookies

¡APRENDE MÁS SOBRE DIVI!

¿Quieres estar al día de todo lo que compartimos en Divesp?

Consentimiento

¡Gracias! Ahora VE A TU BANDEJA DE ENTRADA para confirmar tu suscripción.