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?

22 Comments

  1. Antonela

    Dear Phil,
    I hope I am in the right place. I would like to purchase your WordPress theme Aquae, but I have a little question before I do. Is it possible to change the spacing between the featured posts on the front page? I would like to have a little room between the grid featured images, so that they are not “glued” together. Is it possible to customize that? Thanks in advance!

    1. Phil (pipdig)

      Hi Antonela, apologies for the slow reply. Your comment went into spam for some reason.

      Yes this is indeed possible. We can add some spacing between the images for you at no extra cost 🙂

  2. alana

    I am trying to add columns within the text of my post (I use the style & light theme), but cannot seem to get the column plugin to function. Is that feature blocked with this theme? Please let me know as I would really like to use this feature!

    1. Phil (pipdig)

      Hi Alana, this feature is available in all of our themes. However it is often easier to use a plugin to create the columns. You might like to try this plugin as an alternative.

  3. Alina

    Hi, can I have two columns layout (one with contact form and the other with image)? That would be great! I find the contact us form a bit too wide now..
    Thanks.

    1. Phil (pipdig)

      Hi Alina, this would be possible by moving the contact form into one of the shortcodes. For example:

      [left]Contact form code here[/left]
      [right]Something else here[/right]

      1. Alina

        Thanks Phil! Done!
        One more thing… How can I add spacing in this shortcode?
        Thanks again! I am really enjoying customising Maryline theme!

        1. Phil (pipdig)

          Glad you like the theme so far!

          Unfortunately it is not possible to change the spacing when using this shortcode. Instead, I’d actually recommend taking a different approach. You may wish to install a “page builder” plugin such as Beaver Builder or SiteOrigis. This allows you have full control over the columns/layouts on your pages.

    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.

  4. 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.

  5. 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?

  6. 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 and will not be shown publicly.
If you do not yet have a website, simply enter "none" in the box.