11/22/17: Update! We just launched Divi Bars— the brand new plugin version of this tutorial with LOADS of features & templates! 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 ????
Elegant Themes recently launched the groundbreaking Divi 3.0. To promote the launch, they created a gorgeous slide in promo bar that tastefully announces the arrival of Divi 3.0 to website visitors.
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 ElegantThemes.com, here’s a screenshot below, or you can of course go take a look for yourself.
Also, you can see a demo of the what we’ll be creating by clicking the button below. ????
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 pretty messy, but stay tuned and I’ll show you how to use the generator to make customizing the promo bar a snap.
The Divi Slide In Promo Bar Code
<div></div><script></script><script type="text/javascript">if (jQuery( "body" ).find( "div.promo-slide-in" ).length > 0){if(jQuery("body").hasClass("et_non_fixed_nav")){jQuery(".et_non_fixed_nav #main-header").addClass("nonfixed-nav-main-header");}if(jQuery("body").hasClass("et_fixed_nav")){jQuery(".et_fixed_nav.et_show_nav #page-container").addClass("fixed-nav-page-container");jQuery(".et_fixed_nav #main-header").addClass("fixed-nav-main-header");}}jQuery(".promo-slide-in .promo-slide-in-close-promo").click(function(){jQuery(this).parent().hide();if(jQuery("body").hasClass("et_fixed_nav")){jQuery(".et_fixed_nav.et_show_nav #page-container").removeClass("fixed-nav-page-container");jQuery(".et_fixed_nav #main-header").removeClass("fixed-nav-main-header");}if(jQuery("body").hasClass("et_non_fixed_nav")){jQuery(".et_non_fixed_nav #main-header").removeClass("nonfixed-nav-main-header");}});</script> 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: http://html-color-codes.info/
The 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. Firstly, 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.