fbpx

Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

Logo Carousel - Blog Featured
Circle Progress Bar Featured
Vertical Progress Bar - Featured

How to Add a Vertical Progress Bar to Your Elementor Website?

The best way to present data, numbers, and statistics in an engaging and visually appealing manner is through vertical progress bars. In this guide, I will show you how to add a Vertical Progress Bar to your Elementor website with easy-to-follow steps. These guidelines are straightforward, ensuring that everyone can do it without any hassle.

Common use cases where using Vertical Progress Bars can be beneficial

1

To show Company’s Growth

Progress bars are the best way to show the growth of a company over the years.

2

To show a Survey

In order to show a survey’s results, the vertical progress bar widget is the best tool available.

3

For Sports Results

If you want to show the results of different teams in a tournament, then using Vertical Progress Bars is the way to go.

4

For Comparisons

Use vertical progress bars to show different comparisons in visually appealing way (e.g., comparing the price of a product in different regions).

5

Fundraising Campaigns

If your website hosts fundraising campaigns, show the progress toward the donation goal using a vertical progress bar. It motivates donors to contribute.

Step #1: Install and activate Unlimited Elements

Before getting started you will need to purchase Unlimited Elements pro from the link below to access the Vertical Progress Bar widget.

Then follow these steps:

1

Go to Plugins → Add New → Upload Plugin.

2

Choose the zip file you downloaded, upload, and then click Activate.

3

Once activated, you’ll need to enter your license key.

Now that you have the plugin installed, it’s time to start creating Vertical Progress Bars.

Step #2: Adding the Vertical Progress Bar widget to your Elementor website

To create a Vertical Progress Bar you need to install the Vertical Progress Bar widget from the Unlimited Elements Widget library. 

1

Go to Unlimited Elements in the WordPress Dashboard

2

Search for the "Vertical Progress Bar"

3

Hover over the widget and click install

Then, in the Elementor editor, Find the Vertical Progress Bar widget and drag it to the desired part of your page.

Step #3: Configure the Vertical Progress Bar Widget
1

Alignment

Set the alignment of the widget to either left, center or right.

2

Label

Give it a label which best describes the Progress bar.

3

Value

Set the value of the Progress Bar from 0 – 100

4

Height and Width

Set the Height and Width of the Progress bar according to the layout.

5

Symbol

Use a symbol accordingly, for example (% ,$) etc.

6

Speed

Select the speed for the Progress bar animation to fill the bar slower or faster.

7

Start Animation When in Viewport

Select the option to start the Animation when the Progress bar is in viewport, so once the user reaches the Progress bar section, then the progress animation will start.

8

Delay Before Animation (ms)

Set a little bit of delay before the animation starts.

Step #4: Selecting a Graphic Element

We can select a graphic element for the progress bar to make it more stylish.

1

Show Graphic Element

Toggle the “Show Graphic Element” option to “Yes” in order to select a Graphic Element.

2

Graphic Element Source

Select the source for the Graphic Element to either an Icon, Image or a Text Field.

Wrapping it Up!

Vertical progress bars can catch the audience’s attention and engagement. They provide a clear visual representation of progress, making it easier for viewers to understand. Using vertical progress bars is a great way to show statistics on your Elementor page in a vertical bar format. Adding the vertical progress bars to your Elementor Website can be very helpful to show certain information and data visually. Vertical progress bars ensures a better user experience and accessibility, especially when showing a survey’s data and comparisons.

View More Related Blog Posts

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!