How to insert images into the mega menu of Divi

How to insert images in the Divi Mega Menu?

Updated on 03/06/24

1200 words

4 minutes of reading

This article contains affiliate links recognizable by the percentage icon (%) → I am an affiliate link

If you activate the Mega Divi Menu, you can there insert images to get a very nice effect. That's what I suggest you do, and I'll explain all this 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 an essential design element. Divi offers different types of headers you can customize according to your needs.

Insert images in the main menu of Divi
Here is an example of a main menu (Mega Menu style navigation) containing images to illustrate my blog categories

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

Here is the program of this tutorial:

What is a Mega Menu?

One mega menu is a drop-down menu that consists of many elements and who displays horizontally under the main menu.

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

Generally, mega menus are widely used in e-commerce to improve conversion. That's what this definition of the Mega Menu.

Step 1 – Creating your main menu

First of all, create a mega menu with images, you will need to create pages as well as a main menu...

Here are the steps:

1 – Creating Your Pages

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

I advise you to think carefully about the structure of this one, it is very important for the experience of your users but also for on Natural SEO on your site.

2 - Structure of your main menu

Once these pages have been created, you can create your menu structure main. For this, I give you an appointment in the back office of your site, on the tab Appearance > Menu.

If you still don't have any existing menu, you will have to fill in the field « Menu name » (name it as you wish, for example Main menu) then you will click on "Create menu".

Create your first menu
Create your first menu

Then you'll just have to check the pages in the left box and click on "Add to menu".

They will go to the right, it will be the structure of your menu: The highest element being the element that will be the leftmost of your navigation – the lowest element will be the most rightmost element.

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

Set the main menu structure
Set the structure of your main menu by checking the items on the left and adding them in the structure of your menu, on the right

Finally, you assign a location for the menu you just created, as it is your Main navigation, you will check the box Main menu which is at the bottom of the menu creation page. Don't forget to save.

Assign Main Menu
Do not forget to assign your menu location 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 blog Astuces Divi, the element "Everything for Divi" has 4 sub-elements.

Discover all you can do with the theme Divi

Step 2 – Convert your classic menu to Mega Menu

There you go. your main menu is created. You will be able to convert a main element to « mega menu » But for that, it will have to be owns several sub-elements (very important!), otherwise, it has no interest...

As a reminder, mega menu displays elements of horizontal navigation rather than vertical navigation. This will be perfect to insert images into the navigation, but how to do it?

  1. Always in the backoffice and always in the tab Appearance > Menu, find the tab "screen option" located at the top of your page, on the right.
  2. Develop this menu and check the box CSS classes
CSS class for mega menu
Enable CSS classes to use the Mega Menu function

Then open the item of your menu you want convert to Mega Menu and assign it the CSS class "mega-menu"

Assign class mega-menu
Attribute the class mega-menu

Save your changes

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

Step 3 – Insert images in the Mega Divi Menu

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

1 – Uploads of your images

The first thing you will have to do is to download images, which will illustrate your menu, in the media library of your site on the tab Media > Add.

Once done, you can recover the URL of each image to be used in your menu.

For this, you can go to Media > Library, you will click on the image in question and you will select its URL (ctrl+A then ctrl+C or cmd+A then cmd+C).

Image URL for Mega Menu
Recover the URL of your image for the Mega Menu

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

2 - Create custom links

You will go back to the tab Appearance > Menu to insert these images into the Mega Menu of Divi. You will choose to insert a « Custom Link » to your menu.

=> In the field Web address, you 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:


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

=> In the field « link text » you insert the link below taking care to modify the elements in bold Depending on your site:

<img src="text-alt-de-votre-image" src="url-de-l'image-récupérée-à-l'étape-1" width="100%"/>your navigation text

Here's what it looks like:

Custom links Mega Menu Divi
Insert custom links in the main menu of Divi

=> Repeat these steps as many times as necessary and remember to save your changes...

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

Finally, you can return to the "front" side of your site (visitor side), reload the page: the images should appear in your Mega Menu and by clicking on it, you should join the pages you have set up.

Here's the result:

Insert images in the Mega Divi Menu

Also read: How to make the Divi settings?

To conclude...

So it's not that complicated to Customize DIVI !

Besides, 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 tutos! Or learn how to effectively use this theme through my training Divi !

image menu divi

Get Divi

Divi training

Ebook Divi PDF

Free tips

Divi Quiz

Live coaching

icon 256x256

Proudly translated by wpLingua, the translation extension for WordPress That I develop! SEO-Friendly / Automatic / Editable


  1. ludovic
  2. Lycia
  3. pascal
  4. Guiom
  5. Lycia
  6. voilier
  7. Kevin
  8. Lycia Diaz
  9. Lycia Diaz
  10. Kevin
  11. Vincent
  12. Lycia Diaz
  13. Bruno
  14. Lycia Diaz
  15. alchmachine
  16. Lycia Diaz
  17. Patricia
  18. Paul
  19. Lycia Diaz
  20. Lycia Diaz
  21. Elodie
  22. Lycia Diaz
  23. Pat
  24. Lycia Diaz
  25. Pat

Submit a comment

Your email address will not be published. Required fields are indicated with *

This site uses Akismet to reduce undesirables. Learn more about how your feedback data is used.