How to Create a Promo/Notification Bar in Divi
UPDATE— We’ve now launched Divi Bars— the feature-rich plugin version of this tutorial with LOADS of features & templates! Divi Bars allows you to easily create gorgeous promo bars using the Divi Builder and all of Divi’s design tools! This tutorial and the promo bar generator will always remain free, however support is limited. We highly recommend checking out the all new Divi Bars plugin 😉
Do you want to add a snazzy promo bar on your Divi website in under two minutes?
This tool is PERFECT for creating COVID-19 related website notices, which we’ve seen A LOT of our customers creating lately.
We originally launched this tutorial and promo bar generator on October 16, 2016 and it’s been used tens of thousands of times over the past few years!
And now we’ve updated the code and tutorial on this post and made it even better for 2020! 🥳 🚀
Here’s a few quick notes of what changed for the NEW 2020 version of the FREE Promo Bar Generator and Tutorial:
- ✅ Now works for headers created with the Divi 4.0 Theme Builder!
- ✅ Now works with the Extra Theme by Elegant Themes!
- ✅ New color pickers for the generator make customizing your promo bar even easier!
In case you’re not familiar with promo bars, there’s actually quite a few names to describe the same thing. For example, “notification bar”, “info bar”, “hello bar”, “website notice banner”, and “floating header bar” are all referring to the same thing.
Here’s an example of the promo bar at the top of the Elegant Themes website which is promoting Divi:
Additionally, here’s more examples of promo bars. The below is actually all the included templates that come with our premium Divi Bars plugin. After we originally launched this tutorial and promo bar generator in 2016, we saw a huge response which then lead to the creation of Divi Bars with a lot more features, templates, customization options, etc because it uses the Divi Builder to create the promo bars. And as you can see, promo bars can include cool things like countdown timers, email opt-ins, logins, cookie notices, etc.
Okay so let’s get started creating the promo bar. The hard work has already been done for you, so it’ll be a snap. The code below is minified, so it can be tricky to customize, but stay tuned and I’ll show you how to use the generator to make customizing the promo bar extremely easy, especially with the snazzy color pickers we just added for the 2020 version!
(note: “2 minutes or less” does not include the time to watch the15 minute video, but refers to how quick it is to use the generator and add the code to your website! 😉)
The Divi Slide In Promo Bar Code
You can customize the code above, and move on to the last step, however I’d recommend utilizing the generator I created below for an extremely easy way to customize the promo bar for your own use. 🙂
The Divi Promo Bar Code Generator
To use the generator, simply fill in the form fields below and hit the submit button. The generator will then email you the code to copy and paste into your website. I’ll show you where to put the code in the next step.
NEW in 2020: We’ve added handy color pickers to make using the generator even quicker and easier! 🥳
Disclaimer: By using the generator, you will be subscribed to the Divi Life email list, however you can unsubscribe at anytime. And, don’t you want to be the first to know when new freebies like this are added anyways? 🙂
Divi Promo Bar Generator
Placing the Promo Bar Code on Your Divi Website
Okay, so this next step will show you how to actually add the slide-in promo bar code to your Divi website. The step is the same whether you’re using the code from the code box above and customizing it manually, or using the handy generator I created.
We actually have two options for adding the code to your website. They’re both extremely simple. Before you choose which method though, you’ll need to decide whether you want the code displayed on just one page, or all the pages on your site. Once you’ve decided, follow the relevant method below. You don’t need to do both methods.
Adding the Promo Bar Code to Just One Page
If you’d like to add the promo bar to all the pages on your site then skip this step, and move onto the next step. Okay the first thing we need to do is make sure you have the code copied to your clipboard. Be sure that you have the code in it’s entirety copied, nothing is there by mistake 😉
Next, go to the page you’d like to add the promo bar to, and create a new code module. It doesn’t matter where on the page you add the module, because the CSS code will automatically position it into place.
Now, paste the code into the code module and save it. Be sure to save the module itself, as well as saving the page.
Now you’re done. Go and take a look and admire what you just created 🙂
Adding the Promo Bar to All Pages of Your Website
Adding the Promo Bar to every page of your Divi website is very easy, and can be done with one step. First, copy the promo bar code to your clipboard. Make sure you copy it in it’s entirety, because nothing is there by mistake 😉
Now, from the WP Admin section of your website, go to Divi > Divi Theme Options > Integration tab, and locate the box for: Add code to the < body > (good for tracking codes such as google analytics)
Paste the code into the box and hit save. Make sure the switch for “Enable Body Code” is on (lit up with blue). It’s on by default, but if you find it off, hit the switch and make sure you hit save again.
And we’re done! Now admire your creation 🙂 If you have any questions, please feel free to comment below.
Remember if you want more features, customization ability, templates, and more, take a look at Divi Bars. 😄