WordPress Block Editor – Columns Block
This tutorial is part of our series WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users.
- To learn more about using the WordPress block editor interface, go here: The WordPress Block Editor – Content Area
- To learn more about using blocks, see this tutorial: How To Use WordPress Block Editor Blocks
***
Columns Block – Description
Use the Columns block to add text, media, and other types of content into columns and create grid layouts in your content.
![Content added using the Columns block.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-015.jpg)
The Columns block:
- Supports up to 6 columns.
- Lets you add a multi-column layout to your posts or pages.
- You can include other types of blocks within each column, making the Columns block quite versatile.
How To Use The Columns Block
In this section, we’ll cover:
- How to add a Columns block to your content.
- How to edit and configure your Columns block and block settings.
- How to remove the Columns block from your content.
For more details on using blocks (e.g. how to move blocks around your content), see this tutorial: How To Use Blocks.
Adding A Columns Block
To add a Columns Block:
- Either:
- Click on the ‘Add Block’ tool in the Editing Toolbar section and select the Columns block (in Most Used or Design section),
- Add the Columns block in the Content Area.
- Add a predesigned column layout from the Block Patterns Library.
- Select and insert other types of blocks into your column structure (e.g. Paragraph blocks, Heading blocks, Image blocks, Cover blocks, etc.)
- Use the tools in the Columns Block Editor or Block Settings section to format your Columns block.
Let’s go through the above steps:
How To Add A Columns Block From The Block Library
First, create a new post or page or open an existing post or page and either:
Click on the ‘Add Block’ tool and select a Columns block…
![Add Block tool - Columns block.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-003.png)
Or, select a Columns block using the Inserter tool in the Content Area.
![Content Area Inserter Tool - Columns block.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-004.png)
This will insert a Columns block into your content.
You are given a choice of column styles to start with. Select a variation or click the ‘Skip’ link to insert a default style and adjust your columns later.
![Columns block - Select a variation to start with.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-005.png)
Your column containers will be inserted into your content.
![Columns block - adding columns.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-006.gif)
You can add multiple Column blocks to create unique grid layouts using different Column variations.
![Columns inserted into text using the Columns block.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-001.png)
How To Add A Columns Block From The Block Patterns Library
To add a predesigned Columns block pattern to your post or page:
- Click the Add Block tool.
- Select the Patterns tab.
- Select Columns from the dropdown menu.
- Select a Column style.
This will add the selected Columns block to your content.
![Block Patterns Directory - Adding A Columns Block.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-007.gif)
After adding a Columns block to your content:
- Click inside the Columns block to select a column.
- Insert whichever type of block you would like to add to your column structure.
- Edit the content of those blocks inside your columns.
Here are some examples of what you can create using the Columns block:
Services Grid
![Services grid layout created using the Columns block.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-008.png)
The above grid was created by adding a 3-column block to the content, then inserting and editing an Image block, Heading block, and Paragraph block into each column.
![Services grid layout](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-009.gif)
Portfolio
Here is a 2-column portfolio created using a Columns block with an embedded Cover block.
![Columns block - 2-column portfolio](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-010.jpg)
As you can see, the Columns block provides a versatile structure for creating a wide range of text and media-based layouts in your content.
![Adding content to a Columns block.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-011.gif)
How To Edit A Columns Block
As you improve your block editing skills, you will find adding and editing content inside columns will become easier and faster.
There are three different levels to editing a Columns block:
1 – Edit the Columns Block
You can edit the Columns block at the top or parent level.
To edit a Columns block:
- Click inside the Columns block to select it, then.
- Use the Block Editor tools to change your column options.
- Use the Block Settings to change your column settings.
![Editing the Columns Block](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-012.png)
The Columns block editor lets you perform the following operations:
- Change block type or style (See ‘Code Block – Additional Info’ section below.)
- Drag block
- Move block up and down
- Change vertical alignment – Vertically align your block to the top, middle, or bottom.
- More Options – See How To Use Blocks to learn how to use this section.
![Columns Block Editor](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-016.jpg)
To select the Columns Block editor, click on an area of white space between columns, or click on a column and hover over the block icon to bring up the parent level block.
![Select Columns Block Editor.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-018.gif)
One way to tell which level of the editor you are working on is to look at the block icon.
![Columns block icon and Columns icon.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-019.jpg)
Useful Columns block settings at the top level include changing the text and background colors of the block and adjusting its number of columns (up to a maximum of 6 columns).
![Columns block settings.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-017.gif)
2 – Edit individual columns within the Columns block
You can also edit individual columns of the Columns block.
![Columns block - Edit column.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-013.png)
The Columns editor lets you do the following:
- Column icon – hovering over this icon brings up the Columns Block icon, which lets you select the Columns Block editor.
- Drag block
- Move block left and right – use these buttons to reorder your columns with the block.
- Change vertical alignment – Vertically align your block to the top, middle, or bottom.
- More Options – See How To Use Blocks to learn how to use this section.
![Reorder columns inside a Columns block.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-020.gif)
You can also adjust the column width in the settings section.
![Columns block settings - Adjust column width.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-021.gif)
3 – Edit blocks inside columns
The Columns block essentially provides a structure that allows you to insert and work with other blocks.
So, if you insert a Paragraph block into a column, then to edit the content in that column, simply edit the Paragraph block inside the Columns block.
![Editing a Paragraph block inside a Columns block.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-014.png)
To learn how to edit different types of blocks, see this tutorial: How To Use Blocks
Here are some useful tips when editing a Columns block:
1 – Duplicate Columns Blocks
If adding too many columns makes the content on your post or page too narrow, consider duplicating the Columns block.
To duplicate the Columns block:
- Click inside the Columns block.
- Select ‘More Options’ > ‘Duplicate’ (or use Block Editor Keyboard Shortcuts).
![Columns Block: More Options - Duplicate](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-022.gif)
After duplicating the block, just edit the content inside each of the columns.
![2 Columns blocks.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-023.png)
2 – Use The Outline Tool
You can use the Outline tool in the Editing toolbar to easily view, select, reorganize, and reorder elements inside the Columns block.
![Outline Tool](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-025.png)
Click on elements in the Outline Tool to access editors for the Columns block, columns, and elements inside your columns.
![Outline Tool - Editing column elements.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-024.gif)
3 – Transform Multiple Blocks Into Columns
You can select multiple blocks in a row and change these into columns.
![Select multiple blocks.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-026.png)
To turn multiple blocks into columns, do the following:
- Select all the blocks that you want to turn into columns by clicking and dragging.
- Click the block icon in the block editor toolbar.
- Choose Columns under the Transform to list.
![Changing multiple blocks into columns.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-027.gif)
Remember to save and publish or update your post or page.
How To Remove A Columns Block
To delete or remove a columns block from your content:
- Click inside the Columns block to select it.
- Select the ‘More Options’ tool in the Block Editor.
- Click on ‘Remove Block’.
- The block will be removed from your post or page.
![Columns Block: More Options - Remove Block](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-028.png)
Additionally…
- You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see this tutorial if you need help with this step: How To Use Blocks).
- You can also convert Columns blocks into Reusable Blocks.
Columns Block Tools, Options & Settings
The Columns Block includes tools, options, and settings for:
- Columns Block Editor
- Columns Block Settings
- Columns Editor
- Columns Settings
Columns Block Editor
![Columns Block Editor](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-029.png)
The Columns Block Editor includes tools that let you perform the following operations:
- Change block type or style (See ‘Columns Block – Additional Info’ section below.)
- Drag block
- Move block up and down
- Change Vertical Alignment
- Vertically Align Top
- Vertically Align Middle
- Vertically Align Bottom
- More Options – See How To Use Blocks to learn how to use this section.
Columns Block Settings
![Columns Block Settings.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-031.png)
Columns Block settings include:
- Block description area
- Color Settings
- Text Color
- Background Color (Solid, Gradient)
- Columns
- Specify the number of columns (maximum 6) using:
- Slider – Slide left/right to increase/decrease number of columns.
- Type in a number in the ‘Columns’ box (enter a number from 1 to 6)
- Click ‘up’ and ‘down’ arrows to increase/decrease the number of columns.
- Specify the number of columns (maximum 6) using:
- Advanced Settings
- HTML Anchor – Create a unique web address to send users directly to a section of your page using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
- Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).
Columns Editor
![Columns Editor.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-030.png)
The Columns editor includes the following:
- Column Icon – Hover to select parent (Columns Block Editor).
- Drag block
- Move column left and right
- Change Vertical Alignment
- Vertically Align Top
- Vertically Align Middle
- Vertically Align Bottom
- More Options – See How To Use Blocks to learn how to use this section.
Columns Settings
![Columns Settings.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-032.png)
Column settings include:
- Column description area
- Column Settings
- Width (enter a percentage value)
- Advanced Settings
- HTML Anchor – Create a unique web address to send users directly to a section of your page using a unique jump link URL. To learn more about using HTML Anchors, see our tutorial on How To Use Blocks.
- Additional CSS Class(es) – This field lets you add multiple CSS classes to your block separated with spaces. This allows you to write custom CSS and style the block as you see fit. Note: This requires having knowledge of CSS (Cascading Style Sheets).
Columns Block – Additional Info
The Columns block can be converted into the following block types:
- Columns block (note: selecting this option changes the entire block into a column)
- Group block
![Transform Columns Block.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-033.png)
Additionally:
Installing plugins or themes on your site may also add new functionality, options, or settings to Columns blocks.
![Sample content using the Columns block.](https://wptrainingmanual.s3.us-east-1.amazonaws.com/elite/tut/wptm-051/WPTM-051-002.png)
Congratulations! Now you know how to use the WordPress content editor’s Columns Block.
For tutorials on how to use other blocks, go here: WordPress Block Editor – How To Use Blocks
***
"I was absolutely amazed at the scope and breadth of these tutorials! The most in-depth training I have ever received on any subject!" - Myke O'Neill, DailyGreenPost.com
***
We are not affiliated, associated, sponsored, or endorsed by WordPress or its parent company Automattic. This site contains affiliate links to products. We may receive a commission for purchases made through these links.