Row & Shape Dividers

Row & Shape Dividers

Row is a structural element that has only got height options, width would be considered 100% always. And in HTML structures, row is an essential common layout to make the grid layouts.

We have provided row dividers options along with the row design tweaks so that you don’t need to place any other block in between sections for good UI.

Pro tip
You need a pro tip on a row, seriously !? Disgusting.

How to use the Row Block of The Plus Addons For Gutenberg

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

Configuration for Row

No configuration is needed. Just drag & put it there.

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.

1. Layout

Layout

Stretch Row

It’ll break the container width and adept the full screen width, only background not content.

Content Width

Do you also want content in full width or not?

Height

Set height from here, select from options, very easy to understand.

Vertical Position

Set height from here, select from options, very easy to understand.

Gutter Space

Is an additional space from both left and right sides to be left blank.

Overflow

Content overwriting or going outside the row will not be visible if hidden is selected.

2. Style

The Style tab is used for customizing the appearance of all the Row block components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Background

Background

Apply suitable background like color/ gradient to an element.

Border

Draw a border around the element and give width and color to it.

Border Radius

Set the radius curve of the element’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Shape Dividers

Top & Bottom Dividers

Row separates the sections from one another. Shape dividers allow you to choose the top / bottom of any section to end or start with. We have provided some designs, you can choose one of those for top & bottom and the section will start or end using that design accordingly.

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

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.