If you are using Elementor for your website design, adding dots navigation to the horizontal page scroll can be a great feature to enhance user experience. Dots navigation is a graphical representation of where the user is on the page and allows them to navigate to their desired section without scrolling manually.
With the Horizontal Scroll widget and Carousel Remote widget from The Plus Addons for Elementor, you can add a dots navigation system to your horizontal scrolling section.
To check the complete feature overview documentation of The Plus Addons for Elementor Horizontal Scroll widget, click here.
Best Used For:
- Portfolio websites using horizontal page scroll to present projects or case studies
- Agency landing pages that guide visitors through services section by section
- Product presentation pages where each slide highlights a different feature or offering
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 onto the page, then follow the steps below:
1. In the Horizontal Scroll widget, once you have added your Elementor template, go to the Extra Options tab and find the Section ID field.
Here you assign an ID to each section of the horizontal scroll. Use a pipe separator (|) with no spaces between IDs. This mapping tells the Carousel Remote widget which dot corresponds to which section.
Example: slide1|slide2
2. In the Unique Connection ID field, enter a unique ID. This ID links the Horizontal Scroll widget to the Carousel Remote widget so they communicate with each other.
3. Select the Carousel Remote widget, then go to the Content tab. Add the same ID in the Unique Connection ID field and set Remote Type to Horizontal Scroll.
4. Go to the Dots tab and turn on the Dots toggle. This adds a dots navigation system to the horizontal scrolling section. Make sure the number of dot items matches the number of slides or sections in the Horizontal Scroll widget.
If you want to trigger animated scroll effects as visitors move between sections, see How to Add a Scroll Effect on Horizontal Page Scroll in Elementor.
5. Open the Dot 1 item and enter the first section ID of the horizontal scroll in the Section ID field. From here you can add an image or icon to each dot and set its colour and background. Follow the same steps for each additional dot item, changing the Section ID accordingly.
Click the +ADD ITEM button to add more dot items.
6. From the Position Y and Position X fields, control where the dots appear on the screen. Use Position X to shift the dots left or right and Position Y to move them up or down. From the Layout dropdown, change how dots are arranged, and from the Active Dot Style dropdown, set how the active dot looks when a section is in view.
Visitors can now navigate the horizontal scrolling section by clicking on any dot.
Also, check How to Add Next/Previous Button in Elementor Horizontal Page Scroll. The Carousel Remote widget also works with other widget types. See How to Connect Elementor Flip Box with Carousel Remote to apply remote-controlled navigation to a flip box layout.
