Top ways to Create Easy Notification Bars for Your WordPress Website

Website owners and bloggers use easy notification bars to increase engagement with readers. Also, it is an excellent way to announce upcoming events, product launch, and content updates.content. There are various ways to create a notification bar.

Notification bars are great. They do not hinder smooth user experience. Thus, you can quickly tell your news without making the user feel spammed. There are various ways you can create easy notification bars. In the first one, we will use a plugin. The second option does not require a plugin. However, it is not beginner-friendly.

Create an Easy Notification Bar Using OptinMonster

If you wish to convert your website visitors to subscribers or customers, then you should have an OptinMonster plugin. It has excellent features like countdown timers, lightbox popups, welcome mats, etc. the features help you increase site visitors and sales. The best you can do with an OptinMonster plugin is to create easy notification bars.

You will find plenty of templates within the plugin. Thus, you can create an alert bar within minutes. If you do not have OptinMonster, you can create an account from their website.

Go to OptinMonster and create a new campaign. Select a floating bar for your campaigns. Several campaign templates will pop up. Select one that attracts you.

Rename your template and type where you will use the bar. Start building the bar. It will appear at the bottom of the page. So, move it to the top and select the floating settings. Go ahead and change the text in the notification bar.

Customize the color, font, and size of the text. Also, set the countdown timer- It allows the notification to run till the countdown gets to zero.

Go to display rules and set the notification to pop at zero (0) seconds. Preview the bar and make any necessary adjustments; Save the notification bar once you are satisfied. Publish the bar and activate it. Refresh the campaigns onOptinMonster. The easy notification bar should appear on your website automatically.

Creating a Notification Using HTML and CSS

Some people opt to create notification bars without plugins. It has an advantage since it does not slow down your site speed. However, this method will need some coding expertise. If you do not wish to add some coding to your site, do not use this method.

The first step is to copy-paste custom CSS to our site. You will find the CSS at the appearance button, customizer option.

1 .alertbar {
2 background-color: #ff0000;
3 color: #FFFFFF;
4 display: block;
5 line-height: 45px;
6 height: 50px;
7 position: relative;
8 text-align: center;
9 text-decoration: none;
10 top: 0px;
11 width: 100%;
12 z-index: 100;
13 }

Copy the above CSS and paste on the Additional CSS box. The result should appear as below.

Click the publish button.

Add HTML code for the notification bar. You use a plugin by WordPress called Insert Header and Footer Plugin.
When at the plugin, click on the ‘insert header and footer.’ Copy and paste this HTML to the script box

We are currently closed due to Covid-19.

The bar should be as above.

Save the changes you have made. Your easy website notification bar should appear on your site.