PageFly - Progress element

85 views PageFly 0

In this article, you will learn about 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?

Where Progress element located

Progress element comes with multiple variations covering most of the 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 reaching the best possible conversion rate.

Select the element ProgressBox in layout to see its parameter

General tab configuration of ProgressBox

The parameters in General tab are specific for this element.

The parameters in Styling and Advanced tabs are common for all elements. Read about them in this article.

ACTION
Go To URL Option to embed a link into the element
CONTENT
Add New Item Add more progress bar into the ProgressBox

Nested elements configuration

Please notice that ProgressBox is the combination of multiple Progress. To edit each progress bar, choose it separately > go to General tab.

General tab configuration of Progress

The parameters in General tab are specific for this element.

The parameters in Styling and Advanced tabs are common for all elements. Read about them in this article.

SETTINGS
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
HEADING 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.

Select the chain icon to set value for each side

COLOR SETTINGS
Number Set color for the number of the progress value
Active Set color for the active progress area
Background Set color for the inactive progress area, or background