How to Link to a Specific Section in Elementor Horizontal Page Scroll?

Updated onApril 12, 2026By

Key Takeaways

  • Horizontal Scroll widget from The Plus Addons for Elementor allows linking to specific sections of a horizontal scrolling webpage.
  • Users can assign an ID to each section of the horizontal scroll using a pipe separator (|) without spaces.
  • To link to a specific section, users must add the ID with # in the Link field of a button widget.
Table Of Content

Do you want to link to a specific section of a horizontal scrolling section? So you can send users directly to that section.

As websites continue to evolve, designers strive to create unique and user-friendly interfaces that offer seamless navigation for visitors. Horizontal page scrolling stands out as an engaging way to display content on a website, especially for portfolios, product showcases, or feature pages. However, it can be challenging to direct visitors to a specific section of a horizontal scrolling webpage using a hyperlink.

This task might seem complex, but the Horizontal Scroll widget from The Plus Addons for Elementor, allows you to easily link to a specific section of your template.

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.

LIVE WIDGET LINK

To do this, add the widget on the page and your Elementor template in the Content tab.

Now you have to add an id to the section you want to link to in your Elementor template. 

There are two ways you can do that.

One way is to add the id within the template, select the section and, go to Advanced > CSS ID, add your id.

Horizontal scroll css id

The second option is to select the Horizontal Scroll widget, and go to Extra Options tab > Section ID.

From here, you can assign an 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

Horizontal scroll section id

Once you’ve added the id to your section, go to Extra Options tab > URL Parameter and turn on the toggle.

Horizontal scroll url parameter

This will allow you to add anchor links in the URL.

Now to link to that specific section use the id with #.

Let’s use a button widget to link. Add the ID with # in the Link field.

Button link id for horizontal scroll

Note: If you link it from a different page within the same domain, make sure to add the page path before the #id. Like /service/#slide2.

Now if someone clicks on the button, it will take them directly to that specific section.

Also, check How to Add Progress Bar in Elementor Horizontal Page Scroll.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the section ID isn't linking correctly?

If the section ID isn't linking correctly, ensure that you've added the ID properly in the Advanced settings of the section or in the Horizontal Scroll widget under Extra Options. Use a pipe separator (|) without spaces for multiple IDs. If the URL parameter toggle is off, the anchor links won't work, so make sure it's enabled.

What is the best practice for naming section IDs in Elementor?

A good practice for naming section IDs is to keep them simple and descriptive, like 'slide1' or 'portfolio'. This makes it easier for you and others to understand what each section represents. Avoid spaces and special characters, and remember to use a pipe separator if you have multiple IDs.

What happens if I forget to enable the URL parameter toggle?

If you forget to enable the URL parameter toggle, the anchor links won't function. This means that even if you set the section IDs correctly, clicking on the links will not take users to the intended sections, which can lead to confusion.

How can I enhance user navigation with the Horizontal Scroll widget?

To enhance user navigation with the Horizontal Scroll widget, consider adding a progress bar as outlined in the How to Add Progress Bar in Elementor Horizontal Page Scroll guide. This visual aid helps users track their position within the horizontal scroll, improving the overall user experience.

Last reviewed: April 12, 2026

Related Docs