How to Use Scroll Indicator in BricksBuilder Using BricksFly

Scroll Indicator adds a sleek, customizable progress bar to your website, visually indicating how far users have scrolled down a page. It’s a small yet powerful tool that enhances the user experience, especially on content-heavy or long-scrolling pages.

Requirement 

Make sure you have installed:

• Bricks Theme 
• BricksFly Pro

Activate Scroll Indicator in BricksFly

1. Go to your WordPress Dashboard. 
2. Click on BricksFly. 
3. Head to the Extension tab. 
4. Under General Extensions ➜ Site Settings, toggle on Scroll Indicator.

Step 1: Set Up Scroll Indicator Display Rules

Once the Scroll Indicator toggle is enabled, go to Site Settings → Scroll Indicator to continue.

Enable Scroll Indicator

Again, enable Scroll Indicator in the same manner to open the layout settings.

Show On

• Entire Website: Choosing ‘Entire Website’ will display the scroll indicator on all pages of your site.
• Specific Pages: It lets you choose specific pages where you want the scroll indicator to appear, such as Contact, Blog, About Us, and more.
• Specific Post Types Singular: It displays the scroll indicator on individual posts or custom post types, such as blog posts, video stories, live events, portfolios, and more.

In this example, we have chosen ‘Entire Website ‘. However, you can choose any option based on your preference.

Step 2:  Customize Position & Style

Change the location of the scroll indicator on your page and its appearance. You can adjust its position, size, and colors to match your website’s style.

Settings

Position: It offers two options: ‘Top’ and ‘Bottom’. Selecting ‘Top’ places the scroll indicator at the top of the page, while choosing ‘Bottom’ places it at the bottom.

For example, it is set to ‘Top’ here, but you can choose either option according to your preference.

Z-Index: It controls the layer position of the scroll indicator. A higher value ensures it stays above other elements on the page. 

In this example, it’s set to 99, but you can use any value depending on your preference.

Height: It lets you decide how thick the scroll bar should be. Here, it’s set to 12, so the scroll indicator will appear 12 pixels high.

Background Color: Choose any background color for your scroll indicator based on your preference. For example, light grey is selected here.

Indicator Color: Select the indicator color based on your preference. In this example, it’s set to yellow, but you can choose any color you like.

Reset to Default: Restores all Scroll Indicator settings to their original default values. Any custom changes made to the position, size, colors, or other settings will be removed.

Save All settings: Saves and applies all changes made to the Scroll Indicator extension. Make sure to click this button after configuring the settings.

Final Result

You Did It

You have successfully set up the Scroll Indicator. Whether it appears throughout your site or only on chosen pages, it offers visitors an easy way to track their scroll progress and improves how they interact with your site.

In addition, if you have any questions or need a hand, feel free to reach out to our support team—we’re always here to help.