How Do I Use the Kadence Row Layout Block?

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 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

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).

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.

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.).

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.

Responsive Settings:

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

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.

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.

Sharing is caring!