How to Create Columns in WordPress

How to create columns in wordpress

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

Gutenberg Blocks

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:

  1. While in the post editor, move your cursor between two blocks on your page, and click the ‘Add Block’ button
  2. Now choose the ‘Columns’ block
  3. 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.)

This process inserts the related shortcodes into your post, and be sure to identify the last column using the ‘Last column in row’ checkbox.

Themes & Page Builders

There are several WordPress themes that come equipped with varying options for columns, and every established page builder has column support built-in. DiviElementor and Visual Composer all implement an assortment of post and page layouts as part of their core functionality.

Check your theme or page builder’s documentation for more detail on how they handle columns. And if you are starting a new WordPress website, add ‘multi-column support’ to your theme search filters.

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.

01
02
03
04
05
06
07
08
09
10
11
12
<div style="width:40%;padding:0 10px 0 0;float:left;">
Your content for your column #1
Your content for your column #1
Your content for your column #1</div>
<div style="width:40%;padding:0 10px 0 0;float:right;">
Your content for your column #2
Your content for your column #2
Your content for your column #2
</div>
<div style="clear:both;"></div>

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: widthfloat, and padding.

This example of code creates two columns like this:

 

Conclusion

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.

If you want a professional to handle your WordPress web design then don’t hesitate to contact us today.

Other Articles on WordPress

Beau Buckley

I'm a digital marketing expert, the founder of Revolucion One and SEO Services London. I've personally been making money online since 2009, so when it comes to generating more leads and sales for your business, I'm your go-to expert.

Related Posts

Leave a Comment

Your email address will not be published. Required fields are marked *

Add Comment *

Name *

Email *

Website *

Send us a message