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
To show Company’s Growth
Progress bars are the best way to show the growth of a company over the years.
To show a Survey
In order to show a survey’s results, the vertical progress bar widget is the best tool available.
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.
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).
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:
Go to Plugins → Add New → Upload Plugin.
Choose the zip file you downloaded, upload, and then click Activate.
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.
Go to Unlimited Elements in the WordPress Dashboard
Search for the "Vertical Progress Bar"
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
Alignment
Set the alignment of the widget to either left, center or right.
Label
Give it a label which best describes the Progress bar.
Value
Set the value of the Progress Bar from 0 – 100
Height and Width
Set the Height and Width of the Progress bar according to the layout.
Symbol
Use a symbol accordingly, for example (% ,$) etc.
Speed
Select the speed for the Progress bar animation to fill the bar slower or faster.
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.
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.
Show Graphic Element
Toggle the “Show Graphic Element” option to “Yes” in order to select a Graphic Element.
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.
