Adding the Progress Bar element to your landing page can show your visitors how far they've gone in a particular process, like completing a opt-in form.
Adding the Progress Bar
1. Find the Progress Bar element in the toolbar on the left-hand side.
2. Drag-and-drop it into a form or anywhere on your landing page.
Formatting the Progress Bar
3. To edit the Progress Bar, select it and click the Pencil icon in the formatting toolbar.
4. You will be taken to the Inspector tab, where you can set the value of the Progress Bar and change it's layout.
5. To change th layout of the Progress Bar, you can either click "Layouts" in the Inspector tab under Progress Bar or you can change it directly from the formatting toolbar by clicking the Square Tile icon.
Select a layout that suits you best and click "Use Layouts".
Customizing the Progress Bar
6. For more customization options, you need to explore the Inspector tab.
- In the Attributes section, you can specify the Progress Bar's ID and class, align it to the right, left, center of the page, make it visible on smartphones, tablets, laptops, and PCs;
- Change the style of the text under Text Style;
- In the Padding and Margin sections, you can change the layout of the Progress Bar;
- You can select a background color, add an image or gradient to it in the Background section;
- You can also add borders and customize the roundness of the Progress Bar's edges;
- Add shadows and customize their distance, blur, and spread.
