If you activate the Divi 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 that you can customize to your needs.
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 for this tutorial:
- What is a Mega Menu?
- Step 1 - Creating your main menu
- Step 2 - Convert your classic menu to a Mega Menu
- Step 3 - Inserting images into the Divi Mega Menu
- Step 4: Check the final rendering of your Mega Menu in pictures
- To conclude...
Announcement: 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 is composed 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 general rule, mega menus are used extensively 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 it, 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. For this, I give you an appointment in the backoffice of your site, in the tab Appearance > Menu.
If you don't have any existing menu yet, you will have to fill in the Click on "Menu name". (name it as you wish, for example "main menu") and then click on "Create the menu"..
Then, you will just have to check the pages present in the left sidebar and to click on "Add to the menu"..
They will be positioned on the right, this will be the structure of your menu: the highest item will be the one on the left of your navigation - the lowest item will be the one on the right.
You will drag these different items up and down to organize your menu as you wish.
Finally, you will assign a location for the menu you just created, as it is your main navigation, you will check the You will see the "main menu" box. box at the bottom of the menu creation page. Don't forget to save.
=> 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.
Step 2 - Convert 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 for that, it will have to contain several sub-items (very important!), otherwise, it is useless...
As a reminder, a mega menu displays the elements of a navigation horizontally rather than vertically. This will be perfect for inserting images in the navigation, but how to do it?
- Still in the backoffice and still in the tab Appearance > Menutab, look for the "Menu > "Screen option tab located at the very top of your page, on the right.
- Expand this menu and check the box "CSS classes
Then, open the menu item you want class to convert it to a Mega Menu and give it the CSS class "mega-menu" class
Save your changes
For 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 - Upload 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).
Read also this article which explains how to insert icons next to or instead of text in the menu.
2 - Create custom links
You will return to the Appearance > Menu tab to insert these images in the Divi Mega Menu. You will choose to insert a "Custom Link to your menu.
=> In the field Web addressfield, you will insert the link of the page to which the menu item must 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 to do is to go to the page in question and copy/paste its URL, that will avoid mistakes.
=> In the field You can also use the "link text" field. you insert the link below, taking care to modify the elements in bold according to your site:
Here is a picture of what it looks like:
=> 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 (visitors 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:
Also read: How do I make settings in Divi?
So, it's not so complicated to customize DIVI !
Plus, this tutorial doesn't use complex code, everything is available from your admin! So let's get to work 😉