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
- 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 Columns block
- How to edit nested blocks
- Columns block advantages
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.
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.
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.
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.
- Third option is to use slash “/“ following word “columns” that will give you available options. Just select Columns block.
After adding Columns block, content will be separated to 2 parts – two individual columns that 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.
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.
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.
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.
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.