Elementor has a native widget called Progress Bar. The widget is commonly used to create a bar that indicates the expertise level in a certain area (in percent). For instance, if you are a designer and want to create a portfolio website using Elementor, you can add bars to allow your aspiring clients know in which areas you can serve better.
However, there is no specific rule on how you can use an Elementor widget. You can use the Progress Bar widget according to what you need or what you want. In Progress Bar widget itself there are three elements you can set the content of: title, percentage, and inner text. If you use Elementor Pro, you can create custom fields to fill the content of these elements dynamically.
Example Use of Dynamic Progress Bar
Say you have a website whereby its articles are divided into three main categories:
- News
- Reviews
- Tutorials
You want all review articles have a different layout than the news articles and tutorial articles. Also, you want to add the following elements on the end section of each review.
Elementor Pro, as you might have known, comes with a theme builder feature in which it allows you to create custom templates for blog posts, page, custom post types, and other content types of WordPress. Combined with the ability to display the data of custom fields, you can add custom element to your content dynamically, including progress bar.
How to Create Dynamic Progress Bar in Elementor
Step 1: Create the Custom Fields
First, you need to create the custom fields and set the field type to number. You can use any custom fields plugin that support number field type such as ACF, JetEngine, and Pods. In this post, we use ACF. If you use ACF too, you can go to Custom Fields -> Add New to create a new custom fields group. Give your custom fields group a name.
By default, ACF gives you a field when you create a new custom fields group. Edit the default field offered by ACF. Set the field type to number. You can also set the field label and field name, and default value.
Switch to the Validation tab to set the minimum as well as the maximum value.
If you want to add more fields, you can click the Add Field button and repeat the steps above.
Once done adding the custom fields, go to the Settings section to set where the custom fields group to be assigned to. If you want the custom fields group to be assigned to blog posts, you can use default rule. Click the Save Changes button to apply the changes.
Step 2: Create the Custom Template
Once your custom fields are ready, you can start to create the custom templates for the article types you want to add the dynamic progress to. In Elementor, you can create a custom template for articles based on the following attributes:
- Post categories
- Post tags
- Post authors
To create a custom template for review articles, you can simply assign the custom template to articles under the review category or tag, depending on the attribute you want to use.
First, go to Templates -> Theme Builder. Go to the Single Post tab and click the Add New button to add a new template.
On the appearing dialog, give your custom template a name and click the CREATE TEMPLATE button.
You can select a pre-made template on the template library. If you want to create the template from scratch instead, you can simply close the template library window. Drag the necessary widgets you want to add to the canvas area and make the settings accordingly. You can read our previous article for more detailed instructions on how to create a custom single post template in Elementor.
Once done with the required widgets (Post Title, Post Content, Featured Image, and so on), add the Progress Bar widget to the canvas area. Under the Progress Bar settings block under the Content tab on the settings panel, set the title you want (e.g., Design).
Next, click the dynamic icon on the Percentage option and select ACF Number Field.
Click the wrench icon on the ACF Number Field and select the key (custom field) you want to use.
If you want to display the given value of the custom field, you can click the dynamic icon on the Inner Text option and select ACF Field.
Click the wrench icon on the ACF Field field and select the key (custom field) you want to display.
If you want to hide the percentage, you can select Hide on the Display Percentage dropdown.
Once done with the basic settings on the Content tab of the settings panel, you can switch to the Style tab to style up the bar.
You can repeat the steps above to add more bars. To save you time, you can simply duplicate the bar (which you have customized) and replace the content.
Once you are done customizing the entire elements on the custom template, click the PUBLISH button on the bottom side of the settings panel. Add a display condition by clicking the ADD CONDITION on the appearing dialog. Set where you want the custom template to be assigned to. For instance, you can assign the custom templates to posts under the review category according to our instance. End by clicking the SAVE & CLOSE.
Step 3: Create a New Blog Post
Once everything is ready, you can now create a new blog post. Make sure to add the values on the custom fields you have created on step one above. The given values will be used to set the fills of the bars.
Lastly, make sure to set the category according to the category of the custom template it is assigned to (step 2).
The Bottom Line
The theme builder feature of Elementor Pro makes it possible for you to create custom templates for your site content according to their attributes. Thanks to the integration supports with custom fields plugin like ACF, JetEngine, and Pods, you can also add dynamic element to your custom templates. One of which is dynamic progress bar which we have just covered above. Basically, you can add dynamic element from any Elementor widget that offers an option to set the value dynamically. Another example is the Star Rating widget whereby you can also use it to create dynamic star rating. With these two features (theme builder and custom fields support), you can achieve more things on your WordPress site without installing too many plugins.
1 thought on “How to Create Dynamic Progress Bar in Elementor”
Hi, Sunawang! Hope you are fine. I am completely new of creating a website, so I am seeking what is possible to make on my future website.
I would like to make some football statistics data on my Home Page, for example. But it would be dynamic, not fixed like your example. Is it possible?
For example, “Last 5 games of Team XYZ”, “40% of win in the last 10 games”, “20 goals for player ABC”, this kind of information. This must be dynamic. Is it possible in WordPress / Elementor or in another builder page?
Thanks in advance!