A promo bar effectively highlights special offers, announcements, or important messages on your website. Creating a promo bar in Divi allows you to maintain control over your site's performance and design.
In this article, we will guide you through the process of creating a custom promo bar in Divi.
Create the design for your promotional bar in Divi Theme Builder
Go to WordPress Dashboard → Divi → Theme Builder
Create a Global Header area, or edit your existing one
Insert a new section - which will be the container of the Promo bar - it should be the first section in your layout
Open the Section's setting by clicking on the Gear icon
Go to the Content Tab → Background → Background color and set a background color for the entire Section
Go to the Design Tab → Spacing and set the Top and Bottom Padding to 5px - change this value to your liking
Go to Advanced Tab → CSS ID & Classes → CSS ID and type divi-promo-bar
Add a 1 Column Row
Add the Text module and the Icon module
Open the Icon module's settings by clicking on the Gear icon
Go to Advanced Tab → CSS ID & Classes → CSS ID and type divi-close-bar
Design the Text module and the Icon module to fit your needs
Edit the Row setting by clicking on the Gear icon
Go to the Design Tab → Sizing and:
Enable the option Use Custom Gutter Width
Set the Gutter's value to 0
Go to the Design Tab → Spacing and set the Top and Bottom Padding to 0
Go to the Content Tab and click on the Gear icon for the Column
Go to Advanced Tab → Custom CSS → Free Form CSS and add this CSS Code:
selector {
display: grid;
grid-template-columns: auto 30px;
align-items: center;
}Go to Divi → Theme Option → Integration tab → Header and add this JS code:
<script>
(function ($) {
$(document).ready(function () {
var promoBar = $('#divi-promo-bar');
var closeIcon = $('#divi-close-bar');
closeIcon.on('click', function () {
promoBar.hide();
})
});
})(jQuery)
</script>Go to Divi → Theme Options → General Tab → Custom CSS and add this CSS code:
#divi-close-bar:hover {
cursor: pointer;
}
The result can be seen in the GIF below:
