How to Create a Segmented Background in Elementor?

Updated onApril 9, 2026By

Key Takeaways

  • Row Background widget from The Plus Addons for Elementor allows users to add segmented backgrounds to containers or sections.
  • Users can select from three background types: Image, Solid Color, or Gradient Color for segmentation.
  • The Custom option in segmentation layout style enables users to set position, width, height, animation, and duration of segments.
Table Of Content

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.

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

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

YouTube video

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

Row background image segmentation how to create a segmented background in elementor? From the plus addons for elementor

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.

About the Author

Photo of Aditya Sharma CMO of The Plus Addons for Elementor
CMO · The Plus Addons for Elementor · 10 years experience

He has spent years in the WordPress ecosystem building, breaking, and optimizing sites until they actually perform. He works at the intersection of speed, growth, and usability, helping creators ship websites that load fast and convert. An active WordPress community contributor sharing through tools, tutorials, and direct collaboration. Tested practice, not theory.

WordPressElementorn8nAIClaudeAutomationServer
LinkedIn X GitHub YouTube Website
Get Instant Answers to all your questions about The Plus Addons for Elementor, trained on 1000+ Docs and Videos

Related Frequently Asked Questions

What should I do if the Row Background widget isn't showing up in Elementor?

Ensure that The Plus Addons for Elementor is installed and activated, as the Row Background widget is part of this plugin. If it's not showing, double-check your plugin settings and ensure that you're using a compatible version of Elementor. Without this plugin activated, you won't have access to the segmented background features.

Can I create a segmented background using a solid color?

Yes, you can create a segmented background using a solid color with the Row Background widget from The Plus Addons for Elementor. When selecting the background type, choose the Solid Color option. This allows for a visually appealing segmented design without the need for images, which can be useful for maintaining fast load times.

What happens if I don't add a background to other layers?

For creating a simple segmentation background, you don't need to add any background in the other layers. This means that the segmented boxes will still appear as you mouse hover over the section or container, allowing for a cleaner design that focuses on the segmented effect without additional distractions.

Are there specific settings I should consider for the segmentation layout?

When selecting a segmentation layout style, consider using the Custom option if you want more control over the appearance. This allows you to set the position, width, height, animation, and duration of each segment. Customizing these settings can enhance the visual impact of your segmented background, making it more engaging for users.

Does the Row Background widget support adding multiple segments?

Yes, the Row Background widget allows you to add multiple segments by clicking the +Add Item button. This feature enables you to create a more complex and visually interesting background. Adjust the Number of Segmentations to control how many segments are visible, which can help create a dynamic look on your site.

What is the Mouse Hover Parallax Effect, and how does it work?

The Mouse Hover Parallax Effect can be enabled to add a parallax effect on hover over the segments. This effect creates a sense of depth and movement, making the website more interactive. It can enhance user engagement, so itu2019s worth experimenting with this feature to see how it impacts the overall user experience.

Last reviewed: April 9, 2026

Related Docs