Changing the background colour as each slide comes into view is an easy way to give a horizontal scroll section some rhythm.
The Horizontal Scroll widget from The Plus Addons for Elementor does this with Background Transition, which draws a colour behind the whole strip and swaps it as the active slide changes.
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.
- Leave the template sections transparent: the transition colour is drawn behind your template, so a section with its own background will hide it.
How to Change the Background Colour on Scroll
- Select the Horizontal Scroll widget and open Scrolling Options.
- Switch Background Transition on. A Background repeater appears with two rows, Item #1 and Item #2.
- Open Item #1 and pick a colour in Color. That is the background for the first slide.
- Repeat for the other rows, and use + ADD ITEM until you have one row per slide.
- Set Background Transition Duration to control how long one colour takes to fade into the next.
The Result
Each slide now arrives on its own colour. Here slide 2 is in view and the second row’s colour is behind it:
Settings
| Setting | What it does | Default |
|---|---|---|
| Background Transition | Switches the whole feature on. | Off |
| Background | One row per slide. Each row has a Title, a Color, a Choose Image and a Backdrop Filter popover. | Two rows: Item #1, Item #2 |
| Background Transition Duration | How long the fade from one background to the next takes, in seconds. | 0.7 |
How It Behaves
- The rows are matched to the slides by position: row 1 goes with slide 1, row 2 with slide 2, and so on.
- Exactly one row is active at a time, and it follows the slide that is in view.
- If you have fewer rows than slides, the slides past the last row have no background of their own.
- It still tracks the right slide when the slides have different widths through Slides Width.
- A slide hidden on the current device is dropped from the strip, and its background row is dropped with it.
Limitations
- A row can hold a colour and an image. Set only one of the two, or the image covers the colour.
- The colour sits behind your template, so any background you set on the template’s own sections hides it.
- Background Transition Duration stops at 2 seconds.
- There is no per-slide control over the fade — one duration applies to all of them.
- The widget is Pro only, so with the Pro plugin off the whole section, backgrounds included, renders nothing.
Troubleshooting
The colours never show
The sections inside your template almost certainly have their own background. Clear it, and the transition colour behind them becomes visible.
The last slides have no colour
Add more rows with + ADD ITEM until the number of rows matches the number of top-level sections in your template.
The colour snaps instead of fading
Raise Background Transition Duration. At 0 the change is instant.
