WordPress: How to create 2 column layouts

Note: this shortcode can help you to create 2 column layouts in a quick and easy way. If you would like to create more advanced layouts/columns then you may wish to try using a plugin.

Using any pipdig theme, it is possible to float text/images to the left/right using our custom shortcodes.  See below for an example:

To do this, simply wrap content in the two shortcodes below:

Note: Please ensure that the second shortcode includes the closing “/” symbol. e.g. [/left]

By using these shortcodes you can ensure that your layouts are 100% responsive, working perfectly on mobiles too.

Was this article helpful?

13 Comments

    1. Phil (pipdig)

      Hi Lara, this site has used a combination of WooCommerce and Shopstyle to create this. I think Shopstyle offer their own widget to display products ina grid without WooCommerce too.

  1. Fee

    Hey,

    can I also use this shortcode to display to pictures side by side in one line?
    Or would you recommend using a certain gallery plugin for that?

    Thinking about purchasing the blossom theme. (self hosted / wordpress.org webpage)

    1. Phil (pipdig)

      Hi Fee, yes that’s certainly possible. You could use this feature to place two images side by side. Or alternatively you could edit the 2 images into a single image side by side, then upload it as one image.

  2. Amber

    I am using wordpress and want to have side by side images, however when I use the short cut my images become small. Is there a way to keep them 800 by 1199 and use the layout tool ?

    1. Phil (pipdig)

      Hi Amber, the images will fill 50% of the page side by side. This means they are limited to how wide the page itself is. You may wish to increase the width of your site via this guide to see if that helps.

      1. Amber

        If there a way to create 3 or more column layouts, for an imagine gallery page?

  3. April

    I have a question. Right now my blog pictures are set to full width, but sometimes I want to have two pictures side by side (but still line up with the full width photo). How can I do this?

    1. Phil (pipdig)

      Hi April, the best way to do this on Blogger/Blogspot is to edit the images into a single image before uploading. For example, you could create a single image which shows the two images side by side, then upload this to the blog post as if it were just a normal image.

      In case anyone using WordPress reads this comment, the best way to do that would be to use this shortcode.

    1. Phil (pipdig)

      Hi Ulu, this post layout is not currently available in the Blossom theme unfortunately. The website you have linked to is using the Holly & Weave theme.

      1. Ulu H

        Thank you for the quick response. I’m still customizing my website and the help is much appreciated.

Leave a comment


The link to your website will be visible to support staff only. It will not be shown publicly.