Source: https://divicake.com/blog/how-to-create-a-promo-bar-in-divi-theme/ [Blog](https://divicake.com/blog/)/[Tips & Tricks](https://divicake.com/category/tips-tricks/) # How To Create A Promo Bar in Divi Theme By Divi Cake·3 March 2024·Updated 28 March 2024·5 min read Explore creating stylish promo bars effortlessly on your DIVI site with this simple guide. We may earn a commission from affiliate links in this post. [Disclosure policy](https://divicake.com/affiliate-disclosure-policy/) On this page - [To Create a promo bar by using DIVI without any plugins follow these steps:](https://divicake.com#to-create-a-promo-bar-by-using-divi-without-any-plugins-follow-these-steps) - [Step 1: Add a section module on top of your existing global header](https://divicake.com#step-1-add-a-section-module-on-top-of-your-existing-global-header) - [Customize the Layout Using the Divi Theme Builder](https://divicake.com#customize-the-layout-using-the-divi-theme-builder) - [Design your promo bar in the Divi Builder](https://divicake.com#design-your-promo-bar-in-the-divi-builder) - [Set Up The Divi Promo Bar Close Button](https://divicake.com#set-up-the-divi-promo-bar-close-button) - [Adding A Close X Button](https://divicake.com#adding-a-close-x-button) - [Adding CSS ID To Close X Button](https://divicake.com#adding-css-id-to-close-x-button) - [Adding CSS Class to the section](https://divicake.com#adding-css-class-to-the-section) - [Step 2: Adding JQuery code to add a clickable functionality to the close button](https://divicake.com#step-2-adding-jquery-code-to-add-a-clickable-functionality-to-the-close-button) - [Adding a mouse pointer when hovering over the X icon](https://divicake.com#adding-a-mouse-pointer-when-hovering-over-the-x-icon) - [Conclusion:](https://divicake.com#conclusion) Looking for a simple way to create an attractive promo bar for your website? In this easy-to-follow guide, you’ll discover how to effortlessly incorporate customizable promo bars throughout your [Divi](https://divicake.com/go/divi/) site using its basic features. You have the flexibility to design promo notification bars and assign them to any page or post type you desire! It only requires a bit of code, and we’ll guide you through the process step by step. So, let’s dive in and craft an eye-catching promo bar in Divi! ## To Create a promo bar by using DIVI without any plugins follow these steps: - Add a section module on top of the global header - Add JQuery code to add a clickable functionality to the close button ## Step 1: Add a section module on top of your existing global header ### Customize the Layout Using the Divi Theme Builder Customizing your promo bar becomes a breeze with Divi and its [Theme Builder](https://divicake.com/blog/divi-theme-builder-overview/). The beauty of it lies in the extensive control it offers. Whether you fancy having a promo bar exclusively on your shop pages, blog posts, or a specific page, you can make it happen. How? Simply assign the desired pages or post types within the Divi Theme Builder. Navigate to Divi > Theme Builder. If you’re already using the Theme Builder with a header or global header, that’s where you’ll make your adjustments. The flexibility is yours to explore! Read More: [How to Backup Your Divi/WordPress Site](https://divicake.com/blog/how-to-backup-your-divi-wordpress-site/) Personalize your promo bar’s design effortlessly with the Divi Theme Builder’s extensive layout customization options. Customize the Layout Using the Divi Theme Builder Include a section featuring a three-column row, as illustrated in the accompanying image. Row featuring a three-column layout. Row having three columns ### Design your promo bar in the Divi Builder To kick off, start by crafting your promotional bar within the [Divi Builder](https://divicake.com/blog/getting-started-with-divi-using-the-divi-builder/). Feel free to mix and match various Divi Modules to suit your preferences. A standard setup might involve using a text module, a button, and a close button, similar to what we’ve demonstrated in our example. Enhance user engagement with a dynamic and customizable promo bar on your website. Promo Bar ## Set Up The Divi Promo Bar Close Button To give your website visitors the option to hide the Divi promo bar, we’ll need to tweak some [CSS](https://divicake.com/blog/how-to-add-custom-css-to-divi/) classes, IDs, and add a bit of code. This way, when someone clicks to close it, the section will vanish. Don’t worry, the next three steps are straightforward, and each one plays a crucial role. Read More:[Autoplaying Videos in Divi: Unveiling 3 Methods Without the Need for Plugins](https://divicake.com/blog/autoplaying-videos-in-divi/) ### Adding A Close X Button To begin, incorporate a close icon (X) into your section. It’s a straightforward process, especially with Divi’s built-in icon font. Just utilize the icon code for “X” within your [layout](https://divicake.com/blog/free-divi-layouts/) by adding a Text Module to the section and pasting the following code:

M

