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.
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:
- What is a Mega Menu?
- Step 1 - Creating your main menu
- Step 2 - Converting 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 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.
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.
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.
=> 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 - 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?
- 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.
- Expand this menu and check the box "CSS classes
Next, open the menu item you want convert to Mega Menu and give it the CSS class Click on "mega-menu".
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).
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:
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:
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 (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:
Read also: How do I make settings in Divi?
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 😉