Progress Bar

Adding a progress bar to your funnel or website is a straightforward way to show users how far they've come through your content. There are plenty of customisation options on the right-hand side of the page, so you can tailor the progress bar to fit your design and what you need it to do. This guide walks through each option.

General Settings

Element Name/Title

Under the General Settings section, you'll find the Element Name/Title option. This displays the default name/title of the edit option you're currently working on. You can leave it as is or rename it for easier identification.

Background Color

To modify the background colour of your button, select the content you wish to adjust and choose a colour from the given options or input a custom colour code.

Typography Type

In the Typography Type option, you can customise the font used for your text/content. You have the choice to use the headline or content font selected in your settings, or you can opt for a custom font by selecting from the dropdown menu of font options.

Text Options

• Percent: Under the Text Options section, you can add or modify the text displayed on your button.

Spacing Option

• Margin & Padding: Under Spacing Options, you can customise the top and bottom margins of your content. These settings will only be applied to the specific edit option that you are working on.

Advanced Settings

Border Option

• Border: Under the Advanced Settings tab, you will find the Border Option feature. Here, you can decide what type of borderline you want by selecting any option besides No Border, which will drop down more border styling options.

• Border Style: Select the type of borderline style you want. You can choose from Solid, Dashed, or Dotted.

• Border Width: Click here to select how thick you want the borderline to appear.

• Border Color: Choose a colour for your borderline from the given colour options or type in a custom colour code in the given field.

• Border Radius: If you don't want your border to have sharp corners, you can select from the radius options to make it more rounded.

• Radius Edge: Additionally, you can choose which edge to adjust by selecting from the options of "All edges, Top only, or Bottom only".

Shadow

• Box Shadow: If you would like to add a box shadow around your progress bar, select the "+" icon and choose from your options of drop shadow or inner shadow. You will see various intensities of shadows, so have a play around to see which one suits you best.

• Text Shadow: In the Text Shadow option, you can add a shadow effect to your text/content. You can select the strength of the shadow, ranging from no shadow to light fade, mid-shadow, and strong shadow.

Text Style

Under Text Style, you can choose the style for your font: bold, italic, or bold and italic.

Text Align

Text Align gives you the option to position your text to the left, centre, right, or justified.

Percent Width

With the Percent Width dropdown, you can choose how wide you would like your progress bar to be within the element box. You can choose from 0 percent up to 100 percent.

Sizes

You can also select the height of your progress bar with the Sizes dropdown. Your options here are small, medium, and large.

Offset Color

If you would like to set the offset colour of your progress bar, which fills in the remaining section of your element box (if you don't have your progress bar set at 100%), you can choose from the options in the dropdown menu. Here, you can select the offset colour to be white, transparent white, black, or transparent black.

Visibility

Under the Visibility option, you can choose whether to make a particular edit option visible on mobile devices, desktops, or both by clicking on the corresponding icon.

Custom Class

For creating custom classes, you can use the Custom Class space provided.

CSS Selector

If you need to copy the Custom CSS, just click on the "Copy" icon on the right side of the reference code.

A well-designed progress bar gives users clear visual feedback on where they are in their journey. With the right customisation options, you can align it with your brand and make navigation feel natural and straightforward.