Progress Bar Element in Funnel and Website Builder
The progress bar element in the FG Funnels Funnel and Website builder allow you to have a visual representation of the progress in a process. These are commonly used for one time offer (OTO) or upsell pages to indicate that the customer's order is not yet complete.
In This Article:
To add the Progress Bar element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Find the Blocks section, select the Progress Bar element and drag it to the desired location on the page.
Looking for some pre-styled progress bars that have additional visual interest? Add a pre-styled progress bar section by clicking Add Element and then from the left side menu of the panel, select Progress Bar. This will allow you to pick pre-styled progress bars and then refine them following the directions below. These bars may have less styling options, especially the ones that are gradients.
Progress Bar General Options
- You can customize the basic look of your progress bar using the options panel to the right side. You can change the background color for the progress, adjust the font family used and the text within the bar that is "Progressing..." by default.
- You can also set margin to add space around the progress bar.
Progress Bar Advanced Options
- You can add further styling to your progress bar through the advanced options panel.
- Add a border to your progress bar and set the color, width, size and radius (rounded corners).
- Add a text and/or box shadow.
- Change the text style by applying bold and/or italics.
- Align the text within the progress bar to the left, center or right.
- Change the amount of progress that is showing complete anywhere from 0-100
- Change the size of the progress bar to make it taller or shorter.
- Change the color of the offset, or the uncompleted portion.
- Turn on or off visibility on mobile or desktop. Blue icons means that it is visible on that device, whereas gray icons means that it is hidden on that device.
- Custom class and CSS selector allow you to make CSS adjustments that target this element.