1. Home
  2. Knowledge Base
  3. Block Tutorials
  4. Row Layout Block

The Row Layout Block greatly improves the column functionality within the new blocks editor. With the Row Layout Block, you’ll be able to easily create responsive layouts for your pages and posts

To get started using the row layout block, select it from the add block menu:

Select Row Layout

After you select the row layout block, set the format of your columns:

Select Row Layout

Once you’ve selected your desired layout, then start adding blocks to build your content:

Add Block To Row

Continue adding blocks until you’re happy with your layout:

Content Configured

*If using a two column layout, you can adjust the spacing of your columns by dragging the divider between them. This feature is only available with a two column row layout:

Two Column Width

Row Layout Settings

For each row layout block, you also have a sidebar full of layout and design options.

When the row layout block is selected, you should see options for adjusting the number of columns,  the layout of your columns, and the column gutter (spacing between columns). Below that you should see options for adding backgrounds and padding adjustments to your block:

Row Layout Configured

The padding and margin settings will allow you to adjust the blocks spacing in relation to the other blocks on your page:

Row Padding

Following your spacing settings, you can move onto setting a background and background overlay for your entire row layout block:

Background Settings

Next, set the default text and link colors for your row layout block:

Text Color Settings

Finally, set the height, width, and container in the structure settings :

Structure Settings

Mobile and Tablet Settings

The Row Layout Block also has options for how to display on tablet and mobile browsers.

Tablet settings allow you to adjust your row layout when viewed in a tablet:

Tablet Settings

For mobile, you can set both the row layout and the amount of padding you want between your rows:

Mobile Padding

Column Settings

The row layout block also allows for customization of each individual column. By selecting the column within your row layout, you can adjust the settings individual of all other columns.

To access your column settings, first select the column you wish to edit:

Select Column

Once the column is selected, you begin making edits to the settings:

Configure Column

Continue editing your columns until you’re happy with the layout. If you have trouble selecting blocks, don’t forget about the breadcrumb feature of the blocks editor. It can help immensely:

Breadcrumb Block Selection

Was this article helpful?

Related Articles