PageFly - Progress element

127 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 URLOption to embed a link into the element
CONTENT
Add New ItemAdd 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 TypeSelect bar type: Bar or Circle
StyleSelect the style for text: Text Inside, Text Outside, or Text First
PercentSet the percentage of the progress
WeightAdjust the bar’s thickness
HEADING SETTINGS
TextEnter the title for the progress bar
ColorSet color for the text, or bar title
Font SizeSet font size for the text, or bar title
SpacingSet border spacing for 4 sides of the text.

Select the chain icon to set value for each side

COLOR SETTINGS
NumberSet color for the number of the progress value
ActiveSet color for the active progress area
BackgroundSet color for the inactive progress area, or background

Was this helpful?