Comment inserer des images dans le mega menu de Divi

How to insert images in the Divi Mega Menu

Updated on 07/04/2021 | Published on 04/11/2017 | 25 comments

1,094 words

4

If you activate Divi's Mega Menu, you can insert images to get a very nice effect. This is what I suggest you do and I explain it all in this tutorial: how to insert images in the Divi Mega Menu.

No need to know how to code...

The header of a site is a key design element. Divi offers different types of headers which you can customise to your needs.

Insérer des images dans le menu principal de Divi
Here is an example of a main menu (Mega Menu style navigation) containing images to illustrate my blog categories

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

This is the program for this tutorial:

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

What is a Mega Menu?

A mega menu is a drop-down menu that consists of many items and is displayed horizontally below the main menu.

It aims to help the user find what he is looking for more easily and saves him a lot of time.

As a rule, mega menus are widely used in e-commerce to improve conversion. This is what this definition of the Mega Menu.

Step 1 - Creating your main menu

First, to create a mega menu with images, you will need to create pages and a main menu...

Here are the steps:

1 - Creating your pages

First of all, you will create the different pages that will constitute the tree structure of your site.

I advise you to think carefully about the structure of your website, it is very important for the experience of your users but also for the natural referencing of your site.

2 - Structure of your main menu

Once these pages have been created, you can create the structure of your main menu. To do this, I invite you to go to the backoffice of your site, to the tab Appearance > Menu.

If you don't have any existing menu yet, you will have to fill in the field "Name of the menu (name it as you wish, e.g. "main menu") and then click on "Create menu.

Créer votre premier menu
Creating your first menu

Then, you will just have to check the pages present in the left-hand box and click on Click on "add to menu"..

They will be positioned on the right-hand side of your menu structure: the topmost item will be the item furthest to the left of your navigation - the bottom item will be the item furthest to the right.

You drag these different items up and down to organise your menu as you wish.

Définir la structure du menu principal
Define the structure of your main menu by ticking the items on the left and adding them to your menu structure on the right

Finally, you will assign a location for the menu you have just created, as this is your main navigation, you will check the "You will then assign a location for the menu you have just created. box at the bottom of the menu creation page. Don't forget to save.

Assigner le menu principal
Don't forget to set the location of your menu to "main menu

=> Be careful, if you shift elements to the right, these elements will become sub-elements of a main element. You can then add as many sub-elements as necessary.

For example, in the Divi Tips blog, the "Everything for Divi element has 4 sub-elements.

Find out what you can do with the Divi theme

Step 2 - Converting your classic menu to a Mega Menu

That's it, your main menu is created. You will be able to convert a main menu item into a "mega menu", but to do so, it will have to contain several sub-items (very important!), otherwise there is no point...

As a reminder, a mega menu displays the elements of a navigation horizontally rather than vertically. This will be perfect for inserting images into the navigation, but how do you do this?

  1. Still in the backoffice and still in the tab Appearance > Menutab, look for the "Screen option" menu tab located at the top of your page, on the right.
  2. Expand this menu and check the box "CSS classes
Classe CSS pour mega menu
Activate the CSS classes to be able to use the Mega Menu function

Next, open the menu item you want convert to Mega Menu and give it the CSS class Click on "mega-menu".

Attribuer la classe mega-menu
Assign the mega-menu class

Save your changes

To consult the official documentation on the creation of a mega menu, click here.

Step 3 - Inserting images into the Divi Mega Menu

These images will be visible from your main navigation...

1 - Uploading your images

The first thing you will need to do is upload the images, which will illustrate your menu, to your site's media library in the Media > Add.

Once this is done, you can retrieve the URL of each image to use in your menu.

To do this, you can go to Media > LibraryClick on the image in question and select its URL (ctrl+A then ctrl+C or cmd+A then cmd+C).

URL image pour le Mega Menu
Get the URL of your image for the Mega Menu

Read also this article which explains how to insert icons next to or instead of text in the menu.

2 - Creating custom links

You will return to the Appearance > Menu tab to insert these images into the Divi Mega Menu. You will choose to insert a "Custom Link" menu to your menu.

=> In the field Web addressfield, you will insert the link of the page to which the menu item should lead. For example, if I want to send my visitors to a category on my site, I will enter the following address:

https://astucesdivi.com/category/debuter-avec-divi/

The best thing to do is to go to the page in question and copy/paste its URL, this will avoid mistakes.

=> In the field In the "link text" field you insert the link below, taking care to modify the elements in bold according to your site:

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

Here is a picture of what it looks like:

Liens personnalisés Méga Menu Divi
Inserting custom links in Divi's main menu

=> Repeat these steps as many times as necessary and do not forget to save your changes...

Step 4: Check the final rendering of your Mega Menu in pictures

To finish, you can go back to the "Front" side of your site (visitor side), reload the page: the images should appear in your Mega Menu and by clicking on them, you should reach the pages you have set up.

Here is the result:

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

Read also: How do I make settings in Divi?

To conclude...

So, it's not so complicated to customise DIVI !

Plus, this tutorial doesn't use any complex code, everything is available from your administration! So let's get to work 😉

Need more resources on Divi? Visit the ElegantThemes blog which is full of ideas and tutorials! Or learn how to use this theme effectively with my Divi training !

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

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

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

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

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.

New Divi training!

55 videos to master the Divi Visual Builder like a pro: ⏱ 3h30 of theory + 👩🏻💻 6h00 of practical application + 🤝 30min. of individual coaching in visio.

(CPF eligible training)

Pin It on Pinterest

Shares
Share This