Progress Bar Element
Last Update: February 15, 2023
Avada includes multiple animated counter shortcodes, including the Progress Bar Element. These are great for displaying varying types of data and content to your viewers. The Progress Bar Element include several options for easy customization, and is a great way to visually attract the viewer and display content. read below to find out more about this visual element.
How To Use The Progress Bar Element
To start, add the element into your desired column. That will open the element’s settings. This element has only one Options panel, and the options are quite straight forward. Initially, you choose the height of your progress bar, and then selecting where you want to display the text. It can be On, Below, or Above the bar itself. The next two options are about whether you want to show the filled area number and any chosen unit on the bar. For example, it could show 85%, just a number, or it could not show at all. The option below this, the Filled Area Percentage, is what determines how much the bar is actually filled with color. Under that, you can choose the color of the fill, the border color and size, the unfilled color and whether you want the filled area to be striped. You can even animate the stripes!
Once you have configured the styling options, the last thing to do is add any text you want on the bar and choose its color. That’s it. To have multiple bars, the easiest way is to then duplicate the element and edit the cloned instance of it.
Note: The Default setting will use the global settings assigned for this element in your Options > Avada Builder Elements > Progress Bar section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.