进度元素

Through this article you will learn about the progress element and how to use it.

About the progress element

You can add more data or statistics to the page with the progress element. Numbers can go a long way in helping you improve your conversion rate, because let’s be honest, who doesn’t like convincing stats?

You can check more details in the video tutorial below.

Progress element path, select the icon named Add Element on the left sidebar > Advanced Options > Select Progress Element, and drag and drop the element into the page editor.

Note that you can use the search function to find this element, not in the sidebar.

pagefly progress element

Progress elements come in many variants to suit most needs. We will continue to add more variations to help you save time.

You can drag variants into the layout and see how to configure them.

Progress element configuration

The Progress element has a number of parameters that allow you to fine-tune the appearance of your content for optimal conversion rates.

Select the progress box element in the layout to view its parameters.

In this article, we’ll show the parameters for the Countdown Timer element’s “General” and “Style” options.

General option parameters
1. Progress Options You can add progress items and rearrange the order of these items by dragging the 3-dot-dash icon to the left of the item name.

You can also copy or delete progress items from the progress box .

2. Operation You can read more about operation parameters here
4. Properties  You can read more here .
5. Visibility  You can read more here .
6. Animation effects  You can read more here .
style option parameter
1. Overall You can read about all these parameters here .
2. Margins You can read about all these parameters here .
3. Typesetting and printing You can read about all these parameters here .
4. Background You can read about all these parameters here .
5. Border You can read about all these parameters here .
6. Display You can read about all these parameters here .
7. Custom CSS You can read about all these parameters here .

Nested element configuration

Note that a progress element is a combination of multiple progress bars, to edit each progress bar individually, progress > go to the General option.

There are also 3 modules in the “General” option for the “Progress” element

set up
  • Progress Type: Select the bar type: Bar or Circle
  • Style: Choose a text style: ” Inner Text “, ” External Text ” or ” Text First
  • percentage: set the progress percentage
  • Weight: Adjusts the thickness of the bar
Title settings
  • Text: Enter the title of the progress bar
  • Color: Set the color of the text or column header
  • Font Size: Set the font size of text or column headings
  • Spacing: Set the border spacing of the 4 sides of the text
color settings
  • Number: Set the color for the number of progress values
  • Activity: Set the color for the activity progress area
  • Background: Set the color for the inactive progress area or background

Navigate this category

PreviousPrevious article

Next articlePrevious

Feedback
Thank you for your feedback!

Could not find the answer
to your question?

Chat with us
Boost your holiday sales with PageFly's Thanksgiving Template 👉 Discover Now