How to Create an Alert Bar in WordPress (3 Easy Ways)

Do you need to add an alert bar to your WordPress web site?

An alert bar or notification bar is a good way to let guests find out about essential updates, particular provides, new product launch, and so on.

In this text, we’ll present you ways to create an alert bar in WordPress with Three simple options.

Creating an alert bar for your WordPress site

Why Create an Alert Bar in WordPress?

An alert bar is a good way to let your guests find out about something essential. That might be an ongoing gross sales occasion, replace about your opening instances, or adjustments to your companies.

You also can use an alert bar to inform guests a couple of particular deal, reminiscent of a purchase one get one free supply. This is a good possibility in case you run an on-line retailer.

Using an alert bar is best than simply placing an announcement in your homepage. Your alert bar can seem prominently proper on the high of each web page throughout your complete web site.

It’s simple to create an alert bar in WordPress. We will cowl the two greatest notification bar plugins plus a handbook methodology utilizing HTML and CSS code. Simply click on the hyperlinks under to soar straight to every possibility:

  • Method 1: OptinMonster
  • Method 2: SeedProd
  • Method 3: Custom HTML and CSS

Method 1: Creating an Alert Bar Using OptinMonster

OptinMonster is the very best conversion optimization software program available on the market. It helps you exchange extra web site guests into subscribers and clients.

It comes with lovely lightbox popups, welcome mats, countdown timers, and different dynamic overlays that assist you to improve subscribers and gross sales to your web site.

You also can use OptinMonster to make an alert bar to your web site. Here’s the one we’re going to create:

Alert bar created in OptinMonster

There are a lot of pre-built templates inside OptinMonster. This makes it very easy to create an alert bar that appears nice inside minutes.

First, you want to go to the OptinMonster web site and join an account.

Next, you want to set up and activate the OptinMonster WordPress plugin. For extra particulars, see our step-by-step information on how to set up a WordPress plugin.

This plugin connects your WordPress web site to the OptinMonster app.

Upon activation, you want to enter your license key. You can discover this in your account space on the OptinMonster web site.

In your WordPress dashboard, click on the OptinMonster menu. You then want to click on the ‘Connect Your Account’ button. Just comply with the on-screen prompts to join your WordPress web site to your OptinMonster account.

Connect your WordPress site to your OptinMonster account

After connecting OptinMonster, merely go to OptinMonster » Campaigns in your WordPress dashboard. Go forward and click on the ‘Create New Campaign’ button:

Create a new campaign in OptinMonster

You shall be taken into the OptinMonster marketing campaign creation software. From right here, you want to choose ‘Floating Bar’ as your Campaign Type.

Pick the Floating Bar campaign type for your alert bar

Next, you will note a selection of marketing campaign templates. Simply select a template that you really want to use. You simply want to convey your mouse over it and click on the ‘Use Template’ button to choose it.

We’re going to use the ‘Promo’ template for our alert bar:

Using the promo template for the alert bar

Next, you may be prompted to give your template a reputation and select what web site you’re going to apply it to. OptinMonster ought to have already crammed in the identify and URL of your web site right here.

Name your OptinMonster campaign

Once you’ve named your marketing campaign, click on the ‘Start Building’ button.

Now, you will note the marketing campaign editor. This is the place you possibly can design your marketing campaign.

You will see that your alert bar seems on the backside of your display screen by default. To transfer it to the highest of the display screen, click on ‘Floating Settings’ on the left hand facet.

Changing the floating settings for your alert bar

Next, simply click on the slider to transfer the floating bar to the highest of the web page:

The floating bar is now positioned at the top of the page

To change the textual content on the floating bar, merely click on on the realm you need to change. The editor will open up on the left hand facet. Just kind any textual content you need right here.

Editing the text for your alert bar

You also can change the font, the dimensions and coloration of the textual content, and extra.

To change the countdown timer, merely click on on it then click on the Countdown tab. Then go forward and enter your required finish date and time.

Editing the countdown timer for your alert bar

You also can set the timer to act as an evergreen countdown as a substitute of a static countdown, in case you want. An evergreen countdown is about individually for every customer to your web site.

Go forward and make as many adjustments to your alert bar as you need. Once you’re proud of it, don’t overlook to click on the Save button on the high of your display screen.

Saving your OptinMonster campaign

Next, you want to go to the ‘Display Rules’ tab to choose when and the place your alert bar will show in your web site. The default rule is to your alert bar to show after the customer has been on the web page for five seconds.

We’re going to change this to Zero seconds, so the alert bar seems immediately. Just change the ‘sec’ countdown to 0:

Changing the display rule for your alert bar

Then, click on the ‘Next Step’ button, and go away the motion as ‘present the marketing campaign view: Optin’ on the following display screen. Click ‘Next Step’ as soon as extra and you will note a abstract.

Summary of the display rules for your alert bar

Once you’re pleased, merely click on the ‘Save’ button on the high of the display screen, then click on the ‘Publish’ tab. Click the ‘Status’ slider to set it to Active.

Switching on your alert bar in the OptinMonster interface

The ultimate step is to activate the marketing campaign in your web site itself. Click on the OptinMonster tab in your WordPress dashboard, then click on the ‘Refresh Campaigns’ button

Click the button to refresh your OptinMonster campaigns

You will then see your marketing campaign listed right here.

