Progress Bar

Adding Progress Bar

The Progress Bar can be placed into different blocks of a page via Drag & Drop.

  • Click Build on the left sidebar of Site Editor:

  • Under the Features section, proceed to Content, and find the Progress feature:

  • Drag & Drop the feature onto one of the available placeholders highlighted in red when you drag the feature over them:

Edit Progress

  • Hover over your Progress Bar to display the Edit button in its top-right corner, then click Edit:

  • Then, modify the following Progress Bar Settings: Progress, Style, Expired Part Color, Remaining Part Color.

Progress Settings

  • Drag to increase or decrease the progress count:

Please Note: Progress Bar is not dynamic. Open feature Settings to set or edit the progress value.

Style Settings

Select the progress bar preferable design within one of the options: Angular, Angular with indicator, Circular.

  • Angular:

  • Angular with indicator:

  • Circular:

Expired Part Color Settings

  • Select to choose the expired part color within one of the options:

  • Pick a color from the suggested palette and modify its opacity:

  • Enter the HEX color value (a six-digit code preceded by a # sign that defines a color used in a website. It could be easily found online or by a color-picking tool/app):

Remaining Part Color Settings

Allows to set the remaining part color within one of the options:

  • Pick a color from the suggested palette and modify its opacity.
  • Enter the HEX color value ( a six-digit code preceded by a # sign that defines a color used in a website. It could be easily found online or by a color-picking tool/app).

Customize Heading or Counter

  • Select a text to display the Editing Menu:

  • Enter and customize your text: