Progress Bar Customization Guide

In this section, you can fully customize the color and style of the progress bar using our inbuilt options. These settings allow you to modify the design when the pre-designed template doesn’t suit your needs.

---

1. Enabling the Progress Bar

To enable the progress bar, you first need to toggle the Progress Bar Status. Once enabled, several additional options will appear for further customization, such as:

• Display Position
• Display Styles
• Gradient Styles
• Background Color
• Primary Color
• Secondary Color
• Bar Thickness

2. Display Position

You can choose where the progress bar will appear on your posts or pages:

• Top of the post/page: The bar will display at the top.
• Bottom of the post/page: The bar will display at the bottom.

3. Display Styles

Select your preferred display style:

• Normal: A solid color progress bar.
• Gradient: A progress bar with a gradient effect.

If you select Gradient, an additional option for Gradient Style will appear.

4. Gradient Styles

When using the Gradient display style, you can choose from the following gradient directions:

• Top to Bottom
• Left to Right
• Top Left to Bottom Right

Additionally, you can customize the secondary color of the gradient in the Secondary Color option.

5. Customizing Colors and Thickness

Here are the options available for customizing the progress bar:

• Background Color: Change the background color of the progress bar.
• Primary Color: Set the main color of the progress bar.
• Secondary Color: (Available only for the gradient style) Choose the secondary color for the gradient effect.
• Bar Thickness: Use this option to adjust the thickness of the progress bar. The default maximum value is 12.

6. Select Post Type to Display

Determine where the progress bar will appear by toggling the following options:

• Display on Post: Enable this option to show the progress bar on posts.
• Display on Page: Enable this option to display the progress bar on pages.
• Display on Attachment: Leave this disabled if you do not want the progress bar on attachment pages.
• Display on Product: Leave this disabled if you do not want the progress bar on product pages.

7. Save Settings

Once you’ve configured all the settings to your preference, click the Save Settings button to apply the changes.

---

This guide provides an easy, step-by-step approach for users to customize and display the progress bar to match their site’s design and content needs.