Progress bars will allow page visitors to see how close they are to completion. They can be animated and stylized to match your pages.
What You Will Need:
- A Clickfunnels Funnel
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.
- 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:
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.