Keep in mind that occasionally it may appear as an “M” for unknown reasons. However, if you use M as the icon code, it will still display correctly on the front end. This [code](https://divicake.com/blog/divi-code-ai/) is sourced from the ETmodules icon font family. Add the above code accordingly as shown in the image: Incorporate a close icon (X) seamlessly into your design for a user-friendly interaction. Adding A Close X Button ### Adding CSS ID To Close X Button Don’t forget to assign a CSS ID to the “Close X Button” containing the [icon](https://divicake.com/blog/divi-icons/) code. Simply navigate to the module where you added the code for the icon and access the settings. Within the Advanced tab, toggle open the CSS ID & Classes section, then insert the ID ‘close-promo’ into the designated CSS ID input field. Read More: [Adding Divi Theme Fade-in Effect to Text, Images, Modules and Buttons](https://divicake.com/blog/adding-divi-theme-fade-in-effect/) Assign a unique ID to the X icon for streamlined customization within your design. Adding ID to the X icon ### Adding CSS Class to the section The final step in setting up the Divi promo bar section is to assign a CSS class to it. Here’s how to do it: First, navigate to the section settings and click on the Advanced tab. Then, toggle open the CSS ID & Classes option. In the input field labeled CSS Class, type in “promo-bar” and hit enter. This class will help you customize the promo bar section according to your preferences. Integrate a designated class to the section for easy and efficient customization. Adding a class to the section Read More: [How To Make A Divi Sidebar Menu](https://divicake.com/blog/how-to-make-a-divi-sidebar-menu/) ## Step 2: Adding JQuery code to add a clickable functionality to the close button Paste this code in your Divi > Theme Options > Integrations tab in the “Add code to the < head > of your blog” code area. [Copy the JQuery Code from here](https://drive.google.com/file/d/1jUHhB1JnddtqrpnLqxfqPXoQCDBNeReN/view?usp=sharing) To get our Divi promo bar functioning properly, the initial bit of code involves jQuery. This code serves the purpose of concealing the promo bar when a visitor clicks the close or hide button. The crucial element here is the ID #close-promo, which represents the [button](https://divicake.com/blog/divi-scroll-down-button-tutorial/) triggering the action. So, when a user clicks the X icon, it essentially becomes the signal for the entire section to disappear. This happens seamlessly due to the CSS class we incorporated into the section, making the whole process intuitive for the user. Insert the provided code into the Divi Dashboard for seamless implementation and functionality. Adding the code to the Divi Dashboard #close-promo:hover { cursor: pointer; } ### Adding a mouse pointer when hovering over the X icon Read More: [Mastering Divi Mobile Menu: A Step-by-Step Guide to Personalizing and Styling](https://divicake.com/blog/divi-mobile-menu/) Paste this code in your Divi>Theme Options>Custom CSS code box. ### Conclusion: In conclusion, crafting an appealing promo bar for your website using Divi Theme Builder is a straightforward process. By following the steps outlined in this guide, you can seamlessly integrate customizable promo bars across your Divi site without relying on plugins. The Divi Theme Builder empowers you with the flexibility to [design](https://divicake.com/blog/divi-enhancement-guide/) and assign promo bars to specific pages or post types effortlessly. Starting with the addition of a section module on top of your global header, you can then leverage the Divi Theme Builder to customize the layout according to your preferences. The three-column structure, as depicted in the provided [image](https://divicake.com/blog/13-free-background-images-use-next-divi-website/), adds a visually appealing touch to your promo bar. Furthermore, the guide walks you through the process of designing the promo bar in the [Divi Builder](https://divicake.com/blog/divi-theme-builder-best-practices/), suggesting the use of Divi Modules like text, button, and close button for a standard setup. The inclusion of a close button allows users to hide the promo bar, and with the provided jQuery code, this functionality is seamlessly implemented. The code ensures that when a visitor clicks the close button, the entire promo bar section gracefully disappears. Remember to add the provided jQuery code to your Divi Theme Options in the Integrations tab to enable this functionality. Additionally, a nice touch is the CSS customization for the X icon, adding a pointer when hovered over, enhancing the user experience. By following these steps, you can create an eye-catching and functional promo bar on your Divi-powered website, providing a dynamic and engaging element for your visitors. Read More: [How To Create A Divi Mega Menu](https://divicake.com/blog/how-to-create-a-divi-mega-menu/) About the author Written by Divi Cake. ## Submit a comment Comments are read before they appear. Your email is not published. Comment NameEmail Company website Submit commentSubmit commentSubmit comment The comment form needs JavaScript for its spam check. Thanks. Your comment is waiting for review and will appear here once it is approved. ## Do you need help with … - [Divi websites](https://divicake.com/divi-website-development/) - [Divi plugins](https://divicake.com/divi-plugin-development/) - [Fix a site](https://divicake.com/fix-existing-site/) - [Beyond Divi](https://divicake.com/beyond-divi/) - [Technical SEO](https://divicake.com/technical-seo/) - [SEO content](https://divicake.com/seo-content/) ## Save Annually on Divi [Save 69% on Divi VIP](https://divicake.com/go/divi-vip/)[Save 69% on Divi Cloud](https://divicake.com/go/divi-cloud/)[Save 69%, Divi Team](https://divicake.com/go/divi-teams/) ## WordPress Hosting & Tools [100% off on Kinsta for 1 Month](https://divicake.com/go/kinsta/)[Get up to 62% off Bluehost hosting.](https://divicake.com/go/wordpress-hosting-blue-host/)[Save Up to 15% on Rank Math](https://divicake.com/go/rank-math/)[Get 50% OFF on all WPForms plans](https://divicake.com/go/wpforms/) ## More in Tips & Tricks [ Divi Condition Options Explained Tips & Tricks6 min read ### Divi Condition Options Explained How Divi condition options work: show or hide any section, row, column or module by post info, location, user, interaction, device or WooCommerce state. 3 October 2026](https://divicake.com/blog/a-look-at-the-new-divi-condition-options/) [ Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Tips & Tricks6 min read ### Divi 5 Video Autoplay (No Plugin): How to Autoplay Videos in the Divi Video Module Set Divi 5 video autoplay with the built in Video module settings, muted playback, and loop options, no plugin or custom code needed for it to work on phones. 26 February 2026](https://divicake.com/blog/divi-5-video-autoplay-no-plugin/) [ Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Reviews7 min read ### Divi Pro Pricing Explained: Is the Bundle Better Than Buying Add-Ons Separately? Divi Pro pricing bundles AI, hosting, cloud and support into one plan. See what each add-on costs alone and the point where the bundle stops paying off. 25 February 2026](https://divicake.com/blog/divi-pro-pricing-bundle-vs-addons/)