The Vertical Progress Bar Widget provides a great way to show statistics on your Elementor page in a vertical bar format. You can customize the widget using its wide range of customization options.
Let’s look at each of the options in the “Vertical Progress Bar Widget” below.
Vertical Progress Bar Video Tutorial #
Install Vertical Progress Bar for Elementor #
This widget requires Unlimited Elements Pro version installed and activated on your WordPress website.
- Go to Unlimited Elements Widget Library
- Search in the search bar for “Vertical Progress Bar”
- Hover over the widget in the search results and click install
- Add your “Vertical Progress Bar” widget to any Elementor Page
General Settings #
Alignment
Set the alignment of widget.
- Left
- Center
- Right
Label
Type text to show as label.
Value
Type value to show in the progress bar.
Height
Set the height of vertical bar.
Width
Set the width of vertical bar.
Symbol
Set symbol to show after the value.
Speed
Set the speed of progress bar animation.
Start Animation When In Viewport
Animation will start when widget come in viewport window.
Delay Before Animation
Set the delay before starting the animation.
Graphic Element Settings #
Show Graphic Element
Show/Hide the graphic element.
Graphic Element Source
Choose the source for graphic element.
- Icon
- Image
- Text
Icon
Choose an icon to display.
Vertical Progress Bar Styling #
Every aspect of the widget’s design can be controlled through different styling options. Choose colors that complement the style of your website. You can modify the text, icons, fonts, and layout to make the widget look and work the way you want.
Background Styling #
Set the background type, color, and radius.
Progress Styling #
You can set the progress type, color, and progress radius.
Label Styling #
You can set the typography, and color of label element.
Value Styling #
Set the value typography and color.
Graphic Element Styling #
You can set the graphic element width, height, icon size, background color, border, and border radius.
Usage Examples #
Here are some live use cases for the Vertical Progress Bar widget.
