The Kadence Row Layout Block is used to contain different sections on your website. Using the Row Layout block is a great way to create structured layouts for your WordPress site.

Affiliate Disclosure: This post may contain affiliate links, which means I receive a small commission at no cost to you when you make a purchase. Please note that I only get affiliate links for products that I use.

The row layout block acts as a container for other blocks on a page.
The row layout block acts as a container for other blocks. It keeps the other blocks structured.

The Kadence Block Plugin

I use the Kadence Block plugin and the Kadence theme when I design websites. The Kadence Block Plugin adds a lot of styling options to Gutenberg blocks. Please note that the Kadence Block plugin will work with other themes as well.

Add the Kadence Row Layout Block

The Kadence row layout block
The Kadence Row Layout Block

Adding the Row Layout Block:

In the WordPress editor, click on the ‘+’ button to add a new block.

Search for ‘Row Layout' in the block search bar and click on it to add it to your page.

Configuring the Layout:

Once you add the Row Layout block, you can choose the number of columns for your row. Kadence typically offers various layouts (like one, two, three, or more columns).

Adding the row layout block to your page or post.

Click on the layout that suits your needs.

Adjusting Column Sizes:

After selecting the layout, you can adjust the size of each column by dragging the edges of the columns left or right.

Adjust the column sizes of the row layout block

This allows you to create a custom look and feel for your layout.

Adding Content:

Inside each column, you can add different types of content blocks (like text, images, buttons, etc.).

Add content to the row layout block.
In this example, I added an image to the left-hand block and a headline to the right-hand block

Just click inside a column and use the ‘+’ button to add the content you want.

Styling Your Row:

Kadence allows you to style your row and columns with background images, colors, padding, and more.

Click on the Row Layout block to access these settings. You'll typically find options for background, spacing, border, and other design elements.

Styling the row layout block
When I click on the row layout block, I have options to style it. Here I have chosen a blue background for the block.
the style section of the row layout block

Responsive Settings:

Kadence Row Layouts are responsive, meaning they will adjust to look good on mobile devices.

Adding a mobile background to a block
When I click on the background mobile settings icon, I can make the background green on mobile. The desktop background will remain blue.

You can also find settings to adjust how your row behaves on different devices (like hiding certain columns on mobile).

Advanced Settings:

When you click on Advanced Settings, you can change the padding and margin of your row layout.

Adding padding and margin to a row layout block
In this example, my cursor is hovering over the row layout block. You can see a green bar with the word “Small”. That is the padding that is automatically added in the Advanced section on the right.
changing the padding of a row layout block
When I drag the green bar to make it larger, the change is reflected in the Advanced section.

For more advanced customization, you can use custom CSS classes and change the visibility settings.

Preview and Publish:

Always preview your page to see how the layout looks live.

Once satisfied, publish or update your page to make the changes live.

Download the pdf now!

Get your FREE Ultimate WordPress Cheat Sheet!

A 30 page guide to the WordPress dashboard

🚀 Definitions of common WordPress terms

💡 Tips on uploading images, creating a menu and more

🔧 List of common Gutenberg blocks and what they do

🔍 SEO and Security tips

Sharing is caring!

Similar Posts

Leave a Reply

Your email address will not be published. Required fields are marked *