Si activa el menú Divi Mega, podrá insertar imágenes para obtener un efecto muy agradable. Esto es lo que te propongo y te explico todo esto en este tutorial: cómo insertar imágenes en el Divi Mega Menú.
No necesitas saber cómo codificar...
El encabezamiento de un sitio es un elemento de diseño esencial. Divi ofrece diferentes tipos de encabezados que puedes personalizar según tus necesidades.
¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "TRY IT FOR FREE".
Aquí está el programa para este tutorial:
- ¿Qué es un Mega Menú?
- Paso 1: Creación del menú principal
- Paso 2: Convertir el menú clásico en el menú Mega Divi
- Paso 3: Insertar imágenes en el Mega Menú
- Paso 4: comprobar la representación final
- En conclusión...
Publicidad: este artículo contiene enlaces de afiliados que reconocerán fácilmente. Los enlaces clásicos están en púrpura y los enlaces patrocinados están en rosa.
¿Qué es un Mega Menú?
Un mega menú es un menú desplegable que consta de muchos elementos y se muestra horizontalmente debajo del menú principal.
Su objetivo es ayudar al usuario a encontrar más fácilmente lo que busca y le ahorra mucho tiempo.
Por regla general, los mega menús se utilizan ampliamente en el comercio electrónico para mejorar la conversión. Esto es lo que este Definición del Mega Menú.
Paso 1: Crear el menú principal
Primero, para crear un mega menú con imágenes, necesitarás crear páginas así como un menú principal.
Aquí están los pasos:
1 - Creación de sus páginas
En primer lugar, creará las diferentes páginas que constituirán la estructura de árbol de su sitio.
Le aconsejo que piense cuidadosamente en la estructura de este, es muy importante para la experiencia de sus usuarios pero también para el referencia natural de su sitio.
2 - Estructura de su menú principal
Una vez creadas estas páginas, podrás crear la estructura de tu menú principal. Para hacer esto, te doy acceso al backoffice de tu sitio, a la pestaña Apariencia > Menú.
Si aún no tienes un menú existente, tendrás que rellenar el campo "Nombre del menú" (nómbrelo como desee, por ejemplo "menú principal") y luego haga clic en "Menú de creación".
Entonces, sólo tienes que revisar las páginas en el inserto de la izquierda y hacer clic en "añadir al menú".
Irá a la derecha, esta será la estructura de su menú: el elemento más alto será el que esté más a la izquierda de su navegación - el elemento más bajo será el que esté más a la derecha.
Arrastrarás estos diferentes elementos hacia arriba y hacia abajo o de abajo hacia arriba para organizar tu menú como quieras.
Finalmente, asignará una ubicación para el menú que acaba de crear, ya que esta es su navegación principal, marcará la casilla "menú principal" en la parte inferior de la página de creación del menú. No te olvides de ahorrar.
=> Ten cuidado, si cambias los elementos a la derecha, estos elementos se convertirán en subelementos de un elemento principal. Entonces puedes añadir tantos subelementos como necesites.
Por ejemplo, en el blog Divi Tips, el elemento "Todo para la División" tiene 4 subelementos.
Descubre todo lo que puedes hacer con el tema Divi
Paso 2: Convierte tu Menú Clásico en Mega Menú
Eso es todo, se crea el menú principal. Podrás convertir un elemento principal en un "mega menú" pero para ello, tendrá que tener varios subelementos (¡muy importantes!), de lo contrario, es inútil...
Como recordatorio, un mega menú muestra los elementos de una navegación horizontal en lugar de una vertical. Esto será perfecto para insertar imágenes en la navegación, pero ¿cómo hacerlo?
- Siempre en el backoffice y siempre en la pestaña Apariencia > Menúlocalizando la "opción de pantalla" situado en la parte superior de su página, a la derecha.
- Expande este menú y marca la casilla "Clases de CSS
Entonces, abre el elemento del menú que quieras convertir a Mega Menú y asignarle la clase CSS "mega-menú"
Guarda tus cambios
Para la documentación oficial sobre el la creación de un mega menú, haga clic aquí.
Paso 3: Insertar imágenes en el menú de Divi Mega
Estas imágenes serán visibles desde su navegación principal...
1 - Cargas de sus imágenes
Lo primero que tendrá que hacer es subir las imágenes, que ilustrarán su menú, a la biblioteca de medios de su sitio en el Medios de comunicación > Añadir.
Una vez hecho esto, puedes recuperar la URL de cada imagen para usarla en tu menú.
Para hacer esto, puedes ir a Medios de comunicación > Bibliotecahará clic en la imagen en cuestión y seleccionará su URL (ctrl+A y luego ctrl+C o cmd+A y luego cmd+C).
2 - Crear enlaces personalizados
Volverás a la Apariencia > Menú para insertar estas imágenes en el Mega Menú de Divi. Elegirás insertar un "Enlace personalizado" a su menú.
=> En el campo Dirección webAl hacer clic en un elemento del menú, se insertará el enlace de la página a la que debe llevar el elemento del menú. Por ejemplo, si quiero enviar a mis visitantes a una categoría de mi sitio, introduciré la siguiente dirección:
https://astucesdivi.com/category/debuter-avec-divi/
Lo mejor es ir a la página en cuestión y copiar/pegar su URL, así se evitarán errores.
=> En el campo "Texto de enlace insertarás el enlace de abajo teniendo cuidado de modificar los elementos en negrita según tu sitio:
le-texte-de-votre-navigation
Aquí hay una foto de cómo se ve:
=> Repite estos pasos tantas veces como sea necesario y no te olvides de guardar los cambios .
Paso 4: Revisar el renderizado final de su Mega Menú en forma de imagen
Finalmente, puedes volver al lado "Frontal" de tu sitio (lado de los visitantes), recargar la página: las imágenes deben aparecer en tu Mega Menú y al hacer clic en ellas, debes unirte a las páginas que has configurado.
Aquí está el resultado:
También lee: ¿Cómo hago la configuración de la Divi?
En conclusión...
Así que no es tan complicado personalizar DIVI !
Además, este tutorial no utiliza código complejo, todo está disponible en su administración! Así que pongámonos a trabajar 😉
¿Necesitas más recursos sobre Divi? Visita el blog de ElegantThemes lleno de ideas y tutos! O aprender a utilizar este tema de manera efectiva gracias a mi entrenamiento Divi !
bonjour
merci pour ce tuto . une question avez vous un conseil sur la taille des images ?
Bonsoir Ludovic, pour répondre à ta question, j’ai utilisé des images 800px par 800px pour ce tutoriel (format carré de type 1:1). Pour être honnête, je pense que la moitié suffirait (400x400px) étant donné que c’est un menu et que les images n’ont pas besoin d’être grandes. Il faudrait tester avec des formats paysages (3:2) mais je pense que ça marchera également. N’hésite pas à donner un retour si tu testes, ça pourrait aider d’autre personnes. Bonne continuation et bonnes fêtes à toi !
Merci pour l’infos 😉
Bonjour,
Merci pour votre article, j’avais appliqué cette astuce il y a 1an pour un site et cela avait parfaitement fonctionné.
Ceci dit récemment j’ai souhaité a nouveau l’utiliser et là plus moyen. Une fois le menu enregistré la balise s’efface tout simplement du champ et impossible de forcer l’effet.
J’ai vérifié et revérifié si ma balise, mes liens, mes classes étaient justes et rien n’y fait cette astuce au départ si utile n’arrive plus à s’intégrer.
Comble de l’histoire, je suis retourné sur mon ancien site et cela était toujours opérationnel, sans rien changer des mes balises en cliquant sur « enregistrer le menu » l’affichage des images à également disparu..
Suis je le seul à avoir ce constat ?!
Bonsoir, Guillaume,
C’est étrange car mon tuto je l’ai testé au début sur Astuces Divi et mon blog n’a que 6 mois. Je ne pense pas qu’une mise à jour de Divi ait pu casser le code à ce point ? Du coup, je ne peux pas te confirmer cela, car ce code n’est plus actif, ni ici, ni sur d’autres sites que je maintient. Il faudrait voir alors si cette mésaventure est arrivée à d’autres lecteurs… Bonne continuation.
Comment faire pour que le mega-menu se referme plus lentement en s’enroulant ?
Merci
Bonjour Lycia.
Merci pour toute la bonne information que vous partagez. Cela m’a déjà beaucoup aidé.
Je viens de réaliser votre tuto sur la création du mega menu sur divi avec l’ajout d’images dans celui-ci et ça marche plutôt bien.
Le seul problème est que je n’arrive pas à aligner le texte des images et les images entre elles.
Auriez vous une solution ? J’ai déjà pas mal cherché sur la toile mais je n’ai pas encore trouvé jusqu’à présent.
Salut Kévin et merci !
L’alignement doit certainement pouvoir se régler avec un peu de CSS. Comme chaque site est différent, cela peut changer. As-tu regardé sur des sites avec des tutos CSS ? Regarde peut-être du côté de la FLEXBOX, généralement ça marche bien pour aligner. J’espère que tu vas trouver…
Salut ! Je ne sais pas comment tu pourrais faire ça… Et il n’y a pas d’options en natif. Désolée.
Merci beaucoup ! J’ai déjà réussi à améliorer la situation grâce à une vidéo YouTube, mais je vais chercher et je suis sur que je vais finir par trouver. Bonne continuation !
Bonjour et merci pour ce super tuto que je garde précieusement en signet 🙂 .
J’aimerais avoir l’image de mon slider plein écran qui englobe le menu sans que celui ci disparaisse et je ne trouve pas comment faire . Comme par exemple sur ce thème https://themeisle.com/demo/?theme=ShopIsle%20Pro
une idée ?
Merci d’avance
Salut Vincent.
Tu devrais construire ton Header avec le thème Builder, tu pourras faire ce que tu veux avec. Tu dois mettre une section avec une image en arrière-plan et dans cette section tu ajoutes une module menu.
Bonjour et merci pour votre tutoriel.
Savez-vous comment je dois faire pour avoir 6 colonnes dans mon mega menu ? J’ai déjà trouvé des solutions qui ne fonctionnent malheureusement pas pour moi.
Merci d’avance,
Non Bruno.. je ne sais pas…. désolée
Bonjour,
Comment faire pour que le mega menu soit responsive ?
en ce qui me concerne lorsque je passe en mode portable, le mega menu n’existe plus, mais laisse place au menu classique.
Je crois que c’est natif. Un mega menu bascule en menu normal en smartphone. C’est justement le responsive qui fait ça
Bonjour et bravo pour votre apport à la communauté Divi.
Sur votre exemple, serait-il possible que les titres des pages soient placés sur les images, (avec quelques lignes de CSS peut-être ?).
Merci par avance si vous savez comment faire.
Bonjour,
J’ai bien crée mon mega-menu comme vous l’avez expliqué. Cependant mon menu principal composé de 4 éléments apparaît en décalé maintenant sur mon site. Savez vous comment on peu gérer la disposition de l’affichage du menu ?
Merci pour l’aide,
Paul
Salut Paul, c’est peut-être une histoire de taille d’image. As-tu essayé avec des images plus petites ?
Salut Patricia.
Oui effectivement, il faudrait faire une développement spécifique en CSS pour réaliser ce que tu souhaites.