The layout options that the standard WordPress editor offers are rather limited. Text blocks, images, and videos can only go below or above each other.
An alternative way of organizing information in a blog or post would be to use columns. Traditional media, like newspapers and magazines, have been using this layout for years.
Shorter lines make it easier for the reader to follow the text. It also makes very economical use of the available space.
It is possible and not that hard to add columns to a WordPress post. This article will show how to make columns in WordPress.
Why Use Columns on a Website?
There are various reasons for using columns on a website. Columns organize text or other content and make it easier to read.
The arrangement in columns allows for the specific highlighting of certain information.
An often-used application of columns is the presentation of services or products. Besides the text, they may have buttons, images, or detailed descriptions.
The images can even be clickable. This method of presenting product information is especially suited for smaller businesses.
Columns are very useful in blog posts too. Arranging information in columns allows for the separation of content.
Instead of only arranging elements below each other, text bullet points and images can be arranged horizontally.
How to Create Columns in WordPress
Plugins are very useful for adding functionality to WordPress posts and pages. But some do not like using many plugins.
The good news is that it is possible to add columns without a special WordPress plugin. There are two ways to do this:
- Use a WordPress theme that offers this option.
- Create columns using HTML
Multi-column content is also called grid column content. This feature is now offered by default in WordPress.
The Gutenberg Editor has a block editor which makes using columns much easier.
To make sure that this feature is accessible, update to the latest version of WordPress. Then, columns are just a few clicks away with Columns Block.
This option is great when coding and programming skills are not well developed.
Another advantage of Columns Block is that one can add different blocks within a column. These blocks could be text, images, or buttons.
As mentioned already, columns are great for arranging product and pricing information. With a number of columns available, it is possible to include product images and names.
It is easy to arrange column blocks horizontally or vertically. A combination of these types of arrangements results in the formation of a grid.
So, here is a detailed look at how to create columns without the use of a WordPress plugin. These are the steps:
- Go to the
- Click on the + sign to add a block. It is in the top left corner.
- A list of all the available blocks will appear.
The block types are sorted by categories. Use the search function to find the right one.
- Find the Layout Elements
- Select Columns.
- Add blocks to the columns. To start with, the canvas will be split into two columns.
Add text by typing into one of the columns. Another option is to add blocks by clicking the + sign.
- If desired, add more by increasing the number of columns. Left-click on the column blocks.
This will open the settings pane on the right. The picture below shows what that looks like.
Increase the number of blocks to three, four, five, or six.
- Be careful when deleting columns, because the information in the deleted columns is also lost. It is not possible to retrieve this information.
Predefined Layouts
With the release of WordPress 5.3 came many improvements in the use of columns in blogs and posts. In addition to adding blocks, the user can now define their alignment and layout.
For users with limited WordPress experience, there are very practical predefined layouts. This is the way that creating columns should be and without the help of a WordPress plugin.
The predefined layouts are optional.
After skipping this step, WordPress divides the canvas into two columns of equal width. The number and width of these columns are adjustable later.
Columns Block Basic Settings
The options that WordPress Columns offers are few.
It is possible to change the alignment of the columns only if the active theme supports this. The buttons to do this are in the bar at the top.
An important parameter in the columns block setting is the number of columns. To change this, go to the inspector sidebar that is on the right.
Change the number by clicking with the mouse or type the number in the box. The layout changes immediately after increasing or decreasing the number.
It is fast and easy and does not require changing code. Another possibility is to add Custom CSS Class to the Columns block.
New Column Width Settings
Also with the arrival of WordPress 5.3, it has become much easier to customize the columns. The Inspector contains a slider with which to change the column width.
This ensures that the content of the columns is always neatly distributed.
Another feature is that it now allows for the creation of multiple blocks. Before the release of version 5.3, it was sometimes a struggle to work with multiple blocks.
The new feature, called Block Appender, has made this process much easier. It only takes one click and the different blocks are highlighted in different colors.
Adding Media and Other Content in Columns
Besides adding text, it is possible to use images or embed videos in the new columns. This requires the use of different blocks.
Add a new block by hovering over the column and click Add New Block. Or type /[block name], where “block name” is replaced with the name of the block.
After doing that, the newly created block appears in the corresponding column. Add the corresponding content to it.
Below is an example of what this may look like in the 2019 theme. It shows three columns and the last one contains an image.
There is another option, Media and Text.
This will add an image and some text next to it. With this option, it is not necessary to create an extra column.
Creating Columns with HTML
For those interested in it, there is also the option of using HTML to create columns.
WordPress is very powerful and is able to deliver a very good-looking website. However, HTML is still a very popular method of making up a site.
To make columns add this piece of code into the Text Editor:
<table> <tr> <td></td> <td></td> </tr> </table>
This creates a table with columns very quickly and it is easy to modify. However, not all WordPress themes handle these columns well.
It takes some experience to resolve any resulting issues.
FAQ about making columns in WordPress
How do I create columns in WordPress?
Well, it’s simple. Just use the Gutenberg editor to add a Columns block. Once you’ve added the block, you can adjust the number of columns and their widths to fit your needs. Then, just add your content, images, or other blocks within the columns. It’s a breeze!
Can I use a plugin for making columns?
Of course! There are several plugins available that make creating columns in WordPress even easier. Some popular ones are the SiteOrigin Page Builder and WPBakery Page Builder. These plugins provide drag-and-drop functionality to create custom column layouts.
Are columns responsive in WordPress?
Yes, they are! When using the Gutenberg editor or a plugin, your columns will automatically adjust to different screen sizes. This means your content will look great on desktops, tablets, and smartphones without any extra effort.
How can I add custom CSS to style my columns?
To add custom CSS, go to Appearance > Customize > Additional CSS in your WordPress dashboard. Here, you can add CSS rules to style your columns. Just make sure to target the right classes or IDs associated with your columns block or plugin.
Is it possible to create nested columns?
You bet! With the Gutenberg editor, you can add a Columns block within another Columns block. This allows you to create more complex layouts with nested columns for greater design flexibility.
How do I change the column width?
In the Gutenberg editor, select the Columns block you want to adjust. Then, find the Column Width settings in the block settings sidebar. You can use the slider or input a specific value to set the desired width for each column.
Can I add a background color or image to a column?
Absolutely! To add a background color, select the column and find the Color settings in the block settings sidebar. For a background image, add a Cover block inside the column, and then upload or select your desired image.
How do I change the column order on mobile devices?
To change the column order on mobile devices, you’ll need to use custom CSS. Target the column classes or IDs and use the order property within a media query to adjust the display order for smaller screens.
Is there a way to add a divider between columns?
For sure! You can add a vertical divider between columns by using a Separator block. Just add the block between your columns and adjust the block settings to create a divider that matches your design.
How do I add equal spacing between columns?
To add equal spacing, select the Columns block and look for the Column Gap setting in the block settings sidebar. Adjust the gap size to create consistent spacing between all columns in the block.
Ending thoughts on how to make columns in WordPress
WordPress 5.3 and the inclusion of the block editor have made the use of columns in blogs and posts so much easier. Because of the WordPress Column block, it is no longer necessary to use a plugin or mess around with HTML code.
It is simple to create columns in WordPress or to delete them. It is very intuitive and pleasant to work with, even for less technical users.
The result is a beautifully aligned layout with multi-columns. Above all, the resulting pages will be responsive.
If you enjoyed reading this article on how to make columns in WordPress, you should check out this one on how to edit categories in WordPress.
We also wrote about a few related subjects like how to delete WordPress themes, how to make a phone number clickable in WordPress, how to watermark images, how to check the WordPress version, creating a comparison table with WordPress plugins, how to upload an HTML file in WordPress, where are WordPress pages stored and how to justify text in WordPress.
