When the background around a carousel changes with each slide, every slide gets its own look.
The Row Background widget from The Plus Addons for Elementor links to a carousel by a shared ID and shows the matching background whenever the slide changes.
To check the complete feature overview documentation of The Plus Addons for Elementor Row Background 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 — the Row Background widget is only available in The Plus Addons for Elementor Pro.
- Widget to enable: Row Background, switched on under The Plus Addons > Widgets.
- Where to put it: drop the widget inside the container (or classic section) that should get the background. It draws nothing of its own; the background fills that container.
- A connected widget from The Plus Addons for Elementor (see the list below).
Widgets You Can Connect
- With a Unique Carousel ID in their carousel options: Carousel Anything, Gallery Listing, Client Logos, Team Members, Testimonials, Product Listing, Dynamic Listing, Flip Box and Info Box.
- With a Carousel Connection ID: Tabs Tours and Accordion (the background follows the open tab or item).
- We tested Gallery Listing, Carousel Anything, Tabs Tours and Accordion. The other widgets use the same connection in the code.
This example uses a Gallery Listing carousel. Carousel Anything works the same way with its Unique Carousel ID.
Steps
- Add a Gallery Listing widget. In Content > Content, keep Select Option on Normal and add your pictures with Add Images.
- In Content > Layout, choose the Carousel layout picture.
- Open Style > Carousel Options and enter an ID in Unique Carousel ID, for example season.
- Add the Row Background widget to the container that should change. In Content > Deep Layer, set Select Option to Carousel Background and type the same ID in Carousel Connection ID.
- In Carousel Background Slides, add one item per slide and set each item’s background (a colour, an image or a gradient). Choose Change Bg Effect and Change Transition Duration.
The recording below shows these steps in the editor, followed by a short demo of the result.
Settings
| Setting | What it does | Default |
|---|---|---|
| Carousel Connection ID | The ID of the carousel, tabs or accordion to follow. | – |
| Change Bg Effect | FadeIn Effect fades between backgrounds; Scale Effect also scales the new background from 108% down to its normal size. | FadeIn Effect |
| Change Transition Duration | Length of the change, in seconds (0.1 to 2). | 0.5 |
| Carousel Background Slides | One background per slide, in slide order. | – |
How It Behaves
- Each time the carousel moves to another slide, the background item with the same position fades in. In our test, slides 2, 3, 4 and 1 showed backgrounds 2, 3, 4 and 1.
- With Tabs Tours or Accordion, clicking tab 3 showed background 3.
- If there are fewer backgrounds than slides, the backgrounds repeat: two backgrounds on four slides showed 2, 1, 2, 1.
- The Row Background can sit in the same container as the carousel or in another container on the page; the link is made by the ID only.
Limitations
- Blog Listing, Switcher, Dynamic Categories and Dynamic Smart Showcase cannot drive a Carousel Background.
- Use a different ID for every carousel on the page. The ID must match exactly in both widgets.
Troubleshooting
The background does not change with the slides
Check that the carousel’s Unique Carousel ID and the Carousel Connection ID are exactly the same, and that the carousel widget is on the connected-widgets list above.
