Unleash The Power of Divi And the Theme Buider – Easy Promo Bars!
The Divi Theme Builder Is Amazing
I’m excited! The Divi Theme Builder is amazing, and I’m about to show you another reason why I love it so much. You can easily design promo notifications bars and assign them to any page or post type that you want! It just takes a little bit of code, and I’m going to show you exactly how to add that…so let’s get started and make some notification bars in Divi!
▶️ Please watch the video above to get all the exciting details! 👆
1. Design Your Promo Bar In Divi
Assign Layout In The Divi Theme Builder
The cool part about using Divi and the Theme Builder for your promo bar is that it gives you so much control. Maybe you want a promo bar to appear only on shop pages, or only on blog posts, or only on a specific page. You can! Just assign the pages or post types in the Divi Theme Builder. Go to Divi>Theme Builder. If you already are using the Theme Builder with a header or global header, you will need to work there.
Design The Section
The first you need to do is design your promo bar in the Divi Builder. You can use any combination of Divi Modules that you like, which would typically include a text module, a button, and a close button, which is what we used in our example. You might also want to use an Email Option or a super awesome countdown timer like our new Divi Timer Pro plugin which is an auto-restart and evergreen countdown timer.
2. Set Up The Divi Promo Bar Close Button
If you want your website visitors to be able to hide your Divi promo bar, we need to add some CSS classes, ID, and code to make the section disappear when a user clicks to close it. The next three steps in this section are easy to do, and each are important.
Add A Close X Button To The Section
First, you need to add an X close icon to the section. This is easier than you might think. Since Divi comes with a built-in icon font, you can just use the icon code for the X in your layout. So add a Text Module to your section and copy and paste the following code into it.
NOTE: Sometimes this changes to an “M” for some strange reason, but it will still display correctly on the frontend if you use M as the icon code. This is taken from ETmodules icon font family.
<p style="font-family: ETMODULES;">M</p>
Add CSS ID To Close Icon Text Module
You also need to add a CSS ID to this same Text Module. Go to the Text Module where you placed the icon code and open the settings. In the Advanced tab, open the CSS ID & Classes toggle and place the ID “pa-promo-close” in the CSS ID input field.
Add CSS Class To Section
The last thing we need to do here in the Divi promo bar section is add a CSS class to the section. To do this, go to the section settings to the Advanced tab. Open the CSS ID & Classes toggle and add the class “pa-promo-bar” to the CSS Class input field.
3. Add Some jQuery Code To Hide The Divi Promo Bar On Click
The first piece of code we need to make our Divi promo bar work correctly is some jQuery. This is used to hide the promo bar when a site visitor clicks the button to close or hide it. The ID #pa-promo-close is the element that needs to be clicked, which then tells the entire section to hide. So remember when we put this ID in the Text Module with the X icon? That’s the trigger, and when that is clicked, the entire section hides, because of the CSS class we added to the section. Pretty cool, huh? It will stay hidden for 24 hours by default, which keeps it closed while the visitors continues to browse your website.
Where To Paste The jQuery Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the jQuery tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the scripts.js file (don't forget to remove the <script> tags at the beginning and end). If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
<script>
jQuery(document).ready(function() {
var pa_promo_bar_shown = Cookies.get('pa_promo_bar_shown');
var date = new Date();
date.setTime(date.getTime() + 24 * 60 * 60 * 1000);
if (pa_promo_bar_shown != 'dismiss') {
jQuery('.pa-promo-bar').show();
} else {
jQuery('.pa-promo-bar').hide();
}
jQuery('#pa-promo-close').click(function() {
{
jQuery('.pa-promo-bar').hide();
Cookies.set('pa_promo_bar_shown', 'dismiss', {
expires: date
});
}
});
});
</script>
CSS
You also need to add a snippet of CSS.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*add mouse pointer when hovering over X icon*/
#pa-promo-close:hover {
cursor: pointer;
}And that completes the tutorial! You now have an easy to make promo bar in Divi without using plugins, all made with the Divi Theme Builder and a few snippets of code. You can now use your promo bar for anything you want, and we hope you enjoy our tutorials!
Hello! Testing this out on this page, with the “floating” section in the right part of the page, but the X is not closing when clicked. Any idea why? This is a fixed row witin a section that has no height and width. https://www.lanware.co.uk/test-lanwire-promo
Hi John!
It seems you have removed the promo bar modules from the page. Can you please add them again so that I can check further?