Step 1 – Create a new page or post, or edit an existing one.
Step 2 – Select the container and column you would like to place the progress bars.
Step 3 – Click on the + Element button at the bottom of the column. Select Progress Bar. Before configuring the options, it’s a good idea to view the Progress Bar Element Demo page to see what’s possible with this fun visual element.
Step 2 – 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!
Step 3 – 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.
Step 4 – When you have finished styling your element, click Save. You will be returned to your page content. Click preview to view your gallery on the front end, and you can always return to edit the element to make changes. To have multiple bars, the easiest way is to then duplicate the element and edit the cloned instance of it.