Progress Bar

Table of Contents


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 (Drag and Drop Grid) article to learn more about moving and duplicating elements.

Customizing a Progress Bar

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

Editing Progress Bar

The Style tab allows you to change the following:

  • Style. Select the progress bar preferred Style within one of the options: Angular, Angular with indicator, Circular.
  • Progress. 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.

  • Completed part color. Select to choose the completed 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).
  • Remaining part color. 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).

Customizing Text or Heading

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

Deleting Progress Bar

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

  • The element will be removed immediately.

More Menu

  • Click the More icon in the editing menu to access the available options:

  • Cut. Click Cut or Ctrl+X to cut your element.
  • Copy. Click Copy or Ctrl+C to copy your element.
  • Duplicate. Click Duplicate or Ctrl+D to duplicate your element. The duplicate will appear immediately.
  • Delete. Click Delete to remove the element. The element will be deleted immediately.
  • Move Forward. Click Move Forward or Ctrl+⇓ to move your element.
  • Move Forward. Click Move Forward or Ctrl+⇑ to move your element.

Please Note: The Move Forward or Move Backward options are available only when one element is added on top of another.