Row Background

Row Background

Block Used
Row Background
Knowledge Required
Novice

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 the Row Background block in Gutenberg. 

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 Block of The Plus Addons For Gutenberg

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

Table Of Contents

Setting Up

Gutenberg gives multiple ways to add Row into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Row after “/” sign, eg.“/Row”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

Row Background

1. Layout

We have created a separate document about this, which you can see from the link below.

View The Row Layout Tab Tutorial

2. Style

We have created a separate document about this, which you can see from the link below.

View The Row Style Tab Tutorial

3. Advanced

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

View The Advanced Tab Tutorial

Deep Layer

Row Background (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.

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.

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.

Middle Layer

Row Background (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.

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.

Modern Image Effect 

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

Auto Moving Layer 

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

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: 

Color 

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

Texture Image 

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

Was this article helpful?
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?
Please submit the reason for your vote so that we can improve the article.