---
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-04-09
lang: en
author: "Aditya Sharma"
description: "Do you want to create a segmented background in Elementor? Adding a segmented background can add a touch of creativity to your website. With the Row Background widget from The..."
image: https://theplusaddons.com/wp-content/uploads/2025/01/How-to-Create-a-Segmented-Background-in-Elementor_-1024x536.jpg
word_count: 365
---

# How to Create a Segmented Background in Elementor?

## 

- Utilizes the Row Background widget from The Plus Addons for Elementor to create segmented backgrounds in Elementor.
- Offers three background types: Image, Solid Color, and Gradient Color for customization of segmented backgrounds.
- Enables advanced settings like Mouse Hover Parallax Effect and custom layout styles for enhanced visual effects.

Do you want to create a segmented background in Elementor? Adding a segmented background can add a touch of creativity to your website.

With the Row Background widget from The Plus Addons for Elementor, you can easily add a segmented background to a container or section in Elementor.

*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, make sure its installed & activated to enjoy all its powers.***

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/row-background/)

To do this, add the Row Background widget to the container you want to add the segmented background and follow the steps -

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

1. Select **Image Segmentation** from the **Select Option** dropdown, under the **Deep Laye** tab.

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

2. From the **Background** dropdown, you have to select the background type. Here you’ll find three options - 

- **Image** - To create a segmented image background.

- **Solid Color** - To create a segmented solid color background.

- **Gradient Color** - To create a segmented gradient color background.

You’ll see different settings for each option. 

Select the option as per your requirements, let’s select Image here.

3. From the **Upload Image** section, add your background image.

4. Then from the **Layout Style** dropdown, you have to select a segmentation layout style. You can select from different pre-defined styles or you can create a custom layout by selecting the **Custom** option.

With the Custom option, you can set the position, width, height, animation and duration of the segment.

You can click on the **+Add Item** button to add multiple segments.

From the **Number of Segmentations** section you set the number of segments will be visible.

By enabling the **Mouse Hover Parallax Effect** toggle, you can add a parallax effect on hover on the segments.

You can set opacity, top shadow, left shadow, animation duration, transition effect, transition delay and more of the segments.

Then from the **Box Shadow** section, you can adjust segmented boxes box shadow.

Now you’ll see segmented boxes appear as you mouse hover the section or container.

For creating a simple segmentation background you don’t need to add any background in the other layers.