Guide: Adding a Progress Bar to Your Website

Incorporating a progress bar into your website or funnel can significantly enhance user engagement by visually representing their progress. With a wide array of customization options available, you can easily design a progress bar that aligns with your site's aesthetics and functionality. This guide will walk you through the key customization settings to help you create a seamless user experience.

General Configuration

Naming the Element

The General Settings section allows you to specify a name or title for the element you’re customizing. This default name can be edited, allowing for more precise identification during the design process.

Adjusting Background Color

To change the background color of the progress bar, simply select the area you want to modify and choose from preset colors or input a custom color code.

Choosing Typography

You can modify the font style used in the progress bar by selecting a font type from the settings. You have the flexibility to use either a preset or custom font for headings or content.

Text Customization

Percent Display

Within the Text Options, you can add or modify the text that appears within the progress bar, such as percentages.

Spacing Customization

Adjusting Margins

Under Spacing Options, you can alter the top and bottom margins of your progress bar to better fit the overall layout of your page.

Themes

Selecting a Theme

The Themes tab allows you to choose from several pre-designed themes. Keep in mind that selecting a theme will override any previously applied color settings, but you can easily revert changes by clicking the undo button.

Advanced Customization

Border Settings

Within the Advanced Settings, the Border Option allows you to define the type of border you want. Options include Solid, Dashed, or Dotted lines. You can also adjust the thickness, color, and radius of the border to create rounded corners if desired.

Text Shadow

Add a shadow effect to your text through the Text Shadow option. You can adjust the shadow intensity from subtle to strong.

Text Alignment

Text Align gives you the flexibility to place your text on the left, center, right, or justify it within the progress bar.

Shadow Effects and Size Options

Box Shadow

You can apply shadows around your progress bar to add depth. Options include drop shadow and inner shadow, with various intensity levels to choose from.

Width and Height Adjustments

The Percent Width setting allows you to decide how wide your progress bar should be within its container, from 0% to 100%. Additionally, you can adjust the height of the bar using the Sizes dropdown, choosing between small, medium, or large.

Offset Color and Visibility

Offset Color

If your progress bar is not set to 100%, you can select an offset color to fill the remaining space. Options include white, transparent, black, or transparent black.

Device Visibility

The Visibility option allows you to control whether the progress bar is visible on mobile, desktop, or both.

Custom CSS Options

Custom Class and CSS Selector

For developers who need more control, the Custom Class and CSS Selector fields allow you to input and copy custom CSS for advanced design needs.

By using these features, you can create a fully customized progress bar that not only looks great but also improves the user experience on your site.