How to Use Advanced Progress Bar Widget

element pack

How to Use Advanced Progress Bar Widget

Progress especially means a progressive development of humankind or to develop to a higher, better, or more advanced stage.

A progress bar can be used to show a user how far along he/she is in a process.

The guideline below about Advanced Progress Bar will get you to walk in the right way to use the widget developed by Element Pack
Moreover, I’ll guide you in different phases of how you can insert & use the widgets to design layout for the content (text, image, and video, etc.)  you want to work with and style as well.

Content Tab

The Content Tab having some handy sections for making an attractive web page will genuinely get you to have a structure of the web content (text, image, video, etc.).

Progress Bars

After dragging and dropping widgets in a new section, you will get a list group. The list not limited, you can add a new list in the list group just clicking on the ADD ITEM button.

You can edit every single list item. Simply, hit on the List Item and edit the field provided by the List Item and set Name, Level, Text, Level, and Base Color included by the list item.

If you have to get the same designed content, you’ll be able to duplicate clicking on the duplicate icon and to delete clicking on the delete icon.

One more thing, if you want an individual bar to design, you can do that just editing every single bar under Progress Bars. So, simply go Content Tab > Progress Bars.


On the contrary, if you want global design (the same design) for every single bar, you need to go to Style > Progress Bars.

Moreover, in the Progress Bars section, you’ll be able to determine the text position Text Outside Top, Text Inside, Text Outside Bottom. As you see in the demonstration above.

Style Tab

Now, let’s work with the Style Tab. The tab will confidently have you style the web content (text, image, video, etc.) of the page you want to design.

Progress Bars

If you want to set height, space, border-radius, box-shadow, and padding for every single bar, you need to go to Style > Progress Bars.


From this section here, you’ll be able to design the bars globally, especially text, level, and base color with typography and text Shadow. Just go to Style Tab > Content. Read more about typography.

Importantly, for having a global design to bar, you’ve to remove text, level, and base color of the individual bar from the Progress Bars under the Content tab.

About Selim Rana

Selim Rana is the Founder of BdThemes - the company behind Element Pack Pro! He is a Software Engineer passionate about WordPress and Elementor.

Copyright © 2022 BdThemes. All Rights Reserved.