How to insert images into the Mega Divi Menu

Updated on 21/05/2019 | Published on 04/11/2017 | 10 comments

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

No need to know how to code....

The header of a site is an essential design element. Divi offers different types of headers that you can customize according 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"

Here is the program of this tutorial:

Advertisement: This article contains affiliate links that you will easily recognize. 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 elements and is displayed horizontally below the main menu.

Its purpose is to help Internet users find what they are looking for more easily and saves them a lot of time.

In general, mega menus are widely used in e-commerce to improve conversion. This is what this explains to us Mega Menu definition.

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 it, it is very important for the experience of your users but also for it 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 give you an appointment in the back office of your site, at the tab Appearance > Menu.

If you do not yet have an existing menu, you will need to fill in the field "Menu name" (name it as you wish, for example "main menu") and then click on "Create menu".

Créer votre premier menu
Creating your first menu

Then, you will just have to tick the pages in the left box and click on "add to the menu".

They will be positioned on the right, it will be the structure of your menu: the highest element being the element that will be the most left of your navigation - the lowest element will be the most right element.

You will drag these different elements from top to bottom or bottom to top to organize your menu as you wish.

Définir la structure du menu principal
Define the structure of your main menu by checking the elements on the left and adding them to the structure of your menu 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 box "main menu" at the bottom of the menu creation page. Don't forget to save.

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

=> Warning, if you move 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 "All for Divi" has 4 sub-elements.

Discover all you can do with the Divi theme

Step 2: Convert your classic menu to Mega Menu

There, your main menu is created. You will be able to convert a main element into a "mega menu" but for that, it will have to have several sub-elements (very important!), otherwise, it has no interest...

As a reminder, a mega menu displays the elements of a horizontal navigation rather than a vertical one. This will be perfect for inserting images in the navigation, but how do you do it?

  1. Always in the back office and always in the tab Appearance > Menulocate the tab "screen option" at the very top of your page, on the right.
  2. Expand this menu and check the box "CSS classes"
Classe CSS pour mega menu
Enable CSS classes to use the Mega Menu function

Then open the menu item you want convert to Mega Menu and assign it the CSS class "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: Insert images into the Mega Divi Menu

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

1 - Uploads of your images

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

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

For this, you can go to Media > Libraryyou will click 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
Retrieve the URL of your image for the Mega Menu

2 - Create custom links

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

=> In the field Web addressyou 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 way is to go to the page in question and copy/paste its URL, it will avoid errors.

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

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

Here is an image of what it looks like:

Liens personnalisés Méga Menu Divi
Insert custom links in the Divi main menu

=> Repeat these steps as many times as necessary and don't forget to save your changes...

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

Finally, 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 join the pages you have set up.

Here is the result:

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

Also to be read: How to make Divi settings?

To conclude...

So it's not that complicated to customize DIVI !

In addition, this tutorial does not use complex code, everything is available from your administration! So, at work 😉

Need more resources on Divi? Visit ElegantThemes' blog full of ideas and tutorials!

image menu divi
Divi tutorial : images in mega menu

You should like it too:

Responsive Design Divi : comment gérer les différentes tailles d’écran ?

Responsive Design Divi: how to manage different screen sizes?

Many users are asking the question: how can Divi's Responsive Design be optimized? Many options are available natively in Divi to enhance the design on your various screens. But sometimes you will also have to modify the Media Queries. Find out how in this complete guide!

Créez un bouton « retour vers le haut » personnalisé en quelques clics !

Create a custom "back up" button in just a few clicks!

When I tell you we can do anything with Divi! No need to code or install many plugins... You just have to know where to look: the options are there! In this article, I'll show you how to create a back-to-top button in just a few clicks!

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

Soumettre un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

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

Pin It on Pinterest

Shares
Share This