Boost Visitor Conversions with these Customizable Progress Bars for WordPress

Have you checked the latest updates to Thrive Suite yet?

You might discover a powerful new element that could easily be offered as a separate, premium WordPress plugin on its own... but instead, we decided to add it as a free update to all Thrive Suite customers.

In this post, you’ll learn how the Progress Bar element can be used to improve conversion rates across your sales and marketing funnels!

It’s easy to use, versatile, visually stunning and, of course, endlessly customizable.

More...

Introducing the new Progress Bars

Before we explore the exciting opportunities made possible by the new Progress Bar element, let’s take a quick look at the two main flavors it comes in…

The Simple Progress Bar

Current Progress
Current Progress
Current Progress
Current Progress

Simple Progress Bars show the progression as a percentage.

You can choose whether to keep it super simple, or to include a secondary progress indicator, to show your visitors how far the next step will take them.

Current Progress
Current Progress
Current Progress
Current Progress

Both of these simple Progress Bars are great for illustrating page sequences that don’t have recognizable milestones along the way, such as surveys and membership onboarding.

But simple Progress Bars are also excellent for illustrating gradual data, like product stock availability and funding goals.

The Noded Progress Bar

Current Progress
Current Progress
Current Progress
Current Progress

Noded Progress Bars show step-by-step progress with defined milestones, called nodes.

These nodes help visitors to understand their actions as they progress through the bigger sequence. Noded Progress Bars are perfect for maximizing conversions across multi-stage funnels like sales enquiries, commissions, webinar registrations and more.

How Can You Use Progress Bars on Your Website?

The new Progress Bar has tons of potential applications, both as a purely aesthetic element, and as a conversion booster.

You can use them on a simple landing page to communicate an impressive statistic, or you can use them across a series of pages to encourage visitors to complete a conversion goal.

Of course, each niche is different, but I’m sure you can find a home for this customizable new Progress Bar element on your website!

Here’s some inspiration to get those gears turning...

1. Multi-Page Funnel Sequences

Book a free consultation with our Google Ads experts

No obligations, just a friendly chat with actionable advice.

Current Progress
Current Progress
Current Progress
Current Progress
Current Progress

Let’s jump right into the big use case for noded Progress Bars.

By definition, a funnel is a series of actions that lead to a final conversion… whether that’s a lead, a sale, or a collection of vital data for your business.

But each step (or page) of your funnel reduces the overall conversion rate, as visitors drop off due to frustration, disorientation, cold feet, or simply getting distracted. Progress Bars can help to mitigate funnel dropoff by setting expectations, and reminding visitors of their progress towards an overall goal.

The example above shows a lead generation enquiry form split into 4 stages. Instead of throwing an overwhelming contact form at the user, it simplifies the process into easily understandable steps, helped along by a noded Progress Bar.

Here, I’ve customized the nodes with different icons, and added labels to help the visitor orientate themselves.

2. New Email Subscriber Funnels

Here's how to get your free ebook...

Current Progress
Current Progress
Current Progress
Current Progress

Do you ask new subscribers to click a confirmation link in their first welcome email (also known as double opt-in)?

Or maybe you offer a free lead magnet?

Then this Progress Bar use-case might be perfect to boost your email subscription conversion rate.

Again, we’re using a noded Progress Bar to encourage visitors to sign up, and then check their email for the confirmation or download link. Each node has a unique icon to make the process clear and simple.

Notice the partial progress? You can choose whether to show progress increments in half or full steps. More on this later.

3. Multi-Criteria Reviews

Lenovo 15.6" Legion Y7000 Laptop Review

Current Progress
Current Progress
Current Progress
Build Quality
Current Progress
Current Progress
Current Progress
graphics capability
Current Progress
Current Progress
Current Progress
Design
Current Progress
Current Progress
Current Progress
value for money

Progress Bars can be great for visually communicating statistics and data too.

By using multiple Progress Bars together, you can create stunning multi-criteria reviews.

The fill animation feature really helps to draw attention to this section when it scrolls into view. keeping readers engaged and impressed.

Just like in the example above, Progress Bars will fill the width of any container or column they’re placed in.

4. Charity Fundraising

Help us raise $100,000 for Mental Health Foundation

$ 38,255 achieved so far
Current Progress
Current Progress
$ 38,255 achieved so far

Here’s a simple but effective use of the new simple Progress Bar element.

I’ve chosen to show fundraising as an example, but this could easily be adapted to promote any target-driven metric… weight lost, pages written, kilometers run etc.

Simple Progress Bars are a great way to breathe life into what would otherwise be a boring statistic or metric on a landing page.

5. Product Stock Levels

Custom-made Amber and Silver Pendant

€79 including shipping

Sold: 11

Available: 4

Current Progress
Current Progress
Current Progress
Current Progress

Don’t miss out!

Simple Progress Bars, like the one above, can inject some urgency for small scale product sales pages.

This shows visitors that:

  1. others have purchased the item – social proof!
  2. they’ll miss out if they don’t make a decision soon – fear of missing out!

Before you get too excited, no this Progress Bar isn’t dynamically linked to any eCommerce system stock levels. It will need manually updating each time, so it’s more suited to custom work like commissions and limited edition items.

6. Video Launch Funnels

Current Progress
Current Progress
Current Progress
Current Progress
Current Progress

Video 2: Selling your Online Courses

An effective way to launch a product is with a series of videos, delivered over multiple days and followed by a sales pitch. This really helps to demonstrate value and results before asking people to buy.

But content dripped over multiple days can quickly become disorientating for your audience, leading to overwhelm and confusion.

If you’re sending people to landing pages as part of a video launch funnel campaign, I strongly recommend including a Progress Bar like the example above.

This reminds your audience of the past value they’ve received, are receiving, and will receive in the future. And yes, you can link the node labels to the previous landing pages in the series so they can re-visit older content.

Customizing your Progress Bar

Here’s where the new Progress Bar element really shines – the level of customization available is truly amazing.

If you’re a Thrive Suite customer, you’ll already know how incredibly easy it is to customize elements with the Thrive visual editor – whether it’s a button, an image, a content box, or a lead generation form, all our page elements allow you to dial them in to fit your brand.

The new Progress Bar is no different!

We encourage you to customize the visual style (colors, typography, margins, borders etc.) as well as the core functionality and behavior of your Progress Bar, all without the need for any coding knowledge.

Here’s how...

Choose a Template Design

Once you’ve dropped a Progress Bar element on your page, you’ll be prompted to choose a starting template. As of this article, there are 27 professional Progress Bar designs to choose from.

Choose the one that most fits your brand or page design. You’ll be able to completely customize it in the next step.

Professional template designs available for the WordPress progress bar

Professional template designs available for the WordPress progress bar

Choose Between Simple or Nodes

Whether you choose a simple or noded Progress Bar template to start with, you’re not locked in to that decision, You are always free to change your mind later.

Just toggle the Type option between Simple...

Current Progress
Current Progress
Current Progress
Current Progress

or Nodes…

Current Progress
Current Progress
Current Progress
Current Progress

Inherit Page Smart Colors

All our new Progress Bar templates come with Smart Color technology, meaning they inherit your primary brand colors from the central style panel. Change your primary brand color and all your Smart Color linked Progress Bars will automatically update.

Of course, you can override each Progress Bar with a custom color scheme too!

Add and Customize Labels

Each simple Progress Bar element comes with a customizable label to provide some additional context for your visitors. By default, this is set as Current Progress, but you can change it to anything that helps your visitors to quickly understand what they are seeing.

The Progress Bar label can be quickly set to:

  • Hidden
  • Above the Progress Bar
  • Below the Progress Bar
  • Inside the Progress Bar
Current Progress
Current Progress
Current Progress
PROGRESS
Progress
Current Progress
Current Progress
Current Progress
Current Progress
Current Progress
Current Progress
Progress

Of course, you can also customize the label font style and alignment.

Noded Progress Bar labels work a little differently. Instead of providing an overall description, they provide information about each node (step or stage of the process).

Current Progress
Current Progress
Current Progress
Current Progress

These Progress Bar labels can be:

  • Hidden
  • Added and deleted
  • Renamed
  • Reordered
  • Positioned above or below the Progress Bar

Choose Node Icons

Speaking of nodes, you can do some pretty nifty customization here too!

Obviously, all the standard options are available such as size, color, borders and such. But you know we’re never satisfied here at Thrive unless we can make each element truly special. That’s why we’re particularly proud to give you full control over node icons.

If you’ve used icons before in any of our tools, you’ll know how easy they are to customize. Simply choose from over 14,000 professional icons that come with Thrive Suite – don’t worry, there’s a filter and search feature! – and breathe some life into those nodes.

Current Progress
Current Progress
Current Progress
Current Progress

When editing nodes, be aware they will initially be set to the completed state. You’ll need to switch them to the normal state to change and customize the icons.

Set the Bar Height

Want a slim Progress Bar? Not a problem...

Current Progress
Current Progress
Current Progress
Current Progress

