Create a Header Hero with transparent menu with Divi

Published on 08/04/2021 | 9 comments

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

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

Announcement: this article contains affiliate links that you will easily recognize. 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. Typically, a Header Hero is located on the home page only, 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 goals of your site. Also, it is not uncommon to see an autoplay video instead of the full screen image.

In fact, 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 mobile version... Not to mention the images that scroll too fast and that we don't have time to read...
  • Bad for SEO: if each slide is poorly marked up semantically, if the links are irrelevant and if the images are heavy, there is nothing worse for your SEO! I am not the one saying that, 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... This is not 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

Now let's get to the heart of the matter and create your beautiful Header Hero with its transparent menu...

3.1 - Global header with the Divi Theme Builder

We will use 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 don't create the global header, create a unique template for your homepage (click "+ add new template" and assign it to your homepage).

Créer un en-tête global avec Divi
Create a global header in the Theme Builder
  1. Go to Divi > Theme Builder then click on Add a global header.
  2. The theme builder opens. Click on the cogwheel in the section (blue) to access the settings. Go to the Content > Background > Background Image tab to import your photo.
Ajouter le menu principal
Add the main menu
  1. Then add a 1/1 row (line).
  2. Add the Menu module.
  3. Select the menu to display. I specify that it must be created beforehand in WordPress, in the Appearance > Menu.

3.2 - Add the logo and make the menu transparent

You can then add your logo if you wish.

Logo et menu transparent Divi
Add your logo and remove the color to make the menu transparent
  1. Still in the Menu module settings, go to the Content > Logo tab to import it.
  2. Below, go to the Content > Background tab to remove the background and get a transparent menu.
Réduire la taille du logo
Reduce the size of the logo and choose the display style
  1. Still in the Menu module settings, go to the Style > Size tab to reduce the size of the logo.
  2. Go to the Style > Template tab to choose the menu template : left aligned, centered (with logo above) or inline centeredI 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.

Supprimer les marges internes du menu
Delete the internal margins of the section and row
  1. Edit the section settings (blue), go to the Style > Spacing tab and enter 0px of internal margin at the top.
  2. Then edit the line settings (green), go to the Style > Spacing tab and enter 10px of internal margin at the top (10px is an example, but if you put 0px, it's possible that the logo will 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:

6 menu transparent
  1. Add a Text module to put an H1 title and a tagline
  2. 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, colors, 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 readable enough, because of the colors that blend together, in this case, it would be interesting to add an " overlay". This is a semi-transparent color that is placed between the background image and the text:

Overlay pour améliorer la lisibilité du texte
Add an overlay to improve readability
  1. Edit the section settings (blue), go to the Content > Background > Gradient. Choose 2 colors (it can be the same two) and add transparency.
  2. A little further down, activate the option Title background image. This allows the color gradient to be placed on the background image.
Résultat de l'overlay
The use of an overlay makes the texts more readable

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.

Caution: the option 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 centered. If this is the case, here is how to do it:

Centrer le menu principal
Center the main menu
  1. In the administration of your site, go to the tab Appearance > Customize > 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 wait any longer! Discover the Divi theme here !

3.7 - Adding a form of separation

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

Ajouter un séparateur en bas de section
Add a separator at the bottom of the header hero section.

To do this, go to the section settings (blue) and then to the Style > Separator > Bottom tab to choose the ideal shape. If needed, 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?

11 header non fixe

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 up the page to find it... And it's true...

Let's see how to correct this:

Fixer le menu en haut de l'écran
Fix Divi's menu at the top of the screen

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 to make the Divi menu fixedbut this one suits our needs so it's perfect... Here is the final rendering:

11 header fixed ok

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 comments: how do you do it if you want to change the image only on some 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 color indicates that these elements are synchronized together...

Here's how to do it:

Changer l'image du header hero
Change the hero header image
  • 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 just click on the additional options and select Disable global. The header is now grey, indicating that the headers are no longer synchronized.
  • You can now make all your changes: text, button, image, separator, etc.

And there you have it:

Header Hero avec menu transparent
Final result of the Header Hero with transparent menu

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

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 efficiently with my Divi training !

Header Hero et menu transparent avec Divi
Header Hero Divi
Transparent Divi menu

1,777 words

7

You should like it too:

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

Appliquer des masques et des formes sur vos images avec Divi

Apply masks and shapes to your images with Divi

Masks make your images look more graphic and give your layout an original look. Did you know that you can easily create them using the Divi Visual Builder? I show you how in this tutorial and in this video.

9 Commentaires

  1. GADEK

    Bonjour,

    j’ai suivi votre tutoriel avec attention et j’obtiens bien le même résultat. J’ai combiné le menu transparent avec un mega menu pour la gestion de mes sous-rubriques. Toutefois, l’arrière-plan de mon mega menu reste transparent.
    Je ne parviens pas à le modifier via css personnalisée (malgré balise « !important »). Divi vient systématiquement « surcoucher » mes instructions css. Auriez-vous une solution ?

    Merci d’avance.

  2. Lycia Diaz

    Gadek, regarde bien dans les options du module Menu (onglet Style) et là tu peux définir la couleur de l’arrière-plan du menu déroulant. Elle est bien cachée mais tu devrais la trouver si tu cherches bien. J’en suis sûre puisqu’il y a 3 jours j’ai aidé en visio-formation un internaute qui avait le même problème que toi et nous avons trouvé l’option…

  3. Philippe

    Bonjour Lycia,
    Merci pour ce tuto qui ma bien aidé.
    J’aimerais dans la barre de menu mettre l’icône facebook ?
    Quand je fais fixer le menu selon votre tuto le menu disparait à moitié…
    Bonne journée
    Philippe

  4. Lycia Diaz

    Ah il faut peut-être ajuster le code à vos besoins

  5. Philippe

    Bonjour,
    Je suis entrain de suivre votre formation ebook divi et pas encore à l’aise avec le code.
    Il est important pour mon site de mettre le logo FB dans le menu.
    Cordialement
    Philippe

  6. Lycia Diaz

    Bonjour Philippe. Il y a plusieurs solution. En utilisant le Thème Builder, vous pourrez mettre tous les icônes sans coder. Sinon, il y a une autre solution expliquée au chapitre 6 de cet article : https://astucesdivi.com/icones-menu-divi/ mais mon conseil serait de vous pencher sur ce détail vers la fin de la création de votre site. Bon courage 😉

  7. Philippe

    Bonjour et merci,
    J’ai fais avec le thème builder, j’ai du louper un truc… j’y retourne
    Philippe

  8. Alain

    Bonjour Lycia,
    je construit un nouveau site avec Divi, avec des header hero
    J’ai une question au niveau référencement…
    Sur l’image de fond du header hero, il n’y a pas la possibilité d’indiquer des attributs (comme sur le module image par exemple) et dans la bibliothèque media j’ai bien renseigné l’attribut ‘alt’ et le Title, mais ça n’apparait pas dans le code source de la page…c’est très embêtant pour un site de photographe…
    Vous avez une idée pour résoudre ce problème ?
    Merci d’avance !

  9. Lycia Diaz

    Salut Alain, tu as regardé dans les options avancées du module ?

Soumettre un commentaire

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

Je souhaite recevoir les news du blog Astuces Divi !

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