Introduction
When designing your site with the block editor, there are four major foundation blocks for layout. These are the group, cover, columns, and row. With each of these blocks you can place additional blocks nested within them to create your pages layout. While they all serve a similar purpose, each one has its own benefits and drawbacks. This article will help you choose the best way to use them in your design.
Related Resources
Group
The group block in WordPress is a block type that will allow you to place additional blocks within. It can be useful for creating layouts or for organizing your content. The group block can contain any other block type, including text, images, videos, and more. The entire group can then be styled, positioned, and deleted as a single entity.
Group Heading
Group Subheading
The ocean stretched out before me, a vast expanse of blue and green. The waves were gentle today, rolling in and out with a soothing rhythm. I sat on the sandy shore, watching as the seagulls flew overhead and the crabs scuttled across the sand. The salty air filled my lungs, and I closed my eyes, letting the sun warm my face. It was a perfect day at the beach.
What are the advantages?
Groups are the simplest way to create sections on your website. You can set a common color scheme for the background and text within it. This will save time as opposed to setting the styling of each child block.
What are the disadvantages?
The group displays your child blocks vertically on the screen. It does not allow you to place items side by side horizontally (without using CSS). While this may be perfectly acceptable for mobile layouts, you may find it a bit limiting for desktop design. You will need to use columns and or rows within the group for greater control.
Cover
The cover block is similar to the group with a few additional features. In addition to being able to nest child blocks within it, it also allows positioning of these blocks vertically and horizontally. The minimum height can be set in order to best fit your design.
The cover block also allows you to assign a background image and set its focal point.
World Webscapes
Start Your WordPress Journey
What are the advantages?
The cover block is most commonly used to create a hero section. However, it can also be used anywhere you need to place items on top of a background image.
What are the disadvantages?
The shortcomings of the cover are very similar to the group. In which the child blocks are displayed vertically. This can be overcome by using columns or rows within the cover if needed for your design.
Columns
The columns block in WordPress allows you to create a multi-column layout within a page or post. It allows you to divide your content into a specific number of columns horizontally. They may also be set to be stacked vertically on mobile.
The city was alive with energy as people bustled about their daily routines. The streets were crowded with cars, buses, and pedestrians, all rushing to get where they needed to go.
Amidst the chaos, a young woman stood on the corner, playing her violin with a skill and passion that drew a small crowd of listeners.
As she played, a sense of calm seemed to wash over the bustling city, and for a moment, everything else faded away.
What are the advantages?
The columns block can be used with a variety of different content types, including text, images, buttons, videos, and more. You can customize the width of each column to create a visually appealing layout.
What are the disadvantages?
Adding columns to your content can make it more complex and difficult to read, even more so if you use too many columns or columns that are too narrow.
The column block does not have a block spacing option in the settings panel. It will use the default spacing of the theme. You may find that this creates more or less spacing than you would like in your design. You will need to add additional blocks or paddings/margin for more granular control of your design.
If you decide to use columns, be sure to test them on different devices and keep an eye on how they impact the overall readability and usability of your website.
Additional learning: Sidebar page template
Columns can also be used in the theme editor for the single page and post layout to create a “sidebar” style design for your website. You are seeing an example of this by reading this post. The post content block is placed in a 70% width column, and the sidebar blocks placed in a 30% width column.
Post Title
Post Content Block
Sidebar Blocks
Learn more about creating templates with the Site Editor.
Row
The row block harnesses FlexBox CSS and is a useful tool for creating visually complex layouts for your content in WordPress. The block can equally distribute the child blocks horizontally(row) or vertically(stack) on the main axis.
Follow Us
What are the advantages?
Child blocks will scale to best fit within the block. This is best for aligning and justifying two or more items together. You may also allow your blocks to wrap onto multiple lines if they exceed the width of the block.
The use of rows or stacks creates fewer dividers than using columns and is becoming the best practice for optimizing your designs.
The row is best used for small design layouts within a larger column or group. A good use case would be to place an icon and text side by side inline.
What are the disadvantages?
Adding rows can add an extra layer of complexity to the design and layout process. The row block, at this time, only uses some of the Flexbox properties in the settings panel. You will still need to use hand coded Flex CSS to create complex layouts.
WordPress does not yet allow you to set the row properties separately for desktop or mobile. Depending on how the rows are implemented, they may not display correctly on different screen sizes and devices.