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.
Contents
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 ThriveThemes.com. 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
</div>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.
Conclusion
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.