Your OptinMonster campaign should be listed in your WordPress dashboard

Simply go to any web page in your web site, and you will note your marketing campaign in motion:

Alert bar created in OptinMonster

Method 2: Creating an Alert bar utilizing SeedProd

Another manner to make an alert bar is to use the SeedProd WordPress plugin. SeedProd is greatest recognized for its ‘coming quickly’ and upkeep mode pages for WordPress.

SeedProd additionally has a Notification Bar plugin which you could get if you join any paid package deal.

First, you want to go to the SeedProd web site and join an account. Next, go to the ‘Downloads’ web page inside your account and obtain the Notification Bar Pro plugin:

Downloading Notification Bar Pro from SeedProd

Then, you want to set up and activate the Notification Bar Pro plugin in your web site. For extra particulars, see our step-by-step information on how to set up a WordPress plugin.

Upon set up, you will note a web page the place you want to enter your license key. You can discover this in your SeedProd account.

Entering your license key for Notification Bar Pro

Next, go to Settings » Notification Bar Pro the place you’ll begin creating your notification bar. Simply enter a reputation for it and click on the ‘Create Bar’ button.

Creating a notification bar in SeedProd

You will now see the SeedProd notification bar editor. To start with, the notification bar will present as an orange strip on the high of the display screen:

The editing interface for your notification bar

To add textual content to the notification bar, click on the ‘Call to Action Message and Button’ tab on the left hand facet. Simply enter the textual content you need to use. If you need to add a name to motion button, you possibly can enter the textual content and the hyperlink for the button:

Editing the text for your notification bar

By default, the textual content can have the identical font and measurement as the primary textual content in your WordPress theme. To make it bigger, simply click on on the ‘Typography’ tab.

Here, you possibly can set any font and measurement you need for each the textual content of the bar itself and the button textual content.

Changing the typography settings for your notification bar

If you need, you possibly can change the colour of your bar and button in the ‘Colors’ tab.

You may even add different parts to your notification bar, reminiscent of an e mail optin, a countdown timer, click on to name button, and even hyperlinks to your social profiles.

When you’re pleased along with your notification bar, click on the ‘Enable/Disable Bar’ tab then change to the ‘Enable Bar’ possibility. Finally, click on the ‘Save’ button on the high of the display screen.

Enable your notification bar to put it live
Your notification bar will now seem in your web site:

The notification bar displaying live on our website

Method 3: Manually Create an Alert Bar Using Custom HTML/CSS

What in case you don’t need to use OptinMonster or Notification Bar Pro? In this methodology, we’ll present you ways to create a notification bar utilizing HTML and CSS code.

Note: We don’t advocate this methodology for freshmen. If you’re new to WordPress or don’t really feel assured including code to your web site, then we advise utilizing one of many plugin strategies above as a substitute.

First, you will want to copy and paste some customized CSS code for the alert bar. Simply go to Appearance » Customizer web page in your dashboard, then click on the ‘Additional CSS’ tab on the backside.

Entering additional CSS in the theme customizer

Now, go forward and replica and paste this CSS code into that field:

.alertbar { 
    background-color: #ff0000; 
    coloration: #FFFFFF; 
    show: block; 
    line-height: 45px;
    top: 50px; 
    place: relative; 
    text-align: middle; 
    text-decoration: none; 
    high: 0px; 
    width: 100%;
    z-index: 100;
}

After you’ve copied that code, it ought to seem like this. Simply click on the Publish button on the high of the web page to save your CSS code.

The additional CSS as displayed in the theme customizer

Next, you want to add the HTML code for the alert bar textual content to your web site.

The greatest manner to do that is to set up and activate the free Insert Headers and Footers plugin.

Note: Insert Headers and Footers is certainly one of WPBeginner’s personal plugins. We created it to make it very easy to add scripts, HTML code, and extra to your web site pages.

After activating the plugin, go to Settings » Insert Headers and Footers in your WordPress admin. Just copy and paste the next line of HTML code into the ‘Scripts in Body’ field:

<div class="alertbar">We are at the moment closed due to Covid-19.</div>

Here’s how that code ought to look in the ‘Scripts in Body’ field of Insert Headers and Footers:

Adding the HTML code using the Insert Headers and Footers plugin

Of course, you possibly can change the alert textual content to the rest you want. Don’t overlook to click on the ‘Save’ button on the backside of the web page when you’re performed.

Now, you possibly can go to your web site to see the alert bar. It ought to seem on the high of each web page, like this:

The CSS alert bar live on the website

Tip: In a number of WordPress themes, your alert bar could overlap your menu. You might alter the peak of the bar to 40px or 30px to keep away from this. You may also want to scale back the road top accordingly, in order that your textual content stays centered vertically in the bar.

We hope this text helped you learn the way to create an alert bar in WordPress. You may additionally like our comparability of the very best WordPress drag & drop web page builders to assist you to additional customise your web site with out writing any code, and our checklist of the very best WooCommerce plugins to develop your retailer gross sales.

If you preferred this text, then please subscribe to our YouTube Channel for WordPress video tutorials. You also can discover us on Twitter and Facebook.

The publish How to Create an Alert Bar in WordPress (3 Easy Ways) appeared first on WPBeginner.



Leave a comment

Your email address will not be published. Required fields are marked *