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?

Keep reading to learn how Thrive Leads and Thrive Theme Builder can help you build and deploy a surprisingly simple notification design on your WordPress website — fast…

More...

Meet the Announcement or Notification Bar

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

In their simplest form, announcement or notification bars are just solid color banners with simple text and an anchor link:

PunchPass uses a simple notification bar design to show how they can help studio owners handle the COVID crisis.

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

Why? Because announcement 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 even a few months, then you already know we love deploying announcement bars (with countdown timers inside!) to promote our product launches:

We often use announcement bars here at Thrive Themes to promote our limited time product launches.

And if you’ve got an event scheduled or are running some kind of online contest, consider using announcement bars to get the word out about those as well!

Want to Make Your “Limited Time” Product Launch Announcement Bars Evergreen?

Then check out the Ultimate Scarcity Marketing Plugin for WordPressThrive Ultimatum.

With this tool, you can take the limited time product launch notification bar strategy to a whole new level by creating:


  • Fixed Date Campaigns
  • Automatically Recurring Campaigns
  • And even Evergreen Scarcity Campaigns

… using a lockdown feature that keeps your announcement bar countdown timers honest — even if a visitor switches devices, uses different browsers or clears their cookies!

And don’t forget that Thrive Ultimatum, Thrive Leads and Thrive Theme Builder are all included together inside the Thrive Themes Membership.

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 sale?

Using an announcement bar to promote it can help grab an online visitor’s attention so they don’t miss out your deal!

Udemy uses notification bars all the time for limited time offers like this:

Udemy uses announcement bars all the time to promote limited time offers.

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 an announcement bar like Decathlon’s UK store does:

Decathlon's UK store uses a simple notification bar design to promote one of their lesser known services.

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

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

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

Athletic Greens uses a simple announcement bar design to promote their referral program.

5. Inform Customers About Operating Hour or Service Offering Changes

Did your store hours change?

Maybe you had to make a change to one of your popular services...

If so, then using an announcement bar to communicate that critical info to your customers, just like Midland Liquidators does:

Midland Liquidators uses a simple notification bar design to inform customers about their new operating 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 announcement bar to let your customers know what’s up.

Even the American Museum of Natural History is using a bright colored announcement bar to let their patrons know how museum reservations work during an ongoing pandemic:

The American Museum of Natural History uses a stand out announcement bar to help patrons navigate their new timed-limited entry ticketing system.

So now that you have some examples to draw from when it comes to using announcement bars on your own website, let’s change gears and discuss how to actually get them built for WordPress using Thrive Themes...

How To Build Announcement Bars Using Thrive Themes

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

  1. Visitors CAN close the announcement bar (because it includes a close button)

  2. Visitors CAN NOT close the announcement bar (because it’s part of the header)

So before building your own announcement bar, you must first decide which visitor experience you want to provide because it determines which Thrive Themes 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 announcement 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 announcement bar. You’ll accomplish this by adding the announcement bar to your header design.

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

Let's build a simple notification bar design that visitors CAN close with a Thrive Leads sticky ribbon form.

But if you’d rather build an announcement 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:

Create a new Lead Group in the Thrive Leads dashboard and add a Ribbon form type to it.

Once your 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 an Announcement 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 announcement bar (as shown here and in the video), select the “Blank Template” option:

Once you open the Thrive Leads visual editor, select the "Blank Template" design if you want to build a simple announcement bar design.

How To Make Your Notification Bars Fancy in Just a Few Clicks

If you want to create a more advanced announcement bar design, feel free to select one of the dozens of predesigned Sticky Ribbon templates available inside Thrive Leads instead!

You can quickly modify the text, images or call to action buttons within the template you choose to showcase a more eye catching design like this one:

Here's an example of a more advanced notification bar design you can quickly and easily create using one of the dozens of conversion focused sticky ribbon template designs available inside Thrive Leads.

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

Change both the Background Section element’s and Thrive Leads Element’s margins and paddings to be 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-ish pixels and centering the “Vertical Position” option:

Modify the Background Section element's alignment settings inside its Main Options tab.

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

Apply a background color to your announcement bar design by highlighting the Background Section element and opening its Background Style tab.

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 and 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:

Modify the “x” Icon element's (a.k.a. the close button) display settings to fit your new background color.

Now drag & drop a Text element inside your Background Section and write out your announcement 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:

Stylize your announcement bar's text.

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

How To Optimize Your Sticky Ribbon Announcement 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 announcement bar:

Optimize your ribbon design for tablet.

Optimize your ribbon design for mobile.

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 an announcement bar in Thrive Leads, you’ll need to program display & targeting settings. This is done from the Thrive Leads dashboard so make sure it’s open to the correct Ribbon form you just created.

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 an announcement bar:

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

Set your sticky ribbon form TriggerDisplay Frequency, and Position settings.

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:

Set your lead group Display Settings.

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

Toggle ON your lead group for Desktop and/or Mobile.

Pretty cool, right?

CAUTION: Know Your Lead Group Display Rules

When using Lead Groups in Thrive Leads to display your announcement bars, it’s important to understand how Lead Group prioritization rules operate — so you don’t accidentally deactivate your opt-in forms at the same time!

