---
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-04-11
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: 420
---

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

## Key Takeaways

- The Plus Addons for Elementor includes the Horizontal Scroll widget and Carousel Remote widget to add dots navigation.
- Users assign section IDs using a pipe separator in the Horizontal Scroll widget to enable navigation dots.
- The Dots tab in the Carousel Remote widget allows users to turn on dots navigation and customize dot styles.

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 easily to their desired section without having to scroll manually. 

With the Horizontal Scroll widget and Carousel Remote widget from The Plus Addons for Elementor, you can easily add a dots navigation in 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/).*

***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, and then follow the below steps:

1. In the Horizontal Scroll widget, once you’ve added your Elementor template, go to **Extra Options** tab > **Section ID**. 

Here you have to assign id to each section of the horizontal scroll. You have to use a pipe separator (**|**) without any space to add the id for each section.

Example: slide1|slide2

2. Then in the **Unique Connection ID** field, add a unique id.

![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. 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](https://theplusaddons.com/wp-content/uploads/2023/03/carousel-remore-unique-connection-id-horizontal-scroll.png)

4. Then go to the **Dots** tab and turn on the **Dots** toggle. This will add a dots navigation to the horizontal scrolling section. 

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

Make sure to have the same number of dot items as the number of slides/sections in the Horizontal Scroll.

5. Open **Dot 1** item, in the **Section ID** field, you have to add the first section id of the horizontal scroll section. From here you can also add an image or icon to the dot, and customise the colour and background.

![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)

You can follow the same process for other tabs, make sure to change the **Section ID** accordingly.

Click on the **+ADD ITEM** button to add more dots.

6. From **Position Y** and **Position X,** you can position the buttons. You can also change the button layout from the **Layout** dropdown and the active dots style from the **Active Dot Style** dropdown. 

Now users can easily navigate the horizontal scrolling section by clicking on the dots.

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/).

## Frequently Asked Questions

**Q: What if the dots navigation isn't appearing in my horizontal scroll?**
A: If the dots navigation isn't showing, ensure that you've turned on the Dots toggle in the Dots tab of the Carousel Remote widget. This step is crucial as it activates the dots navigation feature. Additionally, verify that the number of dot items matches the number of slides in your Horizontal Scroll widget. If they don't match, the dots may not display correctly.

**Q: What is the best practice for positioning the dots in the navigation?**
A: For optimal user experience, position the dots in a way that they are easily accessible and visible. Use the Position Y and Position X settings to adjust their placement. Consider placing them at the bottom of the screen where users typically expect navigation indicators. This positioning helps users quickly understand their location within the horizontal scroll.

**Q: Does the dots navigation work on mobile devices?**
A: The dots navigation feature is designed to work with the Horizontal Scroll widget in The Plus Addons for Elementor, but it's essential to test its responsiveness on mobile devices. Ensure that the dots are easily clickable and visible on smaller screens. You may need to adjust the positioning and size of the dots to enhance usability for mobile users.