We write content here at Future Content, and we’re proud of the work we produce. But words without the right packaging are destined to fail.

Imagine watching the subtitles of a film without the visuals. They might tell a story but it’s not half as interesting, and there’s a good chance you’ll switch off before the opening scene is over.

The same goes for blogging. The way in which you present your article is just as important as the writing itself. So how should you lay out your post? Move your eyes downward, taking in the words as you go, and you’ll find out.

Top of the pops

We should explain at this juncture that we’re basing this info on WordPress, our personal CMS of choice. However, if you have a custom built CMS *shudder* or use Squarespace, Wix, Weebly or whatever, this info will still be useful. Promise.

So where to start? At the beginning is traditional, let’s do that: headline and featured image.

A WordPress featured image will usually either appear at the top of your post or as a thumbnail on your blog page, and will be the first thing a reader sees. For that reason, it’s crucial that you find a suitable pic for your article; but also an original one. This means looking beyond stock photography. Stock shots scream corporate, but also laziness. If you need help finding suitable pics, fear not, we’ve written a post to help.

Headlines appear at the top of the page automatically so no need to worry. We’re not here to talk about writing so we’ll leave you to write a stellar headline yourself (more help here), but what about a subheading? A few lines of blurb can be a nice way to introduce a piece, just make sure it stands out from the rest of the article. You could write it in caps, perhaps make it bold or maybe even use one of the ‘Heading’ dropdowns: try stuff out, see what works best in your chosen theme.

That’s a good point to make early on, actually: use the ‘Preview’ button well and often, your own eye is the most powerful tool in this process and, even if you’re not a designer or journo, you should be able to tell when something isn’t quite right.

Lay it out

To my mind, there are four elements to a blog post: Main text (the article itself), media (pics, videos, gifs), subheadings and pullquotes. The media, subheads and pullquotes should each go towards breaking up the text.

As such, none of these elements should sit next to each other throughout the article. So don’t put a picture directly next to a subheading. Don’t put a pullquote next to a gif. Think of it like this.

Layout

Because I’ve just inserted an image, it means that I’m going to write a few sentences here to break up the piece before the next subheading.

Let’s have a closer look at media: images, video and gifs.

Picture this

See what I mean about breaking up the text? Looks nice eh?

Anyway, let’s talk images, and something that too many people get utterly wrong: sizing. There are different ways to insert an image on WordPress. You can either save as a JPEG and upload to the media library, or you can go to ‘Text’ mode and add HTML code.

Whatever way you decide to add images, videos or gifs, please try and make them all the same size. For our posts, a width of 750 pixels is perfect. It might be different for your particular blog, the best thing to do is use that ‘Preview’ button to see what it looks like on the page.

How do you change the size of a picture? You could download a free pic editor like GIMP. Windows users can even use Paint. Simply load a pic, click on resize, and change the pixel width to your required width, the height will automatically change to keep the aspect ratio the same. Easy. Mac users, yes Preview is hugely limited, but you can still change the size of pictures. So, y’know, do that.

Good Job

Image right: Good copy needs the right layout to make it work (Image credit: Steven Dipolo via Flickr)

If you’re adding a picture for decoration, make sure you include a caption too. An image just dangling in the middle of some text is out of place without some frame of reference. A word of warning though, don’t bother with WordPress’ own caption functionality, it’s bloody awful.

Simply make sure your image is centred, centre the text beneath it and write your caption. First off is the ‘kicker’ – two or three words to bring some link between the pic and the article – and then the caption itself. We like to present the kicker in bold and the caption in italic e.g.

Pic of the bunch: Images in blog posts should be striking, original and relevant

If you’re writing an interview piece, it pays to include a headshot of the interviewee at the top of the page to personalise it. People like to put a face to the words. With headshots, it is better to make the picture smaller and align it to the right. The correct sizing will be determined by your specific theme.

With YouTube and Vimeo videos, WordPress will recognise the URL posted directly into the copy and will resize the video automatically. This is what happens when I post the URL on this post.

Perfect.

However, this isn’t always the case (again, ‘Preview’ to find out). If your video doesn’t fit the width of the post you’ll need to copy the embed code and resize the screen manually. How?

Steps:
1. Find a suitable video.
2. Click on the Share button.
3. Click on the Embed tab just below Share (circled in the pic below).
4. Copy the HTML code highlighted in blue.
5. Head back to WordPress and enter the code at the relevant place in your post.

Dog backflips

This is the code of the video above.

<iframe width=”560″ height=”315″ src=”https://www.youtube.com/embed/fAUl6z7XKlY” frameborder=”0″ allowfullscreen></iframe>

You may not be HTML savvy, but you’ll still notice the dimensions width=”560″ height=”315″. This is the all-important pixel width (and height). I mentioned earlier our sweet spot for picture width is 750 pixels so I need to change these figures manually.

I want to keep the same aspect ratio something I mentioned that Paint automatically does, thus I know if I change the width to 750 pixels, I need to change the height to 421. It’s a mild faff the first time you do it, but this little bit of effort means you have all the info you need for future posts.

This info goes for gifs, pics and videos. Another subhead I think…

Sub-tastic

Subheads are a nice clear way to break up your perfect prose and introduce a new theme to your post. Generally speaking, a post should make three or four main points and a subhead should introduce each one. Huge bulks of text are a massive turn off. I mean, look at books, yawn.

Seriously though, for most people who read your blog posts, time is of the essence and being confronted by a wall of words is intimidating and likely to result in a buggering off.

On a similar note, avoid long, meandering paragraphs for the same reason. Look at this section here, one or two sentences per paragraph. Well, three now but you get the gist. Make your points easy to digest. Four. Bugger.

Important decoration

On top of pics and subheads, what else brings a post alive?

  • Social media share buttons: If people like what they read, they might want to tell people about it. Give them every opportunity. Up to you whether you put them at the top or the bottom of the page, or indeed both. Do you need all social media channels represented or just the ones you’re targeting? We’re inclined to say the latter. We don’t use Pinterest at all for instance, so we don’t offer that as a share option.
  • You may like: You’ll have noticed one of these earlier on in this post. If someone jumps on to a specific post and doesn’t really fancy reading on, this gives them the opportunity to jump into another article. We like to place these jump-offs early on in the piece and, like subheads, pics and pullquotes, they should be used to break up the text.
  • Bullet points: Like these. If you have a list of tips or short, sharp points to make, bullet points are perfect. They add another dynamic to the text and keep the eyes interested.
  • CTA: The all important call to action. Do you want people to get in touch? Sign up to your newsletter? Follow you on social media? The thrust of the article should inform your CTA. For this particular post, we’d like people to know that we offer publishing support for our clients, so we’ll include that, plus a link to the ‘Contact Us’ page. And more often than not we’ll invite people to follow us on social media too. Make sure you add hyperlinks, and italicise the CTA to create a clear distinction from the article.
  • Pullquotes: We tend to only include pullquotes with original interviews: quoting your own words seems a little narcissistic. Pullquotes should be used in the same way as subheadings and media so don’t put one next to a pic, for instance.

So there we have it, the complete guide to making your blog posts look the business. Remember, while style over substance is to be avoided at all costs, the most substantial and insightful blog post will be overlooked if you neglect the style.

As well as engaging content, Future Content also offers publishing support, social media headlines, images and much more. To find out more, get in touch. And come say hello on Twitter and Facebook too.