Advanced Columns Block

If you click the paragraph inside the column you see the settings for that specific paragraph, not the container block.

Columns or advanced columns?

The advanced columns block has several features that the standard WordPress columns block lacks.

For instance, you can have wide/narrow column layouts. Set text color, this affects headings as well as paragraphs. And you can set the the inner max width for the content.

Setup wizard/don’t lose your content!

When you insert the column block in your page a setup wizard helps you choose the column layout you need.

BEWARE! Do not change the number of columns after adding content. Or you might lose your content. So make sure you have the right number of columns before adding content to those columns.

You put blocks inside columns

The advanced columns block is a set of container blocks that you place other blocks inside. For instance, if you choose a two column layout you can then place images, headings and text etc inside each column.

It can be tricky

The WordPress block editor is still new. Selecting containers, columns and the blocks inside them is still awkward. But these usability issues improve with every update to WordPress. Practice, practice, practice and you’ll soon get the hang of it.

Click around to see all settings

Because the Advanced columns block is a container that you put other blocks inside, you have to drill down to find the exact block settings you need.

For instance, if you have an image block in one of your columns you have to select that image block to see the settings for that specific block. If you select the main columns container block you will see a completely different set of settings and options.

At first this is confusing so spend some time clicking around inside your layouts to practice and learn. You’ll soon be able to select the exact block you need.

The Block Settings

At first the advanced columns block settings look overwhelming. But if you go through the settings one at a time they’re fairly simple.

The main tabs in the advanced columns block settings…

1. General
2. Margin and Padding
3. Color
4. Advanced

1.) General Settings

First make sure the down arrow is clicked and you can see all of the available options under the general tab.

Column Count: although you set the number of columns you need using the setup wizard, you can change this later using the column count option. But beware, this can result in losing content.

Column Layout: you set the width of the columns using the setup wizard, but you can make adjustments here if you want to.

Column Gap: space or gutter between the columns.

Column Inner Max Width (px): lets you set the maximum width of this column layout on very wide screens. If you’re not sure what to put in this box try 1200.

Center Columns In Container: this should be toggled on. It centers this whole columns block in wide layouts. If you want to make this block sit to the left hand side of the screen, on wide layouts, toggle the center columns in container off.

Responsive Columns: this should be toggled on. It splits the column layout into single columns that stack on top of each other on mobile devices.

2.) Margin and Padding

Margin Unit: Pixel(px) Percent(%) Em(em) I use Percent, you can choose a different option if you wish.

Sync Margin/Padding: sync synchronizes the settings. So instead of choosing individual top, right, bottom and left settings, you just add a single setting that affects all four.

3.) Color

Background Color/Text Color: You can set the color of the columns container background and the text and headings inside those columns.

4.) Advanced

All blocks have this Advanced > Additional CSS Class option. It enables you to add CSS classes that target this specific block, if you understand CSS.