Sometimes a simple alert bar or notification bar is more effective to catch the user’s concentration rather than using a huge article, blog, or section on the WordPress website. An alarm bar or notification bar is an extraordinary method to tell the visitors about significant updates, unique offers, new item dispatches, and so on. So today, in this article, I’m going to share with you how to create a special alert bar in WordPress Website.
Why do You need to create a special alert bar in WordPress Website?
An alarm bar is an extraordinary method to inform your visitors about anything significant. That could be a new offer, any update about your sales event, any major or minor notice, or changes to your services. You can simply create a special alert bar on the WordPress website for various reasons and purposes. Such as, to notify you visitors about special offers, statements, reminders, subscriptions, etc. Using an alert bar is such a creative and initiative idea than just putting an announcement on your homepage. It’ll catch more attention from your visitors to reach the thing that you’re exactly want to deliver them. So, this is pretty much better to create a special alert bar in WordPress Website.
The three different and easy methods are:
To make this article easier and understanding to you, I’ll divide this article into 3 different methods. These three methods are easy and simple to understand for anyone. So, don’t take any extra headache, just go with which method you like most.
1: Creating a special alert bar in WordPress Website by using OptinMonster.
2: Creating a Special Alert bar in WordPress Website by using the SeedProd.
3: Creating a special alert bar by using Custom HTML and CSS.
So, without wasting our time let’s know about how to create a special alert bar in WordPress Website easily with three different methods. Please have a look at these three methods and go with the one, which you prefer most. If you’re a beginner and you don’t have much idea about raw coding then I suggest not go with the last method.
Creating a special alert bar in WordPress Website by using OptinMonster.
Before starting, I’m going to share with you something about the Optinmonster plugin. This is one of the best popup builder and marketing plugin that helps you get more email subscribers, increase sales, and grow your business. You can easily turn to abandon your website visitors into subscribers and customers. OptinMonster offers you to create beautiful popup forms, email subscription forms, sticky announcement bar (hello bar), gamified spin a wheel opt-in forms, and other types of interactive popups for your site easily within a short period of time. So, let’s create a special alert bar in WordPress Website by using this smart plugin.
Step 1: To create a special alert bar in WordPress Website by using OptinMonster firstly you need to have signed in at the OptinMonster website. Go to the website and sign up first.
Installing OptinMonster Plugin
Step 2: Now you have to install the plugin. To install the plugin go to your WordPress dashboard » Plugin » Add New » Search OptinMonster » Install and Activate. This plugin connects your WordPress site to the OptinMonster app. After activation, you need to enter your license key. You can find this in your account area on the OptinMonster website.
Step 3: Now go to your WordPress dashboard. Click on the OptinMonster menu, here you will see the ‘Connect Your Account’ button. Click on the button and follow the on-screen prompts to connect your WordPress website to your OptinMonster account.
Step 4: Now it’s time to create a special alert bar in WordPress website. After activating the plugin properly, just go to OptinMonster » Campaigns in your WordPress dashboard. Go forward and click the ‘Create New Campaign’ button to create a campaign alert bar.
Step 5: You have to choose the formate of your alert bar how it’ll look like! Here, you need to select ‘Floating Bar’ as your Campaign Type. The campaign bar will show like the floating bar preview.
Step 6: Now you’ll have an option to the choice of campaign templates. Just choose a template that you prefer most. You have to bring your mouse over the template and click the ‘Use Template’ button to select your preferred one.
Step 7: Next, you will be proposed to give your template a unique name and choose what website you’re going to use it on. OptinMonster should have already filled in the name and URL of your website here. Once you’ve named your campaign, then click the ‘Start Building’ button to move forward.
Editing the Alert Bar
Step 8: Here, you will see the campaign editor. You can simply design your campaign as you want. You will see that your alert bar appears at the bottom of your screen. It’s the default design. To move it to the top of the screen, click ‘Floating Settings’ on the left-hand side.
To do this, just click the slider to move the floating bar to the top of the page.
Now you can simply add any text or message or wish on the floating bar. To add your text, simply click on the area you want to change. The editor will open up on the left-hand side. Now type any text you want here. You can also change the font, the size and color of the text, and more.
You can add a countdown timer here also. To add or change the countdown timer, just click on it then click the Countdown tab. Then go forward and enter your desired end date and time.
Keep doing the changing until you’re fully satisfied with the alert bar which you’re looking for. If you’re done with it, don’t forget to click the Save button to complete the action at the top of your screen.
Additional Settiongs Of OptinMonster
Step 9: There is an important thing, that is when and where your alert bar will display on your site? By default, If the visitor has been on the page for 5 seconds then the alert bar will be displayed. If you need to modify this or change the time you can easily do this.
If you want to show the alert bar on your website after entering the visitors instantly, then follow this instruction carefully. To do this you need to change the ‘sec’ countdown to 0. Now click the ‘Next Step’ button, and leave the action as ‘show the campaign view: OptinMonster on the next screen. Click the ‘Next Step’ button again and you will see a summary.
If you’re satisfied then simply click the ‘Save’ button at the top of the screen, now click the ‘Publish’ tab. Click the ‘Status’ slider to set it to Active.
Step 10: The final step is to activate the campaign on your website itself. You have to click on the OptinMonster tab in your WordPress dashboard, then click on the ‘Refresh Campaigns’ button to finish the process.
To make sure that everything is going well as you expected just visit your website and have a look at it. That is the method no 1 of creating a special alert bar in WordPress website easily.
Creating a Special Alert bar in WordPress Website by using the SeedProd
This is another way to create a special alert bar in the WordPress website easily. In this method, I’m using the SeedProd plugin to create a special alert bar. SeedProd is very well-known for its ‘coming soon’ and maintenance mode pages facility for WordPress. It also has a Notification Bar plugin that you can get only when you sign up for any paid package. Now create your own special alert bar in your WordPress website by using the Seedprod plugin as I guide you. I hope you’ll enjoy this method. Let’s start.
Step 1: The first thing you have to do that is visiting the SeedProd website and sign up for an account if you didn’t sign up before. Now, you have to go to the ‘Downloads’ page within your account and download the ‘Notification Bar Pro plugin‘.
Installing the Notification Bar Pro plugin
Step 2: Now you have to install the plugin. To install the ‘Notification Bar Pro plugin’, go to your WordPress dashboard » Plugin » Add New » Search ‘Notification Bar Pro plugin’ » Install and Activate. After installation of the plugin, you will see a page where you need to enter your license key. You can get this in your SeedProd account.
Step 3: To create a special alert bar in WordPress website you have to go to Settings » Notification Bar Pro where you will start creating your notification bar. Then simply enter a name for it and click the ‘Create Bar’ button. Now, you will now see the SeedProd notification bar editor. To start with the notification bar will show as an orange stripe at the top of the screen.
Styling The Alert Bar
Step 4: You can style the alert bar as your own style. To add text to the notification bar, you have to click the ‘Call to Action Message and Button’ tab on the left-hand side. If you need to add a call to action button, you can enter the text and the link for the button.
By default, the text will get the same font and size as the main text in your WordPress theme. To change it larger, just click on the ‘Typography’ tab. Here, you can easily set any font and size you prefer for both the text of the bar itself and the button text. If you need to can change the color of your bar and button in the ‘Colors’ tab. You can even add other elements to your notification bar, such as an email option, a countdown timer, click to call button, and even links to your social profiles also. Isn’t it very much flexible to use?
Step 5: If you’re happy with your notification bar, now click the ‘Enable/Disable Bar’ tab then switch to the ‘Enable Bar’ option. Finally, you have to click the ‘Save’ button at the top of the screen to save all the changes. Now visit your website and have a look at your newly crates special alert bar!
Creating a special alert bar by using Custom HTML and CSS.
So, In the previous two methods, I was showing you how easily you can create a special alert bar on the WordPress website. If you don’t feel comfortable with these two previous methods don’t worry, I’ve another method for you. Now I’m going to share with you how to create a special alert bar in WordPress website by using Custom HTML and CSS codes. Stay with me, and follow the steps.
Note: I don’t suggest this technique for beginners. In case you’re new to WordPress or don’t feel certain adding code to your site, at that point I propose utilizing one of the module techniques above.
Adding Additional CSS
Step 1: To remove your extra headache of creating custom CSS codes I already made some CSS code for the alert bar. The only one thing you have to do is copy and paste these custom CSS codes for the alert bar. To do this, simply go to Appearance » Customizer page in your dashboard, then click the ‘Additional CSS’ tab at the bottom.
Now, go forward and copy and paste this CSS code into that box.
.alertbar {
background-color: #ff0000;
color: #FFFFFF;
display: block;
line-height: 45px;
height: 50px;
position: relative;
text-align: center;
text-decoration: none;
top: 0px;
width: 100%;
z-index: 100;
}
Step 2: After you’ve copied that code, it should look like this. Now you have to click the Publish button at the top of the page to save your CSS code.
Step 3: Now it’s time to put the HTML code for the alert bar in your WordPress website. Here I prefer to use the Insert Headers and Footers plugin. It’s a free plugin. To do this just install and activate the plugin now.
Adding HTML Code
Step 4: After activating the plugin, you have to go to Settings » Insert Headers and Footers in your WordPress admin. Now, just copy and paste the following line of HTML code into the ‘Scripts in Body’ box.
Custom HTML Code
<div class="alertbar">We are currently closed due to Covid-19.</div>
Step 5: Here, you can easily change the alert text to anything else you like. But, don’t forget to click the ‘Save’ button at the bottom of the page once you’re done. Now visit your website and check everything is working well properly.
If everything is going well, then congratulations! You’ve done an amazing job. That’s how you can create a special alert bar on the WordPress website easily. If you have any query about this article don’t forget to comment, I’ll try to give you feedback.
Related Blog: How To Create Sticky Elements For WordPress Website Without Plugin
Follow Us on Youtube
You can catch us on:
Facebook: https://facebook.com/webextent.net/
Twitter: https://twitter.com/WebExtent
Instagram: https://www.instagram.com/webextentofficial/
Regards.
Tags: Custom Alert bar Custom Notification Bar wordpress WordPress Alert bar WordPress hacks WordPress Notification Bar WordPress tips WordPress tricks WP
0 comments