Element Settings: Progress Bar Settings

Modified on Fri, 17 Nov, 2023 at 1:59 PM

In this article, we will talk about the Progress Bar Settings, which are exclusive of the Progress Bar element. The Progress Bar Settings will allow you to edit the Progress Bar element styling and make it match your page style.

Requirements:

An active ClickFunnels 2.0 account
A ClicFunnels page.
The Progress Bar element.

Table of Contents:

Percentage
Background
Progress background
Text
Text placement
Height
Width

Percentage

The percentage feature allows you to set the “completion percentage” of your progress bar. Please consider that this value is set manually only; it can’t be set dynamically at the moment.

Background

The background feature allows you to change the Progress bar background color.

Progress Background

Similar to the previously explained feature, the progress background feature allows you to set the background color of the completion percentage from the Progress bar.

Example: In this Progress bar, we’ve set the Progress Percentage at 50% and the Progress background color to be blue.

Text

The Text feature allows you to change the instructional text of your progress bar.

Example: For this example, we’ve set the Text feature to be “You are almost there … 50%”

Text Placement

Text placement will allow you to decide the position of your text. For this particular one, you can set it inside the progress bar or add it on top of it as a title (with the Inside and Outside options).

Height

The Height feature will allow you to change the height of the progress bar.

Width

Like the previous feature, the width feature will allow you to change the progress bar's total width.

Note: Please consider that the Width of your Progress bar will be limited by your Row’s total size, but you can always toggle the “PX” button to “%” to set it in percentage values instead.

Supported Elements:

This setting can be found in the following Elements:

Content Block: Progress Bar