Columns
Intermediate Training Module 2: Common Content Blocks
The Columns block allows you to display content in multiple columns rather than a single vertical layout. This can help break up large sections of content, improve readability, and create more visually engaging pages.
Columns are commonly used for:
- Comparing information
- Displaying side-by-side content
- Highlighting services or features
- Creating call-to-action sections
- Organizing long pages into more manageable sections
When used thoughtfully, columns can help visitors scan content more easily and improve the overall layout of a page.
When to Use Columns
Use columns when content benefits from being displayed side by side. Two-column layouts often work well for:
- Text and supporting content
- Contact information
- Program overviews
- Feature summaries
Adding a Columns Block
To add a Columns block:
- Click the + button and search for Columns.
- Select the Columns block.
- Choose the desired column layout.
- Begin adding content to each column.
Each column can contain its own collection of blocks.
Adding Content to Columns
Columns can contain most standard blocks, including:
- Paragraphs
- Headings
- Lists
- Images
- Buttons
- Quotes
This flexibility allows you to create more sophisticated page layouts while still using familiar blocks.
Working with Parent and Child Blocks
The Columns block is a container block that holds one or more individual Column blocks.
Sometimes you may want to edit or remove the entire Columns section rather than individual pieces of content.
To select the full Columns block:
- Open the block options menu.
- Select Select Parent (Columns).
This allows you to modify or remove the complete section at once.
Tip: If you’re having trouble selecting the full Columns block, use List View to locate and select the parent block.
Best Practices
Keep Content Balanced
Try to keep the amount of content in each column relatively consistent. Large differences in content length can create uneven layouts.
Avoid Overcrowding
Columns should help simplify content, not make it harder to read. If a section feels cramped, consider using a single-column layout instead.
Consider Mobile Devices
Columns automatically stack on smaller screens. Preview your page to ensure the content still reads in a logical order when displayed on mobile devices.
Use Headings Within Columns
Headings help visitors understand the purpose of each column and improve the accessibility of the layout.
Keep Important Content Together
Remember that columns will stack on mobile devices, so related content should remain meaningful when displayed vertically.
Common Uses
Columns are frequently used for:
- Comparing programs or services
- Feature sections
- Contact information
- Calls to action
- Two-column text layouts
- Content summaries
Not every page needs columns, but they can be a useful tool for creating more engaging layouts when used appropriately.
-
In this video, we are going to introduce you into using column blocks for your website’s content.
Column blocks provide a vertical break in a line of text or paragraph within a page, this makes them easier to read as the user does not need to scan the whole page width to read one line of text, this also makes the text more visually appealing as a result.
And as you can see in the page currently shown, you can see this in action, notice if you read the paragraph above, you must scan the whole page width to move to the next line of text.
But the one below with, the column blocks added, you only need to scan half the page’s width.
Now that we have explained the purpose of a column block and how it can improve your website’s content, we will now show you how to add them to your pages.
First, you want to go into editing mode of the page you want to add a column block into.
Then navigate to the block menu and add the column block to your page.
Once its in place, you can now enter a paragraph, heading, quote, and list blocks within each column.
If you want to select the whole column block, click the menu options from the block editor and then Select parent block (Columns).
This makes it easier to drag it into another location within your page, or delete the entire columns block in one go.
And by finishing that step, we have now successfully added a Columns block to a page.
Try it Out
Practice working with the Columns block.
- Add a Columns block to a page.
- Create a two-column layout.
- Add a heading and paragraph to each column.
- Add a button to one column.
- Experiment with selecting the parent Columns block.
- Preview the page and review the layout on desktop and mobile devices.