The Anatomy Of High-Converting Blog Page Layout [with Infographic]

This post is a finalist in our Ultimate Guides Contest. Show your support for this, or any of the finalists by commenting, sharing and joining the conversation!

How efficient is your blog?

You spend countless hours writing amazing articles. And then you go out and work even harder to promote them.

“Get more visitors” – that’s the goal that pushes you forward. The more visitors you have, the bigger the authority you are and the more money you make.

What bloggers quite often neglect is how to funnel all these visitors in the most efficient way.

For example, one day you might discover that your friend, who has just as many visitors on his blog as you do, makes twice as much money with it.

It’s as if you had to fill two identical bottles with water, but yours would have a few holes in it.

Those holes need to be fixed.

So in this guide, I’m presenting my vision of a perfectly efficient and high-converting blog page layout.

And I’ve created a neat infographic to illustrate my points. But before I show it to you, I want to talk about your blogging goals.

The truth is, there’s no way to determine if your blog is efficient or not, unless you know what your blogging goals are.

Why “Visitors” Shouldn’t Be Your Goal

One of the first things that we learn as bloggers is how to bring visitors to our blog. And naturally, we’re always happy to see that the number of visits to our blog has increased.

But “visits” is often called a “vanity metric” in Lean Analytics. In other words, it doesn’t tell you if your blog is good or bad.  All it says is that some people have visited it.

I mean, anyone with a huge following can post a tweet saying “Take a look at this blogger, rofl – http://your-precious-blog.com” and you will get a spike of visits in your Google Analytics. Will you be happy about it?

It’s not about the number of the visitors you get, it’s about how they help you achieve your blogging goals.

Disprove me if I’m wrong, but I know only two general goals that most bloggers pursue: building authority for themselves and making money.

If you’re blogging “just for fun,” you will either quit soon or realise you need some goal to continue.

So how does this apply to the layout of your blog pages?

You should treat every page of your blog like it’s a landing page optimized to bring more authority and more money to your blog.

With this thought in mind, let me present:

The Anatomy Of High-Converting Blog Page Layout

The infographic that you see below represents the perfect blog page layout. Every element on the page has its own purpose and it’s crucial that you understand how they all work together.

1. Header

Since most people in the world prefer to view web pages from top to bottom, header is the very first thing they see on your website.

This is the where you give your website its personality and uniqueness. But not only that…

1.1 Logo

There’s a reason why big companies spend billions of dollars (literally) on their logos. You see, visitors are known to make snap judgements about your website in the first few seconds.

These judgements are solely based on design. Your logo is one of the first design elements that people will notice.

It communicates something about you to your visitors way before your written words do. If it’s stylish and professional, people will feel that your blog is a trusted resource and they’ll be more likely to stick around.

And if you’re are familiar with neuro-linguistic programming (NLP), you may know that logo can become a visual anchor for those who visit your site for the first time.

A lot of people will land on your blog just by accident and forget about it the same day. But once they stumble upon it again and again, your logo and website design that will tell them “you’ve been here before“. That’s one of the ways anchors work in NLP.

If you’re into branding and visual communications, there are some cool threads about logos on Quora that I recommend you to check.

Should I even announce that the takeaway here is to invest some money into a good-looking and memorable logo for your blog?

1.2 Tagline

This is a short phrase that briefly explains what your blog is all about. In most cases, people place this tagline right under their logo.

Try to sum up all the content of your blog in a few words. This will help people to understand if they’re in the right place.

The tagline of Mirasee is a perfect example.

1.3 Banners / Ads

Ads are one of the easiest ways to make money.

Some bloggers will put big banners in the header of their blog. The reasoning is simple: it’s one of the most prominent places on a page and the click-through rate (CTR) here is quite high (more clicks = more money).

You can also improve the CTR of your banners by following some best practices in designing them. But still I believe the key is their relevancy. If your ad is relevant to the article that people came looking for, it’ll work like a charm.

I didn’t give the banner section many authority points because generally ads are known to irritate visitors. But if you’re promoting your own products, the effect would be exactly the opposite.

PRO TIP: you may want to rotate different banners in your header to track which one has the best CTR. I think there are a few plugins for WordPress that will do this for you.

1.4 Main Menu

This is your chance to funnel those visitors deeper into your blog and towards your goals.

If your blog were a book, your main menu would’ve been its table of contents. But with one distinction – you should foresee what your website visitors want to read (to do) and give them exactly that.

It’s not that hard to guess that your visitors may want to find out who you are or contact you. That’s why About and Contact buttons are always a must.

What else should you include?

Well, another logical assumption is that your visitors will probably want to find all of your best stuff right on their first visit, without having to dig deep into you archives.

That is why the New? Start here! button has become very popular these days.

This is your chance to give people a brief roundup of your blog and to funnel them towards your best articles and best offers.

What else?

