Blocks

Blocks »Columns Block

The Columns block allows you to insert text, media and other types of content into up to six columns. When used one after another, the columns create a grid effect. 

Add the Column Block

Column Overview

In order to add a Columns block, click on the Block Inserter icon.

You can also type /columns and hit enter in a new paragraph block to add one quickly.

Column Block Add Typing

Detailed instructions on adding blocks can be found here.

Once you add the Columns block, you can choose the number of columns (and you can change the number or add more columns later):

Column block - number of columns
Select the variation of columns you want to start with

↑ Table of Contents ↑

Block Toolbar

Most blocks have their own block-specific controls that allow you to manipulate the block right in the editor. The Columns block offers standard block options as well as full width and wide width options (if the theme supports these alignment styles).

Columns Interface 1

↑ Table of Contents ↑

Add Content

Once you have inserted the Columns block, you will want to add content to each column. The amazing thing about the Columns block is that you can add other blocks into each column.

For instance, you can use the Columns block as the structure and add image blocks, heading blocks, and paragraph blocks to create a grid of services.

Columns Block - Services

Or you can use Columns block with cover image blocks to feature pages of your site.

Columns + Cover Image

As you can see, the sky is the limit! Need to see how the magic happens? Check this video!

Creating and editing the Columns block.

↑ Table of Contents ↑

Block Settings

Most blocks have specific options in the editor sidebar in addition to the options found in the block toolbarIf you do not see the sidebar, simply click the ‘cog’ icon next to the Publish button.

The block settings can be found in the sidebar.
The block settings can be found in the sidebar.

↑ Table of Contents ↑

Select the Parent Columns Block

It is possible to add or remove columns and change the colors of the columns. To do so, it is important to distinguish between the overall Columns block and the individual columns inside of it.

If you are editing an individual column, you will first need to select the overall Columns block to change the color and number of columns.

There are several ways to do this:

  • Hover over the change block type or style option in the toolbar and select the Columns block like so:
Selecting the parent Columns block
  • Use the block navigation at the top of your screen:
column block - block navigation
Using the Block Navigation to select the Columns block
  • Click outside the box, between the box and the sidebar, to access the Columns block settings:
Change Number of Columns
Change the Number and Width of Columns

After selecting the overall Columns block as described in the previous section, you can change the number of columns (up to six) in the block settings in the sidebar.

You can also edit the width of individual columns. When you add new columns, the additional settings will appear in the sidebar on the right. You can change the value of the column to make it bigger or smaller. Columns don’t all need to have the same value.

Change Column Colors

After selecting the overall Columns block as described in the previous section, you can select the color of the text and background used in the columns:

Columns block - color settings
Selecting the colors of the columns

↑ Table of Contents ↑

Advanced

The advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit. Learn more.

Block Button Advanced Tab

Not quite what you're looking for?

Get Help