The Row Layout Block significantly improves the column functionality within the new blocks editor. With the Row Layout Block, you can create responsive layouts for your pages and posts easily.
To get started using the Row Layout Block, you can select it from the add block menu.
After you select the Row Layout Block, you can set the format of your columns.
Once you’ve selected your desired layout, then you can start adding blocks to build your content.
Continue adding blocks until you’re happy with your layout.
If using a multi-column layout, you can adjust the spacing of your columns by dragging the divider between them.
Row Layout Block Settings
The Row Layout Block Settings allow you to customize your Row Layout Block. You can access the Block Settings by selecting your Row Layout Block and pressing the Settings Gear Icon next to the publish button.
Layout Settings
The Layout Settings allow you to adjust different layout options for your Row Layout Block.
You can select how many columns you want to use. You can also select which layout you would like your columns to be in. The Column Gutter option allows you to set a gutter between your columns. You can also set a custom max width or inherit the max width from the theme.
You can add a top and bottom divider to your row layout block. You can adjust the color, height, and width of the divider.
Style Settings
The Style Settings allow you to customize various styles of your Row Layout Block.
The Background Settings allow you to set a background for your Row Layout block. You can use a solid color, a gradient color, an image, a slider, or a video for the background.
The Background Overlay Settings allow you to add an overlay on top of your background. You can use a color, image, or gradient as an overlay. You can also adjust the overlay opacity and blend mode.
The Border Settings allow you to add and customize a border around the Row Layout Block. You can adjust the border color, width, and radius for desktop, tablet, and mobile devices.
The final Style Settings are the Text Color Settings. You can adjust the initial text color. You can also change the link and link hover text color.
Advanced Settings
The Advanced Settings allow you to adjust advanced settings such as spacing settings, structure settings, visibility settings, and more.
The first Advanced Settings you will notice are the padding and margin settings. You can adjust the padding and margin for desktop, tablet, and mobile devices.
The Structure Settings allow you to set the container HTML tag, the minimum container height, and the inner column height to 100%. You can also change the z-index for the Row Layout Block.
The Visibility Settings allow you to hide the Row Layout Block for specific devices or users. You can hide the Row Layout Block from desktop, tablet, and mobile users. You can also hide the Row Layout Block from logged-in and logged-out users.
The Block Defaults setting allows you to set the current block attributes as the default styles for this block.
The Custom CSS setting allows you to add CSS directly inside the Row Layout Block.
The Conditional Display setting allows you to display your Row Layout Block based on a condition.
In this example, the Row Layout Block will display if the Current Post has a Featured Image assigned to it.
The Advanced settings allow you to enable Row Content Only Editing, set an HTML anchor, and add custom CSS class(es) to your Row Layout Block.
The Row Content Only Editing setting will replace the block settings with a content selector. You can select your Row Layout Block and press on Modify to get back to your Block Settings.
You may also notice the Responsive Controls. These controls can be found by locating the desktop, tablet, and mobile icons next to a settings label. These settings allow you to set a different value for different devices. This helps maintain responsiveness on your website.
Anytime you see the Responsive Controls, you can adjust that setting for desktop, tablet, and mobile devices.
