Fraud Blocker
  • Home
  • Products
  • Support
  • Blog
  • Contact

Table Of Contents

Advanced Progress Bar Widget

How to Use Advanced Progress Bar Widget – Element Pack Exclusive

A progress bar can be used to show a user how far along he/she is in a process. The guideline below about the Advanced Progress Bar widget 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 is not limited, you can add a new list in the list group just by clicking on the ADD ITEM button.

Advanced Progress Bar Widget

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.

list items for the progress bar

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

color maps

One more thing, if you want an individual bar to design, you can do that by just editing every single bar under Progress Bar option. 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.

advancedprogressbar widget shot 3 - BdThemes

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

style tab

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.


content body

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.

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

Video Tutorial

For more details, see the video above.

Take advantage of fine-tuned plugins

Get Customizable Elementor Widgets to Power Up Your Website

Take advantage of fine-tuned plugins to speed up web projects without sacrificing quality. We offer a 30-days money-back guarantee.

BdThemes is the sole owner of #1 market-leading addons for Elementor such as Element Pack Pro, Prime Slider, Ultimate Post Kit, Ultimate Store Kit, Pixel Gallery, and more useful plugins.

This website is powered by Element Pack Pro and Rooten Theme.

New Year Sales Are Giving up to ~70% Price Off!! on our products | Coupon: HNY2023

Need any assistance? Call Us:+880 1700 55 95 95

Copyright © 2023 BdThemes. All Rights Reserved.