Documentation How To Create Columns In Posts

How To Create Columns In Posts

The CSS Way 

If you are only making columns within one post, you can do so manually using CSS within your post.

If you’re not familiar with CSS, you can read more about width, padding and float here. The way it displays may vary on your theme, so feel free to play around.

For two columns, you would do the following:

<div style="width:40%;padding:0 10pt 0 0;float:left;">
Column 1 info here
Column 1 info here
Column 1 info here
</div>

<div style="width:40%;padding:0 10pt 0 0;float:right;">
Column 2 info here
Column 2 info here
Column 2 info here
</div>

It will display like this:

Column 1 info here
Column 1 info here
Column 1 info here
Column 2 info here
Column 2 info here
Column 2 info here

 

 

For three columns, you would do the following:

 

<div style="width:30%;padding:0 10pt 0 0;float:left;">
Column 1 info here
Column 1 info here
Column 1 info here
</div>

<div style="width:30%;padding:0 10pt 0 0;float:left;">
Column 2 info here
Column 2 info here
Column 2 info here
</div>

<div style="width:30%;padding:0 10pt 0 0;float:right;">
Column 3 info here
Column 3 info here
Column 3 info here
</div>
It will display like this:
Column 1 info here
Column 1 info here
Column 1 info here
Column 2 info here
Column 2 info here
Column 2 info here
Column 3 info here
Column 3 info here
Column 3 info here

You may also need to wrap <div style=”clear:both;”></div> around content after the columns to prevent it from wrapping.

The Plugin Way

If you find yourself making columns frequently in blog posts, it’s worth it to enable the Column Shortcodes plugin, which helps you make columns easily.

Activate the Plugin

The Columns Shortcode plugin is already available to all VIPs. Simply ask the administrator on your account to go to VIP > Plugins in your dashboard to activate it. It just takes one click.

Creating Columns

Once the plugin is enabled, you will see a new button appear on top of your post editor:

column-shortcodes

When you click on it, it will give you multiple options to create two, three, four, five, and six columns. Clicking these will insert shortcodes to help you create columns.

column-shortcodes-2

How To Use Shortcodes

For example, if you’re looking to create three columns, you will use the following shortcodes. Note that the last column has a different shortcode.

[one_third]
Column A Content Here
Column A Second Line Here
Column A Third Line Here
Column A Fourth Line Here
[/one_third]

[one_third]
Column B Content Here
Column B Second Line Here
Column B Third Line Here
Column B Fourth Line Here
[/one_third]

[one_third_last]
Column C Content Here
Column C Second Line Here
Column C Third Line Here
Column C Fourth Line Here
[/one_third_last]

And it will display like this:

Column A Content Here
Column A Second Line Here
Column A Third Line Here
Column A Fourth Line Here
Column B Content Here
Column B Second Line Here
Column B Third Line Here
Column B Fourth Line Here
Column C Content Here
Column C Second Line Here
Column C Third Line Here
Column C Fourth Line Here