Learn how to use and customize the Progress Bar and Circle Progress widgets of the Jetelements plugin for WordPress to display the stages of a process, progress, and use them to compare several items.
Before you start, check the tutorial requirements:
- Elementor (Free version)
- JetElements plugin installed and activated
Things to know
The Progress Bar and Circle Progress widgets add a single bar or circle diagram to the page. You will have to configure all the settings again for each new bar/circle diagram. Therefore, to get a multiple-bar or circle diagram, you should customize one and then duplicate it.
Add the Widget to a Page
Firstly, find the needed widget in the Elementor page builder. Then, drag and drop it into a new section on your web page.
In this case, we add the Progress Bar widget first.
Configure the Progress Bar Settings
After inserting the widget, the Content > Progress Bar section tab settings will be opened by default, and a default bar will be displayed.
These settings allow you to choose the appearance of your progress bar. Here you can customize the following settings:
- Type 一 a drop-down list to select the types of progress bar layouts, like vertical or horizontal layouts, and different positioning for the content that comes with the progress bar;
- Title 一 a text field to enter the name of this bar (instead of the default “Title” text) or choose it dynamically by pressing the “Dynamic Tag” icon;
- Icon 一 a field to pick an appropriate Icon from the library or upload a SVG file;
- Progress Values Type 一 a drop-down list to select the ”Percent” or “Absolute” values:
- Percent 一 an option that enables the Percentage field to specify the state of the circle diagram you’re currently editing or choose it dynamically by pressing the “Dynamic Tag” icon;
- Absolute 一 an option that enables the Current Value and Max Value fields to set the corresponding data or select dynamically by pressing the “Dynamic Tag” button.
In this case, we apply the following settings: “Inside the empty bar” Type, type the “WordPress” text in the Title field, select the WordPress icon, “Percent” Progress Value Type, and specify the Percentage.
Style the Bar
Go forward to the unrolled by default Style > Progress Bar block, where you can specify the progress bar. Here you can also set the Height, Margin, Background Type, Color, Image, Border Type, Border Width, Border Color, and more.
When it comes to the background type and the status bar, you can make them classic, gradient, or upload an image. If you use an image, pay attention to the Attachment block, where you can choose the Fixed option.
After that, go to the Title block and customize the icon and the title. Here, you can also customize the Title, Icon, and Text settings, in particular, Alignment, Color, Background, Borders, Typography, etc.
Also, the same settings are available via the Percent block style, which allows for styling the percent digits.
Configure the Advanced Settings
Finally, click the Advanced settings tab and set the Layout settings unrolled by default: Margin, Padding, Width, Position, Z-Index, CSS ID, CSS Class if needed. Other adjustable settings in the Advanced tab depend on the installed and activated plugins and allow you to customize Motion Effects, Transform, Background, Responsive (desktop, tablet, mobile), Attributes, and Custom CSS.
Configure the Circle Progress Widget
After inserting the widget, the Content > Values section settings will be opened by default, and a default diagram will be displayed.
Here you can customize the following settings:
- Progress Values Type 一 a drop-down list to select the ”Percent” or “Absolute” values:
- Percent 一 an option that enables the Percentage field to specify the state of the circle diagram you’re currently editing or choose it dynamically by pressing the “Dynamic Tag” icon;
- Absolute 一 an option that enables the Current Value and Max Value fields to set the corresponding data or select dynamically by pressing the “Dynamic Tag” button.
The next section is the Content section. Here, you can insert the Value Number Prefix and Value Number Suffix, as well as define whether to show the thousands separator in the value by enabling the corresponding toggle. Afterward, input the title and subtitle in the Counter Title and Counter Subtitle sections or press the “Dynamic Tag” button to select the data dynamically.
Decide where you want the percent to be placed: choose either inside or outside the circle in the Percent Position drop-down menu.
The same can be done with the label. To define its position, navigate to the Label Position option.
Finally, in the Content > Settings section, you can specify the Circle Size, Value Stroke Width, and Background Stroke Width, which set the corresponding sizes and select the colors of the circle diagram’s specific elements. They are: Background Stroke Type, Value Stroke Type, and Animation Duration. The lower the number in this field, the faster the animation will be performed.
Style the widget
The last step is to design the Circle Progress widget. After pressing the Style tab, the Progress Circle Style section will be opened by default. Here, you can set the Circle Fill Color, Progress Line Endings, and Circle Box Shadow.
The next section of the Style tab is the Content Style section. This section includes the settings that allow customization of the Number Styles, Title Styles, and Subtitle Styles (e.g., Color, Shadow, Typography, etc.).
Alt text: style settings of the circle progress widget customized
Configure the Advanced settings
Finally, click the Advanced settings tab and set the Layout settings unrolled by default: Margin, Padding, Width, Position, Z-Index, CSS ID, CSS Class if needed. Other adjustable settings in the Advanced tab depend on the installed and activated plugins and allow you to customize Motion Effects, Transform, Background, Responsive (desktop, tablet, mobile), Attributes, and Custom CSS.
That’s it. Now you know how to configure, customize, and style the Progress Bar and Circle Progress widgets of the JetElements plugin for WordPress to display the stages of a process, progress, and use them to compare several items, etc.
