How To Add A Promo Bar In Divi (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.

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

This code can be placed in Divi>Theme Options>Integrations. Navigate there, and add this in the first code section called “Add code to the < header > of your blog.”

add javascript code to the integrations areas for the Divi promo bar

CSS

You also need to add a few snippets of CSS. You can do this by going to Divi>Theme Options and pasting the following code in the Custom CSS input area.

Add CSS code to the Divi promo bar

PHP

The last set of code is technically optional, but we recommend using it for better user experience. This code is telling the website to keep the promo bar hidden across the site if the user has already clicked to hide it. Once hidden, it will remain hidden for the session, or more specifically, for one hour. After that, if the user visits the site again, the promo bar will be shown again. Adding this helps keep the visitor happy. If they hide it on one page, they may be upset if it appears on the next page. This will help to keep everyone happy.

In order to add this PHP code, you need to have a Divi child theme active on your site. If you don’t already have one, you can download our Free Divi child theme. Copy and paste the following PHP code snippet into the functions.php file of your Divi child theme.

Add php code to your Divi child theme to close the Divi promo bar

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.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Related Posts

Leave A Response!

2
Leave a Reply

avatar
  Subscribe  
newest oldest most voted
Notify of
Jacques Vreugdenhil
Jacques Vreugdenhil

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 ?

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart