---
title: "How to Add Dots Navigation in Elementor Horizontal Page Scroll?"
url: https://theplusaddons.com/docs/add-dots-navigation-in-elementor-horizontal-page-scroll/
date: 2023-03-17
modified: 2026-08-11
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/03/How-to-Add-Dots-Navigation-in-Elementor-Horizontal-Page-Scroll_-1024x536.jpg
word_count: 555
---

# How to Add Dots Navigation in Elementor Horizontal Page Scroll?

## 

- The Plus Addons for Elementor uses the Horizontal Scroll widget and Carousel Remote widget to add a dots navigation system to a horizontal scrolling section.
- Horizontal Scroll assigns each section an ID in the Section ID field, using a pipe separator like slide1|slide2, so the Carousel Remote widget maps each dot to the correct section.
- Carousel Remote turns on the Dots toggle, matches dot items to slides or sections, and lets Position X, Position Y, Layout, and Active Dot Style control where the dots appear and how the active dot looks.

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](/docs/horizontal-scroll-elementor-widget-settings-overview/).*

**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.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-horizontal-scroll?utm_source=tpae&utm_medium=docs&utm_campaign=text)

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.

![horizontal scroll unique connection id section id](https://theplusaddons.com/wp-content/uploads/2023/03/horizontal-scroll-unique-connection-id-section-id-1.png)

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**.

![carousel remote unique connection id horizontal scroll](https://theplusaddons.com/wp-content/uploads/2023/03/carousel-remore-unique-connection-id-horizontal-scroll.png)

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](https://theplusaddons.com/docs/add-scroll-effect-on-horizontal-page-scroll-in-elementor/).

![carousel remote unique horizontal scroll dots](https://theplusaddons.com/wp-content/uploads/2023/03/carousel-remote-unique-horizontal-scroll-dots.png)

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.

![carousel remote unique horizontal scroll dots section id](https://theplusaddons.com/wp-content/uploads/2023/03/carousel-remote-unique-horizontal-scroll-dots-section-id.png)

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](https://theplusaddons.com/docs/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](https://theplusaddons.com/docs/elementor-flip-box-with-carousel-remote/) to apply remote-controlled navigation to a flip box layout.