Or maybe you prefer something a little more chunkier?

Current Progress
Current Progress
Current Progress
Current Progress

Set the Progress

WordPress Progress Bar elements wouldn’t be much use without a way to define the progress.

For simple Progress Bars, it’s easy to set the progress using the slider control.

Setting percentage progress

For noded Progress Bars, the slider controls the steps between nodes.

Setting progress bars by node

You can even set increments of 0.5 steps between nodes, showing your visitors how close they are to completing the next milestone.

Add a Little Animation

What’s that? You want even more great features and customization?

The new Progress Bar elements come with 2 eye-catching animation options:

Fill Animations

I’m sure you’ve noticed many of the Progress Bar examples in this post fill up as they scroll into view. This really helps bring some life to an otherwise static funnel or set of statistics.

You can toggle the fill animation on or off, and choose your Progress Bar fill speed:

  • Slow
  • Default
  • Fast

Candy Stripe Animations

Enable this animation when you absolutely do not want anyone to miss your Progress Bar!

Thrive visual editor showing progress bar completed
Current Progress
Current Progress
Current Progress
Current Progress

When used on the completed section of your Progress Bar, candy stripe (or candy cane stripe) animation transforms your Progress Bar into a visual assault on the senses. It’s fun but distracting, so use it with caution!

In my opinion, candy stripe animation is best used on your incomplete Progress Bar or secondary Progress Bar, to create a more subtle visual effect.

The candy stripe animation below has been applied to the incomplete Progress Bar

Current Progress
Current Progress
Current Progress
Current Progress

The candy stripe animation below has been applied to the secondary Progress Bar

Current Progress
Current Progress
Current Progress
Current Progress

A Few Things to Keep in Mind

Is Progress Bar data linked across pages?

No.

If you place a Progress Bar on each page of a 3-page sequence, each Progress Bar functions as a totally independent element. This means you’ll need to set the styling and customization for each.

I recommend customizing your Progress Bar on the first page, and then saving it as a Template.

This lets you quickly add exactly the same design to other pages… all you have to change is the progress percentage (or node). DO NOT save it as a Symbol, because all your pages will show the same step or percentage!

Which Thrive tools feature the new Progress Bar?

The new Progress Bar element is available in all Thrive tools that use our visual editor (Thrive Architect, Thrive Theme Builder and Thrive Leads being the most obvious ones).

It’s not available in Thrive Apprentice or Thrive Quiz Builder, as these tools have their own progress indicators that are more closely linked to their structured sequences.

What are the feature differences between the simple and noded Progress Bars?

Most of the features and customization options apply to both simple and noded Progress Bars. However, there are a few key differences to be aware of.

Remember you can easily switch your Progress Bar between simple and noded versions to achieve the look and functionality you need.

SIMPLE
PROGRESS BARS
NODED
PROGRESS BARS
Smart color enabled
Progress Bar labels...
1 overall label
1 label per node
Progress Bar labels above or below
Placing the Label inside the Progress Bar
-
Customizable bar height
Set progress by...
Percentage
Node Steps
Fill animation when coming into view
-
Dual progress (secondary Progress Bar)
Candy stripe animation
Icons
-
Available now in Thrive Suite

Time to Make Some Progress in YOUR Business

Does adding a Progress Bar guarantee higher conversion rates?

Of course not. A Progress Bar alone won’t make your offer or funnel more appealing to your audience – in fact, you should avoid one just for the sake of it. However, Progress Bars certainly help to encourage visitors to take the next step in your sales and marketing funnels by showing them how their actions fit into the bigger picture.

You can read more about the setup and customization options here, or just jump right in and try the new Progress Bar element for yourself right now. You’ll find it ready to go as part of Thrive Suite.

I’d love to hear your Progress Bar ideas in the comments below!

Author: David Lindop

David is a writer who is passionate about ethical and sustainable online marketing. He relaxes by writing fiction, learning foreign languages, and making things out of wood - but probably not all at the same time.

  • Cody says:

    I need a progress bar in Thrive Apprentice to show people how much of the video course they have completed. How can I do this?

  • Luke says:

    Is that multi funnel example actually possible? If that relied on a survey plug-in of some type it wouldn’t create a separate page for each step.

    • Hanne says:

      You’re right Luke, this will only work if you have different pages. Good thing is that if you’re using Thrive Quiz Builder than there’s actually no need for an extra progress bar element because it’s included 🙂

  • Kat S says:

    I’m a big fan of TT’s tutorials. But I wish the speaker in this video would state the name of the icon or element, or at least identify where her cursor is rather than saying just: click this.

  • >