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.
Was this article helpful?
That’s Great!
Thank you for your feedback
Sorry! We couldn't be helpful
Thank you for your feedback
Feedback sent
We appreciate your effort and will try to fix the article