Website Page Layout with the Block Editor

Block editor - Groups, Rows, Columns, colour and images can be combined to achieve some very attractive page layouts.

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.

block editor layout blocks - columns, group, row, stack


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

block editor page layout with columns

This content is in 3 equal columns with content vertically centred.

block editor page layout with columns

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.

block editor page layout is changed on mobile

See more information on using the Columns block.

Group Block

block editor page layout with group

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

See more information on using the Group block.

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

Use the cover image to help create page layouts with the block editor

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

The Media & Text block is another valuable tool in creating a page layout with the Block Editor

The Media & Text block is another valuable and simple tool for use in creating a page layout with the Block Editor

See more information on the Media & Text block.

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.