Notification bars are an effective way to draw visitors’ attention to your website and provide important information. A well-designed notification bar may be a useful tool for various purposes, such as promoting a new product launch, promoting a special offer, and many more.
That is great news! If you are using Divi, you can create a notification bar without using third-party plugins. This article will show you how to create a notification bar that fits in with your website’s design, both functionally and aesthetically, utilizing Divi’s built-in capabilities and adding some code (CSS, and jQuery).
You can improve the communication strategy of your website and unlock the full power of notification bars without using any third-party plugins.
Steps to Create Notification Bar in Divi without Plugin
Step 1: Adding a Section
Alright. Let’s start to design the notification bar. Go to the Divi Theme Builder, then edit your existing global header.
One of the things we enjoy most about using Divi to create a notification bar is the amount of control it offers. You can choose to have your notification bar appear on specific pages, such as your front page, blog page, shop page, etc.
Once you’ve entered the Global Header Layout editor, add a three-column row.
- Section Settings
Navigate to the Design tab, click the Spacing toggle, and change all margins and paddings to 0px. You can also add your preferred background color if you want to.
.
- Row Settings
In the Row Settings, we apply several changes, as follows:
- Sizing
- Width: 100%
- Max. Width: 100%
- Spacing
- Margin: Add the margin of 0 pixels for all sides.
- Padding: Add 5 pixels of padding to all sides.
Step 2: Adding Modules
Now that you have your sections and rows styled, next, we need to add the Text, Button, and Icon modules inside the three columns you’ve prepared.
The main difference between a notification bar and another feature is the ability to dismiss it manually. A close button in a notification bar is designed to let your web visitors dismiss the notification whenever they want. It offers the most user control.
Feel free to style them any way you like, but we have included examples of how we did it as follows:
- Text Module
- Text Font: Montserrat
- Text Font Weight: Medium
- Text Color: #000000
- Text Size: 16px
- Text Alignment: Right
- Margins and Paddings: 0px
- Button Module
- Add the button link URL
- Alignment: Left
- Enable the “Use Custom Styles For Button” option (Design tab -> Button).
- Button Text Size: 12px
- Button Text Color: #ffffff
- Button Background: #e02b20
- Icon Module
- Icon: “X”
- Icon Color: #000000
- Icon Size: 20px
- Alignment: Center
- All Margin: 0px
- All Padding: 0px
Step 3: Adding Custom CSS and jQuery Snippets
The last and most crucial phase has arrived. To enable the close button to function upon user click, we must first add a custom CSS class and ID to the section and icon modules.
- Add the CSS class to the Section
Go to the Section Settings -> Advanced tab -> CSS ID and Classes. Next, add the class name wpp-notification-bar into the CSS Class input field.
- Add the CSS ID to the Icon Module
Navigate to the Icon Module Settings -> Advanced tab -> CSS ID and Classes. Next, add the class name wpp-notification-bar-close into the CSS ID input field.
Click the Save button to save your header template, and then save the theme builder settings after quitting the header template editor.
Add the jQuery Snippet
It is very easy to add jQuery code to your Divi theme! And it does not appear to be what you think.
Go to the Divi Theme Options page (Divi -> Theme Options) and navigate to the Integration tab. Next, paste the jQuery snippet below into the Add code to the < head > of your blog field.
<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('.wpp-notification-bar').show();
} else {
jQuery('.wpp-notification-bar').hide();
}
jQuery('#wpp-notification-bar-close').click(function() {
{
jQuery('.wpp-notification-bar').hide();
Cookies.set('pa_promo_bar_shown', 'dismiss', {
expires: date
});
}
});
});
</script>
Add the CSS Snippet
To control the appearance of a close button in a notification bar when the user hovers their mouse over it, we need to add a simple CSS snippet to your Divi. This snippet will change the cursor to a pointer and remove any default line spacing around the button.
Copy the CSS snippet below and paste it into the Custom CSS input field ((Divi -> Theme Options -> General tab)
#wpp-notification-bar-close:hover {
cursor: pointer;
line-height: 0;
}
Once the jQuery and CSS snippets are added, apply the changes by clicking the Save Changes button.
And that is it. We advise viewing your website in a separate incognito window to view the outcome of the notification bar you just constructed.
The Bottom Line
With Divi’s built-in capabilities and a little help from jQuery and CSS code, you can easily design excellent notification bars without the need for plugins, which can provide more functionality and flexibility.
This approach gives you good control over the design and functionality of your notification bar without the need for additional installations.
With some creativity and the steps outlined above, you can craft notification bars that seamlessly integrate with your website and effectively communicate your message to visitors.
