How to Create an Attention-Grabbing Alert Bar in WordPress (2023)
Want to highlight an important announcement or special promotion on your WordPress site? An alert bar prominently displayed at the top of the page is an eye-catching and effective way to make sure visitors don‘t miss your message.
Alert bars, also known as floating bars or hello bars, are a popular conversion optimization tactic. When used well, alert bars can significantly boost key metrics like email signups, sales, or pageviews.
In this guide, we‘ll show you how to easily create an alert bar in WordPress, step-by-step. We‘ll cover 4 methods you can use:
- OptinMonster
- Thrive Leads
- Custom HTML/CSS code
- SeedProd page builder
Feel free to click the links above to jump to a particular method. By the end of this article, you‘ll be ready to add high-converting alert bars to your own site, even if you‘re not tech savvy.
Let‘s get started!
What Is an Alert Bar? 3 Key Benefits for Your Website
An alert bar is a strip of content that appears at the very top of the page, above the header and navigation menu. It remains "sticky" in that fixed position as the visitor scrolls down the page, ensuring your message stays visible.
Here are a few examples of alert bars in action:
The most common reasons to use an alert bar include:
Highlighting sales, promotions and special offers – An alert bar is the perfect place to advertise a storewide coupon code, a holiday sale, free shipping deal, or any other promotion. It puts your offer front-and-center.
Making announcements – Need to inform visitors about an important update like new store hours, a site outage, a product recall or a policy change? An alert bar grabs attention without being as intrusive as a popup.
Growing your email list – Many sites use alert bars to offer a lead magnet or content upgrade in exchange for an email address. With the right offer and call-to-action, alert bars can seriously boost your subscriber growth rate.
When you consider that most of your site‘s traffic lands on pages other than your homepage, it‘s crucial to have a way to put important messages and offers in front of visitors no matter what page they‘re on.
An alert bar lets you do exactly that in an unmissable yet unobtrusive way. That‘s why alert bars have become a staple in the conversion optimization toolkit.
Now that you know why alert bars are so powerful, let‘s look at how to easily create them on your WordPress site. We‘ll start with our recommended method.
Method 1: Create an Alert Bar with OptinMonster
OptinMonster is the best conversion optimization toolkit on the market. It lets you create all sorts of high-converting campaign types like popups, floating bars, fullscreen welcome mats, slide-ins, gamified wheels and more.
Here‘s how to use OptinMonster to create an alert bar on your WordPress site:
Step 1: Sign Up for OptinMonster
Head to the OptinMonster website and sign up for an account. To access the floating bar campaign type, you‘ll need a Pro plan or higher.
Step 2: Install the OptinMonster WordPress Plugin
Next, install the OptinMonster plugin on your WordPress site. In your WordPress dashboard, go to Plugins > Add New and search for OptinMonster.
Install and activate the plugin, then click the ‘Connect Your Existing Account‘ button.
[Screenshot]Log into your OptinMonster account to connect it with your WordPress site.
Step 3: Create a New Floating Bar Campaign
In your WordPress dashboard, go to OptinMonster > Campaigns. Click the ‘Create New Campaign‘ button and select the Floating Bar campaign type.
[Screenshot]Choose from one of the pre-built floating bar templates or start from scratch with a blank canvas.
Step 4: Customize Your Alert Bar
Now the fun part – customizing your alert bar‘s design and content! OptinMonster‘s drag-and-drop builder makes it super simple.
Use the editing tools to change the text, colors, images, fields and layout to your liking. You can choose from a variety of attention-grabbing elements like:
- Countdown timers to build urgency
- Dynamic text replacement to personalize the message
- High-contrast buttons to drive clicks
- Animation and sound effects to grab attention
The floating bar is set to appear at the bottom of the page by default, but you can change the position to the top if you prefer:
[Screenshot]Keep tweaking until your alert bar looks perfect. Hit the ‘Save‘ button before moving on to the next step.
Step 5: Set Display Rules
Click the ‘Display Rules‘ tab to control exactly where and when your alert bar appears.
By default, it will display on all devices after the visitor has been on the page for at least 5 seconds. But you can modify this to show the alert bar immediately, on specific pages only, or when the visitor takes a certain action like scrolling.
[Screenshot]Step 6: Publish Your Alert Bar
Once you‘re happy with your alert bar, change the Publish Status to ‘Publish‘. Then go to the Campaigns page in your WordPress dashboard.
Find your new alert bar in the list of campaigns and set the Status to ‘Published‘. Your alert bar is now live!
[Screenshot]Congrats, you‘ve just created your first alert bar with OptinMonster. Told you it was easy!
Method 2: Create an Alert Bar with Thrive Leads
Thrive Leads is another popular list building tool for WordPress that supports alert bars (called "ribbon" forms in their terminology). It‘s part of the Thrive Themes membership.
Here‘s how to create an alert bar with Thrive Leads:
Step 1: Get Thrive Leads
If you already have a Thrive Themes membership, you can install the Thrive Leads plugin from within your account dashboard.
Otherwise, head to the Thrive Themes website and sign up for an account that includes Thrive Leads.
[Screenshot]Step 2: Install Thrive Leads Plugin
In your WordPress dashboard, go to the Thrive Product Manager page. Click to log into your Thrive Themes account.
Select the Thrive Leads plugin and click ‘Install Selected Products‘.
[Screenshot]Step 3: Create a New Ribbon Alert Bar
Go to Thrive Dashboard > Thrive Leads. Next to the Lead Groups heading, click ‘Add New‘.
Enter a name for your new lead group and click ‘Add Lead Group‘.
[Screenshot]Under this lead group, click to add a new form of type ‘Ribbon‘. Give your form a name.
Step 4: Choose a Template and Customize
On the next screen, pick a template for your alert bar. You can preview each one and select the best fit for your needs.
[Screenshot]The visual editor will open, allowing you to customize the design and copy. Thrive Leads gives you lots of flexibility to modify the look and layout.
Step 5: Set Triggers and Targeting
Under the form settings, choose the triggers that will make your alert bar appear. You can set it to show immediately on page load, after a delay, on scroll or on click.
[Screenshot]Adjust the ‘Display Frequency‘ settings to control how often visitors will see the alert bar, e.g. every visit or every X days.
Step 6: Activate Your Alert Bar
Go to the Thrive Leads overview screen for your ribbon and activate it on desktop and/or mobile devices.
[Screenshot]Click the gear icon to open Display Settings, where you can choose to display the alert bar on specific posts and pages only.
That‘s it! Your Thrive Leads alert bar is now live and ready to collect email addresses.
Method 3: Manually Create an Alert Bar with HTML/CSS
For those who like to get their hands dirty with code, it‘s possible to create a basic alert bar using custom HTML and CSS.
We only recommend this method if you‘re comfortable editing your theme files. If not, stick with one of the plugin options above.
Here are the steps:
Step 1: Add CSS for Alert Bar Styling
First, add this CSS to your theme‘s stylesheet or the section of your header.php file to control the look of the alert bar:
[CSS code]This CSS positions the alert bar at the top of the page and sets the colors, sizing and spacing. Adjust the values to match your design.
Step 2: Add Alert Bar HTML
Next, paste this HTML snippet right after the opening tag in your header.php file:
[HTML code]Change the text inside the
Step 3: Customize Alert Bar Behavior (Optional)
With additional JavaScript, you can make your alert bar dismissible when the user clicks a close button.
You can also set it to only appear on certain pages, or only show the first time a visitor comes to your site.
[JavaScript code samples]Method 4: Create Custom Alert Messages with SeedProd
Finally, if you want to create more advanced, targeted alert messages for specific pages or products, SeedProd is your best bet.
SeedProd is a drag-and-drop landing page builder with an Alert block that supports dynamic content and query parameters. This allows you to customize the alert for each page.
For example, you could show a low-stock warning or limited-time discount alert on certain product pages only. Or add a special announcement to your checkout page.
[Screenshot]SeedProd‘s Alert block gives you lots of design options and integrates with your WordPress theme for a seamless look.
To learn how to use this block, check out our full SeedProd page builder tutorial.
Bonus Alert Bar Tips to Boost Conversions
Now that you know how to create alert bars in WordPress, here are some tips to maximize your results:
Keep it short and simple. Alert bars don‘t give you a lot of room to work with, so keep your message concise and to-the-point. Put the most important part first.
Create urgency. Use words like "today only", "ends tonight", "almost gone" etc. to motivate immediate action. Countdown timers are great for this.
Use contrasting colors. Make your alert bar visually distinct from the rest of your site so it gets noticed. Avoid blending in with your color scheme.
Have one clear call-to-action. What‘s the one thing you want visitors to do after seeing your alert? Focus on that and make your CTA button specific and compelling.
A/B test your alert bars. Try different copy, designs, offers and display rules to see what works best. Even small tweaks can have a big impact on conversion rates.
Follow accessibility guidelines. Make sure your alerts are perceivable and usable for visitors with visual impairments and other disabilities. Use proper heading structure, high color contrast, and ARIA attributes.
By following these tips and best practices, you can unlock the full potential of alert bars and start seeing real results for your business.
Over to You
Adding an alert bar to your WordPress site is an effective way to put your most important messages front-and-center and drive more conversions.
As we‘ve shown in this post, creating alert bars is easy with tools like OptinMonster and Thrive Leads. Even non-techies can get one up and running in just a few minutes.
So what are you waiting for? Try implementing alert bars on your own site and see how they can help you achieve your goals.
Have any other questions about alert bars or conversion optimization? Let us know in the comments!
){kind=link}