Create a notification or promotion bar with Divi (Hello Bar)

Published on 03/11/2020 | 8 comments

Notification bars are all the rage on the web! We can use the term "promotion bar" or "notification bar" or " Hello Bar".

If you want to add this type of promotional element to your WordPress site, many extensions exist but did you know that you could create a notification bar simply using Divi?

No need to add yet another plugin and that's what I show you in this image and video tutorial 🤩 but first, check out the end result you'll get :

Notif Bar Demo 1

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 "notification bar" or "Hello Bar"?

A notificationbar orpromotion bar is an insert that is displayed on your site to inform the user of a current promotion, a deal or an incentive to subscribe to your newsletter.

The term " bar" is used, not "popup" since it is a very thin insert, which is less intrusive than a popup that would hide the content of your site.

A notification bar or Hello Bar is a "soft" marketing element that does not hinder the user experience of your visitors

Can you see the difference?

I've scoured a few websites to find some examples for you:

Exemples de barres de notification
Examples of notification bars

As you can see in this image, Hello Bars often have eye-catching colors, are often placed at the top of the screen, and always include a call to action (a button or link).

Let's try to create a notification bar with Divi that follows these few rules...

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE

2 - Divi Notification Bar: the video tutorial

Before going further, you can watch this video that explains how to create a simple notification bar with Divi and how to use it within the Theme Builder or even a classic layout created with Gutenberg (without using the Visual Builder).

Here we go 👉

3 - Detailed explanations...

Now that you have watched this video, here are the step by step explanations:

3.1 - Creating the Hello Bar in the Divi Theme Builder

As explained in the video tutorial, I chose to place my Hello Bar directly in the body of my site.

For this purpose, the Divi Theme Builder is perfect since it allows me to act on all the pages of my site thanks to the "default site template".

But in fact, if you wanted this notification bar to be visible only on your home page, for example, you can follow the same procedure directly within the layout edited with the Visual Builder (and not the Theme Builder), the procedure is identical...

Here are the few steps:

Divi Notification Bar 1
  1. Within your layout, insert a new section (in blue)
  2. Add a line 3/3
  3. Start the few basic settings:
Divi Notification Bar 2
  1. For example, add a gradient background to the bottom of the section.
  2. Also consider reducing your margins.

Other setting suggestions are better detailed in the video. Basically, you do what you want, design-wise...

Divi Notification Bar 3
  1. Then, in the first part of the line, add a Text module and enter a promotional text.
  2. In the middle section, add a Countdown modulefor example.
  3. In the last part, add a button call to action.

Of course, these are just suggestions, you could simply use a 2/3 + 1/3 line and eliminate the countdown timer, for example...

Divi Notification Bar 4
  1. Open the section settings and add an input animation, for example (located in the Style tab). This will give your notification bar some life.
  2. From the Advanced tab of the section settings, you can add the essential behavior of a Hello Bar: the fixed position. To do this, go to Advanced > Scroll Effects and choose a position: top or bottom. In the example of my video, I chose "Stick to Bottom" but it doesn't matter, it's up to you.
  3. Remember to activate the Body Area option.
  4. Your Divi notification bar is starting to look like the top marketers 🤣 but you'll definitely have some tweaking to do to get it just right, as explained in the video... In the meantime, consider saving your section to the Divi Library, so you can use it elsewhere, just in case.

To see the final rendering, visit my demo page for this notification bar with Divi.

3.2 - Using this notification bar with Gutenberg

Imagine that, after all, the idea of displaying this notification bar on all your pages is not a good idea.

In this case, simply delete this previously created section from the Divi Theme Builder's Default Site Template and insert it piecemeal into some Divi Layouts of your choice.

And I've got something even better: you can even implement this Divi Hello Bar in a page that doesn't use Divi, thanks to the Divi Layout Block.

Here's how to add a Divi notification bar to a layout with Gutenberg :

Divi Notification Bar 5
  1. Add a "Divi Layout" block to your Gutenberg layout.
  2. Choose "Build New Layout".
Divi Notification Bar 6
  1. The builder will open: add a new blue section (blue + icon)
  2. And choose your pre-saved section available in the "Add from Library" tab.
  3. Your notification bar loads and appears.
  4. Delete the unnecessary section that was placed by default when you opened it.

And here is the result or visit the demo page :

Notif Bar Demo 2

3.3 - The particularities of this "home-made" notification bar

You'll notice that this tutorial allows you to easily and quickly create a promotional bar with Divi but also offers a little originality: the bar remains fixed at the scroll until it reaches its location within your layout. After that, the bar slides with the content of your site.

It's original and non-intrusive but a real Hello Bar should be able to be closed or hidden by the user who doesn't want to see it anymore.

That's why I have listed various resources if you want to go further with this feature...

4 - Selected alternatives and resources

To go further and if you have real marketing needs, you can rely on specialized extensions that offer many features for your promotional bars:

  • DiviLife's Divi Bar a specially designed extension to add notification bars to your Divi site.
  • Hello Bar one of the most effective and well-known WordPress extensions of its kind.
  • Here you will find all the Free Notification Bar extensions also available from the administration of your site (in the Extensions > Add tab).

Also, you can use my tutorial about Popups for Divi to divert it from its original purpose and create notification bars with it.

If not, you might also be interested in these tutorials:

1,212 words


You should like it too:

8 Commentaires

  1. LC

    Super tuto encore, merci !
    De mon côté, j’ignore pourquoi, la barre ne reste stiky/collée que en Visual builder, dès que je passe en « réel », la barre défile et ne reste pas collée, ni en stik to bottom ni en top.
    J’ai essayé aussi avec « Body area » mais rien n’y fait. As-tu une idée ? ou une précision que je n’aurais pas faite ?

  2. Lycia Diaz

    Tiens c’est bizarre LC, comme tu peux le voir dans ma vidéo et mes démo que ça marche. Alors n’aurais-tu pas un script qui empêcherait cela ?

  3. LC

    J’ai la réponse (cela aidera peut-être d’autres): Elegant Theme vient de me dire que c’est un bug lié au fait que j’avais mis la section en global. Quand on la remet en non global, ça marche parfaitement ! Merci 🙂

  4. Lycia Diaz

    Merci LC.

  5. Guillaume

    Merci pour cet article, c’est très clair.
    Je me pose toutefois une question : est il possible (facilement) par un code ou autre de masquer cette barre de notification sans passer par un plugin. En clair, qu’il y ait une croix sur la droite pour la masquer ?
    En vous remerciant 🙂

  6. Lycia Diaz

    Salut Guillaume. Certainement mais avec du JS

  7. Guillaume

    Bonjour Lydia, merci pour ton retour très rapide. Effectivement oui, c’est ce que je pensais mais n’étant pas spécialiste je ne voyais pas trop comment m’y prendre. J’ai donc cherché un peu plus loin et j’ai trouvé un article sur le sujet en anglais qui détaille tout cela avec un peu de CSS, de PHP et de JS. Si cela peut en aider d’autres voici le lien : (je te laisse modérer ou non le lien 🙂 )

  8. Lycia Diaz

    Merci Guillaume

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

Share This