How to Create Highly Effective Alert Bars for Your WordPress Site (In-Depth Guide)

After 15 years as a webmaster and working on hundreds of sites, I‘ve seen firsthand just how effective alert bars can be for engaging visitors and driving conversions.

If you want to add notification bars to your WordPress site, then you’re in the right place. This in-depth guide will teach you how to create highly optimized alert bars that capture attention and get results.

Why Are Alert Bars So Effective?

Before we get into the steps on how to make alert bars, let’s look at why you should use them:

  • They appear prominently at the top of the page. This gives your message prime visibility rather than getting lost on the page.

  • They are eye-catching. The contrasting color scheme draws the visitor‘s attention.

  • They convey a sense of urgency. Countdown timers, action-driven text, etc. can prompt visitors to take action.

  • They work across all site pages. You can display site-wide announcements, promotions, etc.

  • They boost conversions. Alert bars have been proven to increase conversion rates by up to 15% according to studies.

In short, alert bars are an effective tactic for engaging your visitors and driving the desired actions from them.

Method 1: Creating Alert Bars with OptinMonster

OptinMonster is one of the most powerful and flexible solutions for creating high-converting alert bars on WordPress sites. Here‘s an in-depth look at how to use it effectively:

Why OptinMonster for Alert Bars?

Here are some of the key benefits of using OptinMonster specifically for alert bars:

  • Beautiful pre-made templates to choose from
  • Easy drag and drop builder to customize designs
  • Advanced targeting and personalization options
  • A/B testing capabilities to optimize performance
  • Analytics to track conversion rates
  • Integrates with email and marketing platforms
  • Trusted by over 1 million sites

Step-by-Step Guide

Follow these steps to create great-looking and high-converting alert bars with OptinMonster:

Step 1: Install and Activate the Plugin

Register for an OptinMonster account, install the plugin, and connect your account. You‘ll need a Growth or higher plan to access bars.

Step 2: Create a New Floating Bar Campaign

In your WordPress dashboard, go to OptinMonster » Campaigns. Click "Create Campaign" and select the Floating Bar campaign type.

Step 3: Choose and Customize a Template

Browse OptinMonster‘s professionally-designed floating bar templates and select one that fits your needs. Customize the colors, text, fonts, countdown timer, and design.

Step 4: Set Up Display Rules

Configure when and where you want the alert bar to display. For example, you can show it:

  • On specific pages, posts, categories
  • After time on page
  • On exit intent
  • On mobile vs desktop
  • During set date ranges

Use these options to target your audience effectively.

Step 5: Integrate with Email and Analytics

Connect your email service like Mailchimp to collect leads from your alert bars. Use the analytics to track open and conversion rates.

Step 6: Publish and Test Your Campaign

Launch your campaign live on your site. A/B test different variations to figure out what converts best.

Benefit: OptinMonster makes it easy to create optimized alert bars that convert your visitors into subscribers and customers.

Method 2: Creating Alert Bars with Thrive Leads

Another excellent plugin for making alert bars is Thrive Leads. Here is an in-depth look at using it to boost your conversions:

Why Thrive Leads for Alert Bars?

Some key upsides of using Thrive Leads for alert bars:

  • No coding required
  • Mobile responsive out of the box
  • Variety of templates and customization options
  • Real-time behavior automation
  • Built-in analytics
  • High compatibility with Thrive products
  • Active user community for support

Step-by-Step Guide

Here is how to create high-performance alert bars using Thrive Leads:

Step 1: Install and Activate Thrive Leads

Install Thrive Leads either from your Thrive Account or Connect it to your Thrive account.

Step 2: Create a New Ribbon Lead Group

In your WordPress dashboard, navigate to Thrive » Leads. Click “Add Lead Group” and select “Ribbon” form type.

Step 3: Choose and Customize a Template

Browse the various ribbon templates and pick one. Customize the colors, text, fonts, images, and design to match your brand.

Step 4: Configure Display Settings

Decide exactly when and how often you want the alert bar to display. You can base it on:

  • Time on page
  • Scroll percentage
  • Referrer URL
  • And more…

This allows you to target your audience and maximize visibility.

Step 5: Integrate With Your Email and Analytics

Connect your email service to collect leads directly from your alert bars. Use built-in analytics to track open and conversion rates.

Step 6: Activate Your Alert Bar

Turn on the toggle for desktop and mobile visibility. Your high-converting alert bar will now be live across your site!

Benefit: Thrive Leads makes it super easy to create beautiful, responsive alert bars that convert your visitors.

Method 3: Coding a Custom Alert Bar

For complete customization flexibility, you can code your own alert bar HTML and CSS. Here is how to do it like a pro:

Why Take the Custom Coding Route?

While plugins make it easy to create alert bars, coding your own allows for:

  • 100% customized design and functionality
  • Completely seamless fit with your theme
  • Ability to add advanced features as needed
  • No reliance on third-party solutions
  • Full control over display logic

If you have coding skills, this option is worth exploring to create the perfect alert bars.

Step-by-Step Guide

Follow these steps for coding your alert bar:

Step 1: Create the CSS

Use CSS to style the alert bar. For example:

.alertbar {
  background: #f00; 
  color: #fff;
  padding: 10px;
  text-align: center;

Tweak the colors, fonts, width, position, etc.

Step 2: Add the Alert Bar HTML

Use HTML to structure your alert bar content:

<div class="alertbar">
  25% off all products! Use code: SALE25 

You can include text, images, links, etc.

Step 3: Implement Sitewide Display

Use hooks in your theme or a plugin like WPCode to insert the CSS and HTML sitewide.

Step 4: Enhance with Custom Features

Add any custom features as needed like exit intent, cookies, scroll based triggering, etc.

Step 5: Preview and Iterate

Preview on mobile and desktop. Make tweaks and enhancements until it’s perfect.

Benefit: You can create a 100% customized alert bar tailored to your needs by coding it yourself.

Essential Tips for High-Converting Alert Bars

Here are some pro tips to maximize the impact of your alert bars:

  • Use contrasting colors – A brightly-colored bar stands out against your site’s background.

  • Limit to one call-to-action – Don’t overwhelm with too many CTAs. Focus on one desired action.

  • Personalize your message – Visitors respond better to personalized messaging when possible.

  • Use urgency cues – Countdown timers, limited time offers, etc. convey urgency to prompt action.

  • Test different placements – Try different positions like top, middle, bottom to see what works best.

  • Watch your word count – Keep language short, scannable, and direct.

  • Ensure mobile responsiveness – Alert bars should display nicely on all devices.

  • Analyze performance – Use A/B tests and analytics to optimize based on data.


I hope this detailed guide helped you learn how to create highly effective alert bars for your WordPress site.

The key is to strategically combine placement, design, messaging, and display rules to capture your visitors‘ attention and direct them to your desired goal.

I recommend A/B testing different alert bar styles and offers to determine what resonates best with your audience. The data doesn‘t lie!

Let me know if you have any other questions. I‘m happy to help you implement alert bars successfully on your site.

Written by Jason Striegel

C/C++, Java, Python, Linux developer for 18 years, A-Tech enthusiast love to share some useful tech hacks.