How To Make Columns In WordPress (Without Plugin)

Sometimes, It’s very important to create Columns. It helps with listing features and/or comparisons on a blog post. In this article, I will show you how to create columns in WordPress. And the best part; we will do it without plugins.

Installing and activing plugins could be a tedious process. Furthermore, It’s always better to only use WordPress plugins that make a difference. The less plugins you use, the better WordPress performance you get.

The steps are pretty easy and straight-forward. We will use simple lines of code that you can easily copy and paste in the WordPress visual editor. Follow a long and let’s see how to achieve that.

How To Create Columns in WordPress?

Without any plugins, I will show you the exact lines of code to create columns. Ultimately, Columns will allow to write and display appealing content. If done right, It may look like magazines and newspapers.

There are two methods to do make columns without plugins:

Using Tables.
Using simple CSS and HTML code.

While using tables could be nice, it won’t look pretty awesome. The ideal way to achieve that is to use CSS and HTML code. We will do clean, simple and visually-appealing columns in WordPress visual editor.

Making Columns with CSS & HTML:

Here, we will need to use the tag <div>. This exactly how we can code the columns in the WordPress. Now, navigate to WordPress visual editor and start test the following code in the “Text” section.

Two Columns:

<div style="width:40%; float:left;">
Content for your column #1
Content for your column #1
Content for your column #1</div>

<div style="width:40%; float:right;">
Content for your column #2
Content for your column #2
Content for your column #2</div>

<div style="clear:both;"></div>

Three Columns:

<div style="width:30%; float:left;">
Content for your column #1
Content for your column #1
Content for your column #1</div>
 
<div style="width:30%;float:left;">
Content for your column #2
Content for your column #2
Content for your column #2
</div>
 
<div style="width:30%;float:right;">
Content for your column #3
Content for your column #3
Content for your column #3
</div>
 
<div style=”clear:both;”></div>

And you still can change the width to create more or less columns based on your preference. By adjusting the numbers, you can add or remove spaces. And to add another column, you can easily add another block of code as how it looks above.

Other Tools To Create Columns:

I’ve mentioned the exact way I’ve used to create two and three columns in WordPress without plugins. But some of you may prefer ready-made tools for faster results.

Quickly, let me review the other available WordPress themes and plugins that could help you on creating columns. These tools becomes very handy and packaged together:

Divi WordPress Theme.
ET Shortcodes WordPress Plugin.

Both tools are provided by ElegantThemes. They’ve packaged 87 Elegant WordPress themes along with 6 Creative plugins for $1 each item.

Conclusion:

Columns help website owners to create outstanding pages. Whether you’ve a blog or a business site, creating columns will enhance how you display information.

I love columns for the fact that it’s easier on eyes and better to read. There are many tools that can help you create outstanding columns. But nothing as easy as deploying them with simple code (no plugins).

That was all! Have you used to create columns on your website? Which tools have you tried? Did you find it easier with plugins or you prefer to code it on your own? Please let me know your thoughts in comments below.

I’ve covered everything – based on my experience – about creating stunning columns in WordPress without plugins. Don’t forget to share this useful article with those who may find it useful.