Before going to details, you can watch this video
In this article, you’ll learn about the Progress element and how to use it.
About Progress element
Progress element can add more data or statistics to your page. Numbers can be a great help in bumping conversion rates because let’s be honest, who doesn’t like convincing stats?
Access the Progress element
Step 1: Click on the Plus icon which is the Add element function
Step 2: Click on the Progress element in the dropdown menu
Step 3: Drag and drop the element you want into the page editor and then start using it.
Note that you can search this element by using the search function instead of finding it in the sidebar.
Progress element comes with multiple variations covering most needs. But we will continue to add more variations to help you save time.
Drag a variation to the layout and see how it can be configured.
Progress element configuration
Progress element comes with plenty of parameters allowing you to fine-tune content appearance for the best possible conversion rate.
Select the element ProgressBox in layout to see its parameter
In this article, we will show the parameters of the General and Styling tabs for the Progress element.
| General tab’s parameters | |
| 1. PROGRESS ITEMS | You can add the progress item(s) and rearrange the order of these item(s)by dragging the 3 dotted icon on the left of the items’ name. You can also duplicate or remove the progress item(s) from the progress box. |
| 2. ACTION | You can read more about the ACTION parameter here. |
| 3.ATTRIBUTES | This is a parameter that all elements have. You can read more here. |
| 4. VISIBILITY | This is a parameter that all elements have. You can read more here. |
| 5. ANIMATION | This is a parameter that all elements have. You can read more here. |
| Styling tab’s parameters | |
| 1. OVERALL | You can read about the OVERALL parameter here. |
| 2. SPACING | You can read about the SPACING parameter here. |
| 3. TYPOGRAPHY | You can read about the TYPOGRAPHY parameter here. |
| 4. BACKGROUND | You can read about the BACKGROUND parameter here. |
| 5. BORDER | You can read about the BORDER parameter here. |
| 6. DISPLAY | You can read about the DISPLAY parameter here. |
| 7. CUSTOM CSS | You can read about the CUSTOM CSS parameter here. |
Nested elements configuration
Please note that the Progress element is the combination of multiple Progress. To edit each progress bar, choose it separately > go to the General tab.
| SETTINGS |
or Circle
Inside, Text Outside, or Text First
progress
|
| HEADER SETTINGS |
bar
bar title
|
| COLOR SETTINGS |
progress value
progress area
progress area, or background |
