How to Use the WordPress Columns Block

Last Updated on March 23, 2023 by Leave a Comment

How to Use the WordPress Columns Block
Blog / WordPress / How to Use the WordPress Columns Block
Play Button

Columns are a key component in most modern websites and page builders. Fortunately, the WordPress Block Editor enables you to use both columns and rows so you have full control over each page’s layout. However, although the builder adds rows automatically, you’ll need to choose where and how to add columns using the Columns block.

In this article, we’ll show you how to add this block in WordPress and how to configure it. Then we’ll go over some tips so you can get the most out of your columns, as well as some Frequently Asked Questions (FAQ) about the block.

Let’s get to work!

Subscribe To Our Youtube Channel

How to Add the Columns Block to Your Page or Post

To get started, open the Block Editor for the page or post that you want to work on. Click on the plus sign icon below the last block you added (1), or use the menu at the top of the screen, and select the Columns option (2):

Adding the columns block in WordPress

The Block Editor gives you several options for how many columns you want to include within the row you select:

Adding columns to a row

By default, the Block Editor only lets you choose presets that include up to three columns within a row. However, once you place one of those presets, you can click on the plus signs between them to add further elements to the row:

Adding more columns to a row

The editor treats each column as its own “section”, so to speak. If you have a row with three columns, for example, you can add individual blocks within each of them to create a pricing table:

Adding tables within columns

You can add any of the blocks available within the editor to each column that you’re working on. Once you place the blocks you need, you might also want to spend a few moments customizing your columns’ settings.

Columns Block Settings and Options

When you mouse over a row with columns in the Block Editor, a formatting menu will appear over it. That menu includes options for moving columns around (1), changing their alignment (2), and modifying the row’s width (3):

Changing the formatting for the Columns block

The formatting menu you see will change as you add blocks. When you mouse over a column that contains a block, that element’s formatting menu will replace the default one.

For this example, we added Table blocks to all of our columns. When we mouse over any of them, here’s the formatting menu that appears:

A formatting menu for tables

There’s another set of options that enables you to customize the Columns block, beyond just the formatting menu. To access it, select the row that includes the columns you want to edit, and click on the gear icon in the top-right corner of the screen (1). A sidebar will pop up, including options for changing that row’s color (2), padding (3), and column widths (4):

The settings for the Columns block

The color settings enable you to change the color of the text and links within the row, as well as for its background. Keep in mind that the settings you choose here apply to all of the columns in the row. However, you can supersede those options by tweaking the individual block settings within each column.

If you want to customize this block even further, you can also set HTML anchors and additional CSS classes from the Advanced tab in the settings menu:

The Advanced settings menu for the Columns block

That’s everything you need to know about how to use and configure this important block. Now let’s go over some tips to help you use columns effectively.

Tips and Best Practices for Using the Columns Block Effectively

Columns are a versatile element in web design. You can use them in just about any situation you want, as they help provide structure to any page or post.

Visually, columns help you break up long stretches of paragraphs, and place lists, tables, and even images side by side. Here’s an example from one of the default WordPress themes, using columns to achieve an overlapping effect with Image blocks:

Overlapping columns with images

In most cases, you won’t want columns to overlap. However, there are no rules set in stone for how to use columns. As long as the results look aesthetically pleasing, you should feel free to experiment using this block.

Frequently Asked Questions About the Columns Block

By now, you have a solid grasp of how to use columns in WordPress. To make sure that you’re not missing anything, let’s go over some commonly asked questions.

Can I Use the Columns Block with Page Builder Plugins?

By definition, page builder plugins (such as Divi) supersede the default WordPress Editor. That means you won’t get access to the Columns block. However, most page builder plugins include their own takes on rows and columns, so you may get to use similar features. Here is our list of the best page builder plugins available within the WordPress ecosystem.

How Many Columns Can I Add in a WordPress Page or Post?

The Columns block enables you to add up to three columns within a row using presets. However, you can add further rows manually. Keep in mind that if you add too many columns, they might not have enough room to display their contents properly.

Can I Use the Columns Block Within Widgets?

WordPress enables you to customize widget areas, such as your footer or sidebar, using the Block Editor. That means you get access to all the same blocks you would when working on a page or post. Keep in mind that since you’re probably working with reduced space, using multiple columns in widget areas can make your content look crowded.

Conclusion

Rows alone aren’t enough for a modern page builder tool. The option to create and customize both rows and columns offers you full control over the placement of each element on your website.

The good news is that the WordPress Columns block is remarkably simple to use. You can add as many columns as you want within any single row. Moreover, you can place any block you want within a column, and customize its content, style, and more.

Do you have any questions about how to use this WordPress block? Let’s talk about them in the comments section below!

Featured Image via Mitya Korolkov / shutterstock.com

Divi

Want To Build Better WordPress Websites? Start Here! 👇

Take the first step towards a better website.

Get Started
Divi
Premade Layouts

Check Out These Related Posts

Advanced Ads Review 2024: Powerful WordPress Ad Management

Advanced Ads Review 2024: Powerful WordPress Ad Management

Posted on March 17, 2024 in WordPress

If you want to monetize your WordPress site with ads, the Advanced Ads plugin is a great place to start. With its ability to generate quality ads, use different ad layouts, and add custom ad blocks to streamline your workflow, Advanced Ads can provide effective and creative opportunities to boost...

View Full Post
W3 Total Cache Review: Features, Guide, & More (2024)

W3 Total Cache Review: Features, Guide, & More (2024)

Posted on March 5, 2024 in WordPress

Building a website on WordPress can occasionally include the bump in the road of slow loading times. However, an efficient way of overcoming this hurdle is by employing caching plugins. One stand-out candidate for cache management and optimization of your WordPress site is W3 Total Cache. In this...

View Full Post

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Get Started With Divi