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

Author
Matt   8

Updated on March 7, 2022

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

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

We often use notification bars here at Thrive Themes to promote our limited time 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!

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

Check out the Ultimate Scarcity Marketing Plugin for WordPressThrive Ultimatum.

With this tool, you can take your limited time product launches 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 notification 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 Thrive Suite.

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:

Udemy uses notification bars all the time to promote limited time offers, trainings and seasonal sales.

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:

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

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

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:

Midland Liquidators uses a simple notification bar design to inform customers about their new operating hours.

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:

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

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:

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

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

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 you open the Thrive Leads visual editor, select the "Blank Template" design if you want to build a simple noification bar design.

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

If you want to create a more advanced notification 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, image(s) or call-to-action button 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 the Thrive Leads Element breadcrumb’s margins and paddings to 0 pixels:

Change both the Background Section element’s and the Thrive Leads Element breadcrumb’s margins/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:

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 stand out and "alert" the visitor:

Apply a background color to your notification 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, 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:

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

Stylize your notification bar's text.

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:

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 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”

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 notification 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 notification 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 notification bar (with the Ribbon form option) 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 appear on the same page, they would need to be part of the same lead group.

Make sure to read and understand the Lead Group rules to ensure the correct forms always appear on the posts and pages you intend them to.

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.

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

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

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

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:

Stylize your notification bar's 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.

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 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!

by Matt  March 7, 2022

8

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. We only recommend products that we believe will add value to our readers.

Enjoyed this article ?

You might also like:

Leave a Comment

  • Great tutorial!
    But I’m unsure why it’s better to build this from Thrive Leads vs, say, just doing it manually with a content box etc.
    It’s a legit question, because I see Thrive sort of like a Ferrari, and I pretty much only know how to use the radio, lol…
    So, is there a distinct advantage to creating it in Leads? Can/does/could this potentially link to my email platform as well? Thanks!

    • Hi Jennifer,
      The huge advantage of doing it with Thrive Leads is that it will automatically be placed above the header everywhere you choose it to show, you don’t have to manually adjust templates. Let’s say you want this to show on your homepage, the blog list and individual blog posts, if you’d add a content box or background section or… you’d have to do that in 3 different templates. With Thrive Leads it’s one bar and you choose where to show it in the display settings.
      And yes off course you can add a lead generation element in there 🙂 (or a button that opens a lightbox on click!) we call those “2-step ribbons” and Thrive Leads has templates ready made for those.

  • IDK if you allow links, but I LOVE my Thrive top bar on my site (https://sugarsbeach.com/)

    I change it our every few days or once a week to highlight if something is on sale, or like right now I’m highlighting my white summer dresses post to get traffic there.

  • Cool post. Haven’t thought about using notification bars for a while.

    Just a few questions.

    As you mentioned thrive leads, is the an update coming?

    And with adding things to the header. It’s ok to make it look good on desktop. But most changes don’t look good on mobile.

    What I mean is I like my mobile headers to just have
    Logo
    Menu link

    Then when you open the menu every thing should be in the sidebar menu that just opened.

    The problem I find is you can’t move header elements into the mobile menu dropdown or sidebar.

    Can this be done? Have I missed something with TTB?

    On my mobile menu
    I would like add

    The logo
    A menu
    Sub menu if needed
    Login widget
    Subscribe box
    Cart element.
    Social links
    Etc

    Look forward to your feedback.

    • Hi Adam,
      Automatically, the items from your main menu will become part of the mobile hamburger menu.
      I’m unsure what you’re trying to do and what isn’t working but feel free to contact our support team with what you want to accomplish and they will be happy to help you out!

  • Awesome! I just decided to create a notification bar for Ukraine donations – your guide was perfect for it!

  • Thanks for the article. As you mentioned it’s great for time sensitive offers. But last week I wanted to use a sticky ribbon for my one time offer on a one-click upsell page. But to keep visitors stick to my video, I wanted to use a 3 minute time delay on the sticky ribbon, so that it appear at the moment of call to action in the video. But I saw that the time delay on sticky ribbons is limited to 100 seconds. Also had a chat about this with Hanne in the FB group.

    To bypass this, I wanted to make a section sticky at the bottom, but to accomplish that I had to place the sticky section somewhere on top of the page, including negative margins. This because it’s only sticky from the moment of scrolling. Instead of just adding a “stick to bottom” setting, regardless the position of that section in the editor. In that case I could place it on the bottom of the page in the editor as well. Right now this is really inconvenient in the editor mode, where it overlays the subheadline above because of the negative margin, as you can see at this screenshot of my editor of the specific page: https://dennisjjansen.nl/wp-content/uploads/2022/03/Snap3.jpg

    Where the use of time delayed sticky ribbons is pretty common nowadays in online marketing, it’s really inconvenient that Thrive doesn’t make this more easy to accomplish. The best solution to do this would be:

    – don’t limit the time delay to 100 seconds on sticky ribbons (why 100 and not let’s say 500? Don’t know where the 100 is based on)
    – add the option to make a section sticky at the bottom, not only “stick from scrolling”, to avoid a strange editor UX.

    Would be great if this would be implemented.

  • {"email":"Email address invalid","url":"Website address invalid","required":"Required field missing"}
    >