Create a Header Hero with transparent menu with Divi

Displaying a Header Hero on your homepage is a good practice to "announce the colour". And if the main menu of the site is transparent, it looks great...

This is what I propose to do with this Divi tutorial easy, accessible even to beginners...

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

1 - What is a Header Hero?

A Header Hero is the web design term for a full screen image that is displayed when visiting a site. Generally, a Header Hero is only located on the homepage, but ultimately you can use it on any page, it's up to you!

Souvent, le <strong>header hero</strong> est accompagné <strong>d’un titre</strong> (balisé en <H1>), d’une <strong>tagline</strong> (balisée en <H2> ou en <P>) et d’un <strong>bouton d’appel à l’action</strong> (CTA). Profitez-en pour y placer quelques mots-clés, c’est toujours good for your SEO.

Note that the Header Hero should be inspiring and clearly state the objectives of your site. Also, it is not uncommon to see a video playing automatically instead of the full screen image.

Moreover, the Divi's full screen header module is perfect for this kind of design, but in this tutorial we will build it ourselves because it does not allow to add a transparent menu inside...

2 - Why is a Header Hero better than a carousel?

My students or clients often ask me how to create a carousel... Yeah... I don't really like it.

The carousels are :

• Bad for the user experience: if they are badly made or use images with a different ratio, the page sometimes jumps and it's worse in the mobile version... Not to mention images that scroll too fast and that you don't have time to read...
• Bad for SEO: if each slide is poorly marked up semantically, if links are irrelevant and if images are heavy, there is nothing worse for your SEO! It is not me who says this, read this.
• Bad for page loading: carousels can be heavy to load and this can slow down the performance of your site.
• And finally, carousels are outdated! And this is me saying it... We are not in the 80's anymore 🤣 !

So there are several good reasons to build a Header Hero with a transparent menu rather than starting your homepage with the good old carousel.

3 - Creating a Hero Header with a transparent menu

Let's get down to business and create your own Header Hero with its transparent menu...

3.1 - Global header with the Divi Theme Builder

We will using the theme builder to create a global header that will be displayed on all your site, we will see at the end of the tutorial how to modify it on the other pages.

If you want to use this design on the homepage only, then do not create the global header, create a unique template for your homepage (click on "+ add new template" and assign it to your homepage).

1. Go to Divi > Theme Builder then click on Add a global header.
2. The theme builder opens. Click on the section cogwheel (blue) to access the settings. Go to the Content > Background > Background image tab to import your photo.

3. Then add a 1/1 row (line).
4. Add the Menu module.
5. Select the menu to display. I specify that it must be created beforehand in WordPress, in the Appearance > Menu.

3.2 - Adding the logo and making the menu transparent

You can then add your logo if you wish.

6. Still in the Menu module settings, go to the Content > Logo tab to import it.
7. Below, go to the Content > Background tab to remove the background and get a transparent menu.

8. Still in the Menu module settings, go to the Style > Sizing tab to reduce the size of the logo.
9. Go to the Style > Template tab to choose the menu template : left aligned, centered (with logo above) or inline centredI chose this one for my tutorial.

3.3 - Reducing internal margins

By default, Divi's sections and rows have internal margins. This impacts the height of your header.

Ideally, the location of the menu should not be too wide (in height) because it is not great to visit a site where a third of the screen is used by the menu!

Then edit the elements to remove these default included margins.

10. Edit the section settings (blue), go to the Style > Spacing tab and enter 0px of internal margin at the top.
11. Then edit the line settings (green), go to the Style > Spacing tab and enter a 10px internal margin at the top (10px is an example, but if you put 0px, the logo may stick to the top of the screen).

3.4 - Adding titles and calls to action

Finally, your Header Hero can't just display a transparent menu and a background imageIt wouldn't be very interesting. So add whatever you want, for example:

12. Add a Text module to put an H1 title and a tagline
13. Add a button module to display a call to action to your shop or your contact form for example.

I'll let you configure the design of these two modules using Divi's native options: choice of fonts, colours, sizes, margins (to make it airy), line height, etc.

Did you know? You can test Divi for free by visiting on this page and clicking on "TRY IT FOR FREE

3.5 - Adding an overlay

If you find that the text on your image is not legible enough, because of the colours that blend together, in this case it would be interesting to add an " overlay". This is a semi-transparent colour that is placed between the background image and the text:

14. Edit the section settings (blue), go to the tab Content > Background > Gradient. Choose 2 colours (they can be the same two) and add transparency.
15. A little further down, activate the option Background image for the title. This allows the colour gradient to be placed on the background image.

Here is the result! I chose a white gradient because my texts are black. I could have done the opposite with a dark overlay and white texts.

Warning: the Title background image option does not work in combination with the parallax. If you want to use these two options at the same time, read this tutorial which explains how to add an overlay on a parallax image.

3.6 - Centering the main menu

Finally, it is possible that your transparent menu is not centred. If this is the case, here's what to do:

17. In the administration of your site, go to the Appearance > Customise > Additional CSS tab and add the following code:

/* --- centrer le menu --- */

.et_pb_menu .et_pb_menu__menu > nav > ul {
    justify-content: center !important;
}

That should solve the problem....

Don't delay! Discover the Divi theme here !

3.7 - Adding a form of separation

To refine the design of your Header Hero, you may wish to add a divider at the bottom of the section, also known as a Divider.

To do this, go to the section settings (blue) and then to the Style > Separator > Bottom tab to choose the ideal shape. If required, add 50px or 100px of internal margin at the bottom of the section, to enlarge the image and height of the Header Hero.

3.8 - Setting the main menu

Your Header Hero is now finished, it looks good, doesn't it?

It's not too bad, but I see you coming! You're going to tell me that the menu is not fixed and so we have to go back to the top of the page to find it... And it's true...

Let's see how to correct this:

Go to the Menu module settings and then go to the Advanced > Position tab (this means "position"). Choose the position fixed and set the location in the top middle.

There are other ways of make the Divi menu fixedbut this one suits our needs so it's perfect... Here's the final result:

Now it's better!

3.9 - Changing the background image according to the pages

And there too I saw you coming 🤣🤣🤣 ... I was sure you were going to ask me this question in commentary: how do you do it if you want to change the image only on certain pages?

And yes! The global header uses the global element functionality. This means that if you change the Header Hero image on your contact page for example, it will change throughout your site! And yes, the green colour indicates that these elements are synchronised together...

Here's how to do it:

• In the Divi Theme Builder, add a new template.
• Assign it to a specific page, for example the About page...
• When you click on create a templatethe global header is immediately duplicated in this new template.
• Then simply click on the additional options and select Disable global. The header is now grey, indicating that the headers are no longer synchronised.
• You can now make all your changes: text, button, image, separator, etc.

And there you have it:

4 - To conclude: other resources...

Did you like this tutorial? There's nothing rocket science about it, but this article shows that anything is really possible with Divi! All the options are there, we just need to use them to make the designs we need...

Other related resources include

• How to create a seamless vertical navigation that overlaps your Divi website
• How to create a floating and transparent menu bar with Theme Builder
• How to make your header transparent and sticky when scrolling
• The Divi Switch plugin also offers many options for creating a transparent menu

And finally, here is a video from Joshhall that shows another way to create a transparent menu with Divi:

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 !