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 :
- 1 - What is a "notification bar" or "Hello Bar"?
- 2 - Divi Notification Bar: the video tutorial
- 3 - Detailed explanations...
- 4 - Selected alternatives and resources
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:
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:
- Within your layout, insert a new section (in blue)
- Add a line 3/3
- Start the few basic settings:
- For example, add a gradient background to the bottom of the section.
- Also consider reducing your margins.
Other setting suggestions are better detailed in the video. Basically, you do what you want, design-wise...
- Then, in the first part of the line, add a Text module and enter a promotional text.
- In the middle section, add a Countdown modulefor example.
- 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...
- Open the section settings and add an input animation, for example (located in the Style tab). This will give your notification bar some life.
- 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.
- Remember to activate the Body Area option.
- 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 :
- Add a "Divi Layout" block to your Gutenberg layout.
- Choose "Build New Layout".
- The builder will open: add a new blue section (blue + icon)
- And choose your pre-saved section available in the "Add from Library" tab.
- Your notification bar loads and appears.
- Delete the unnecessary section that was placed by default when you opened it.
And here is the result or visit the demo page :
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: