Notification Bars: Surprisingly Simple Designs That Make Your Time Sensitive Info Stand Out

When you want to promote a limited time offer or communicate some time sensitive information to your online visitors, what’s the best way to grab their attention and get your message across?

Meet the Notification Bar

It’s a narrow, screen-width banner that appears at the very top of posts and pages that either communicates a brief message or promotes a limited time service, product or offer to online visitors.

In their simplest form, notification bars (also known as alert bars, announcement bars, hello bars, sticky bars or floating bars) are just solid color banners displaying simple text and a call-to-action button or anchor link:

You may have noticed more and more sites using notification bars lately to inform visitors about something critically important — like service impacts due to a global pandemic.

Why?

Because notification bars are super effective at making time-sensitive information stick out.

Notification Bar Use Cases

But announcing the impact of a health crisis to your audience isn’t the only way you can use notification bars to great effect on your website.

Let’s take a quick look at a few other use cases you might want to model when it comes to not only making your online audience more informed, but boosting your conversions too!

1. Promote an Event, Contest or Limited Time Product Launch

If you’ve been following Thrive Themes for a while now, then you know we love deploying notification bars (with countdown timers inside) to promote our product launches:

If you’ve have an upcoming event or are running an online contest, consider using notification bars to get the word out about those time constrained offers as well!

2. Promote a Seasonal Sale or Limited Time Offer

Is Black Friday around the corner?

Or maybe you’re thinking about offering some kind of limited time, seasonal sale or live training?

Using a notification bar to promote the occasion can help grab an online visitor’s attention so they don’t miss out.

Udemy uses notification bars all the time to promote their limited time offers or even live trainings:

3. Showcase a Particular Service or Product You Offer

Do you have a specific product or service you want to bring a little extra attention to?

Don’t be afraid to put it front and center with a notification bar like Decathlon’s UK store uses:

4. Promote Your Business’s Charity Project or Referral Program

Is your business involved with a charity or has a referral program you want customers to be aware of?

The notification bar is a simple way to let your online visitors know about it like Athletic Greens does on their website:

5. Inform Customers About Operating Hour or Service Offering Changes

Does your business have specific hours of operation?

Did your store hours change recently?

Or maybe you ran out of a popular product and won't have stock again for a while...

If so, then using a notification bar is a great way to communicate such critical info to your customers, just like Midland Liquidators did during the Covid pandemic:

And with the Thrive visual editor's Conditional Display feature, you can even set specific times of day that your notification bar will be visible. This feature is ideal for businesses who can't afford to answer their phone 24/7 and only want to make their contact number visible during business hours.

6. Communicate Service Impacts Due To Natural Disasters or Global Health Threats

Finally, if your business has been impacted by some kind of natural disaster or global health crisis, then consider using the trusty notification bar to let your customers know what’s up.

Even the American Museum of Natural History used a bright colored notification bar to let their patrons know how museum reservations were given during the pandemic:

So now that you have good use cases of how notification bars can be deployed on your own website, let’s change gears and discuss how to actually get them built for WordPress using Thrive Suite...

How To Build Notification Bars Using Thrive Suite

You may have noticed that the notification bar examples above used fairly similar designs. However, there’s actually two different visitor experiences notification bars can be categorized under:

1. Visitors CAN close the notification bar (because it includes a close button)
   
   
2. Visitors CAN NOT close the notification bar (because it’s part of the header)

So before building your own notification bar, you must first decide which visitor experience you want to provide because it determines which Thrive Suite tool you should use to get the job done:

• Use Thrive Leads (our lead generation and opt-in form plugin) if you want visitors to be able to close your notification bar. You’ll accomplish this by using the Sticky Ribbon opt-in form type.
  
  
• Use Thrive Theme Builder (the most advanced and visually customizable theme for WordPress) if you don’t want visitors to be able to close your notification bar. You’ll accomplish this by adding the notification bar to your header design.

To get started, let’s first see how to build a simple notification bar design visitors CAN close using the Sticky Ribbon form type inside Thrive Leads:

But if you’d rather build a notification bar as part of your header, just click here to skip to those instructions instead.

How To Build a Notification Bar Visitors CAN Close with Thrive Leads

First, make sure you have the Thrive Leads plugin installed and activated so you can open the Thrive Leads dashboard.

Under the Lead Groups area, click the “Add New” button and give it a name. Once the new lead group has been created, click the “Add New Type of Opt-In Form” button and select the Ribbon option:

Once a Ribbon has been added to your new Lead Group, click on the “Add” text that appears, press the “Create Form” button (after the new screen loads), and give your new Ribbon form a name (best to make it descriptive).

From there, enter the Thrive Leads visual editor by clicking on the “Edit Design” button (the pencil icon).

Designing a Notification Bar Inside the Thrive Leads Visual Editor

When the visual editor loads, you’ll need to select a template design. For the purposes of creating a simple notification bar (as shown here and in the featured video), select the “Blank Template” option:

Once the “Blank Template” loads, get started by changing both the Background Section element’s and the Thrive Leads Element breadcrumb’s margins and paddings to 0 pixels:

Next, highlight the Background Section element and open the Main Options tab in the left sidebar. From here, set the Background Section element to take up the entire screen width by either:

1. Setting the “Content Maximum Width” to 100%, or...
   
   
2. Toggling ON both the “Stretch to fit screen width” and the “Content covers entire screen width” options.

Continue by setting the “Section Minimum Height” setting to 60 (or so) pixels and centering the “Vertical Position” option:

Now open the Background Style tab and set the background color to either your brand color or one that will stand out and "alert" the visitor:

Next, tidy up the look and feel of the “x” Icon element (a.k.a. the close button) so it complements the new background color. Here’s how to do this...

Highlight the Icon element and:

1. Open its Main Options tab to both reduce its pixel size and change its color.
   
   
2. Open the Layout & Position tab, then set all the margin & padding options to 5 pixels.
   
   Then open the “Advanced” subtab, set the “Position” settings to Absolute, and click the upper right corner option.
   
   
3. Open the Borders & Corners tab and change the Icon element’s border color:

Now drag & drop a Text element inside your Background Section and write out your notification copy.

Highlight the newly loaded Text element and complete the following steps to get it styled:

1. Center the text via the floating Text Editor bar
2. Open its Main Options tab to change the text color
3. Change the Font Type, Font Size, Line Height, Line Spacing and Letter Spacing as desired
4. Inline edit your text as needed

From here, just set an anchor link within your text that will take visitors to a Target URL when clicked. If setting the anchor link changes the text styling (to the default hyperlink color), just highlight the anchor link once more and set its color back to what you previously chose.

Go ahead and bold and/or underline the anchor link text while you’re at it to make it stand out from the rest of the copy:

Now that your Sticky Ribbon notification bar design is ready for desktop, it’s time to optimize it for tablet and mobile.

How To Optimize Your Sticky Ribbon Notification Bar for Tablet & Mobile

To do this, just click on the tablet and mobile icons at the bottom center of the visual editor window to make the necessary modifications. Most likely, you’ll need to modify the Text element’s Font Size and add some padding pixels to the Background Section element as needed.

Because changes you make in the Thrive visual editor cascade down from larger screen sizes to smaller screen sizes, make sure to first modify the tablet design followed by the mobile design.

Take care that your close button Icon element does not overlay your text on the mobile version of the notification bar:

Once your tablet and mobile screen size modifications are complete, make sure to save your work before returning to the Thrive Leads dashboard.

Setting Your Sticky Ribbon Notification Bar Display and Targeting Settings

When building a notification bar in Thrive Leads, you’ll need to program display & targeting settings. This is done from the Thrive Leads dashboard.

And even though Thrive Leads gives you several Trigger, Display Frequency and Position options for Ribbon forms, use the following recommended settings when you’re building a notification bar:

• Trigger: “Displays immediately on page load"
• Display Frequency: “All the time”
• Position: “Top”

Luckily, these are the default settings for any new Ribbon form you create — so you shouldn’t need to modify them.

From there, move back to the Lead Groups area of your Thrive Leads dashboard so you can set your Ribbon display settings.

Click on the cog icon (on the right side of your new Lead Group) to open the Display Settings lightbox. From there, use Thrive Leads’s powerful display logic options to establish which posts and pages you want your new Sticky Ribbon to appear on:

And finally, after saving your Display Settings, make sure to activate your new Sticky Ribbon notification bar by toggling ON the “Display On Desktop” and “Display On Mobile” options:

Pretty cool, right?

How To Build a Notification Bar Visitors CAN’T Close with Thrive Theme Builder

If you’d rather build a notification bar your visitors CAN’T close, you’ll need to add it to your sitewide header — and the best way to do that is with Thrive Theme Builder.

First, make sure you have Thrive Theme Builder installed and activated as your WordPress theme. Then enter the Thrive Theme Builder dashboard to get started.

Now navigate to the Templates tab of the Thrive Theme Builder dashboard and hover over a Theme page template. Click the “Edit” button that appears on hover to open the Thrive Theme Builder visual editor:

Building Your Notification Bar Inside the Thrive Theme Builder Visual Editor

In the visual editor window that loads, highlight the Header element and click the “Edit” option.

This will open the Edit Header mode and any changes you now make to this header design will immediately apply to every other instance of this particular header design where displayed on your website.

Continue by dragging & dropping a Background Section element above the Columns element inside your current header.

Now highlight the new Background Section element and stretch it to fill the entire width of the screen:

1. Open the Main Options tab
2. Set the “Content Maximum Width” option to 100%
3. Toggle the “Stretch to fit screen width” option to ON

While you’re in the Background Section element’s Main Options tab, go ahead and set the “Section Minimum Height” to 60 (or so) pixels. Center the “Vertical Position” option too.

With the Background Section element still highlighted, open the Layout & Position tab so you can set the Padding to 0 pixels on every side. Then set its bottom Margin to match the top Padding pixel value of the Header element (you’ll see why next).

Now highlight the Header element and open its Layout & Position tab. Set its top Padding pixel value to 0. These strange pixel setting steps will keep the main part of your header (the logo and menu items area) vertically centered beneath your new notification bar.

Continue by highlighting the Background Section element once again and open its Background Style tab. From here you can set your notification bar color (either your brand color or one that really sticks out):

Once applied, drag & drop a Text element into the Background Section element to program your notification copy.

To do this, make sure the newly loaded Text element is highlighted and complete the following steps to get it styled:

1. Center the text via the floating text editor bar
2. Open its Main Options tab to change the text color
3. Change the Font Type, Font Size, Line Height, Line Spacing and Letter Spacing as desired
4. Inline edit your text as needed

From here, just set an anchor link within your text that will take visitors to a Target URL when clicked. If setting the anchor link changes the text styling (to the default hyperlink color), just highlight the anchor link once more and set its color back to what you just chose.

Go ahead and bold and/or underline the anchor link text while you’re at it to make it stand out from the surrounding text:

Now that your Simple Header notification bar design is ready for desktop, it’s time to optimize it for tablet and mobile.

How To Optimize Your Notification Bar Header for Tablet & Mobile

To do this, just click on the tablet and mobile icons at the bottom center of the visual editor window to make the necessary modifications. Most likely, you’ll need to modify the Text element’s Font Size and add some padding pixels to the Background Section element as needed.

Because changes you make in the Thrive visual editor cascade down from larger screen sizes to smaller screen sizes, make sure to first modify the tablet design followed by the mobile design.

Once your tablet and mobile screen size modifications are complete, make sure to click the “Done” button on the floating Editing Header bar and save your work.

And that’s it, your notification bar header design is complete! Just watch this video segment to learn how to deploy your new notification bar header across the correct posts and pages of your Thrive Theme Builder controlled website.

Got a Notification to Make?

And that’s all there is to it!

Now you know how to build your own, totally customizable notification bars using either Thrive Leads or Thrive Theme Builder on your WordPress website.

If you’ve got a big product launch approaching or an important announcement online visitors need to hear, then give one of these notification bar design strategies a try.

And if you don’t have either Thrive Leads or Thrive Theme Builder yet, don’t forget that you can join our Thrive Suite to get ALL of our amazing WordPress tools for one — insanely low — annual price.

Finally, if you have any questions about notification bars or how to get them launched on your WordPress website with Thrive Themes, make sure to leave them in the comments section below for us!