A background made of several layers, for example a photo, moving particles and a colour overlay, gives a section depth without extra widgets on top of your content.
The Row Background widget from The Plus Addons for Elementor stacks up to three background layers (Deep, Middle and Top) behind the content of a container or section.
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.
Learn via Video Tutorial
Activate the Row Background Widget
- Go to The Plus Addons > Widgets in your WordPress dashboard.
- Find Row Background (it carries a PRO badge) and turn on its toggle.
With only the free plugin active, Row Background shows in the Elementor panel as a locked tile. Clicking it opens an upgrade message, and a page that was built with the widget shows no background until Pro is active again.
How the Widget Works
- Add the Row Background widget anywhere inside the container or section that should get the background.
- Choose a layer type in Content > Deep Layer, Middle Layer and/or Top Layer. You can use one layer or all three.
- Publish and view the page. The widget itself takes no space: its layers fill the whole container, behind the other widgets.
Deep Layer
The Deep Layer is the bottom layer. Pick a type from its Select Option dropdown.
| Option | What it creates |
|---|---|
| Solid Color | One colour, with an optional Border Radius. |
| Gradient Color | A linear or radial gradient. Guide |
| Animated Background Color | A background that fades through several colours. Guide |
| Creative Background Image | An image with optional auto-moving, mouse tilt, scroll parallax, Magic Scroll or Ken-Burns effects. Guide |
| Creative Background Video | A self-hosted, YouTube or Vimeo video. Guide |
| Creative Background Gallery | A slideshow of images. Guide |
| Image Segmentation | An image or colour split into segments that animate on hover. Guide |
| Gradient Animate Color | A moving multi-colour gradient. Guide |
| On Scroll Background Animation | A page background that changes colour or image as visitors scroll. Guide |
| Carousel Background | A background that changes with the slides of a carousel, tabs or accordion. Guide |
Middle Layer
The Middle Layer sits above the Deep Layer. Its Select Option dropdown has six entries.
| Option | What it creates |
|---|---|
| Canvas Effect | Animated particles (Style 1 to Style 8 or your own particles JSON). Guide |
| Modern Mouse Hover Parallax | Images placed on the background that shift as the mouse moves. |
| Auto Moving Layer | Images that scroll on their own in a chosen direction. Guide |
| Modern Image Effect | Images with Pulse, Floating, Tossing or Rotating animation and optional Magic Scroll. Guide |
| Multi Layer Parallax | Full-size image layers that move with Magic Scroll. |
| Animated SVG (Coming Soon) | Not available yet; selecting it adds nothing. |
Top Layer
The Top Layer covers the other two layers, so it works as an overlay. Use a colour with transparency, or lower the texture opacity, so the layers below stay visible.
| Option | Settings |
|---|---|
| Solid Color | Overlay Color |
| Gradient Color | Color 1, Color 2, their locations, Gradient Style, Gradient Angle or Position |
| Texture Image | Texture Image (repeated) and Opacity (0 to 1, default 0.8). Guide |
Extra
Turn on Overflow Hidden Section to clip anything that sticks out of the container, such as moving or parallax images. It only applies on the published page; the editor keeps showing the normal layout.
How It Behaves
- On the page, the layers are moved into the container that holds the widget and fill it completely. This also works in a classic section and in an inner container (the background then fills only that inner container).
- The layers are drawn in order: Deep Layer at the bottom, then Middle Layer, then Top Layer. Your widgets stay above all three.
- Settings you leave on Select option add nothing, so you can use any single layer on its own.
Limitations
- Row Background needs The Plus Addons for Elementor Pro. It is not part of the free plugin.
- Use one Row Background widget per container. With two in the same container, only the layers of the last one were kept in our test. Put all layers in one widget instead.
- Animated SVG (Coming Soon) can be selected but does nothing yet.
Troubleshooting
The background does not show on the page
Check that The Plus Addons for Elementor Pro is active and that Row Background is switched on under The Plus Addons > Widgets. Also check that the widget sits inside the container you want to style.
Only one of my backgrounds appears
You probably have two Row Background widgets in the same container. Remove one and set the layers in the remaining widget.
