How to make columns in WordPress without plugin

Author: Categories: WP Tutorials
Updated: August 16, 2019
How to make columns in WordPress without plugin

Organizing content into columns is a piece of cake. Columns block can have up to 6 columns. You can therefore have 6 different contents side by side.

In this tutorial you’ll find information about:

 

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.

Multi column layout with services

Multi-column layout with services

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.

Multi column layout with products and categories

Columns used for showing products & categories

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

Separated content using columns

Using columns to separate content

 

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. You had to download directory with table from TinyMCE editor. 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 our directory or multilingual & translated themes with older WordPress version, 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.

Columns element

Orderable element Columns – you can use it in any AIT Theme

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 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.

    Add columns in WordPress by clicking on “+”

    Adding columns in WordPress by clicking on “+”

  • Third option is to use slash “/“ following word “columns” that will give you available options. Just select Columns block.

    Add Columns block with slash “/”

    Adding columns in WordPress using slash “/”

After adding Columns block, content will be separated to 2 parts – two individual columns that you can edit.

Created Columns block

Columns block with 2 default areas (columns) you can edit

 

Get Lifetime Membership access and you’ll be able to work with all our themes that are fully compatible with block editor and Columns block.

  Purchase Lifetime Membership

 

Columns Block basic settings

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.

Top toolbar of Columns block

Top toolbar with alignment options

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.

Changing number of columns

Move with slider to change number of columns as you need

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.

 

How to work with 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.

Different types of content in multi columns layout

With Columns block you can present different types of content 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.

Columns block’ grid effect

Grid effect of Columns blocks placed below each other

 

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.

Editing image block as a nested block

Available settings for Image block nested in Columns block

 

Conclusion: Columns block advantages

Releasing WordPress block editor and availability of using columns in WordPress pages and posts significantly simplified the way users are able to work with content. Thanks to 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’re working hard on new Citadela WordPress theme, that is specially developed for WordPress block editor. Learn more what is coming in Citadela.

Explore Citadela