Progress Bar Element

In this article, you will learn how to add a progress bar to your Clickfunnels page.

Why You Need This:

• Progress bars will allow your page visitors to see how close they are to completion. Progress bars can have animation and branding to match your business.

What You Will Need: 

• A Clickfunnels Funnel. Click here to learn how to get started.

Step 1: Add Progress Bar Element

• Click on Add New Element from within a row or click on the "+" below an existing element.
• Search or Select the element from the list.
• Drag it onto the page.

Step 2: Edit Settings

• Hover your mouse over the progress bar element and click on the Gear icon on the orange border.
• Edit the element and adjust the Settings as desired.

• Top Margin - Add space on the top of your element.
• Percent - Enter the text you want to appear inside the progress bar.
• Font Family - Select the font.
• BG Color -  Set the color of the progress bar.

Advanced Style Settings

• Percent Width - Choose what % you want the bar to show.
• Sizes - Choose the size of the bar.
• Text Shadow - Add shadow to the text in the bar.
• Text Style - Select the style of the text (bold and/or italicized).
• Alignment - Change the justification (left, center, right).
• Offset Color - Configure of the look of the "empty" portion of the bar.
• Shadow - Add shadow around the bar.
• Corners - Adjust the amount of rounding on the corners of the bar.
• Border - Select a border.

Advanced Animation

• Timed Delay - fade in or fade in with scale.
• Type - On page load or on page scroll for the delay that you have set.

What you can do next:

• Add Additional Elements

If you have any questions about this, please contact our support team by clicking the support icon in the bottom right-hand corner of this page.