Índice
¿Qué sería de las webs sin imágenes? Por supuesto que la calidad de los textos es imprescindible y es lo que realmente te hará posicionar una web, pero la tendencia es crear cada vez diseños más dinámicos e interactivos.
Con la plantilla Divi, esto es bastante sencillo y podrás crear webs corporativas, blogs, ecommerce o landing pages muy profesionales con unos conocimientos básicos.
Sin embargo, la opción de añadir imágenes al Menú de Cabecera de Divi, no viene incluida por defecto y tendrás que realizar una serie de pasos si pretendes incluir este elemento en la web.
Estos son los pasos que vamos a ver a continuación.
Cómo añadir imágenes a la cabecera de la plantilla Divi
Las imágenes en el Menú de cabecera mejorarán y simplificarán la navegabilidad de la web, ayudando al visitante a encontrar lo que busca de una forma más intuitiva, además de añadir originalidad al diseño web.
¡Puede ser una solución muy inteligente de captar la atención!
Existen plugins para añadir imágenes al menú desplegable de la cabecera, pero dado que el tema Divi ya trae esa función inclida, vamos a aprovecharla.
PASO 1: Crear un Mega Menú
Para incluir las imágenes, necesitas primero crear un Mega Menú en la cabecera de Divi.
Esto ya lo explicamos en el post anterior y es muy sencillo de implementar:
- Crea un nuevo menú con todas las jerarquías (elementos y subelementos).
- A la jerarquía «padre» le añades la Clase CSS «mega-menu» y en la etiqueta de navegación indicas el nombre que quieres que aparezca en el desplegable.
- Selecciona este menú como «Menú Principal»
- En el personalizador de temas de Divi, selecciona como formato de cabecera «Por defecto».
- Personaliza el diseño y el estilo de este Mega Menú.
PASO 2: Elige las imágenes para el Menú desplegable
Es el momento de elegir las imágenes para la cabecera de tu Mega Menú de Divi.
Lo ideal es que cada imagen tenga unas dimensiones de 500×300 y que represente la temática de la que habla ese bloque, ya sea categoría, productos, servicios…
También convendría reducirlas a tamaño web para que no ralenticen la velocidad de carga y sin llegar a perder calidad.
Una vez tengas las imágenes, súbelas a Medios de WordPress.
PASO 3: Añade las imágenes del Menú desplegable
A continuación, para poner las imágenes en el Mega Menú de Divi, ve a Apariencia -> Menús.
Y configura cada elemento superior del menú de la siguiente forma:
- URL: la url a la que dirige este elemento.
- ETIQUETA DE NAVEGACIÓN: copia el siguiente código:
<img src=ENLACE DE LA IMAGEN alt=”Alternate Text” width=”100%” /> TÍTULO ELEMENTO
Y sustituye «ENLACE DE LA IMAGEN» por el enlace en Medios de WordPress y «TÍTULO ELEMENTO» por el título que aparecerá en la cabecera. - CLASE CSS: escribe «mega-link».
Te lo muestro paso por paso en capturas de pantalla:
Recuerda hacer estos pasos en cada elemento superior del Menú Principal.
La configuración del Menú se quedaría así:
Guarda cambios y comprueba que las imágenes de la cabecera de Divi aparecen correctamente.
El ejemplo real que he estado haciendo en este caso se quedaría así:
Además, como la plantilla Divi es totalmente responsive, tu Mega Menú con imágenes en la parte superior también se adaptará a dispositivos móviles de la forma habitual.
Con esta forma tan sencilla de poner imágenes en el Menú de cabecera de Divi, habrás diseñado una cabecera distinta a la estándar de esta plantilla y además, las secciones importantes de tu web quedarán organizadas y muy visuales para el usuario.
