Page Layout Blocks
The Block Editor (also known as Gutenberg) provides some handy blocks for use in page layout.
Groups, Rows and Columns blocks, in combination with images and colour, can be used to create attractive and interesting website page layouts.
Key blocks for creating page layouts with the Block Editor include:-
- Columns
- Group
- Row
- Stack
They can be found in the Design section of blocks, or search for the desired block.
In terms of layout, the main blocks are the Columns and Group blocks. Row and Stack are variations of the Group block.
Columns
ColumnsOn selecting the Columns block, you may choose from a variety of column layouts. Layouts such as the example below are very easy to create and number and size of columns can be easily changed in the column settings.
This content is in 3 equal columns with content vertically centred.
On mobile devices, the columns rearrange to stack one on top of the other. This is optional and can be changed in the settings, but is usually desirable.
See more information on using the Columns block.
Group Block
Group BlockThis content is in a Group block, containing a header, an image and some paragraphs.
This group block is set to Full width, with a coloured background and some padding. The inner content stays at the content width by default, and this can be overridden in the settings.
Image Blocks for Page Layout
Two other blocks, which are very useful in creating attractive page layouts, are the Cover Image block and the Media & Text block.
Cover Image Block
Cover Image Block
Combining a Cover Image block with Group or Columns can be very useful as part of an attractive and interesting page layout.
See more information on the Cover Image block.
Media and Text Block
Media and Text Block
The Media & Text block is another valuable and simple tool for use in creating a page layout with the Block Editor
Block Editor Page Layout Blocks Summary
The Columns and Group blocks, along with Cover Image and Media & Text, are the blocks which are most useful in building page layouts with the block editor. Columns and Groups can be nested within each other, and that, along with Wide-aligned and Full width options, allows for a great variety of flexible and attractive page layouts.
There are also the layout helper blocks – more, separator, spacer, page break – which are helpful in enhancing layouts.
Remember to always test your page layouts on smaller screens and mobile devices, as well as larger browser widths. You may need to modify layouts, add padding, ensure columns stack, or make other small adjustments to ensure the layout works for all screen sizes.