Nos encanta interactuar con imágenes en línea. De hecho, lo esperamos. Pinterest, Facebook e Instagram continúan demostrándolo. Con eso en mente, tiene sentido agregar una imagen a su sitio web siempre que sea posible. Y agregar imágenes en un mega menú es otra gran oportunidad para brindarles a sus usuarios la interacción que necesitan.
Agregar imágenes a un mega menú es una solución inteligente para mejorar la navegación de su sitio web. Los mega menús permiten a los usuarios ver más enlaces a la vez sin la molestia de desplazarse, desplazarse y recordar el contenido de su menú. Las imágenes también mejoran el menú llamando su atención para simplificar aún más el proceso de navegación.
Existen complementos útiles que harán esto por usted. Sin embargo, dado que Divi viene con una funcionalidad de mega menú ya incorporada, es mejor aprovechar esta función y agregar imágenes al mega menú sin el uso de un complemento.
¡Disfrutar!
Para empezar primero debemos crear el menú. Para este ejemplo, estoy creando un elemento de menú principal principal llamado «Mega menú» con cuatro elementos de submenú debajo. Cada uno de los cuatro elementos del submenú tiene tres elementos del submenú. Aquí está el desglose para mayor claridad:
- Menú Mega
- Sobre nosotros
- Nuestro equipo
- Nuestra misión
- Historia de la Compañía
- Servicios
- Diseño web
- Desarrollo web
- SEO
- Nuestro trabajo
- blogs
- comercio electrónico
- Corporativo
- Contáctenos
- Apoyo
- Direcciones
- Trabajos
- Sobre nosotros
En el panel de administración de WordPress, vaya a Apariencia → Menús . Haga clic en crear un nuevo menú y asígnele un nombre (algo así como «Mega Menú»).
Ahora comience a agregar los enlaces al menú. Estoy usando enlaces personalizados para este ejemplo, pero puede usar páginas, publicaciones o categorías existentes si lo desea.
Para agregar un enlace personalizado, haga clic para abrir Enlaces personalizados y agregue su URL y el Texto del enlace. Repita este proceso para todos los enlaces.
Nota: Para este ejemplo, simplemente estoy agregando un hashtag (#) en el cuadro de texto de la URL para que sirva como un enlace simulado que no vinculará a nada.
Ahora cree un enlace más para que sirva como enlace del mega menú. Lo llamé «Mega Menú» para dejar esto claro. Este es el enlace que mostrará su mega menú al pasar el mouse.
Convertir tu menú en un mega menú es bastante simple. Todo lo que necesita hacer es agregar una clase css al elemento principal del Mega Menú que acaba de crear.
Para hacer esto, haga clic en la flecha a la derecha del elemento Mega Menu para revelar opciones de configuración adicionales. Busque el cuadro de texto etiquetado Clases de CSS e ingrese «mega-menú».
Si no ve el cuadro de texto Clases de CSS, haga clic en la pestaña Opciones de pantalla en la parte superior derecha de la pantalla Menús.
En «Mostrar propiedades del menú avanzado», asegúrese de que Clases CSS esté marcada.
Una vez que se agreguen los enlaces al menú, desplácese hacia abajo hasta Configuración del menú en la parte inferior de la pantalla del menú y seleccione Menú principal para la ubicación de visualización. Su menú ahora debería verse así.
Ahora organice/arrastre los cuatro elementos del menú (cada uno con tres subelementos propios) para convertirlos en subelementos del enlace del megamenú principal principal.
Ahora su menú debería verse así:
Haga clic en Guardar Menú
Ahora veamos cómo se ve el mega menú hasta ahora en el sitio en vivo.
Ahora que el menú está listo, es hora de agregar las imágenes.
Comience por obtener cuatro imágenes. Estas imágenes deben estar relacionadas con los cuatro elementos del submenú (Acerca de nosotros, Servicios, Nuestro trabajo y Contáctenos). Elegí el mío de unsplash.com.
Use un editor de fotos para reducir y recortar cada imagen para que tenga un ancho de 500 px y una altura de 300 px.
Agréguelos/arrástrelos a la biblioteca multimedia de WordPress .
Ahora regrese a la página de menús en WordPress Admin.
En este ejemplo, el enlace superior en mi primera columna es «Acerca de nosotros». Haga clic en la flecha a la derecha del elemento «Acerca de nosotros». En el cuadro Etiqueta de navegación, agregue la imagen que desee utilizando la etiqueta html img directamente antes del texto «Acerca de nosotros». La etiqueta de la imagen debe tener el siguiente aspecto:
|
01
|
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” /> |
Para encontrar la URL de la imagen, vaya a Medios → Biblioteca . Haga clic en la imagen que desea agregar. En la pantalla emergente Detalles del archivo adjunto, busque la URL en la sección de la derecha, resáltela y luego use ctrl+c para copiarla en su portapapeles.
Ahora regrese a la configuración del elemento de menú «Acerca de nosotros» en la página del menú y reemplace el texto «Insertar URL de imagen» pegando la URL de su imagen usando ctrl+v.
Antes de salir de las opciones de configuración para el elemento de menú «Acerca de nosotros», busque el cuadro de texto Clases CSS e ingrese el «mega-enlace» de la clase.
Esto nos permitirá agregar algunos estilos personalizados más adelante.
Repita este proceso para agregar las siguientes tres imágenes a cada uno de los elementos del submenú junto con la clase «mega-enlace». (En este ejemplo, los tres elementos restantes son «Servicios», «Nuestro trabajo» y «Contáctenos»).
Vaya a su sitio y coloque el cursor sobre el enlace del mega menú. Ahora su mega menú debería verse así:
Tenga en cuenta que cuando pasa el cursor sobre cada una de las imágenes, las imágenes tienen un efecto de desvanecimiento junto con el elemento del submenú directamente debajo. Esto se debe a que la imagen es parte de ese enlace, por lo que al hacer clic en él, accederá a la URL asociada.
Toques finales
Para este último paso, agregue css personalizado al menú para hacer que la fuente del texto sea más grande y centrada. Además, proporcione un radio de borde alrededor de la imagen para que se vea más limpio.
En el administrador de WordPress, vaya a Divi → Opciones de tema . Desplácese hacia abajo hasta el cuadro CSS personalizado e ingrese el siguiente CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
|
.mega-link > a { text-align: center; font-size: 20px !important; text-transform: uppercase; font-weight: 400 !important; letter-spacing: 3px;}.mega-link > a img { margin-bottom: 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; } |
Guardar cambios
Resultado final
¡Ya has terminado!
Tienes un mega menú Divi con imágenes sin tener que usar un plugin. Aproveche esta adición para su sitio actual o próximo proyecto para mejorar la navegación. Este tipo de menú funciona especialmente bien para sitios de comercio electrónico que tienen mucho contenido y requieren imágenes de productos. Esperamos que te sea útil.
Más Divi Awesomeness todos los días
Espero que disfrutes este tutorial. Estamos publicando una nueva publicación de blog de Divi todos los días. Si tiene una solicitud de tutorial, asegúrese de dejarla en la sección de comentarios a continuación.
¡Asegúrate de suscribirte a nuestro boletín de correo electrónico y canal de YouTube para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!