Comment inserer des images dans le mega menu de Divi

Cómo insertar imágenes en el Mega Menú de Divi

Actualizado el 07/04/2021 | Publicado el 04/11/2017 | 25 comentarios

1.094 palabras

4

Si activas el Mega Menú de Divi, puedes insertar imágenes para conseguir un efecto muy bonito. Esto es lo que te propongo hacer y te lo explico todo en este tutorial: cómo insertar imágenes en el Mega Menú de Divi.

No hace falta saber codificar...

La cabecera de un sitio es un elemento de diseño clave. Divi ofrece diferentes tipos de cabeceras que puede personalizar según sus necesidades.

Insérer des images dans le menu principal de Divi
Aquí hay un ejemplo de un menú principal (navegación estilo Mega Menú) que contiene imágenes para ilustrar las categorías de mi blog

¿Sabías que puedes probar Divi gratis? Ir a esta página y haga clic en "PRUEBA GRATUITA

Este es el programa de este tutorial:

Aviso: este artículo contiene enlaces de afiliación que reconocerá 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 megamenú 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 lo que busca más fácilmente y ahorrarle mucho tiempo.

Por lo general, los mega menús se utilizan mucho en el comercio electrónico para mejorar la conversión. Esto es lo que este definición del Mega Menú.

Paso 1 - Creación del menú principal

En primer lugar, para crear un mega menú con imágenes, deberá crear páginas y un menú principal...

Estos son los pasos:

1 - Crear sus páginas

En primer lugar, creará las diferentes páginas que constituirán la estructura de árbol de su sitio.

Te aconsejo que pienses bien en la estructura de tu web, es muy importante para la experiencia de tus usuarios pero también para el referencia natural de su sitio.

2 - Estructura de su menú principal

Una vez creadas estas páginas, puede crear la estructura de su menú principal. Para ello, le invito a ir al backoffice de su sitio, a la pestaña Apariencia > Menú.

Si aún no tiene ningún menú existente, tendrá que rellenar el campo "Nombre del menú (nómbrelo como desee, por ejemplo, "menú principal") y luego haga clic en "Crear menú.

Créer votre premier menu
Crear su primer menú

A continuación, sólo tendrá que marcar las páginas presentes en el cuadro de la izquierda y hacer clic en Haga clic en "añadir al menú"..

Se situarán en el lado derecho de la estructura de su menú: el elemento superior será el más a la izquierda de su navegación - el elemento inferior será el más ala derecha.

Arrastre estos diferentes elementos hacia arriba y hacia abajo para organizar su menú como desee.

Définir la structure du menu principal
Defina la estructura de su menú principal marcando los elementos de la izquierda y añadiéndolos a la estructura de su menú a la derecha

Por último, asignará una ubicación para el menú que acaba de crear, ya que se trata de su navegación principal, marcará el " A continuación, asignará una ubicación para el menú que acaba de crear. en la parte inferior de la página de creación del menú. No te olvides de ahorrar.

Assigner le menu principal
No olvide establecer la ubicación de su menú en el "menú principal

=> Cuidado, si se desplazan elementos hacia la derecha, estos elementos se convertirán en subelementos de un elemento principal. A continuación, puede añadir tantos subelementos como sea necesario.

Por ejemplo, en el blog Divi Tips, el "Todo para Divi tiene 4 subelementos.

Descubra lo que puede hacer con el tema Divi

Paso 2 - Convertir su menú clásico en un Mega Menú

Eso es todo, tu menú principal está creado. Podrá convertir un elemento del menú principal en un "mega menú ", pero para ello deberá contener varios subelementos (¡muy importante!), de lo contrario no tiene sentido...

Como recordatorio, un mega menú muestra los elementos de una navegación horizontalmente en lugar de verticalmente. Esto será perfecto para insertar imágenes en la navegación, pero ¿cómo se hace?

  1. Todavía en el backoffice y todavía en la ficha Apariencia > Menúbusque la pestaña Menú "Opción de pantalla". situada en la parte superior de su página, a la derecha.
  2. Despliegue este menú y marque la casilla "Clases CSS
Classe CSS pour mega menu
Activar las clases CSS para poder utilizar la función de Mega Menú

A continuación, abra la opción de menú que desee convertir a Mega Menu y dale la clase CSS Haga clic en "mega-menú".

Attribuer la classe mega-menu
Asignar la clase de mega-menú

Guardar los cambios

Para consultar la documentación oficial sobre el creación de un mega menú, haga clic aquí.

Paso 3 - Insertar imágenes en el Mega Menú de Divi

Estas imágenes serán visibles desde su navegación principal...

1 - Subir las imágenes

Lo primero que tendrá que hacer es subir las imágenes, que ilustrarán su menú, a la biblioteca multimedia de su sitio en el Medios de comunicación > Añadir.

Una vez hecho esto, puede recuperar la URL de cada imagen para utilizarla en su menú.

Para ello, puede ir a Medios de comunicación > BibliotecaHaz clic en la imagen en cuestión y selecciona su URL (ctrl+A y luego ctrl+C o cmd+A y luego cmd+C).

URL image pour le Mega Menu
Obtenga la URL de su imagen para el Mega Menú

