ConvertedU Marketing Library Webinar Blog

Need help? You've come to the right place

What's New Getting Started Drag and Drop Standard Builder Integrations Center

The Progress Bar Widget

Adding a progress bar to your page (or Drag & Drop Leadbox) can show your visitors how far they are in a particular process—say, opting in to your offer or completing a video series.

In this article:

Using the Progress Bar Widget

Customization and styling details

    Editing completion percentage

    Adjusting animation settings

    Hide value text

    Change progress bar color

Tips and FAQs 

Using the Progress Bar Widget

Sometimes, you want to show a user how far through a process they are. This is especially important when you have a multi-step opt-in sequence. This widget can also be helpful when displaying how many videos a user has watched in your series. 

Customization and Styling Details

Editing completion percentage

You can click on the widget and select Style from the fly-out. You can then adjust the completion percentage using the plus (+) and minus () buttons next to “Completed,” as show below.

NOTE: You can adjust the percentage in 5% increments. 

Adjusting animation settings

Animation is enabled by default and is displayed in blue, but can be disabled. Disable animation by clicking Style and then clicking the toggle next to Animation. When disabled, the toggle will turn grey, as show below.

Hide value text

You may not always want folks to display the percentage and “complete” text (like if your page is in a different language). In this case, you can hide the text that appears above the progress bar. To do so, click Style, then toggle Show Value Text, to the “off” position, as show below.

Change progress bar color

You can change the color of the completed portion, the progress bar itself, and the label text associated with it. Just click the color selector, then select the element whose color you want to change. Then use the color wheel to adjust element’s hue, lightness and saturation—or enter a hex color value you may already have handy, as show below.

Tips and Frequently Asked Questions

Can my progress bar be made taller?

Currently, the height of the progress bar can’t be manipulated. When placed to the left or right of another widget, its width will automatically adjust to fit into the space, so you can change its width by adjusting its containing column. 

Can I change the completed text that appears next to the percentage? 

At this time, there is no way to edit the Complete text. Instead, you can toggle the Show Value Text option to “off” and add a text widget above or below the progress bar (so you can directly edit the text).
 

(Updated 08/01/16)


Please let us know if you have additional questions!

We’re here to help. If you run into any issues or just have additional questions, please contact our support team. You can also create a ticket by clicking the ? in the top right corner of your Leadpages dashboard. 

Was this article helpful?
0 out of 0 found this helpful
Powered by Zendesk