How to Add Multiple Columns in WordPress Posts? – 3 Easy Ways

Spread the love

We have observed that many beginner level users fall a step backward when they want to create multiple columns in a WordPress Post. As WordPress does not have a built-in mechanism to create multiple columns, beginner level users tend to avoid writing in multiple columns.

WordPress beginners used to create tables for displaying multiple columns in a post, but that is absolutely not required.

But, trust us, it is quite easy to create and show multiple columns in a post or page. In fact, there are multiple ways to do that. We will discuss 3 of them below.

Here, in this tutorial, we will discuss 3 easy ways to create columns in a WordPress Post. First, by a Designer plugin, second, using a basic column plugin, and third, using HTML/CSS codes.

Creating Multiple Columns With Designer Plugin:


Though you can use any page designer plugin, I personally use Page Builder by SiteOrigin as it is super easy to use.  Just install the page builder plugin and go to the new post page.

[If you need help in installing plugins then please follow our guide: How to Install and Manage Plugins in WordPress]

Click on the Page builder tab:

WordPress Page Builder Tab

Click “Add Row” Button, set the number of columns you want to add and the width in percentage, and then click Insert.

Add Row and Column in Page Builder

According to your need, now you can now add widgets to the columns and you are good to go.

Adding WordPress Page Builder Widgets

To customize some of the look and feel of those columns (like default padding, margin etc.), you can go to Settings ⇒Page Builder and customize those values. Generally, the default values are good enough to fit the need of most users.

Page Builder Settings

Creating Multiple Columns With a Basic Plugin:


To do that you need to install Advanced WP Columns plugin from WordPress plugins directory. Though this plugin is last updated 2 years ago, it still works perfectly. [ake a backup before installing the plug, just in case!]

Upon activating the plugin, go to the visual editor. Here, you will find a menu button for the advance WP columns.

Advanced WP Columns Button

Click on the button and to start customizing those columns.

Advanced WP Columns Menu

The user interface is very simple and allows you to easily create multi-column layouts. You can click on the drop-down to choose from two, three, or four columns layouts etc. You can also drag and drop the Add button to the columns bar to add a new column and then adjust the column width by dragging the handles on the column bar.

Similarly, you can drag and drop the Remove button to the column to delete a column.

WP Multiple Columns Formatting Options

The primary advantage of this plugin is that you can directly write text into those columns right from WP Advanced Columns user interface. Thus, it acts as a preview of how your columns would look like. Once you are done, you can click on the "add columns" button to add them to your post or page.

If further advanced customization, you can go to Settings ⇒ Advanced WP Columns and customize those values. Usually, the default values are good enough to fit the need of most users.

WP multiple columns settings

Creating Multiple Columns Using HTML and CSS:


Sometimes it gets essential for you to create columns directly using HTML codes. To achieve this there are two steps. One to create those actual columns and second is to format those columns. So…

Step1: Creating Columns with HTML.

To create columns you have to add these codes given below (showing for two columns):


<div class="row">

<div class="column"></div>

<div class="column"></div>

</div>

Step2: Formatting those Columns using CSS (Optional)


/* Left bound columns with equal width */

.column {

float: left;

width: 50%;

}

/* Clear floats after the columns */

.row:after {

content: "";

display: table;

clear: both;

}

We hope that you have enjoyed the above article describing how to add multiple columns in WordPress Posts. Be with us to explore free training on Leading Technologies and Certifications.

Leave us some comments if you have any questions or need further help on the above topic, we will be happy to help you.

If you like our articles please like our facebook and twitter page to receive notifications on recent and updated contents.


Spread the love
Posted in WordPress Tutorial and tagged , .

I'm passionate about Information Technology & spreading my knowledge makes me happy. I Have MBA(IS), ITIL, PRINCE2, CCNA, CCNP, MCSA, MS Hyper-V Certifications, and Trained in PMP, CCIE. And also have 10+ Yrs of Work Experience.
I wish you all the best in your career !!!!

Leave a Reply

avatar
  Subscribe  
Notify of