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

Published on 03/11/2020 | 4 comments

Notification bars are on the rise on the Web! You can use the term "promotion bar" or "notification bar " or even "Hello Bar".

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

No need to add an umpteenth plugin and that's what I show you in this tutorial in image and video 🤩 but before, look at the final result you will get :

Notif Bar Demo 1

Advertisement: 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 notification bar(notification bar) or a promotion bar(promotion bar) is an insert that is displayed on your site to inform the Internet user of a current promotion, a deal or an incentive to subscribe to your newsletter.

We talk about "bar" and not about "popup" since it is a thin insert, 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 Internet users.

You see the difference?

I have browsed through some websites to find you some examples:

Exemples de barres de notification
Examples of notification bars

As you can see in this picture, 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).

So we're going to 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 tutorial in video

Before you go any 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've 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, 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) .

Here are a few steps:

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

Other suggested settings are better detailed in the video. In fact, you do as 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 part, add a countdown counter module...for example.
  3. In the last part, add a button a call to action.

Of course, these are only suggestions, you could simply use a line 2/3 + 1/3 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 some life to your notification bar.
  2. From the Advanced tab of the section settings, you will be able to add the essential behavior to a Hello Bar: the fixed position. To do this, go to Advanced > Scroll Effects and choose a position: up or down. 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 one of the biggest marketers 🤣 but you will certainly have to make a few adjustments to make it perfect, as explained in the video. In the meantime, think about registering your section in 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, in the end, the idea of displaying this notification bar on all your pages is not a good idea.

In this case, simply delete this section previously created within the Default Site Template of the Divi Theme Builder and insert it on an ad hoc basis in some Divi Layouts of your choice.

And I have even better to offer you: you can even implement this Hello Bar Divi in a page that doesn't use Divi, thanks to the feature of Divi Layout Block.

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

Divi Notification Bar 5
  1. Add a "Divi Layout" block within 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-recorded section available in the "Add to Library" tab.
  3. Your notification bar loads and appears.
  4. Delete the unnecessary section that was placed by default when opening.

And here is the result obtained or visit the demo page :

Notif Bar Demo 2

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

You will 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 to the scroll until it reaches its location within your layout. After that, this 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 would not want to see it anymore.

That's why I've 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 count on specialized extensions that offer many functionalities for your promotional bars :

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

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

Otherwise, these few tutorials might also be of interest to you:

1,212 words


You should like it too:

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

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