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

The notification bars Have the wind on the web! We can use the term "promotion bar" or "Bar notification" or Hello Bar.

If you want to add this type of promotional item 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 an umpteenth plugin and this is what I show you in this tutorial in image and video 🤩 But before, look at the final result you will get:

1 - What is a "notification bar" or "Hello Bar"

One notification bar (notification bar) or promotion bar (bar promotion) is an insert that appears on your site to inform the user of an ongoing promotion, a deal or an incentive to subscribe to your newsletter.

We're talking about "bar" and not "popup" since this is a very fine insert, who wants to less intrusive a popup that would hide the content of your site.

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

See the difference?

I went through a few websites to find some examples:

As you can see in this picture, Hello Bar often have colors that attract the look, are often placed at the top of the screen and always include call for action (a button or link).

So we're gonna try to create a notification bar with Divi who follows these few rules...

Do you know you can test Divi for free? See you on this page and click on "TRY IT FOR FREE"

2 - Divi notification bar: the video tutorial

Before going further in the explanations, 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 Visual Builder).

Here we go. 👉

3 - The detailed explanations...

Now that you've watched this video, here's the step by step explanation:

3.1. - Create 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 model".

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 (not the Theme Builder), the procedure is the same...

Here are some steps:

1. Within your layout, insert a new section (blue)
2. Add a line 3/3
3. Start the few basic settings:

4. For example, add a gradient background at the bottom of the section.
5. Also think about reducing your margins.

Other suggestions for settings are more detailed in the video. Actually, you do as you want, design side...

6. Then, in the first part of the line, add a Text module and enter a promotional text.
7. In the middle part, add a Roll Back Meter Module, for example.
8. In the last part, add a button call to action.

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

10. Open the section settings and add an input animation, for example (located in the Style tab). This will give a little life to your notification bar.
11. From tab Advanced of the section settings, you can add the necessary behavior to a Hello Bar: the fixed position. For 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 whatever it is, it's up to you.
12. Think about enabling the option Body Area.
13. Your Divi notification bar beginning to look like the greatest marketers 🤣 but you will certainly have some adjustments to make to make it perfect, as explained in the video... In the meantime, think about save your section in the Divi Libraryin order to be able to use it elsewhere, in case.

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

3.2. - Use this notification bar with Gutenberg

Imagine that, finally, the idea of displaying this notification bar on all your pages Don't be a good idea.

In this case, just delete this previously created section within the Site Model by Default Divi Theme Builder and insert it piece by piece into some Layouts Divi of your choice.

And I have even better to offer: you can even implement this Hello Bar Divi in a page that does not use Divi, thanks to the functionality of Divi Layout Block.

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

1. Add a "Disposition Divi" block to your Gutenberg layout.
2. Choose Build New Layout.

3. The builder will open: add a new blue section (blue + icon)
4. And choose your pre-recorded section available in the "Add Library" tab.
5. Your notification bar loads and appears.
6. Remove the useless section that was placed by default when opening.

Here is the result obtained or visit the demo page :

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

You will notice that this tutorial allows you to easily and quickly realize a promotional bar with Divi but also offers a small originality: the bar remains fixed to the scroll until reaching its location within your layout. After that, this bar slides with the content of your site.

It's original and non-intrusive but one true Hello Bar should be able to be closed or hidden by the user who wouldn't want to see her anymore.

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

4 - Alternatives and resources sorted on the component

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

• Divi Bar diviLife : an extension specially designed to add notification bars to your Divi site.
• Hello Bar : one of the most effective and well-known WordPress extensions.
• Here you will find all the Free Bar Notification Extensions Also available from your site administration (on the Extensions > Add tab).

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

Otherwise, these tutorials might also interest you:

• How to create an animated promotional bar for your page templates in Divi
• How to create a playbar for your Divi blog posts (without plugin)
• How to create a dynamic publication information bar for your Divi blog article template