进度元素

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 OptionsYou 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. OperationYou 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. OverallYou can read about all these parameters here .
2. MarginsYou can read about all these parameters here .
3. Typesetting and printingYou can read about all these parameters here .
4. BackgroundYou can read about all these parameters here .
5. BorderYou can read about all these parameters here .
6. DisplayYou can read about all these parameters here .
7. Custom CSSYou 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
PageFly Languagues

PageFly Help Center is now available in Chinese, French and Japanese. Please check the flags on the page header.

I got it!
Discover the Shopify Invoice Generator by PageFly, a seamless solution for invoicing in your online store. Try it now!