Have you ever heard of resource pages? It’s when you take a certain topic and list all posts you have on your blog about that topic on one page. This is a great way to quickly funnel people towards the content they’re looking for. You should definitely add some resource pages to your Main Menu.

Other than that, you can easily use resource pages to make money.

Here’s a quick example:

1. Take all your gear reviews with affiliate links to Amazon

2. List them on one “resource page” along with some info

3. Call it “Recommended Gear”

4. Add a link to this page to your main menu

This way people won’t have to dive deep into your blog to find these reviews and purchase the items. They are just one click away.

All in all, your blog menu is an extremely important part of your page layout – so learn to make the most of it!

Case Study: When I was running a photography blog called “Photodoto,” our main menu was simply filtering the main feed of articles into four categories. This didn’t really help people to find the best content, since it was still buried too deep.

So we decided to create “recourse pages” for each category and list our best content there, to make things easier for people. As a result – reader engagement went up!

2. Article

This is why people are visiting your page in the first place. You may be the best copywriter in the world, but you may lose a big portion of your readers if you don’t follow a few well known principles.

2.1 Headline

Headline is what draws the visitor into reading the rest of your page. So it’s no surprise that it should be among the first elements that a person will notice.

Design experts suggest that you should have a clear typographic hierarchy on your page with headline carrying the most weight.

There are a few ways you can outline this hierarchy:

• Font Typeface

• Font Size

• Font Color

• Whitespace around it

And of course, the actual text of your headline matters the most. But since this is not a copywriting guide, I will just leave you with the link to an awesome “Headline Hacks Report” and that’s it.

2.2 Banners / Ads / Visuals

Arguably the best place for a banner ad is right after the headline, side by side with the first paragraph of your article. Visitors are forced to notice it, since the law of proximity suggests that this banner is related to the copy which is right next to it.

On one hand, this may really irritate your readers. But on the other hand, you get the highest possible CTR.

Alternatively, you can use a visual, to support your headline and better illustrate what your article is all about.

At Photodoto we used to call such visuals “post covers” or “intro images”. If designed well, they can spread nicely on Pinterest.

2.3 Paragraphs of Text

It’s great if your copy is engaging and interesting. But it’s even better if it is designed to be easy to read.

Derek Halpern suggests that the optimal width of your content is between 480 and 600 pixels.

Go wider than that and it will be too tiring for the eyes of your readers.

Go thinner and people will be forced to scroll more, which is also irritating.

You should also split your copy into short paragraphs of text. Readers are very reluctant to read big chunks of text unless their life depends on it.

PRO TIP: A study (Lin, 2004) found that good use of white space between paragraphs and in the left and right margins increases comprehension by almost 20%. Readers find it easier to focus on and process generously spaced content.

And the font! Make sure you’re using a big enough font for your content. As our screens get bigger and pixels get smaller the old font sizes become less readable.

2.4 Links to Other Articles on Your Blog

This is really one of the best ways to turn random visitors into regular readers (and maybe even fans).

The fact that a person is reading your article means that he is lacking some good information on this topic. That also means he is highly motivated to click on other relevant resources you might suggest.

Use this to your advantage and reference your own articles or some affiliate products.

The key here is to focus on bringing value to your readers and not on trying to benefit at all costs. Only mention stuff if it’s beneficial to your readers, not you.

2.5 Social Sharing Buttons

It is my personal belief that the social sharing buttons should be “floating” next to your article all the time as you scroll down the page.

One of the pillars of success in getting lots of social shares is making it easy for readers to share your article. The floating box with social buttons does just that.

And if you have some solid shares on your articles, a floating box guarantees that your visitors will always see that and realise how popular your content is. This is called social proof, which clearly makes you an authority.

3. Below the Article

Only a fraction of all your visitors will actually read your article from start to finish, no matter how good it is.

But those people who read it are your most loyal visitors and they are very likely to take some further actions on your blog. So it’s your job is to funnel them towards those further actions.

Here’s how:

3.1 Author Box

The vast majority of people online are extremely lazy and their attention span is awful. So you shouldn’t expect them to scroll back to the top of your page and search for your “About” button just because they’ve developed an interest in you.

That’s why lots of bloggers put an “author box” right where the article ends.

Here’s a brief recap of cool stuff you can do with your author box:

• Show your face to your visitors, which adds some credibility and makes the communication more personal;

• Give them a brief overview on who you are and what’s cool and unique about you, to make them interested in you;

• Give some links on how to subscribe to your blog or ways get in touch with you (Twitter, Facebook, Email);

• Mention your best products or services that you offer.

Other than that, a neatly designed author box will motivate other bloggers to submit guest posts at your blog, because this way they will be able to get their hands on all the benefits that your author box offers.

3.2 Email Capture Form

Like I already said, those of your visitors who just finished reading your article are kind of “nurtured” towards taking further actions.

This is the perfect time to grab their email address and run (just kidding).

You may add a simple email capture form that says “Subscribe for updates” right below the author box, but it would be much more effective to offer some more value in exchange to the emails of your visitors.