Lea también este artículo que explica cómo insertar iconos al lado o en lugar de texto en el menú.

2 - Creación de enlaces personalizados

Volverá a la Apariencia > Menú para insertar estas imágenes en el Mega Menú de Divi. Usted elegirá insertar un Menú "Enlace personalizado" a su menú.

=> En el campo Dirección webse insertará el enlace de la página a la que debe llevar el elemento de 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, esto evitará errores.

=> En el campo En el campo "texto del enlace" inserte el enlace que aparece a continuación, teniendo cuidado de modificar los elementos en negrita de acuerdo con su sitio:

<strong>text-alt-de-votre-image</strong>le-texte-de-votre-navigation

Aquí hay una foto de cómo se ve:

Liens personnalisés Méga Menu Divi
Inserción de enlaces personalizados en el menú principal de Divi

=> Repite estos pasos tantas veces como sea necesario y no olvides guardar los cambios...

Paso 4: Compruebe la representación final de su Mega Menú en imágenes

Para terminar, puedes volver al lado "Front" de tu sitio (lado del visitante), recargar la página: las imágenes deberían aparecer en tu Mega Menú y al hacer clic en ellas, deberías llegar a las páginas que has configurado.

Aquí está el resultado:

Insérer des images dans le Méga Menu de Divi

Lea también: ¿Cómo puedo hacer ajustes en Divi?

Para concluir...

Por lo tanto, no es tan complicado personalizar DIVI !

Además, este tutorial no utiliza ningún código complejo, ¡todo está disponible desde su administración! Así que manos a la obra 😉 .

¿Necesitas más recursos sobre Divi? Visite el blog de ElegantThemes que está lleno de ideas y tutoriales. O aprenda a utilizar este tema de forma eficaz con mi formación en Divi !

image menu divi
obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton

Puede que a ti también te guste:

Comment changer une image au survol de la souris ?

¿Cómo cambiar una imagen al pasar el ratón por encima?

Si no estás usando las opciones de hover disponibles en Divi, ¡te estás perdiendo algo! Aquí tienes un ejemplo de cómo utilizarlos que te puede resultar útil. En este tutorial y vídeo, te muestro cómo cambiar una imagen al pasar el ratón por encima.

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Página de error 404 personalizada: con y sin el Divi Theme Builder

¿Ha pensado en personalizar la página de error 404 de su sitio web? ¿No? Pues debería hacerlo: no sólo es fácil de hacer, sino que también podría reducir su tasa de rebote. La idea es mantener al usuario que pasa por su sitio en el mismo. Descubre el tutorial paso a paso + vídeo.

25 Commentaires

  1. ludovic

    bonjour

    merci pour ce tuto . une question avez vous un conseil sur la taille des images ?

  2. Lycia

    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 !

  3. pascal

    Merci pour l’infos 😉

  4. Guiom

    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 ?!

  5. Lycia

    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.

  6. voilier

    Comment faire pour que le mega-menu se referme plus lentement en s’enroulant ?
    Merci

  7. Kevin

    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.

  8. Lycia Diaz

    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…

  9. Lycia Diaz

    Salut ! Je ne sais pas comment tu pourrais faire ça… Et il n’y a pas d’options en natif. Désolée.

  10. Kevin

    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 !

  11. Vincent

    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

  12. Lycia Diaz

    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.

  13. Bruno

    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,

  14. Lycia Diaz

    Non Bruno.. je ne sais pas…. désolée

  15. alchmachine

    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.

  16. Lycia Diaz

    Je crois que c’est natif. Un mega menu bascule en menu normal en smartphone. C’est justement le responsive qui fait ça

  17. Patricia

    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.

  18. Paul

    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

  19. Lycia Diaz

    Salut Paul, c’est peut-être une histoire de taille d’image. As-tu essayé avec des images plus petites ?

  20. Lycia Diaz

    Salut Patricia.
    Oui effectivement, il faudrait faire une développement spécifique en CSS pour réaliser ce que tu souhaites.

  21. Elodie

    Hello Lycia !

    Merci pour ce tuto ! ^^

    Pour aller un petit peu plus loin, comment est-il possible de mettre l’image en dessous du titre de navigation ?

    Bonne continuation !

  22. Lycia Diaz

    Elodie, avec du CSS, c’est peut-être possible… Il faudrait bidouiller et chercher.

  23. Pat

    Super tuto , très utile , comme toujours ! 🙂

  24. Lycia Diaz

    Merci Pat

  25. Pat

    Hello.
    Je me pose quelques questions sur ce que ça donne sur smartphone.
    Il ne faudrait pas que les images soient cachées ?
    J’ai un peu personnalisé le tout et au final j’ai tous mes sous menus qui sont « expanded » par défaut sur smartphone ?
    Si vous avez une idée, d’avance merci !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

¡Nueva formación en Divi!

55 vídeos para dominar el Divi Visual Builder como un profesional: ⏱ 3h30 de teoría + 👩🏻💻 6h00 de aplicación práctica + 🤝 30min. de coaching individual en visio.

(Formación subvencionable por el CPF)

Pínchalo en Pinterest

Acciones
Comparte esto