Horizontal Scroll Elementor Widget Settings Overview

The Horizontal Scroll widget turns an Elementor template into a strip of slides that moves sideways while the visitor scrolls down the page.

You pick a template, and every top-level section in it becomes one slide. This page covers every setting in the widget and what each one actually does.

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.
• Container settings: put the widget in a full-width container with no padding. The slides are sized in viewport widths, so side padding on the container leaves a strip of the next slide showing.

Turn the Widget On

1. Go to The Plus Addons > Widgets.
2. Search for Horizontal Scroll and switch the toggle on.
3. Do the same for Carousel Remote if you plan to add dots, buttons, a pagination counter or a progress bar.

Add the Content

Drop the widget on the page and open the Content section.

1. Pick your slides template in Select Template. The dropdown lists your Elementor Library items.
2. If you have not built one yet, click Create Template. The editor opens in a pop-up so you can build the slides without leaving the page.
3. Click Edit Template to come back to it later.
4. Import Presets at the top of the section brings in a ready-made layout.

Each top-level section of that template becomes one slide. Give the sections a Min Height of 100vh if you want full-screen slides.

Scrolling Options

Setting	What it does	Default
Slide Scroll Effects	Adds a transform to the whole strip while it is moving: Skew, Scale or Bounce. It settles back to normal shortly after the scroll stops.	Normal
Skew Value / Scale Value	How strong the skew and the vertical squash are. Skew Value shows for Skew and Bounce, Scale Value for Scale and Bounce.	3 and 0.9
Background Transition	Gives each slide its own background colour or image, drawn behind the template.	Off
Background Transition Duration	How long one background fades into the next, in seconds.	0.7
Sticky Section	Pins a second template above the slides for the whole horizontal run.	Off
Opacity Based Scroll	Fades the slides that are still ahead. Value sets how faded they are.	Off, Value 0.5
Full Slide Scroll	Snaps the strip so it always comes to rest on a whole slide.	Off
RTL Compatibility	Runs the strip right to left instead of left to right.	Off
Scroll Speed	How much page scrolling the whole horizontal run takes up. See below.	4

Scroll Speed is a Distance, Not a Speed

The horizontal run is pinned for one viewport width multiplied by Scroll Speed. On a 1440px screen with four slides the pinned area measured 6,660px tall at the default 4, 2,340px at 1 and 15,300px at 10. The slides always travel the same distance sideways, so a higher number spreads that travel over more scrolling and the strip moves more slowly.

Extra Options

Setting	What it does	Default
Distance after last slide	Extra sideways travel once the last slide is in place. It does not make the page taller.	0
Slides Width	Slide widths in viewport widths, separated by | with no spaces. One value is used for every slide.	100
Section ID	An id for each slide, separated by | with no spaces. Used for anchor links and for Carousel Remote dots.	Empty
URL Parameter	Lets someone open the page at #your-slide-id and land on that slide.	Off
Unique Connection ID	Connects the widget to a Carousel Remote widget.	Empty
Responsive Visibility	Below the Width you set, the slides stack and the page scrolls normally.	Off, Width 300

Slides Width takes one value per slide. 100|50|100|150 on a 1440px screen produced slides 1440, 720, 1440 and 2160 pixels wide.

Turning Horizontal Scroll Off on Small Screens

Sideways scrolling is awkward on a phone. Switch Responsive Visibility on and set Width to the screen width at or below which the effect should stop.

On a 390px phone screen with Width at 1024, the slides stacked and the page scrolled normally:

How It Behaves

• Each top-level section of the chosen template becomes one slide, in template order.
• The strip is pinned while it moves. The page height grows by one viewport width per unit of Scroll Speed.
• A slide hidden with Elementor’s Hide On Desktop, Hide On Tablet or Hide On Mobile is removed from the strip on that device, and so is its matching background row and Carousel Remote dot.
• The widget loads four extra scripts, and only on pages that use it: GSAP, ScrollToPlugin, ScrollTrigger and its own handler.
• With no template chosen the page shows No Template Selected! Please Select Template To Get The Desired Result.

Limitations

• The widget is Pro only. With the Pro plugin switched off it disappears from the editor, and a page that already uses it shows nothing at all where the widget was — there is no notice.
• Responsive Visibility is compared against the device’s screen width, not the width of the browser window. Narrowing a desktop browser will not switch it off; only a device with a small screen will.
• Scroll Speed reads like a speed but sets a distance, so larger numbers feel slower.
• Distance after last slide keeps the strip moving after the last slide, which drags that slide past the left edge and opens a gap of the same size on the right.
• A template with only one section still reserves the full pinned run, so you get a long stretch of scrolling where nothing moves.
• Section ID is split on | without trimming. Spaces around the separator end up inside the id, and if you list fewer ids than slides the remaining slides get the literal id undefined.

Troubleshooting

The page just scrolls down and nothing moves sideways

Check that a template is selected and that it has more than one top-level section. A single section gives nothing to scroll through.

A sliver of the next slide is always visible

The slides are sized in viewport widths. Set the container holding the widget to full width and clear its padding.

It still scrolls sideways on my phone

Switch on Responsive Visibility and set Width above your phone’s screen width. Remember it compares the screen, not the browser window.

The scrolling feels far too slow

Lower Scroll Speed. It sets how much page scrolling the run takes, so a smaller number gets through the slides sooner.

Related Docs

• Add a scroll effect on horizontal page scroll
• Change the background colour on scroll
• Make a section sticky on scroll
• Add dots navigation