---
title: "How to Create a Segmented Background in Elementor?"
url: https://theplusaddons.com/docs/create-a-segmented-background-in-elementor/
date: 2025-01-10
modified: 2026-09-14
lang: en
author: "Aditya Sharma"
description: "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..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Create-a-Segmented-Background-in-Elementor_-1024x536.jpg
word_count: 379
---

# How to Create a Segmented Background in Elementor?

## 

- Row Background widget from The Plus Addons for Elementor offers six ready segment layouts and a Custom layout for image or colour backgrounds.
- The Plus Addons for Elementor Pro requires the Row Background widget to be installed and activated, and the widget is only available in Pro.
- Gradient Color does not work with the segments, so Background must be set to Image or Solid Color; the segments build about two seconds after page load and animate on pointer hover.

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](https://theplusaddons.com/docs/create-a-multi-layer-elementor-background/).*

***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/section-background/?utm_source=tpae&utm_medium=docs&utm_campaign=text)

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

https://www.youtube.com/watch?v=axXfQxPIMM8

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

![The Background dropdown and Upload Image of an Image Segmentation deep layer](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-segment-background.webp)

- Choose a **Layout Style**: **Style 1** to **Style 6**, or **Custom** to place each segment yourself.

![The Layout Style dropdown of the Image Segmentation background](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-segment-layout.webp)

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

![Setting up an Image Segmentation background](https://theplusaddons.com/wp-content/uploads/2025/01/row-background-image-segmentation.gif)

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

![Published container with an image split into overlapping segments after hovering](https://theplusaddons.com/wp-content/uploads/2026/09/rowbg-result-segment-style1.webp)

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

## Related Docs

- [Row Background widget: settings overview](https://theplusaddons.com/docs/create-a-multi-layer-elementor-background/)- [Add a parallax background](https://theplusaddons.com/docs/add-a-parallax-background-in-elementor/)- [Create a background slideshow](https://theplusaddons.com/docs/create-an-elementor-background-slideshow/)

## Frequently Asked Questions

**Q: What do I need before creating a segmented background in Elementor?**
A: The Row Background widget has to be available in The Plus Addons for Elementor Pro, and it must be installed and activated first. The widget is enabled under The Plus Addons > Widgets, then placed inside the container or classic section that should receive the background. That placement matters because the widget itself draws nothing on its own, it only fills the container you drop it into.

**Q: Can I use a segmented background with an image or a solid color?**
A: The segmented background works with an image or a solid color background. The Plus Addons for Elementor, The Plus Addons, Plus Addons for Elementor, POSIMYTH offers six ready segment layouts plus a custom layout for those two background types. A useful detail is that Background > Gradient Color is not supported, so if you want visible segments, avoid gradients and stick to Image or Solid Color.

**Q: How do I make the segments move in 3D on hover?**
A: The 3D motion comes from the Row Background widget’s Deep Layer settings. In the tutorial flow, the segments are built after the page loads, then they animate when the pointer moves over the container. The ready-made styles already include their own timing and parallax behavior, while Custom lets you control Mouse Hover Parallax Effect, opacity, shadows, and animation timing.

**Q: Why do I only see a plain gradient instead of segmented pieces?**
A: That usually happens when Background > Gradient Color is selected. The page says gradient backgrounds are not supported by the segments, so they stay empty and only a plain gradient shows. Switching the background to Image or Solid Color is the fix because those are the two supported background types for segmentation.

**Q: Why does nothing happen when I hover over the section?**
A: The effect is not instant on page load. The segments are built about two seconds after the page loads, and only then do they animate when you move the pointer over the container. If nothing moves right away, waiting a couple of seconds before hovering again is important because the build step has to finish first.

**Q: Should I use a ready-made segment style or a custom layout?**
A: Ready-made styles are better when you want speed and predictable behavior because Style 1 to Style 6 already come with their own number of segments, timing, and parallax settings. Custom makes sense when you want control over where each segment sits and how it behaves through No of Segmentation On Position, Number of Segmentations, Mouse Hover Parallax Effect, opacity, shadows, and animation timing. The Plus Addons for Elementor keeps both paths inside the same Row Background widget.