Kadence Row Layout Block Tutorial: Clean Sections, Spacing Fixes, and Mobile Tips

Last updated: February 2026

Ever stare at a page and think, “Why does this look slightly off?” The text feels too wide, the spacing feels random, and on mobile it turns into a pile.

The Kadence Row Layout Block fixes that. It acts like a container for a section, so your content stays structured. In this tutorial, you’ll learn how to:

• Add the Row Layout block
• Pick the right preset (1, 2, or 3 columns)
• Adjust spacing (padding and gaps) so it looks clean
• Check mobile so it stays readable

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.

Before you start (quick setup check)

I use the Kadence Blocks plugin and the Kadence theme when I design websites. The Kadence Blocks plugin adds a lot of styling options to Gutenberg blocks.

Please note that the Kadence Blocks plugin will work with other themes too. You do not have to switch themes to use this block.

Quick check:

• Make sure Kadence Blocks is installed and active
• Update WordPress, the theme, and plugins before you start (Dashboard, Updates)

How to 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. Click Kadence Row Layout to add it to your page.

Choose a layout preset (1, 2, or 3 columns)

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

A simple way to pick:

• 1 column: simple sections, callouts, text-first areas
• 2 columns: text plus image, “Start Here” sections, opt-ins
• 3 columns: features, categories, small cards

Click the layout that fits what you’re building. You can change it later, but picking close now saves time.

Adjust 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 helps you create a custom look for your layout. For example, you might want a wider text column and a smaller image column.

Add content inside each column

Inside each column, add different types of blocks (text, images, buttons, lists, and more).

Just click inside a column and use the plus (+) button to add the content you want.

Style your row (background, padding, border)

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

Click on the Row Layout block to access these settings. You’ll usually see options for:

• Background (color or image)
• Spacing (padding and margins)
• Border and border radius (optional)

Simple styling tip: If you add a background color, also add enough padding so it looks like a real section, not a highlight accident.

Responsive settings (mobile and tablet)

Kadence Row Layouts are responsive, meaning they adjust for smaller screens.

You can also find settings to control how your row behaves on different devices. For example, you may be able to:

• Change spacing on mobile
• Hide certain columns on mobile (use this carefully)

Always preview mobile before you publish.

Advanced settings (padding and margin)

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

In the editor, Kadence may show a small indicator (like “Small”) that represents the padding that is automatically added.

When you adjust the padding, the change is reflected in the Advanced section on the right.

For more customization, you can use:

• Visibility settings
• Custom CSS classes

Quick troubleshooting (common Kadence Row Layout problems)

Row Layout block is missing (what to check)

If you do not see Row Layout in the block list:

• Confirm Kadence Blocks is installed and active (Plugins screen)
• In the block inserter, search Kadence (not only “Row”)
• Click Browse all blocks (search can be picky)
• Confirm you are using the block editor, not the Classic Editor
• Check your user role (some roles cannot add blocks)
• Temporarily disable other block plugins (conflicts happen)
• Clear cache, hard refresh, or try an incognito window

My row is not full width

This is often not the Row Layout block. It is usually the page layout.

Check:

• Your page template or page layout (boxed vs full width)
• Whether the row is inside another container block with a max width

Common fix:

• Set the page layout/template to full width
• Then keep the row’s content contained so your text stays readable

There is too much space and I can’t find where it’s coming from

Extra space usually comes from one of these areas. Check them in this order:

1. Row padding (inside the section)
2. Column gap (space between columns)
3. Spacing on inner blocks (headings and paragraphs often add margin)
4. Spacer blocks (if you used any)

Tip: Reset one setting at a time so you can see what actually changed.

Mobile looks wrong (stacking, padding, image size)

If desktop looks fine but mobile looks off:

• Reduce mobile padding first (it often feels huge on phones)
• Check the stacking order (left column usually becomes the top)
• Reduce column gap on mobile if it feels too wide
• Avoid extra tall images that take over the screen

If you can only fix one thing, fix mobile padding first.

Kadence Row Layout FAQ

Preview and publish

Always preview your page before you publish.

Check:

• Desktop
• Tablet
• Mobile

Once you like how it looks, click Publish or Update.