The Progress Bar Widget on 10Web Website Builder is a dynamic tool that allows you to integrate animated progress bars into your pages. This widget is particularly useful for visually representing progress, such as skills, task completion, or project milestones, in a clear and engaging manner.
How to Use the Progress Bar Widget
- Locate the Progress Bar Widget in the widgets panel.
- Drag the widget to your desired location on the page canvas.
- Configure the Settings
Content tab
Title: Type the desired title that appears above the progress bar.
Title HTML Tag: Select the appropriate HTML tag (H1-H6, paragraph, span, div) from the dropdown menu to improve SEO by helping search engines understand the content of your progress bar.
Percentage: Set the numeric value representing the completion level of the progress bar.
Display Percentage: Toggle this switch to either show or hide the percentage value on the progress bar.
Inner Text: Input any text you want to appear inside the progress bar itself
Style tab
Progress Bar Color: Change the color of the progress bar to match your design.
Background Color: Select a background color for the bar.
Inner Text: Adjust the color and typography of the text displayed inside the bar.
Title Style: Adjust the color and typography of the title text to suit your page’s styling.
Advanced tab
You can customize the widget further using the settings available in the Advanced tab. These options provide additional styling and functionality adjustments, allowing you to tailor the widget to better fit your design needs.
Following these steps will help you effectively integrate and customize the Progress Bar Widget in the 10Web Builder.