(or see it on tablet for example)

After seeing quite a few people ask how to recreate the promo slide in bar in Divi, I decided to create a tutorial. And to make things even easier, I built a little generator to help you customize the promo bar! ?

Perhaps you haven’t heard of a “promo bar” before. There’s lots of names, for essentially the same thing. For example, a “notification bar”, “hello bar”, or “floating header bar” are all names I’ve seen to describe the same thing.

If you haven’t seen the promo bar over at, here’s a screenshot below, or you can of course go take a look for yourself.

Okay so 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 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. 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?? ?

Tip: For finding the correct hexadecimal colors (ie. #ffffff) to use in the generator below, you can use a website like this:


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 ?