For example, if you have a pre-existing Popup Lightbox opt-in form active via a lead group in Thrive Leads, creating your announcement bar Ribbon form inside a new or different lead group means that both will never be able to trigger on the same post or page.

To have both your announcement bar Ribbon and Lightbox opt-in form trigger together, they would need to be part of the same lead group.

Make sure to read and understand the rules to ensure the correct lead groups always appear on the posts and pages you intend them to.

How To Build an Announcement Bar Visitors CAN’T Close with Thrive Theme Builder

If you’d rather build an announcement 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.

How To Customize & Manage Your Headers in Thrive Theme Builder

To learn more about how to customize & manage your site headers with Thrive Theme Builder (as well as Thrive Architect), make sure to watch minutes 3:10 to 10:54 in the following video:

First, make sure you have the 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:

Open your Thrive Theme Builder dashboard's Templates tab to then enter 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 across 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-ish pixels. Center the “Vertical Position” option too.

Add a Background Section element to your header and then change the alignment settings in its Main Options tab.

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 announcement bar.

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

Open the Background Section element's Background Style tab to apply a background color to your announcement bar design. 

Once applied, drag & drop a Text element into the Background Section element to program your announcement 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:

Stylize your announcement bar's text.

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

How To Optimize Your Announcement 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.

Optimize your header design for tablet.

Optimize your header design for mobile.

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 announcement bar header design is complete! Just watch this video segment to learn how to deploy your new announcement bar header across the correct posts and pages of your Thrive Theme Builder controlled website.

Got an Announcement to Make?

And that’s all there is to it!

Now you know how to build your own, totally customizable announcement or 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 announcement 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 Themes Membership to get ALL of our amazing WordPress tools for one — insanely low — annual price.

Finally, if you have any questions about announcement 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!

Author: Matt Totten

    Matt's a geologist turned online marketer and digital nomad. He's a Modern Manimal on a mission to cultivate a wild lifestyle – by design. When away from his tech, you can find him studying movement through practices like Aikido, AcroYoga and Barefoot Running.

  • Michael Adewale says:

    Really awesome thanks

  • Ben M says:

    I like the idea of using the sticky ribbon, but doesn’t that keep you from having any other lead groups running on your page?

    • Matt says:

      Hi Ben, you’re correct about that. Only one lead group can display on any given post or page at a time so your Sticky Ribbon form would need to be part of the same lead group as your current opt-in form (say a popup lightbox) if you want them to appear together.

      Check out the highlight box I included in the post for more details on this and a link to our lead group display rules post.

  • Jason says:

    The option to close the notification bar is not good on a website with many pages for user experience.

    The user closes it on one page, navigates to another and has to close it again and close at each time they go to a new page. This actually creates a poor user experience.

    There needs to be an option like in “ultimatum” where you can set once closed when it should show again.

    My workaround is I’ve been using an ultimatum top bar and deleting the countdown timer to use it as a notification bar.

    • Matt says:

      Hi Jason, with Thrive Leads, you can set Display Frequency rules for your Lead Groups that limit how often visitors see your announcement bar form. Otherwise, sounds like your Thrive Ultimatum workaround is also a good option.

  • Lorenzo D says:

    These notices do indeed come in handy from time to time, so thank you!

    1) Since the Thrive leads option is clearly the most flexible and convenient, wouldn’t it be easier – if you wanted to avoid the bar being closed – to make the close button invisible by assigning it the same color as the background?

    2) These notification bars and the similar Thrive Ultimatum scarcity notices are partially ruined (for new or infrequent visitors anyway) by the annoying and by now ever-present cookie notices. Which are conspicuously and thankfully absent from the Thrive site. How do you manage to avoid having to display those?

    • Matt says:

      Hey Lorenzo, you make a great point… if you’d rather make your sticky ribbon announcement bars non-closable, you can indeed delete the “Close x” icon element to prevent your visitors from being able to hide the bar. As for cookie notices, I’m not an expert on when you should and shouldn’t display them, but your site’s privacy policy should definitely make it clear to visitors how you use cookie data.

  • Igor S says:

    Hi!
    Is it possible to add Conversions Rate to a Announcement Bar (how many times people actually click on it)?
    Thanks!

    Regards,
    Igor

    • Matt says:

      Hi Igor, if you build your announcement bar with a Thrive Leads sticky ribbon, the Reporting features inside the Thrive Leads dashboard will show you data on impressions (how many times the form was loaded). It can also show conversion data, but you would have to set some sort of conversion action on your forms (like a lead generation element) which usually doesn’t make sense when using the sticky ribbon as an announcement bar.

    • Lorenzo D says:

      You’re gonna have that exact problem every time you use Thrive Leads for similar functions, for example, displaying a pop-up to prompt people to look at a sales page, rather than asking them to subscribe to a list. Which is why I’ve been asking click tracking in TL since forever. Alas, that’s not on the Thrive timeline atm, BUT Hanne did give me a viable workaround, which is installing the Pretty Links plugin.

      Just create a Pretty Link for your target url and use it in the Thrive Leads form; the Pretty Links plugin keeps track of how many times a link has been clicked. Perfect to A/B test your non-subscribing TL forms, although you will have to determine the winner manually with this system.

      Hope it helps.

  • >