A horizontal scroll section can hold a lot of content, and sending someone to the fourth slide is not something an ordinary anchor link handles on its own.
The Horizontal Scroll widget from The Plus Addons for Elementor gives every slide an id, and its URL Parameter setting makes those ids work in a link.
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 Pro, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Pro — Horizontal Scroll is only in The Plus Addons for Elementor Pro. With the Pro plugin switched off the widget is not in the editor at all, and a page that already uses it shows nothing where the widget was.
- Widget to enable: Horizontal Scroll, switched on under The Plus Addons > Widgets.
- You need a template: an Elementor Library template whose top-level sections are the slides. The widget turns each top-level section of that template into one horizontal slide.
Step 1: Give Each Slide an ID
There are two ways to do it, and you only need one of them.
Option A — inside the template
Open your slides template, select a section and put your id in Advanced > CSS ID.
Option B — from the widget
Select the Horizontal Scroll widget, open Extra Options and type the ids in Section ID, separated by | with no spaces around it. They are applied to the slides in order.
Type the ids without spaces, like
slide1|slide2|slide3|slide4. A space next to the separator is kept as part of the id and the link will not find it.
Step 2: Switch On URL Parameter
Still in Extra Options, switch URL Parameter on. This is what lets someone open the page at a slide.
Step 3: Link to the Slide
Use the id with a # in front of it as the link. With a Button widget, put it in the Link field.
Opening the page at #slide3 lands straight on the third slide:
Linking from another page on the same site? Put the page path in front of the id, for example
/services/#slide2.
How It Behaves
- Section ID applies the ids to the slides in order: the first id goes to the first top-level section of the template, and so on.
- A link on the same page that points at a slide id brings that slide to the left edge whether URL Parameter is on or off.
- URL Parameter is what makes an address like yoursite.com/page/#slide3 work. With it off, arriving at that address leaves the page at the top.
- With it on, the address bar is also updated as the visitor moves to a slide through a link or a Carousel Remote dot.
- The same ids are what Carousel Remote dots use to jump to a slide.
Limitations
- If you list fewer ids than there are slides, the remaining slides are given the literal id
undefined. Always list one id per slide. - Spaces around the | separator are kept inside the id, which makes the link fail.
- The ids are positional. Reordering the sections in your template reassigns them.
- The jump is calculated from the width of the first slide, so if you use different widths in Slides Width the link lands off-centre.
- The widget is Pro only. With the Pro plugin off the section, and every link into it, stops working.
Troubleshooting
The link does nothing
Check the id spelling on both sides, and check that Section ID has no spaces around the | separator.
Opening the page with #slide3 lands at the top
URL Parameter is off. Switch it on in Extra Options.
The last slides cannot be linked to
You have listed fewer ids than slides, so those slides ended up with the id undefined. Add one id per slide.
The link lands between two slides
This happens when Slides Width holds different values. Use a single width for every slide if you need links to land exactly.
