Columns are an effective way to display and arrange content or complex information on a WordPress website’s posts and pages. What’s more, there are a number of different ways to add them to a WordPress website, and doing so is easy.
For example, you could install a suitable plugin, use a theme with a built-in column creator, and much more. You could also create columns using HTML within WordPress if you feel comfortable getting your hands dirty with code.
In this post, we’ll look at a number of different techniques for creating columns within WordPress.
Why Add Columns In WordPress?
While it may be true that some users find columns distracting, there are cases where using columns in your posts and pages makes aesthetic sense. For example, say you want to:
- Present content for side-by-side comparison and analysis
- Create a page with data-rich material, and a column-based layout would make for easier comprehension
- Spice up your posts, highlighting and organizing your content with unique, multi-column layouts
Learn How To Add Columns to WordPress
So how do you create columns for your WordPress posts and pages? There are typically four distinct approaches, and which method you select depends on your personal preference and current configuration.
These approaches can be done with the following:
- Glutenberg Blocks
- Classic Editor + Plugins
- Theme’s / Page Builder Plugins
- Custom Code i.e Html & CSS
If you are hip to the WordPress block editor dubbed Gutenberg, designing custom columns is now a baked-in component of your WordPress experience, and likely the simplest path column nirvana. Gutenberg blocks are also mobile-friendly, meaning this route should produce responsive columns with minimal hassle.
Check out the walkthrough video by WPklick on how to add and edit Columns with Glutenberg.
In summary, the quick guide for creating new columns in Gutenberg:
- While in the post editor, move your cursor between two blocks on your page, and click the ‘Add Block’ button
- Now choose the ‘Columns’ block
- This will insert a 2 column block, and you can adjust the number of columns via the ‘Block Details’ area of the dashboard
Classic Editor + Plugins
If you haven’t upgraded your WordPress to Gutenberg and still using the Classic Editor,( which majority are including us) then you’ll need to install a separate plugin for creating a grid column layout.
First, install and activate the Lightweight Grid Columns plugin. After installing the plugin, you’ll see a new icon in your TinyMCE editor.
Upon activation, you can create a new post or open an old post to edit. Next, click on the ‘Add Columns’ button from the visual editor toolbar.
Click that icon to get started, and a pop-up window will appear. This is where you enter the percentage width for each column, and for a 3 column layout, set each column width to 33%, except for the mobile view (in most cases.)
There are several WordPress themes that come equipped with varying options for columns, and every established page builder has column support built-in. Divi, Elementor and Visual Composer all implement an assortment of post and page layouts as part of their core functionality.
Creating Columns in Code
It is possible to create columns within your posts and pages using tables, but the ideal method to create columns is through HTML and CSS. The Support tutorials for WordPress show many advanced examples. Columns are actually easy to make in code. Let’s take a look at an example to create columns.
To create columns in the text editor use the <div> tag along with a style attribute.
The values for width, padding and float will vary depending on your theme’s layout and the number of columns you want. Need more help? Refer to the CSS-specific documentation for these styles: width, float, and padding.
This example of code creates two columns like this:
If you’re struggling to figure out how to add columns to WordPress, you now have plenty of methods to help you get the job done. WordPress is a very flexible platform which enables both newbies and advance web designers to build a professional website.
Other Articles on WordPress