Divi Tips : Hello Bar - Notification Bar

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

Published on 03/11/2020 | 8 comments

1,212 words

5

Notification bars are all the rage on the web! The term "promotion bar" or "notification bar" or " Hello Bar" can be used.

If you want to add this type of promotional element to your WordPress site, there are many extensions available, 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'm showing you in this tutorial with images and video 🤩 but first, look at the final result you'll get :

Notif Bar Demo 1

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 "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 instead of "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 have looked through some websites to find some examples:

Exemples de barres de notification
Examples of notification bars

As you can see from this image, Hello Bars often have eye-catching colours, are often placed at the top of the screen and always have 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: video tutorial

Before we go any further, you can watch this video which 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 seen 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.

To this end, the Divi Theme Builder is perfect as 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 some steps:

Divi Notification Bar 1
  1. Within your layout, insert a new section (in blue)
  2. Add a line 3/3
  3. Start with some 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.

Further suggestions for settings are 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 behaviour 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, remember to save 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, 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 have even better news: you can even implement this Hello Bar Divi in a page that does not 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 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-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 opening.

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 makes it quick and easy to create a promotional bar with Divi, but also offers a little originality: the bar remains fixed when scrolling until it reaches its place in your layout. After that, the bar slides with the content of your site.

It is original and non-intrusive but a real Hello Bar should be able to be closed or hidden by the user who does not want to see it further.

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 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 can find all the Free Notification Bar extensions available also 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:

obtenir divi bouton
quizz divi bouton
newsletter bouton
formation divi bouton
guide divi pdf bouton
bouton support divi

You might like it too:

La nouvelle interface de Divi 5

La nouvelle interface de Divi 5

Découvrez la nouvelle interface de Divi 5 : les comparaisons avec Divi 4 et les similitudes avec Gutenberg (article + vidéo). Alerte spoiler : ça déchire 💣 !

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Comment utiliser 7, 8, 9, 10+ colonnes dans Divi ?

Votre client souhaite afficher une ligne avec les logos de ses 9 principaux clients… Comment faites vous ? Dans cet article, je vous explique comment aligner plus de 6 éléments sur une même ligne !

Comment utiliser la Flexbox CSS dans Divi ?

Comment utiliser la Flexbox CSS dans Divi ?

Laissez-moi vous faire découvrir une autre manière de créer vos mises en page Divi en utilisant la Flexbox. Ce module CSS puissant permet de faire des choses extraordinaires 🤩.

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 : https://www.peeayecreative.com/how-to-add-a-promo-bar-in-divi-(without-plugins)/ (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 *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.