blog

How to Create Columns in your WordPress Post

i Image Via:@chloedigital

Columns look enticing, especially when you have a lot of content and images to display on one page. Columns give your blog this stylish pro-outlet look and make your content more engaging to view.

Ever wondered how it’s done in WordPress? Simplish enough. Just follow the steps in this tutorial and you’ll end up with a magazine-styled post on your blog!

Creating Columns with Codepress Plugin

The easiest ways to create columns is to install and use Column Shortcodes plugin by Codepress. Login to your dashboard, find the plugin via search, install and activate it.

Now, you are powered up with 10 different column shortcodes, allowing you to mix and match different layouts.  You’ll see a new button at the right top corner of post editor screen, next to Add Media button, click this to start using the column shortcodes.

column kitchen sink example

Here is a closer look at the styling options:

column plugin example

Full-width – displays your content the usual way.

One half – creates two equal columns. Use the first option to fill in the content in the left column and the second one to fill in the right column.

If you need to create more narrow columns, choose one third, one fourth, one fifth or the one sixth layout.  If you need wider columns have a look at two third, three fourth and so on.

Here’s how a text looks like with a fist paragraph styled with one fourth:

column example with image

The plugin will automatically generate a simple shortcode. All you have to do is simply paste the paragraph or image you want inside it:

column example

Pro tip: If you want to style a text paragraph inside the shortcode e.g. justify the text, make sure you apply the function only to the texts, not the shortcode!

column example in the code

This plugin allows creating numerous layout options, so toy around a bit and test drive all the options available.

Additionally, the plugin allows adding custom padding to each column type. Just set a number in pixels in the column padding area at the right to make it even prettier.

2 Comments

Leave a Reply

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

Time limit is exhausted. Please reload CAPTCHA.