How to Add Progress Bar in Elementor Horizontal Page Scroll?

Updated on November 6, 2023 by Editorial Team
Table Of Content

Have you ever wondered how to add a progress bar in an Elementor horizontal page scroll? As businesses’ online presence becomes increasingly important, web designers and developers are constantly exploring new ways to create an interactive and engaging experience for their users. One such element is the progress bar. Adding a progress bar in an Elementor horizontal page scroll enhances the user experience and provides a visual representation of how far the user has come and how much further they have to go.

With the Horizontal Scroll widget and Carousel Remote widget from The Plus Addons for Elementor, you can easily add a progress bar in your horizontal scrolling section.

To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, click here.

Requirement  – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.

For this process, first, drag and drop the Carousel Remote widget and the Horizontal Scroll widget, and then follow the below steps:

1. In the Horizontal Scroll widget, once you’ve added your Elementor template, go to Extra Options tab > Unique Connection ID. Add a unique id.

Horizontal scroll unique connection id

2. Now select the Carousel Remote widget, then go to the Content tab, add the same ID in the Unique Connection ID field, and make sure Remote Type is selected as Horizontal Scroll.

Carousel remote unique connection id horizontal scroll

3. Then go to the Progress Bar tab and turn on the Progress Bar toggle. This will add a progress bar for the horizontal scrolling section. You can select the progress bar orientation from the Layout dropdown and from Offset you can change the position.

Carousel remote unique horizontal scroll progress bar

From the Carousel Remote widget’s Style tab, you can choose from three different style of the progress bar.

Style 1

Style 2

Carousel remote horizontal scroll progress bar style 2

Style 3

Carousel remote horizontal scroll progress bar style 3

So this is how simply you can add some cool progress bar in your Elementor horizontal scrolling section.

Also, check How to Link to a Specific Section in Elementor Horizontal Page Scroll.

Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

    Subscribe to our YouTube Channel for Elementor Tutorials
    New Video Every Week!
    Automatically Convert Figma Designs to 100% Editable Elementor Website