Progress element

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?

You can check more details in the video tutorial below.

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 configuration

You can read more about the ACTION parameter here.

This is a parameter that all elements have. You can read more here.

CONTENT
PROGRESS ITEMS
You can add the progress item(s) and rearrange the order of these item(s)by dragging the 3 dotted icons on the left of the items’ names. You can also duplicate or remove the progress item(s) from the progress box.
PROGRESS SETTING 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.
SETTING
Progress Type: Select bar type: Bar or Circle Style: Select the style for text: Text Inside, Text Outside, or Text First Percent: Set the percentage of the progress Weight: Adjust the bar’s thickness
HEADER SETTINGS
Text: Enter the title for the progress bar Color: Set color for the text, or bar title Font Size: Set font size for the text, or bar title Spacing: Set border spacing for 4 sides of the text.
COLOR SETTINGS
Number: Set color for the number of progress value Active: Set color for the active progress area Background: Set color for the inactive progress area, or background

You can get further information about ACTION here and about ATTRIBUTES, VISIBILITY, ANIMATION parameters here

Styling configuration

You can check more information about the Styling tab here