How to Set Up a WordPress Notification Bar in a Few Steps
There are many different types of messages you may want to convey on your website. Each of them requires an appropriate channel. Big pop up boxes, promotional banners and similar are very convenient but might seem too pushy at times. Besides, site visitors easily get enough of them, which may lead to high bounce rates. If you are thinking about a sleek, unobtrusive yet effective way to capture your visitors’ attention and get a message across, a WordPress notification bar might be just what you are looking for.
Notification Bar – What Is It Used For
The notification bar can be used for a variety of purposes. It can certainly help you in driving more traffic to dedicated pages. You could use it to grow your email list by offering a newsletter subscription or share site-wide information.
It can be very beneficial if, for instance, you have an eCommerce WP theme. You can display shipping information there since this is the kind of info that all your site visitors certainly want to know. You will also find it very convenient to advertise a sale or a new product as well. Displaying a promo code in a notification bar is also a great idea.
Furthermore, you can use it to share your contact info. This way, you are enhancing communication with the site visitors as they don’t have to open another page just to find it. And if you add social icons in the bar, it is a proven recipe for growing your social network connections.
Any type of website can benefit from a well-designed notification bar. Just think of the possibilities. You could use it as a CTA banner to invite site visitors to subscribe, register, click to download certain material, make a special order and similar.
Now, if your WP theme doesn’t already have a notification bar you can easily set one up with one of the WordPress notification bar plugins.
Set a Notification Bar Using the WPFront Notification Bar Plugin
WPFront is a reliable and practical notification bar plugin. It is very popular among WordPress users thanks to its simplicity and effectiveness. It is fairly easy to set up and offers just the right amount of customization options. Since it is very light, you can be sure that it will not slow down your website or affect its performance in any negative way. Now we will show you how to set it up in just a few steps, and create just the perfect notification bar for your website.
Once you have installed the plugin, click on the Settings and then on Notification Bar in the dropdown menu.
Clicking on it will open all the available settings for the notification bar. The first thing to do is, logically, to check the box that says Enabled.
After you enable the notification bar here, it will be visible on all pages and you can continue to customize it. All the customization options are shown on this page.
You will notice that the notification bar shows up as a preview in the backend on the notification bar settings page, which is very convenient as you don’t have to go back and forth to check what it looks like on the live page. You can see your customizations live and, once you’re happy with what you see, click on Save.
This plugin allows you to choose the location where you want to display your notification bar – it can be the top or the bottom of the page. In case you opt for the top position, you can also decide how close to the upper screen edge you want the bar to appear by using the Position Offset option. However, this is not possible for the bottom position.
As for the bar behavior you can choose from Fixed at Position and Display on Scroll. If you choose the first option, the bar won’t be influenced by the page scroll, it will remain in the same position at all times. If you choose the second option, the bar will show up when you scroll the page. It won’t be visible immediately, and, under Scroll Offset, you can choose after how many pixels you want it to show up. In order for the Display on Scroll option to work, you have to uncheck the Fixed at Position first!
Animation
You can make your notification bar static or animated. You choose this by setting the Animation Duration. If you set it to 0, the animation will be turned off and the bar will be static. To animate the bar, enter how much time the animation will take. For example, if you set it to 3 seconds, the bar will appear gradually during the 3 seconds. The animation is a nice way to emphasize the bar as it makes it appear gradually and thus drives attention to it.
If you don’t want your notification bar to show immediately after the page loads, there is the Display After option. It allows you to set how much time after the page is loaded you want the bar to show up.
The Auto Close After option allows you to make the bar disappear after a set amount of time. If the bar is animated, it will close the same way it opened – gradually.
Content
When it comes to the options you can display on the navigation bar, you have the Display Close button which enables the visitor to close the bar, and the Display Reopen button which gives the visitor the chance to reopen the bar if needed. If this option is disabled, the bar won’t show up until the page is reloaded or won’t show up at all in case the option Keep Closed is enabled. The option Keep Closed For allows you to set the time after which the bar will show up again.
To define the text content of the bar, use the Message Text field where you enter the text you want to be displayed in the bar. Additionally, you can style it using HTML. You don’t even have to be particularly skilled in HTML.
If, for example, you wish to change the font size you will simply adjust it by entering the desired size in the Message text field. You will add this text in the field:
<span style="font-size: 20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>.
and the only thing you should change here is the number, which represents the font size.
Now, if you want to have a button displayed next to the text in the bar, check the option Display Button. Then enter the text you want to have displayed in the field Button Text. As for the functions of the button, you can choose between the following options:
If you want the bar to stop showing up after the visitor has clicked on it, you can easily set this by checking the option Close Bar on Button Click. This makes sense particularly if the notification is a CTA button. For example, once the visitor clicks on the button Subscribe to our newsletter in the notification bar, he is redirected to the page with the details about subscription, and the notification bar does not show anymore since its purpose is accomplished.
If you don’t want your navigation bar to be visible to everyone all the time, you can make use of one of the several filtering options. You can set how long you want the bar to be displayed by setting the dates in the Start Date & Time and End Date & Time fields. You can also select on which pages you want the bar to be displayed by checking some of the options of the Display on Pages setting.
When it comes to who can see the navigation bar, you can make it visible only to certain users simply by checking the boxes in the field Display for User Roles.
Design and Colors
The plugin offers some cool features for styling the look of the bar too. You can adjust the Bar Height – by setting the number of pixels. Since this bar should be appealing but not large, take care not to overdo it. Another interesting feature is that you can add a shadow to the bar, by checking the Display Shadow option.
It is interesting that you don’t have to make the bar unicolor – you have the option to set two colors and create gradients. Furthermore, you can set the text color, and colors for all the buttons too.
Custom CSS
The WPFront Notification Bar plugin also allows you to write additional CSS to adjust the style even further.
Let’s now mention a couple of CSS customizations that are used fairly often, such as the font size change, for example. What might puzzle you about it is that, when you change the font size of the message text, it might fall out of line with the button next to it. This can be easily fixed. When you change the font size, it is recommendable to define the class of the element to which we will assign certain values:
<span class="text-bar" style="font-size: 20px">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</span>
In our example, the class is a text-bar, you can do the same for some other class.
We will describe it like this in CSS:
.text-bar {margin-bottom: 0px;}
This way we will align the text and the button. Of course, you might need to use a different value. It is best to inspect the desired element to find out the value you need. You can assign any other characteristic to the class depending on what you want to change.
Another interesting feature is that you can also adjust the shadow, which by default is pretty dark. You can, for example, adjust it like this and make it lighter:
wpfront-bottom-shadow {box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.2);}
And don’t forget – you need to click on Save after every change you make in order for them to actually take effect!
In Conclusion
When used properly, the navigation bar can bring you plenty of benefits. Feel free to test it for different purposes. We listed just some of the ideas to inspire you, but we are sure you can think of plenty of other reasons to use it. Style it, customize it and share your experience with us!
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
