How to Create Columns in Pages

How to create columns in your WordPress Pages and Posts

Do you want to format your pages easily so that you have text divided into columns? Or perhaps put an image next to a text block? Would you also like to have these columns mobile responsive? Yup, me too!

Here’s your super easy/wish-you-found-it-sooner solution: Column Shortcodes!

What does this plugin do?

The plugin allows you to break your content easily into columns using a shortcode within posts, pages and other content. If you want to put two vertical images next to each other, you will use this shortcode.

How to Set It Up

Install and activate the plugin. Once you do, you’ll see a new icon at the top of your visual editor. When you click this icon, you will see a pop-up list of column shortcodes to select. These shortcodes will fraction off your post. So if you want two columns, you would use halves.

The last fraction you utilized in a row should be “(last)”. It will look like this [fraction_last].  This structure is critical because it closes the row.

You can adjust the padding to give space in between your images.

Where Is This Plugin Used

I have used this plugin on several different websites for clients, as well as my own. I particularly like to use it for clients, because it makes it extremely easy for them to update text and images. Essentially, you can use this plugin on any post type – pages, posts, portfolio listings, and product listings:

You don’t have to use equal fractions too! In my services page, I’ve used a third with two-thirds. You can get creative! I have included a few different screenshots below, as it is pretty straight-forward to use.

Column Shortcode Button in Post Editor

Column Shortcode Button in Post Editor

Select a Column Shortcode

Select a Column Shortcode

Example of How Shortcodes Look In Blog Posts

Example of How Shortcodes Look In Visual Blog Post Editor

End Result of Using Column Shortcodes

End Result of Using Column Shortcodes

Make sure to check out the documentation within the Plugin Directory for more information if you get stuck!

  • Meet Lindsay Humes

    Hi! I’m the designer and owner behind White Oak Creative. I partner with creative entrepreneurs, lifestyle publishers and content creators to design the best brand identity to grow their audience and brand. My blog is full of resources on Branding, WordPress, SEO, and more!

    Subscribe to the Design to Grow Newsletter

    8 thoughts on “How to Create Columns in Pages

    1. CB

      Any tips on how to middle align the content vertically? like, if i have an image in one column and just a little text in the column next to it, i’d like it to vertically align the text to the middle of the column instead of the top.

      Reply
      1. Lindsay Humes Post author

        I know how to do within code, but within a post or page it is a little difficult because of responsiveness. Within a page you either want to use flexboxes or display: table with vertical-align:middle in your css to get it that way. Unfortunately, it is kind of complicated, you would need to know code.

        Reply
    2. Samantha

      Thanks Lindsay! This is such a helpful post. I am going to install this plugin and try using it. Hope you are having g great time in Cali! 😎
      ~Samantha

      Reply
    3. Stefan van den Dungen Gronovius

      Hi Lindsay,

      I found this article by searching on WordPress and Admin Columns (our main plugin) but found this post instead.
      I’m one of the authors of Column Shortcodes and like to thank you for this post.
      Of course we are happy to see that you use and like our plugin and even write an article about it. If you like this plugin, maybe you can have a look at our plugin Admin Columns 😉

      Reply
      1. Lindsay Humes Post author

        Thanks for your comment, Stefan! Column Shortcodes is definitely a favorite tool for me to use with my clients. Will definitely check out Admin Columns!

        Reply

    Leave a Reply

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