---
title: "Horizontal Scroll Elementor Widget Settings Overview"
url: https://theplusaddons.com/docs/horizontal-scroll-elementor-widget-settings-overview/
date: 2023-03-17
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2023/03/Horizontal-Scroll-Elementor-Widget_-Settings-Overview-1024x536.jpg
word_count: 1121
---

# Horizontal Scroll Elementor Widget Settings Overview

## 

- Horizontal Scroll convierte una plantilla de Elementor en una franja de diapositivas horizontales, y cada sección de nivel superior de esa plantilla se convierte en una diapositiva en el orden de la plantilla.
- The Plus Addons for Elementor Pro es obligatorio para Horizontal Scroll, y con el plugin Pro desactivado el widget desaparece del editor y la página no muestra nada donde estaba.
- Scroll Speed no mide velocidad, sino distancia: el área fijada ocupa un ancho de ventana por unidad, así que en una pantalla de 1440px el área fijada mide 6,660px con el valor 4 y 15,300px con el valor 10.
- Responsive Visibility detiene el efecto en pantallas pequeñas y hace que las diapositivas se apilen; además, Slides Width admite valores como 100|50|100|150 para dar anchos distintos a cada diapositiva.

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

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

## 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

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

![The Plus Addons Widgets screen with the Horizontal Scroll toggle switched on](https://theplusaddons.com/wp-content/uploads/2023/03/horizontal-scroll.png)

## Add the Content

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

- Pick your slides template in **Select Template**. The dropdown lists your Elementor Library items.- 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.- Click **Edit Template** to come back to it later.- **Import Presets** at the top of the section brings in a ready-made layout.

![Select Template dropdown in the Horizontal Scroll widget with a slides template chosen](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-template.webp)

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

![Scrolling Options section of the Horizontal Scroll widget with Slide Scroll Effects at the top](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-scrolling-options.webp)

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

![Scroll Speed field at the bottom of the Scrolling Options section, set to 4](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-speed.webp)

## Extra Options

![Extra Options section of the Horizontal Scroll widget showing Distance after last slide](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-extra-options.webp)

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

![Slides Width field in Extra Options set to 100 pipe 50 pipe 100 pipe 150](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-slides-width.webp)

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

![Responsive Visibility switched on in Extra Options with the Width field below it](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-responsive.webp)

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

![Phone-width page where the horizontal scroll has turned into normal vertical scrolling](https://theplusaddons.com/wp-content/uploads/2026/09/hscroll-result-responsive.webp)

## 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](https://theplusaddons.com/docs/add-scroll-effect-on-horizontal-page-scroll-in-elementor/)- [Change the background colour on scroll](https://theplusaddons.com/docs/change-background-colour-on-horizontal-page-scroll-in-elementor/)- [Make a section sticky on scroll](https://theplusaddons.com/docs/make-a-section-sticky-on-scroll-in-elementor-horizontal-page-scroll/)- [Add dots navigation](https://theplusaddons.com/docs/add-dots-navigation-in-elementor-horizontal-page-scroll/)

## Frequently Asked Questions

**Q: Why does Elementor horizontal scroll just move down the page instead of sliding sideways?**
A: That usually means the widget has no valid template to animate, or the template only has one top-level section. The Horizontal Scroll widget turns each top-level section into one slide, so a single-section template gives you nothing to move through. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH uses that structure to build the sideways strip.

**Q: How do I stop a sliver of the next slide showing on horizontal scroll?**
A: That gap is usually caused by container padding or a container that is not full width. The slides are sized in viewport widths, so even a little side padding can expose the next slide. Put the widget in a full-width container and clear its padding so the strip fills the available space cleanly.

**Q: How do I turn off horizontal scroll on phones in Elementor?**
A: Responsive Visibility is the switch for that. Set it on and choose a Width above your phone’s screen width, and the slides stack while the page scrolls normally. The key detail is that it compares against screen width, not browser window width, so shrinking a desktop browser will not trigger it.

**Q: What’s the best Scroll Speed setting for Elementor horizontal scroll?**
A: Lower numbers make the run finish sooner, because Scroll Speed is a distance setting, not a true speed setting. The page is pinned for one viewport width multiplied by Scroll Speed, so bigger values spread the same sideways travel over more vertical scrolling and feel slower. On a 1440px screen, 4 produced a 6,660px pinned area while 10 produced 15,300px.

**Q: Can I use different slide widths in Elementor horizontal scroll?**
A: Slides Width supports different widths per slide, separated by | with no spaces. That matters when one slide needs more room than another, because each value is measured in viewport widths. For example, 100|50|100|150 on a 1440px screen produced slides 1440, 720, 1440 and 2160 pixels wide.

**Q: What are the main limitations of Elementor horizontal scroll?**
A: The big ones are Pro-only behavior, screen-width-based responsive control, and template structure. With The Plus Addons for Elementor Pro switched off, the widget disappears from the editor and existing pages show nothing where it was. It also reserves a full pinned run even with one section, and Section ID values are split on | without trimming spaces.