This could be:

• a free ebook, that people will get upon subscribing

• a cool email course, that is absolutely free

• a free copy of your product or a huge discount

In case you don’t have enough technical knowledge to set up this kind of email capture form, I suggest you to take a look at OptinSkin by Glen Allsop.

I use it on my own blog and it only took me a few minutes to install and configure .

Oh, and in case you’re wondering why the money indicator shows five stars here – As they say: “The money is in the list“. By growing your email list you’re growing your potential income.

3.3 Related Read

This block is very similar to “2.4 Links to other articles on your blog”. And this is yet another chance to offer your readers another chance to read a few more of your articles.

There are tons of free plugins for WordPress that will generate this block for you. Some of them will only display the headlines of related articles, some will add the images (which should somewhat improve the CTR), and some will also display number of comments & likes next to each article.

I suggest you to try a few different plugins and see which of them is the best in driving people in.

3.4 Comments Section

Make sure your comments section looks nice and people can easily leave messages there.

Most of the time, a person who has left a comment will come back later to see if his comment was answered by someone. This is his first step towards becoming a part of your community.

I’m using DISQUS on my own blog and my gut tell me that lots of people don’t leave comments on my articles. Te DISQUS system looks too cluttered and complicated.

Before you install a third party commenting system on your blog, make sure it doesn’t actually make it harder for people to leave comments.

4. Sidebar

This is a very important part of page layout that has tons of opportunities. In my opinion, many bloggers misuse it.

4.1 Welcome Message

On some blogs of well known guys you may notice a short personal message along with the profile picture at the top of their sidebar.

This is a perfect way to greet people at your blog and tell them what is so special about it (consider this to be a more detailed version of your tagline).

In case you’re wondering what’s the difference between this and your author box – the author box should focus on who you are, while the “welcome message” should focus on what your blog is all about.

And after all, it’s always great to know from the start who the author of the blog is and what he or she looks like.

4.2 Email Capture Form

The closer something is to the top of your sidebar, the more prominent and visible it is.

For me, my top priority is turning random visitors of my blog into active members of my community. That is why I prefer to place lead capture forms in my sidebar above anything else (except for my welcome message).

I’ve already shared my take on email forms in section 3.2, so I guess there’s no point in repeating myself.

Just make sure your form looks cool and has a compelling offer. That’s it.

4.3 Resources / Popular Articles

In the Main Menu section (1.4, for those of you who were counting) I was talking a lot about the so-called “resource pages” and why they are such an essential element of your blog.

Well, you know what? They are so essential that you should feature them again in your sidebar. This way people have less chances to miss them.

Go take a look how Pat Flynn from SmartPassiveIncome treats his resource pages. He sure knows how important they are.

And speaking of the “popular articles” section . . .

That is a perfect social proof to showcase your best articles along with how many comments and shares they got. It sure motivates people to check what the buzz is all about. And if they love your articles, they will most likely stick with you.

4.4 Banners / Ads

The deeper you bury certain things in your sidebar, the less visibility they eventually get. But in if you get paid for your ads based on the number of times they were displayed on your page, it shouldn’t bother you too much.

However, if you’re really interested in people clicking on your ads (for example, if you’re promoting your own product ), you should think of moving them higher in your sidebar.

5. Footer

I’d call you footer your last resort. If people ignored all stuff you have on the page above it, they are unlikely to get driven in by something you have in your footer. But you never know . . .

5.1 Copy of Main Menu

This block refers to the basics of making your website user-friendly. Lots of people are used to looking for your  main menu in the footer of your website.

Most of the time, this menu will have more links than the original one. Often it includes some very specific ones, like “privacy policy” or “disclaimer”.

5.2 Ways to Connect

I didn’t mention the buttons that lead to your social profiles in any of the above sections because I sincerely believe you should be laser focused on what’s truly important.

And the amount of your twitter followers is obviously not as important as the size of your email list.

And besides, “less is more.” The fewer options you give people to connect to you, the more likely they are to pick one. At least that’s what Barry Schwartz says (and he’s damn convincing, if you ask me).

So that’s why I suggest you to put all your social profiles in the footer of your website. Those who decide to follow you on Twitter will still easily find the button, right?

Afterword

So the whole point of this article and the infographic was to demonstrate you how certain parts of your page layout help you to reach your blogging goals, which are: make visitors perceive you as an authority and help you to make money.

And once you get everything in place, the next logical step would be to track how it all performs.

If your analytics will show that a certain module doesn’t perform well – you should either get rid of it or replace it with something else.

Of course, I’ve taken out one element that is highly effective and highly controversial at the same time.

I’m talking about popup email forms.

But before you start hating me for even bringing this up, I want to mention that lots of A-list bloggers use them on their blogs. Maybe you should just learn how to create popup forms that don’t irritate your visitors?

So I guess that’s it.

Leave a comment below and let me know a what you think of the Page Layout Anatomy.  How many of the modules are present on your blog?