Progress Bar

Please Note: This article applies to Free Trial accounts created on or after 16 December 2024 and Website, Website+Marketing and eCommerce packages created on or after 18 December 2024. If your accounts were created before these dates, please refer to the article Elements Management.

Adding a Progress Bar

Option 1

  • Hover over the desired section, and click the Add Element:

  • Choose the Progress Bar element from the modal that appears:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Option 2

  • Hover over the left sidebar of the Site Editor and click Build (+) button:

  • Choose the element:

  • After you choose the element from the list, drag it to the desired section and drop it using the grid.

Moving and Resizing a Progress Bar

Please refer to the Elements Management (New Grid) article to learn more about moving and duplicating elements.

Customizing a Progress Bar

To edit, duplicate, or delete the element, click on it and switch between the buttons that appear in its toolbar:

Editing Progress Bar

  • Click on the element and choose the Edit button that appears in its toolbar:

  • Drag to increase or decrease the progress count:

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

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

  • Select to choose the expired part color from the suggested palette and modify its opacity or 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):

  • Set the remaining part color from the suggested palette and modify its opacity or 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):

  • Select Heading to display the Editing Menu. Please refer to the Text & Heading article to learn more about text customization:

Duplicating Progress Bar

  • To duplicate progress bar, click on it and choose the Duplicate button that appears in its toolbar:

  • The duplicate of the element will appear immediately.

Deleting Progress Bar

  • To delete progress bar, click on it and choose the Remove button [Bin] that appears in its toolbar: