You’ve probably seen those fab posts where big-time fashion bloggers post a great collage of their street style photos in a big, bright, full-width blog post. I’ve had several requests by my own big-time blogger clients about how to do this, and it’s actually pretty easy, and no, you don’t have to be pulling in $5k a month from sponsored posts on Instagram to pull it off! Here is my step-by-step guide to adding columns in a blog post (or page). Please enjoy the video or if you prefer screenshots keep scrolling:
Step 1:
You want to install 2 plugins to help you out. If you don’t know how to install a plugin in WordPress, you can view my tutorial here. The plugins are:
1. CSS Plus (available here) if you’re searching in your WordPress dashboard, the plugin author is Paulo Calixto, this will help you pick the right plugin if multiple plugins appear in your search)
2. The other is Column Shortcodes (available here) by Codepress
Step 2:
Create a new post. For the purpose of this tutorial, we will do one large photo followed by 2 smaller ones. One of the keys to having your post look good is to use extra large images. This tutorial will not work well with regular size photos saved from Pinterest or other blogs. The ideal size for your photos is at least 1500 px wide (this is approximately the width of a full page on your blog or website. So go to Posts > Add New, title your post and click the Add Media button to upload your first photo.
Be sure you set your photo to be full-size.
Step 3:
The next step will add the next 2 photos in columns. Most people use a large landscape, or horizontally-oriented photo for the first photo. The photos in the columns are generally portrait, or vertically-oriented. One key here is to make sure that the side by side photos are the same size and proportions. This is where a program like Photoshop Elements (the stripped down version of Photoshop) or an image editor like Picmonkey.com can come in super handy. If you want to use Picmonkey, go to to Picmonkey.com and click on the Edit button at the top (you don’t need an account)
Select the Crop option after uploading your photo. You just need to make sure that both of your photos that will sit side by side are the same width and height. Once again, the larger the photos are, the better off you are. Photos at least 1000 px wide will work best for this tutorial.
Step 4:
To put your photos in columns, all you have to do is to click on the [ ] button next to the Add Media button in your blog post. So place your cursor right below the full-width photo you have just uploaded, and click the [ ] button.
Step 5:
This will insert the column code. So first, set the padding to 1 (you can change this later). Then select one half from the column list on the left.
When you go back to your blog post, you will now see a line of code that looks like this:
Now, just place your cursor between the two column shortcodes like so:
Step 6:
Now, just repeat this step to add your second column. Place your cursor directly after the line of code you just added, and click on the [ ] button again. Follow the steps from Step 5 except this time select the One Half Last option.
Place your cursor between the code again, and add your second column photo:
Done! Your two columns are added. Now, to add the final full-width photo, just do a Shift + Enter to move your cursor to the next line without adding a space. Upload your final full-width photo. When you hit Preview, your post will look something like this:
Now, 2 final extras. One, if you would like your blog post to appear as a full page rather than half of the page with sidebars, just scroll down in your post editor to Layout Settings, and click the full width option:
And finally, you may notice extra spacing above or below your full-width images (if you are using the image sizes specified above, you won’t have this problem, but if your images are not quite full sized, you might want to take one extra step and adjust the margins). Adjusting the margins on your top or bottom photo can help. To do this, we will use the CSS Plus plugin. So, on the screenshot above, there is a little bit of extra space between the first photo and the second two-column photos. To adjust this, in your post editor, click on the pencil icon to bring up the image editor:
Then, just add an image class to your photo by typing something the Image CSS Class box. You can name it anything but it should have no spaces. Try for example, “postphoto”
Click the blue Update button in lower left corner to save. Now, just scroll down to the very bottom of your post editor page. In the yellow box that says CSS, add the following code:
.postphoto { margin-bottom: -20px; }
It should look like so:
What this does is remove the white space (decrease the margin) from your first photo which will pull the 2 columns closer to the top photo. Alternately if you want to add more space, just remove the – sign, code will look like this:
.postphoto { margin-bottom: 20px; }
You can adjust the spacing as needed. If you are using full-size photos you will not need to adjust at all. And finally, to increase or decrease the white space between your columns, go back to Step 5. See where it says:
If you increase the px, you will get more padding, or white space. So if you want 5px of padding, just change the above code to:
If you want to increase the padding on the left or right of the columns only, change it to this:
In CSS, padding is always set as top, right, bottom, left. So in the above code, 1px is the padding, or white space above the photo, 5px is the white space to the right of the photo, 1px is the padding below the photo, and 5px is the padding to the left of the photo.
The key to this tutorial is to have the willingness and patience to play around and tweak it. There’s a reason that really, big, famous bloggers make a lot of money, they devote care and time to their posts. I’m not too picky about my own blog posts, but if you are looking to take your posts a step further, hopefully this tutorial will move you in the right direction! Have a question? Leave a comment below and I’ll be happy to answer it!
