Row Background

< All Topics

You may need to add some attractive background other than the basic options you get. You can create premium, layer-based, and uniquely advanced Section Backgrounds using Row Background widget in Elementor. 

Pro tip
Why not layer-based backgrounds to your website using this widget. These sections not only look good but also enhances the user experience. Make sure to make use of all the options in all three layers.

How to use the Row Background Widget of The Plus Addons For Elementor

The Row Background widget comes with multiple designs. Let’s understand how to use this widget in the tutorial below. 

Table Of Contents

General Steps

Search for the Row Background widget from the Elementor screen on the left and then drag and drop it into the content building area.

After dropping the element, you will see three tabs i.e. Content, Style, and Advanced related to this widget. First, click on the Content tab.

1. Content

Deep Layer

Select Option

You can set what type of background you want for the Deep Layer. Here are the options you can select for the Deep Layer. 

Solid Color 

Select this option to add a solid color to the Deep Layer. 

Gradient Color 

Select this option to add a gradient color to the Deep Layer.

Animate Background Color 

Select this option to add an animated background color to the Deep Layer.

Creative Background Image 

Select this option to add a creative background image to the Deep Layer.

Creative Background Video (Video Background)

Select this option to add a creative background video to the Deep Layer. You can also check out the detailed video guide for the Video background here.

Select Creative Background for the deep layer in the Row Background widget.

Creative Background Gallery (Gallery Background) 

Select this option to add a creative background gallery to the Deep Layer. You can also check out the detailed video guide for the background gallery here.

Image Segmentation (Segment Background)

Select this option to add a Segment background video to the Deep Layer. You can also check out the detailed video guide for the Segment background here

Gradient Animate Color 

Select this option to add an animated gradient color background to the Deep Layer.

On Scroll Background Animation (Special Background) 

Select this option to add an on scroll background animation to the deep layer. ou can also check out the detailed video guide for the Special background here.

Select On scroll Background for the deep layer in the Row Background widget.

Carousel Background 

Select this option to add a carousel background to the deep layer.

Middle Layer

Select Option 

You can set what type of background you want for the Middle Layer. Here are the options you can select for the Middle Layer:

Canvas Effect (Canvas Background)

Select this option to add a canvas effect to the middle layer. You can also check out the detailed video guide for the Canvas background here.

Select Canvas Effect for the middle layer in the Row Background widget.

Modern Mouse over Parallax (Parallax Background)

Select this option to add a Parallax background to the middle layer. You can also check out the detailed video guide for the Parallax background here.

Select Modern Mouse over Parallax for the middle layer in the Row Background widget.

Auto Moving Layer 

Select this option to add an auto moving layer background to the middle layer.

Modern Image Effect 

Select this option to add a modern image effect background to the middle layer.

Multi-Layer Parallax 

Select this option to add a multi-layer parallax background to the middle layer


Select Option for the top layer in the Row Background widget.

Top Layer  

You can set what type of background you want for the Top Layer. Here are the options you can select for the Top Layer: 

Solid Color 

Select this option to add a solid color background to the top layer.

Gradient Color 

Select this option to add a gradient color background to the top layer.

Texture Image 

Select this option to add a texture image background to the top layer.

Extra

Overflow Hidden Section 

Slide right to display all effects that are hidden. But these changes will be visible on the frontend only. The backend will show a normal view.

Enable Overflow Hidden Section in the Background Row widget.


3. Advanced

Advanced Tab Options are common across all the widgets. So, we have written a detailed tutorial explaining how to use these options

View The Advanced Tab Tutorial

Do you want to rate this article?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Need help?