How to make columns in WordPress without plugin

Author: Categories: WP Tutorials
Updated: February 11, 2020
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

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

    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 “/”

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

Predefined layouts in Columns block

Predefined layouts options

 

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.

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 WordPress Columns block.

  Purchase Lifetime Membership

 

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.

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.

close

New columns width settings

Since the release of WP 5.3 you can customize each column more easily than before. The new added slider in block’s Inspector allows you quickly and conveniently change the column width. This feature also ensures that all content inserted in the column is perfectly distributed.

 

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.

Block appender in WordPress Columns block

Block appender with background color

 

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.

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

Citadela WordPress Theme
Gutenberg WordPress Theme
Download for Free