Columns Block

Use the Columns Block to add columns to WordPress and insert text-based content into your columns …

WordPress Gutenberg Blocks – Columns

WordPress Gutenberg - Columns Block

This tutorial is part of our WordPress Gutenberg: The Ultimate Guide For Non-Technical WordPress Users series.

***

Columns Block Description

Use the Columns Block to add columns to WordPress and insert text-based content into your columns.

Add Columns to WordPress using the Columns Block

(Add Columns to WordPress using the Columns Block)

Info

The Columns Block:

  • Supports up to 6 columns.
  • Lets you add a multi-column layout to your posts or pages that includes other Gutenberg Blocks.

How To Use The Columns Block

To add a Columns Block:

  • Either:
    • Click on the ‘Add Block’ tool in the Editing Toolbar section and select a ‘Columns’ block (in Most Used or Layout Elements section), or
    • Add the ‘Columns’ block in the Content Area.
  • Add, paste in, or upload your content.
  • Use the tools in the Columns Block Editor or Block Settings section to edit and format your columns.

Let’s go through the above steps:

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 - Add Columns Block

(‘Add Block’ Tool – Add Columns Block)

Or, select a Columns Block in the Content Area

Add a Columns Block from the Content Area

(Add a Columns Block from the Content Area)

After adding a Columns Block:

  • Click inside the Columns Block to select a column.
  • Select the Paragraph Block inside the column.
  • Type or paste in your content.

Let’s go through the above steps:

Click inside the Columns Block and select a column, then begin typing or paste in your content …

Add content to columns

(Add content to columns)

Repeat this process with your next column. Use the Paragraph Block editor tools to format or align your content

Add content to columns

(Add content to columns)

Info

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:

Add content to columns

(Add content to columns)

After adding content to your columns:

  • Edit and configure block settings,
  • Save, publish, or update your post or page.

How To Edit A Columns Block

Adding a Columns Block essentially creates a container for your columns, with a Paragraph Block added inside each column. Editing the content inside a column, then, is the same as editing content inside a Paragraph Block …

Editing content inside a Columns Block

(Editing content inside a Columns Block)

You can also edit the Columns Block.

To edit a Columns Block:

  • Click inside the Columns Block to select it, then.
    • Use the Block Editor tools to change the display width of your columns in relation to your post or page.
    • Use the Block Settings to change the number of columns inside the Columns Block.

Here is an example of editing the column width display using the Columns Block Editor …

Columns Block Editor

(Columns Block Editor)

To change the number of columns use the slider in the Columns Block Settings  …

Edit a Columns Block

(Edit a Columns Block)

Remember to update and publish your post or page to save your settings.

How To Remove A Columns Block

To delete or remove a columns block:

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

Remove a Columns Block

(Remove a Columns Block)

Additionally …

  • You can reposition your block using the ‘Move Up’ and ‘Move Down’ arrows or the Drag and Drop handle tool (see our ‘How To Use Blocks‘ tutorial if you need help with this step).
  • 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 Block Editor

Columns Block Editor

(Columns Block Editor)

The Columns Block Editor includes tools that let you perform the following operations:

  • Change Column Width
    • Wide width
    • Full width
  • More Options

Columns Block Editor

(Columns Block Editor)

Columns Block Settings

Columns Block Settings

(Columns Block Settings)

Columns Block settings include:

  • Block description area
  • Columns
    • Specify number of columns (maximum 6) using:
      • Slider – Slide left/right to increase/decrease number of columns.
      • Type in number in ‘Columns’ box (enter a number from 2 to 6)
      • Click ‘up’ and ‘down’ arrows to increase/decrease number of columns.
  • Advanced Settings
    • Additional CSS Class

Columns Block Settings

(Columns Block Settings)

Columns Block – Additional Info

You can’t convert a Columns Block into another block type, but you can convert the Paragraph Block inside each column to the following block types:

Change Block Type - Paragraph Block inside Columns Block

(Change Block Type – Paragraph Block inside Columns Block)

Additionally:

Installing plugins or themes on your site may add new functionality, options, or settings to Columns Blocks.

***

Congratulations! Now you know how to use the WordPress Gutenberg content editor Columns Block.

WordPress Gutenberg - Making WordPress Easier For Non-Techies

***

"I have used the tutorials to teach all of my clients and it has probably never been so easy for everyone to learn WordPress ... Now I don't need to buy all these very expensive video courses that often don't deliver what they promise." - Stefan Wendt, Internet Marketing Success Group

Recommended Video Courses For WordPress Users

WordPress Traffic & User EngagementWordPress Traffic & User Engagement

Learn how to drive more targeted traffic to your website and discover ways to improve user engagement with your business online.

More info: WordPress Traffic & User Engagement

Recommended Video Courses For WordPress Users

Why Your Business Needs WordPressWhy Your Business Needs WordPress

Learn about the unique features, benefits, and advantages of using WordPress to start or grow your business online.

More info: Why Your Business Needs WordPress

Recommended Video Courses For WordPress Users

Keyword Research ToolsKeyword Research Tools

This video course shows you how to do keyword research using tools like the Google Keyword Planner.

More info: Keyword Research Tools

Recommended Video Courses For WordPress Users

Google ToolsGoogle Tools

This video course will help you learn the basics of using Google Tools like Google Analytics and Gmail.

More info: Google Tools

Recommended Video Courses For WordPress Users

Build A WordPress Site ... Fast!Build A WordPress Site ... Fast!

Need a new website or blog in a hurry?

This video course shows you how to quickly install and configure a WordPress website or blog on your own domain name and be up and running in no time!

More info: Build A WordPress Site ... Fast!

Recommended Video Courses For WordPress Users

WordPress 101: How To Use WordPressWordPress 101: How To Use WordPress

Learn how to unlock the power of the WordPress content management system (CMS) using the many powerful features inside your WordPress administration area.

More info: WordPress 101: How To Use WordPress

Author: Martin Aranovitch

Martin Aranovitch is the founder of WPCompendium.org and the author of The Small Business Digital Manager. WPCompendium.org provides hundreds of FREE tutorials that show you how to use WordPress to grow your business online with no coding skills required! Get our FREE "101+ WordPress Tips, Tricks & Hacks For Non-Techies" e-course with loads of useful WordPress tips!

Originally published as Columns Block.