Customizing Website Progress Bar Features User Engagement

Maximizing Engagement with a Customizable Progress Bar

Creating an engaging user experience on your website or funnel is crucial for retaining visitors and guiding them through your content. One effective tool for achieving this is the integration of a progress bar. This article serves as a comprehensive guide on customizing and implementing a progress bar using the CRM's features. It is designed for users of all skill levels, from beginners to advanced, ensuring that anyone can enhance their website or funnel with this dynamic feature.

General Settings

The general settings provide the foundational customization options for your progress bar, including:

Element Name/Title: This is the default name or title of the progress bar. You can keep the default name or change it for better identification.
Background Color: Adjust the background color of your progress bar by selecting from predefined colors or entering a custom color code.
Typography Type: Customize the font of your text. You can choose between the default heading or content font or select a custom font from a dropdown menu of options.

Text Options

Under text options, you can further personalize the content displayed on your progress bar:

Percent: Add or modify the percentage text displayed, indicating progress.
Spacing Option: Adjust the top and bottom margins to ensure your content fits perfectly within the designated space.

Theme

Themes offer a quick way to apply a set of predefined styles to your progress bar:

Select a theme from the available options. This will automatically adjust the color scheme of your progress bar to match the selected theme.
If you change your mind, use the undo action button to revert to your previous selections.

Advanced Settings

For more detailed customization, the advanced settings offer additional features:

Border Option: Choose the type of border you want (solid, dashed, or dotted), its width, and color. You can also adjust the radius to round the corners of your progress bar.
Text Shadow: Add a shadow effect to your text for depth. Options range from no shadow to a strong shadow.
Text Style and Align: Customize the style (bold, italic) and alignment (left, center, right, justified) of your text.
Box Shadow: Add a shadow around your progress bar. Experiment with different shadow intensities to find the perfect fit.
Percent Width: Determine the width of your progress bar within its container, from 0% to 100%.
Sizes: Choose the height of your progress bar (small, medium, large).
Offset Color: Set the color for the unfilled portion of your progress bar.

Visibility and Customization

Visibility: Decide whether your progress bar should be visible on mobile devices, desktops, or both.
Custom Class and CSS Selector: For advanced users, you can create custom classes or copy the custom CSS for further customization.

Troubleshooting Tips and FAQs

My progress bar isn't displaying correctly on mobile devices. What can I do? Ensure you've set the visibility settings correctly. If issues persist, adjust the size and spacing options to better fit mobile screens.

How can I revert to my original color scheme after selecting a theme? Use the undo action button in the builder toolbar to revert to your previous selections.

Can I use custom fonts for my progress bar? Yes, you can select a custom font from the typography type dropdown menu.