Code by Day | Explore By Weekend

How To Create A Promo Bar With The Divi Theme Builder without plugins Tutorial by Pee Aye Creative

How To Create A Promo Bar In The Divi Theme Builder (Without Plugins)

This tutorial will show you how to easily make a promo notification bar in Divi without plugins on any page or post using the Divi Theme Builder.

#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.

Divi Timer Pro Countdown Module by Pee Aye Creative

#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 nex 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 place this code in it:

M

add Divi font icon code to close the Divi promo bar

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 ID to close the Divi promo bar

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 Code To Hide The Divi Promo Bar On Click

Javascript

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.

If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the <script> tags at the beginning and end. Otherwise, place this in your Divi>Theme Options>Integrations tab in the "Add code to the < head > of your blog" code area.

<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> 
add code to make the Divi theme builder promo bar click to hide

CSS

You also need to add a snippets of CSS. If you are using our free Divi child theme, place this snippet into the style.css file. Otherwise, place this in your Divi>Theme Options>Custom CSS code box. If you need help, check out our complete guide on 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 bade 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! 

18
Last updated Apr 9, 2021 @ 8:24 pm

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
24 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Jacques
Jacques
1 year ago

Hi Nelson,

Great tutorial, thanks a lot for sharing this. I have one question: once the site visitor has clicked on the close button and the promo bar disappears, would it be possible to show a small arrow or, any other icon, that would allow the visitor to click on and bring the promo bar back ?

Corine Pettit
Corine Pettit
10 months ago

Hey Nelson!
 
Thanks so much for this tutorial, I’ve had such a hard time finding a promo bar that works with the Theme Builder, so this is much needed. Quick question – is there a way to get the promo bar back to the back-end designer, after closing out? I’ve cleared the cache, but I’m afraid it won’t come back for 24 hours now, per the php code.

Marek
Marek
8 months ago

Hi, Nelson the pa-promo-close is to be put into the CSS-ID or CSS-class or it does not matter? In the video you put it as a class. The other thing, in my case the code &#x4d makes letter M instead of X. Had to replace by &#x58.

Last edited 8 months ago by Marek
Marek
Marek

Hi, thank you for your reply. Funny is that it worked on the video though. However, I am sorry to say the &#x4d still renders M on my browsers (even out of divi builder).

Snímka obrazovky 2020-07-29 o 10.55.54.png
Amanda
Amanda
Reply to  Marek
7 months ago

It makes an M on mine too 🙂

Evie
Evie
Reply to  Amanda
3 months ago

Same here. And on top of it once I added Java and CSS it hides completely and it becomes invisible even to edit.

Nick Rich
Nick Rich

I used ☒ and it renders correctly as an “x inside a box”

Gil
Gil
8 months ago

Hey, this is a great tutorial. Just curious, in your example, how would you set the header to be fixed at 0,0 after the promo bar is closed? Do you have the header and the promo bar in unique sections and, if so, are they set to default, relative, absolute? Thanks for any additional guidance you can offer.

Gil
Gil

Thanks! I see they are in two sections, but if I set the header to be fixed I have to give it a vertical offset to set it below the promo bar, say 60px. Then when the promo bar section is closed, that space it occupied will remain because the header is fixed with a vertical offset of 60px.In my case I need the header to be fixed so it remains at the top of the screen, I don’t want it to scroll up out of the way. Does that make sense? I apologize if I am totally missing something… Read more »

Sedu
Sedu
7 months ago

Hi! Great tutorial, but the cookie doesn’t work for me. I’ve set the php to my child-theme functions but the promo bar shows again after reloading the page. The cookie isn’t set if I check it in the cookie list of my browser. Wheres my mistake?

antonio.x.basto
antonio.x.basto
5 months ago

The promo bar is perfect, excellent tuturial. There is a way for the promo bar to appear on every page and never disappear. I ask this because I put it in the Theme Builder header to appear on all pages, but sometimes it disappears when you change pages. Is it a cache problem or is it related to another issue?

antonio.x.basto
antonio.x.basto

Hello thanks for the reply. You mean the php code inserted in functions.php right?

antonio.x.basto
antonio.x.basto

Thank you! 🙂

Graham
Graham
2 months ago

Thanks for this great tutorial! I can’t seem to get the bar to appear above the menu, it’s always showing underneath the menu, is there a way to flip that?

Graham
Graham

Hi Nelson,
Sorry for the confusion, here’s the site in question, the site’s primary menu bar appears at the very top of the page, with this bar underneath.

In the theme builder, I tried moving this module from the Custom Body to the Custom Header, and adding the Menu module, but then the menu stylings that have already been applied to the site were lost in that new menu module.

Screen Shot 2021-02-11 at 10.31.04 AM.png
Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,600 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart