A segmented background cuts an image into pieces that move in 3D when visitors point at the section.
The Row Background widget from The Plus Addons for Elementor offers six ready segment layouts and a custom layout for an image or colour background.
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.
Steps
- Add the Row Background widget to the container and open Content > Deep Layer.
- Set Select Option to Image Segmentation.
- Set Background to Image and choose the picture in Upload Image (or pick Solid Color and a colour).
- Choose a Layout Style: Style 1 to Style 6, or Custom to place each segment yourself.
- With Custom, add segments in No of Segmentation On Position and set Number of Segmentations, Mouse Hover Parallax Effect, opacity, shadows and animation timing.
The recording below shows these steps in the editor, followed by a short demo of the result.
How It Behaves
- The segments are built about two seconds after the page loads.
- When the pointer moves over the container, the segments animate. In our test Style 1 made 9 segments and Style 2 made 4.
- The ready styles come with their own number of segments, timing and parallax; the Custom options only apply to Custom.
Limitations
- Background > Gradient Color does not work: the segments stay empty and only a plain gradient shows. Use Image or Solid Color.
Troubleshooting
I see a plain gradient and no segments
Gradient Color is not supported by the segments. Switch Background to Image.
Nothing moves when I hover
Wait a couple of seconds after the page has loaded, then move the pointer over the container again.
