How to make columns in WordPress without plugin

Organizing content into columns is a piece of cake thanks to WordPress Columns block. This block belongs to the core blocks that might be used in every WP theme. Columns block can have up to 6 columns. So you can therefore have 6 different contents side by side.

Today we will show you how to make columns in WordPress without plugin – by using Columns block. We also bring you a summary of newest features from WP 5.3 version update.

In this tutorial you’ll find information about:

• What’s the purpose of columns
• How columns used to work in the old editor
• How to make columns in WordPress without plugin (in block editor)
• Basic Columns block settings
• How to work with WordPress Columns block
• How to edit nested blocks
• Columns block advantages

What’s the purpose of columns

Columns on website can have multiple application. First of all they can make content well-arranged, more readable and easier to browser. By organizing content into columns you can highlight important information or parameters.

For example you can use multi-columns layout to present your services. Add there illustrative image, description or button. You can of course make image clickable.

Similarly to services you can use columns on WordPress to show products or product categories. It’s ideal if you have a simple business website.

In blog posts you can use columns to separate content. You can place text, bullet points or images side-by-side.

How columns used to work in the old editor

Before WordPress 5+ if you wanted to make multi-column content, you had to use tables. It was way more difficult than in the newest editor. What more, there was usually an issue with styles and displaying tables on mobile devices. How it used to work?

You have had multiple options on how to create columns in WordPress website:

1. Manually insert HTML code into text editor

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

This approach was mainly used by developers, that could quickly create table or column based on their requirements. Disadvantage was that not all WordPress themes could handle columns well. Tables were usually not perfect and average user could not easily solve all possible issues.

2. Allowing tables in WordPress editor

Because WordPress used TinyMCE editor, it was possible to allow functions to edit tables. If you’re interested to learn more, you can find all details in this forum. In case you do the same thing for our AIT themes, tables will work correctly.

3. Using Columns element in AIT themes

If you use one of our older WordPress themes, you certainly know our Columns element. This element can be used to add columns inside pages. It’s an orderable element, that means you can place it anywhere you need it. Advantage is it’s variability inside pages.

4. Download 3rd party plugin to manage tables

Another solution on how to make columns in WordPress posts and pages was to download one of available plugins for creating tables. These plugins allow adding columns/tables using few clicks without any coding. It was also possible to use this by less experienced users.

How to make columns in WordPress without plugin (in block editor)

Thanks to new block editor creating columns became extremely easy. If you still use old WordPress, now it’s the right time to update to the newest version. You’ll be able to add and manage columns simply, in few clicks using Columns block.

This block is a welcomed change for everybody who want to work with multi-columns content, present products or write blog and does not have experience with programming.

Let’s have a look at how to add Columns block and how to create columns in WordPress without plugin:

• First option is to click on “+” in the top bar and select Columns block from available blocks.
• Second option is to click on “+” anywhere inside editor.

Predefined layouts of WordPress Columns block (NEW from WP 5.3)

The latest version brought huge improvements in columns settings. First of all there are default layout styles available. What does it mean?

Users can choose their layout and alignment style in the process of adding a new block to the content area. Predefined layouts can be very helpful – especially for those users who don’t have advanced WordPress skills. This feature represents how we imagine the way of how to make columns in WordPress (without plugin or any other add-on).

 

If you don’t want to choose predefined layout in WordPress Columns block, just skip it. After skipping this step, content will be separated to 2 same parts/ two individual columns that can be edited.

Columns Block basic settings

WordPress Columns block itself does not have lot of options. Why is it like that we will explain later. In the top bar you can change alignment to wide or full width. You can change this alignment if it’s supported by you active theme.

The most important Columns block setting is number of columns in inspector sidebar on the right hand side. By default there are 2 columns, but you can increase this number to 6. You can change it using mouse or enter a number. How it looks you’ll see right away after increasing or decreasing columns. Block changes itself dynamically depending on slider.

It’s very practical because you change number of columns literally in seconds without any difficult changes to settings or coding.

Similarly to other blocks in WordPress editor, you can insert Custom CSS Class also to Columns block.

Block appender for smoother work with blocks

Columns block is special because you can create multiple blocks with it. Until new version was released it was pretty hard to work with individual blocks. When you wanted to add some block, you didn’t know exactly where to click. Thanks to Block appender (and its differentiation by background color) it’s easier to insert content to the proper column.

How to work with WordPress Columns Block

Beauty of Columns block is that each column can nest other blocks. It can be Paragraph, Image block or button block. Maximum number of columns is 6, you can therefore create multi-column content as you need. As mentioned earlier on, to present products you can add product image, name, price and button side-by-side.

You can also use several column blocks one under another to create grid. You can use it to present your services or promotion of important features.

Editing nested blocks

As we already mentioned, you can nest other blocks inside columns. Each nested block has all it’s settings available. That means that if you add Image block into column, you can edit it exactly the same way as in standalone Image block.

Conclusion: Columns block advantages

Releasing WordPress block editor and availability of using columns in pages and posts significantly simplified the way users are able to work with content. Thanks to WordPress Columns block it’s no longer important to use 3rd party solutions or write HTML code. Adding or deleting columns is possible using few clicks. Everything is very intuitive and fast also for less techie users.

Your content in multi-columns layout will be nicely aligned into grid. It will also look good in responsive version right away.

We were working hard on new Citadela WordPress theme, that is specially developed for WordPress block editor. Learn more about Citadela theme and available layout packs.