Scroll Indicator Feature Documentation

The AAE 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 

• Elementor (Page Builder) 
• Animations Addons (Our Plugin)  

Tip: Make sure Animation Addons is installed and activated on your WordPress site before you start. 

Step 1: Set Display Location

Go to your ‘Site Settings’ and select AAE Scroll Indicator to get started. 

Scroll Indicator 

Toggle the Scroll Indicator option to ‘Show’ to display the layout settings. 

Display 

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.

For example, ‘Entire Website‘ is selected here, but 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 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. 

For example, here 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, red 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. 

Final Result 

You Did It 

You have successfully set up the AAE 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.