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)

Nelson Miller Pee Aye Creative
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.

Join subscribers on our YouTube channel and enjoy other Divi video tutorials!

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 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 &#x4d as the icon code. This is taken from ETmodules icon font family.

<p style="font-family: ETMODULES;">&#x4d</p>
add Divi font icon code for the X icon 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 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>
add code to make the Divi theme builder promo bar click to hide

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! 

Subscribe For More Things Like This!

At the start of each month, we send out a recap newsletter from the month before with family news, Divi news, our latest tutorials, and product news. Occasionally, if the news is too exciting to wait, we will send out another email separate from the monthly newsletter. That’s what you get when you subscribe, and of course you can unsubscribe if you are no longer interested!

Blog Post Optin

Please share this post!

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

67 Comments

  1. Jacques

    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 ?

    Reply
  2. Corine Pettit

    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.

    Reply
  3. Marek

    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.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      Hi Marek,
      It definitely matters, since classes and IDs are different. The article is correct, the pa-promo-close is an ID and the pa-promo-bar is a class. I think I mentioned the M in the video, it renders that way in the builder but is correct on the page.

      Reply
      • 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).

      • Amanda

        It makes an M on mine too 🙂

      • Evie

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

      • Claudia

        This works:
        <span class=’et-pb-icon’ style=’font-size: 30px;’>M</span>

      • Nick Rich

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

  4. Gil

    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.

    Reply
      • 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 from your tutorial.

  5. Sedu

    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?

    Reply
    • Elise

      Same here! Did you find a solution?

      Reply
      • Oliver Heinrich

        I have an issue with the cookie as well – it looks the cookie can’t be set. I get the following error in the Browser console:

        jquery.min.js?ver=3.6.0:2 jQuery.Deferred exception: Cookies is not defined ReferenceError: Cookies is not defined
        at HTMLDocument.

        Nelson, do you have an idea how to solve this?
        I tried a lot, but couldn’t find a solution.

        This is my website:
        https://www.ecotravia.de

  6. antonio.x.basto

    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?

    Reply
  7. Graham

    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?

    Reply
      • 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.

  8. Jack

    Great stuff for sure, It works well with the web design we have but menu disappears once I add the bar in there

    Reply
    • Hemant Gaba

      Hi Jack,

      Because you are using a default WordPress Menu on your website, whenever you assign to the global header it will overwrite the default header and that is the reason why your menu it getting disappeared. What you can do here is either create a header using theme builder and then add the promo bar section below it or you can create a promo bar section on every page using the same instructions.

      Let us know if that helps. 🙂

      Reply
  9. Geunho

    Thank you for the wonderful tutorial!
    Is there a way to display this promotion bar only between the dates you want?

    Reply
  10. Blair

    Thanks for your tutorial. Its not working for me – the close button doesn’t work 🙁

    Reply
    • Hemant Gaba

      Hi Blair,

      I am afraid that I am not able to replicate the issue on my end. Could you please recheck every step that is present in the guide?
      One possibility might be that you are providing pa-promo-close as a Custom Class to the text module but it should be added as Custom ID.

      Let me know if that helps. 🙂

      Reply
      • Gen

        Hey There, I’m having the same problem with the X Close not working. Any luck troubleshooting?

      • Hemant Gaba

        Hey Gen,

        Could you please share the URL of the page for me to investigate further as on my end the code works perfectly fine?

      • Kara

        Hi there. The “x” wont close for me as well. Was there a work-around for this? My website: seedtosoulcannabis.com

      • Hemant Gaba

        Hi Nicole!

        The page needs a password to access. Can you please share it with me?

  11. Lara Krefski

    Great article!

    There is a spelling error in the first sentence of the last paragraph. “bade” should be “made”.

    Reply
  12. B Nicholson

    Hi, I saw your video and thought I’d give it a try. Unfortunately, I wasn’t successful and somewhat confused about the difference between the instructions on the YouTube video and this blog post. In the end, I decided to remove all of the code from my website. When I return to my site, the original header has been removed and I have no logo or menu. The website in question is https://www.chemainushealthcareauxiliary.com/

    Reply
  13. Kelly

    Can you use this if you are NOT using the theme builder for a header? It would replace the header in that case, correct?

    Reply
  14. Ariana

    Hi there! Does this only work in the Theme Builder area? I was hoping I could use it in a normal section (anywhere else on the page, outside of the theme builder), but it doesn’t seem to be working.

    Reply
      • Ariana Saraha

        Hi! I’m not sure my last response went through, but I tried in multiple ways (in the Builder and as both a fixed and normal Section within the site) and I can’t seem to get it to work. I added “pa-promo-close” as the ID in the textbox with the X code. I added “pa-promo-bar” as the Class in the Section. I added the javascript to the of the site (in Divi Integrations), and added the CSS snippet to the Custom CSS box.

        You can see my attempt in the fixed section at the base of this page: https://goldenbridge.org/homepage-testing – it LOOKS great, lol, but the X doesn’t close it.

        I’d love any insight you have!

      • Hemant Gaba

        Hey Ariana,

        I have checked the code on my end and it works perfectly fine for me so we can conclude that there is no issue with the guide.
        I would suggest one thing to you here, could you please add a code module on the page where you are displaying the banner and place the jQuery and CSS snippets in that code module and see if that helps?

        Please make sure both jQuery and CSS snippets are wrapped in script and style tags respectively.

        Let me know how it goes.

  15. Ariana

    Hi! I was curious if this works in other page sections than only in the Theme Builder? I tried it in a regular page section and it didn’t work. But then I tried it in the Theme Builder also, and the X still didn’t work.

    Not sure what I might have done wrong – I definitely put the right ID and Class in the right places (text area and section, respectively), and the script and CSS in the right places also.

    I thought maybe it was because I was using a “fixed” section, but when I removed that, and made the Z-index default again, it still didn’t work.

    Please feel free to take a look ~ it’s the fixed section that fades in a couple seconds after page load here: https://goldenbridge.org/homepage-testing

    Reply
  16. Ashraful

    I have tried this tutorial. I’m 100% sure I followed everything as it says on the article. The promo bar shows up but never closes even if I tried inserting jQuery code to the “head section of the blog” . I also tried using code module but it never works as promised. There’s something wrong with cookie I guess.

    Reply
    • Hemant Gaba

      Hi Ashraful
      Could you share the URL so I can investigate the issue further?

      Reply
  17. Christina

    Hi I can’t see the php code snippet in the blog. Are you able to share the PHP code?

    Reply
      • Ben

        In the original video tutorial there’s a PHP snippet that goes in the functions.php. I just went through the steps in the blog post tutorial, but like many others have commented, the javascript snippet doesn’t seem to work. When you click the “x” it doesn’t close the section.

        I just watched the video tutorial and copied the code down from that instead and it works perfectly.

  18. john rodman

    Anyone found solution? That ‘X’ doesn’t close the section anymore.

    Reply
  19. Tamas

    Hi,

    great tutorial!

    i got it also working as intended … only problem:

    the promo bar i can only close if i am on the top of the page … once i scroll down / the custom header is sticky position / the promo bar above it cannot be closed.

    any ideas how to fix this?

    Reply
    • Hemant Gaba

      Hello Tamas!

      I’m not entirely sure what’s causing the problem. Could you please share the URL of the page for me so I can check it?

      Reply
      • theCreativeMind

        Hi,

        so i have solved that closing issue…

        one more thing … once the promo bar closes the sticky header below it does not get repositioned after closing the promo bar. Means there is a 40px ( the fixed height of the promo bar) offset from the top of the screen.

        Is there a quick way to fix it?

      • Hemant Gaba

        Could you please share the URL of the page for me so I can check it?

  20. Nelson

    Yes I am using the Divi child theme. Did every step in order as you mentioned, went smooth until I got to this part,

    “If you are using our free Divi child theme, place this snippet into the scripts.js file and remove the tags at the beginning and end.”

    That’s like saying, “Place this script.js into the trunk of the yellow car.” However you never mentioned where the yellow car was even parked?

    It’s 2023 now, which means I have been trying to get this banner to close by clicking X every since last year. You can take a look here =>https://magicpixelz.com/banner-test/

    It looks nice but without the ability to close it I will be forced to just delete it. Sorta like winking at a girl in the dark. Nobody will ever know but you.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher) <span class="comment-author-role-label"><a href="https://www.peeayecreative.com/product/divi-adventure-club/" class="comment-author-role-link" rel="external nofollow" target="_blank">Divi Adventure Club Member</a></span>

      I have no clue what you are talking about, but I’m glad you humored yourself. Did you mean I should include a full tutorial on where to find the scripts.js of the child theme in every tutorial? Seems a little odd, Google and readers may not like that, but we do link to the tutorial explaining it, so not sure why you felt the need to make some analogy about a yellow car – I don’t get it.

      Reply
  21. Stacey

    This is a great tutorial, and I SO wanted the button to work/close, but alas, I can’t get my banner to close. I followed the updated directions and pasted the .js code within the correct integration area. I watched the video as well, but I realize that the latest info is within the site tutorial. Maybe there’s something in the latest version of Divi that’s causing this to not function properly. Any ideas?

    Thanks for your wealth of info!

    Reply
    • Hemant Gaba

      Hi Stacey!

      Could you please share the URL of the page for me to investigate further as on my end the code works perfectly fine?

      Reply

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart