The default Gutenberg columns aren’t very impressive at the moment, but thankfully, ours are! With the Row Layout Block, you’ll be able to easily create responsive layouts for your pages and posts.

 

  1. To get started using the row layout block, select it from the add block menu:
    Select Row Layout Block Kadence
  2. After you select the row layout block, set how you’d like the columns to appear:
    Select Row Layout
  3. Once you’ve selected your desired layout, then start adding blocks to build your content:
    Add Blocks To Row Kadence Blocks
  4. Continue adding blocks until you’re happy with your layout:
    Editing Row Layout Kadence Blocks
    *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 Row layout Width

 

Row Layout Settings

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

  1. 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 Settings
  2. The padding and margin settings will allow you to adjust the blocks spacing in relation to the other blocks on your page:
    Row Padding Settings
  3. Following your spacing settings, you can move onto setting a background and background overlay for your entire row layout block:
    Row Background Settings
  4. Next, set the default text and link colors for your row layout block:
    Row Text Color Settings
  5. Finally, you can set the main structure of the row:

Mobile and Tablet Settings

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

  1. Tablet settings allow you to adjust your row layout when viewed in a tablet:
    Tablet Row Settings
  2. For mobile, you can set both the row layout and the amount of padding you want between your rows:
    Row Layout Mobile Settings