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 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).

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 section cogwheel (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 - Adding the logo and making the menu transparent

You can then add your logo if you wish.

Logo et menu transparent Divi
Add your logo and remove the colour 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 > Sizing 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 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.

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 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:

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, 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:

Overlay pour améliorer la lisibilité du texte
Add an overlay to improve readability
  1. Edit the section settings (blue), go to the tab Content > Background > Gradient. Choose 2 colours (they can be the same two) and add transparency.
  2. A little further down, activate the option Background image for the title. This allows the colour gradient to be placed on the background image.
Résultat de l'overlay
The use of an overlay makes the text 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.

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:

Centrer le menu principal
Centre the main menu
  1. 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.

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 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?

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

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 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:

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 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:

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

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

1,777 words

7

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

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.

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