Crear mega menu con imágenes en Divi sin usar plugins

Crear un mega menu con Divi que incluya imágenes en cada bloque de vínculos es un acierto. Es una buena oportunidad de llevar la interacción con el usuario a un nivel un poquito más alto.

Además mejorarás la navegación en tu sitio web, ya que te permitirá ver más enlaces a la vez sin necesidad de desplazarse a otros menús.

Por otro lado, las imágenes también ayudarán a reforzar y llamar más la atención sobre los contenidos que ofrecen los links. Además de simplificar aún mas la navegabilidad.

Por supuesto que existen plugins que harán esto automáticamente por tí. Pero, ¿Estás dispuesto a utilizar un plugin para cada «cosita» que vayas añadiendo a tu web? ¿Merece la pena realmente?

En este artículo vamos a ver cómo aprovechar la función mega menu que ya viene incorporada en Divi. También  aprenderemos cómo incluir imágenes y dar formato con un poquito de CSS.

Implementando el diseño con Divi

Crear el mega menu con Divi

En primer lugar debemos crear el menú. Para este ejemplo, vamos a crear un elemento de menú principal denominado «Mega Menu» con cuatro submenús debajo de él. Cada uno de estos cuatro elementos del submenú tiene tres submenus más. Aquí está la estructura para que lo tengas claro:

Estructura final del mega menú

Así que desde el administrador de WordPress, accedemos a Apariencia >> Menús y creamos un menú, al que llamaremos «Mega Menu».

Como vamos a añadir una clase CSS a nuestro menu que ya viene incorporada con Divi (mega-menu) y otra clase que crearemos para personalizar el estilo de nuestro menú (mega-link), activamos la vista de Clases CSS, si es que no la tienes activada, pulsando en la parte superior de nuestro administrador WordPress en Opciones de pantalla y marcando Clases CSS como ver en la imagen siguiente.

Añadimos ahora el primer link (Mega Menu) del que saldrán los demás submenus. Así que desde el menú de la izquierda, elegimos Enlaces personalizados (se puede hacer también con cualquiera de las restantes opciones, pero no es el caso), y en el campo URL ponemos # ya que es un test, cuando quieras que esté el menú operativo pondríamos la dirección url.

En Texto del enlace escribimos Mega Menú y pulsamos añadir al menú. Desplegamos la pestaña de el enlace personalizado (ver imagen) y en el campo Clases CSS (opcional) introducimos la clase mega-menu. Esto hará que Divi reconozca este enlace como un mega menu y se comporte como tal.

Repetimos el proceso para el resto de enlaces, ya sin poner ninguna clase CSS (de momento). Recuerda el proceso:

En el menú de la izquierda >> Enlaces personalizados >> URL # >> Texto del enlace ponemos nombre del link >>Añadir al menú. Fíjate cómo va quedando.

Ajustar los submenus

Una vez creados todos los links, arrastramos los submenús para ajustarlos con sus menús. Por ejemplo, anclamos Quienes somos a Mega Menu y Quienes somos a su vez tiene los submenús Nuestro Equipo, Misión y Valores y Nuestra Historia.

Al final debe quedar como ves en la imagen inicial, que puedes comprobar en la parte superior de este post, Estructura final del mega menú.

Una vez tengamos creados y ajustados todos nuestros enlaces del megamenu, guardamos menú y tendríamos algo como la imagen que ves abajo. Para verlo, crea un módulo de menú de anchura completa (debes hacerlo en una sección de anchura completa) y añade el que acabas de crear o, si lo prefieres, haz que sea menú principal desde Apariencia>>Menús (abajo, en la sección Opciones del Menú).

Añadir las imágenes en el megamenu con Divi

Ahora que tenemos el menú listo, es el momento de insertar las imágenes.

Debes tener las imágenes preparadas. Estas imágenes son para los cuatro elementos del submenú (Quienes Somos, Servicios, Proyectos y Contacto). Yo las conseguí en pixabay y las redimensioné a 300px de anchura por 180px de altura

Una vez las tengamos, las añadimos importándolas a nuestra biblioteca de WordPress.

Una vez agregadas a nuestra biblioteca, las vamos seleccionando y anotamos la URL de cada una de ellas.

Ahora ya podemos ir de nuevo a la página de configuración de menús, esto es, Apariencia >> Menús. Ahí desplegamos el primer submenú principal (Quienes somos) y, en el campo etiqueta de navegación, justo antes del nombre del enlace (Quienes Somos) ponemos:

<img src="La URL de la imagen" alt="Texto alternativo" width="100%" />
Sustituimos el texto entrecomillado «La URL de la imagen» por la URL que habias copiado de la primera imagen y en «Texto alternativo» ponemos un texto que describa la imagen. Debería quedar ago así:

<img src=»https://aulamedia.net/wp-content/uploads/2015/06/quienes.jpg» alt=»menu quienes somos» width=»100%» />Quienes Somos

Repetimos el proceso para los demás submenús principales restantes, en nuestro caso serán Servicios, Proyectos y Contacto, pero poniendo las URLs correspondientes.

Ahora, en cada uno de los submenús, los desplegamos y en el campo Clases CSS (opcional), ponemos mega-link.

Estamos haciendo referencia a una clase que vamos a crear y poner en nuestra hoja de estilos hijo o en Divi >> Opciones de tema>> CSS personalizado.

Con esta clase personalizaremos la apariencia de cada uno de los submenús, que además podremos modificar según nos convenga.

Añadir CSS

Fíjate que cuando pasas el ratón sobre cada una de las imágenes, las imágenes tienen un efecto de fundido junto con el elemento del submenú directamente debajo. Esto se debe a que la imagen es parte de ese vínculo, por lo que al hacer clic en él se mostrará la URL asociada.

Para este último paso, añadiremos css personalizado al menú para que el texto sea más grande y esté centrado. Además, redondearemos el borde de la imagen para que parezca más limpio.
En el Admin, navega hacia Divi → Opciones de tema. Desplázate hacia abajo hasta el cuadro css personalizado e introduce el css siguiente:

.mega-link > a {
text-align: center;
font-size: 14px !important;

text-transform: uppercase;
font-weight: 400 !important;
letter-spacing: 1px;
}

.mega-link > a img {
margin-bottom: 8px;
margin-top: 18px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;

}

Guarda cambios y ya tienes tu megamenú con imágenes sin necesidad de ningún plugin. Espero que te haya sido útil. No olvides pasarte regularmente para estar informado de los últimos tutoriales.

Bajo estas líneas tienes el ejemplo terminado, es esta ocasión los submenús se abren hacia arriba, puedes cambiar esto en la configuración del módulo.