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.

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ú.

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».

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.

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.

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.

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.

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…

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.