Blog de Divi en español

Diseña tu propia web con la plantilla y constructor web Divi, de Elegant Themes.

¿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:

  1. Crea un nuevo menú con todas las jerarquías (elementos y subelementos).
  2. 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.
  3. Selecciona este menú como “Menú Principal”
  4. En el personalizador de temas de Divi, selecciona como formato de cabecera “Por defecto”.
  5. Personaliza el diseño y el estilo de este Mega Menú.

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

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.

imágenes cabecera web

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:

cómo poner imágenes cabecera web

Recuerda hacer estos pasos en cada elemento superior del Menú Principal.

La configuración del Menú se quedaría así:

código poner imágenes menú cabecera divi

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í:

divi imágenes cabecera

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.

divi imágenes menú responsive

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.

También te puede interesar...

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
¡GRATIS!Esta guía con 7 Trucos de diseño para Divi

¡GRATIS!

Esta guía con 7 Trucos de diseño para Divi

Obtén, de forma totalmente gratuita, estos trucos de diseño que la plantilla Divi no incluye y crea webs únicas.

¡Perfecto! Ahora VE A TU BANDEJA DE ENTRADA y abre el email que te he enviado desde DIVESP. ¡Gracias!