{"id":2492,"date":"2021-12-13T10:25:48","date_gmt":"2021-12-13T10:25:48","guid":{"rendered":"https:\/\/helptest.mainbrainer.com\/knowledge-base\/landing-page-progress-bar-widget\/"},"modified":"2022-06-09T09:39:24","modified_gmt":"2022-06-09T09:39:24","slug":"landing-page-progress-bar-widget","status":"publish","type":"ht_kb","link":"https:\/\/www.mainbrainer.com\/hc\/landing-pages\/builder\/progress-bar\/","title":{"rendered":"Landing Page Progress Bar Widget"},"content":{"rendered":"
\n

The P<\/strong>rogress Bar<\/strong> widget helps you add an animated Progress Bar to your landing page.<\/p>\n

The Progress Bar displays the amount of work a customer has already put in and how little remains to be done to achieve the intended outcome!<\/p>\n

For example<\/strong>, a Progress Bar can be used to visually indicate the number of assessments the customer needs to take before completing a course and earning a certificate? Or, how many steps remain in a checkout\/signup process?<\/p><\/blockquote>\n

With a Progress Bar, you can remind your customers how far they have come in a particular process and nudge them to complete it.<\/p>\n

<\/div>\n

How to use a Progress Bar in a Landing Page<\/h2>\n
<\/div>\n

Step 1<\/h3>\n

Navigate to the landing page builder<\/h3>\n

Use the Main Menu<\/strong> on the left to create a Landing Page<\/strong> <\/strong>and navigate to the landing page builder<\/a>.<\/p>\n

<\/div>\n

Step 2<\/h3>\n

Add a Progress Bar to the Landing Page<\/h3>\n

As explained in the previous articles, the blank area on the left is the work area<\/strong> where you design your landing page; and the area on the right is the tools area where all the available design elements are displayed as widgets<\/a>.<\/p>\n

In order to add a progress bar to your landing page, drag and drop the Progress Bar<\/strong> widget to the work area (as shown in the screenshot below)<\/em>.<\/p>\n

<\/div>\n

\"Landing<\/p>\n

<\/div>\n

Step 3<\/h3>\n

Customize the Progress Bar as per your requirements<\/h3>\n

As you drop the widget into the work area, the widget Settings <\/strong>are displayed on the right (as highlighted in the screenshot below)<\/em>.<\/p>\n

Use these settings to customize the Progress Bar as per your requirements. Herein:<\/p>\n