Blocks, Design 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.

Table of Contents

Video Tutorial

↑ Table of Contents ↑

Add the Columns Block

To add the Columns block, click on the + Block Inserter icon and search for “columns”. Click it to add the block to the post or page.

💡

Using your keyboard, you can also type /columns on a new line and press Enter to quickly add a new Columns block.

For more, visit our detailed instructions on adding blocks.

Once you add the Columns block, you can choose the number of columns to add. You can change this number to add or remove more columns later.

Columns block, choose number of columns
Select the variation of columns you want to start with

After selecting the number of columns, you can click the + icons to add blocks to each column. You can add any blocks to your columns.

↑ Table of Contents ↑

Block Toolbar

When you add the block, a toolbar of options will appear:

Columns block toolbar
Columns block toolbar

The Columns block has the following options in its toolbar:

  • Change block type or style.
  • Drag the block.
  • Move the block up or down.
  • Change the block’s width (wide and full width if supported by the theme.)
  • Additional options.

↑ Table of Contents ↑

Block Settings

You will find additional block settings in the right sidebar when you click on the block. If you do not see the sidebar, you may need to click on the ⚙️ (gear/ cog) icon in the top right corner to bring up the settings.

The block settings can be found in the right sidebar.
Click on the ⚙️ icon to find the block settings

There are two levels to the Columns block with different settings depending on what you have selected:

  • The overall Columns block. These settings affect all the columns at once.
  • The single Column blocks within the Columns block. These settings affect the individual column only.

If you’re having trouble selecting the correct column, see the Select the Columns Block section.

Overall Columns Settings

These settings control all of the columns:

Number of columns: You can use the slider to adjust the number of columns in the block from 1 to 6, or type the desired number of columns in the field to the right.

Stack on mobile: This toggle switch determines if the columns are displayed horizontally or stacked vertically when the page or post is viewed on a mobile device.

Color: These settings allow you to set the text and background colors for all columns within the Columns block.

The Color section of the Block Settings sidebar with a box drawn around it.
Selecting the colors of the columns
Typography

Adjust the appearance of the block’s text with the following settings.

If you don’t see the setting, click the three dots to the right of Typography (as shown on the right.) You can then choose the option you want to access:

  • Font size
  • Font family
  • Appearance
  • Line height
  • Decoration
  • Letter case
  • Letter spacing
Typography dropdown menu
Typography in the Block Settings sidebar, with the additional options expanded.

Font size allows you to adjust the size of the text. You can choose from preset sizes like small, medium, and large.

You can also set a specific value by clicking the slider icon directly above the default selections, marked with a 1 in the screenshot below. You can change the units by clicking where a number 2 is marked in the screenshot below. Choices are pixels, em or rem.

Typography font size settings

Font family gives you the option to change the font style used. Choose from a list of fonts in a drop-down menu.

Appearance allows you to change the text’s style between regular and italic, ranging from thin to extra bold.

Line Height sets the spacing above/below the text. If you select zero, be sure to check your site on mobile.

Decoration includes options for underline and strikethrough (if available.)

Letter case allows you to set the text to all caps, the first letter capitalized, or all lower case.

Letter spacing sets the space between each character of the text. You can change the units from the default (pixels) to percentage, em, rem, vw, and vh. Learn more about relative units here.

Dimensions: Here, you can set the padding – the space around the elements in your Columns block. This option is particularly relevant when you use a background color.

Padding can have one value for all four sides – by adding a value in the field shown here:

Dimensions settings row block

Alternatively, padding can have separate values for each of the sides. The figures shown to the right run clockwise, from top -> right -> bottom -> left. You can access this view by clicking on the blue link icon displayed in the previous image.

Dimensions options and custom settings
Individual Column Settings

These settings affect a single column only:

Layout: Toggle the option on for “Inner blocks use content width” to customize the width for all elements that are assigned to the center or wide columns. You can also set the Justification setting.

Width: Sets the width in pixels of an individual selected column. You can change the column’s value to make it wider or narrower. Columns don’t all need to have the same value.

Color: These settings allow you to set the text, background, and Link colors for a single column.

Typography: Adjust the appearance of the block’s text ad described above.

Dimensions: Set the padding for each individual column, as described above.

Border and Radius

The Border allows you to add a colored line along the edges of your Columns block.

The radius allows you to give your Columns block borders a rounded appearance. Setting the radius to 0 means the block has sharp edges.

Note that your site must have a Site Editor theme to access the border and radius settings for the Columns block.

Border and Radius options in the Block Settings sidebar.
Advanced

The advanced tab lets you add HTML Anchor used to Create Page Jumps and a CSS class to your block, allowing you to write custom CSS to style the block. Learn more.

Advanced options to add HTML anchor and additional CSS class(es)
The advanced section lets you add a CSS class to your block.

↑ Table of Contents ↑

Select the 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 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:

Use List View

Using List View, you can easily see the hierarchy of blocks to select the block you need:

The list view option being opened and navigating to the parent Columns block.
Using List View to see a list of all blocks
Click the Parent Block Selector

If you are working on a single column, you can select the overall Columns block from its icon in the block toolbar:

The block toolbar with the option to select the parent block outlined.

Learn more about selecting blocks.

↑ Table of Contents ↑

Transform Multiple Blocks Into Columns

If you have inserted multiple blocks one after another and you want to turn them into columns, you can in just a few clicks! To do this, please follow the steps below:

  1. Click and drag to select all the desired blocks you want to turn into columns.
  2. Click the block icon near the left side of the block toolbar.
  3. Click “Columns” under the list “Transform to.”
Transforming multiple blocks to columns.

Each block you select will turn into its own columns. The number of columns will be the same as the number of blocks you select before transforming. You can select between two and six blocks.

Not quite what you're looking for?

Get Help