When it comes to designing landing pages, we used to do everything manually.

You would need to map out what it was going to be, send it to a graphic designer, wait for the design to come back… the whole thing taking weeks from start to finish.

Now, with the support of some helpful landing page tools like ClickFunnels and LeadPages you can do what used to effectively take weeks in a day, or even a couple of hours.

This has made the barrier to entry significantly smaller, which means that more people can easily create slick looking landing pages without investing a lot of money. So to standout from your competitors, you need to know exactly what elements make for a high-converting landing page.

Today I want to share with you 14 essential components for creating a landing page that will convert more website visitors into leads.

Let’s get started…

1. Market Callout

Market callout is where you want to gain the attention of your ideal audience or market and speak to them specifically.

The market callout can be a part of the headline, but it’s not always necessarily.

Below is an example of a landing page in the weight loss space, Food Lovers;

In this example they have done their market callout by the way of a headline, but also through the images they use.

They are talking directly to people who want to lose weight but still want to eat the foods that they love.

In another example, 20Dollar Banners are clearly talking to online marketers;

It’s clear in the headline, it’s clear in the text and it’s very clear in the images that they use.

In the 20Dollar Banners example, they really answer the WIIFM (what’s in it for me) question. A website visitor who lands on this page will know exactly what they can get from this business.

2. Clear & Concise

The second thing to think about is whether your landing page is clear and concise.

To be clear and concise you need to have one message and one offer, that’s it.

I remember when Bret Thompson and I were working for Mal Emery, and basically, we were doing hundreds and hundreds of landing page split tests. One of the things we tested was “What if we throw the kitchen sink at them?” (meaning give them multiple components in the free offer)

We decided to try and give visitors everything we had on one landing page, reports, videos and so on. We thought at the time this was great.

But it only converted at about 16%…

As soon as we scaled it back and offered one very clear and concise report and message, the conversion rate of that page jumped to over 40%.

What this means is that a landing page should really be about ONE offer, that one thing you want to give away in exchange for your prospect’s details.

Below is an example of our highest converting landing page here at the Collective;

There are a number of elements on this page that contribute to its high conversion rate, but really it’s because it has one specific offer.

Do you want to grab the Facebook Ads Swipe File, or don’t you? It’s that simple.

The offer in this example is very obvious, and the rest of the landing page is clear and concise about delivering that offer.

If I was to make a comparison to a landing page that wasn’t clear and concise, it would be this one;

This landing page just has so much going on that it is hard for a visitor to decide what offer to choose, or where to look.

This poor example is not specific enough, and would most likely result in a low conversion rate.

3. 5 Second Test

Essentially you want people to arrive at your page and understand what you are communicating and offering within 5 seconds. Otherwise you are going to lose their attention and they will leave.

Let’s look at an example from Click Funnels;

In this example Click Funnels are telling the visitor that they can ‘Easily Create Sales Funnels That Convert’, and then on the button at the bottom where they can go to create their account. There’s no ambiguity about what action a new visitor should take when they’re on that page.

Here’s another ‘not so good’ example;

It’s talking about a 12-week program which is kind of lost in amongst a bunch of other stuff. And then there are several buttons, so it’s not entirely clear what action the visitor is supposed to take or what they will get if they do take action.

When I landed on this page I was left a little confused as to what action I was expected to take… Which is a great example of why the 5-second rule is so important for landing page optimisation.

4. Compelling Headline

Your headline needs to be clear, benefit-driven and speak directly to your target audience.

Here’s an example from Design Crowd;

This example highlights that the visitor can “Get the Perfect Custom Design, Every Time: With the world’s #1 custom design marketplace”…

That headline is really clear and specific about what benefit the visitor can get from this website.

For a less effective example let’s take a look at Emily Skye F.I.T;

One thing about this example that doesn’t work for me is that the logo (the branding) is above the main headline. So even though the headline; “Learn my secrets to becoming trim, toned and confident” is benefit-driven – it gets lost behind the overpowering branding above it.

5. Call-to-Action (CTA) Above the Fold

No doubt you’ve heard this one before because it’s pretty common, but it is important to get a call-to-action above the fold so people can take action without having to scroll.

“Above-the-fold” refers to anything positioned in the upper half of a web page so visitors can see it without scrolling down the page.

Let’s look at some examples to illustrate the importance of this point;

Taboola in this example have positioned their call-to-action “Get Quality Traffic with Taboola” above the fold and it is very clear what it is you’re supposed to take action on.

Another reason this is a great landing page example from Taboola is because it uses a basic button paired with a popup light box form, rather than the form capture embedded on the page. This “double step opt in” in recent years has been proven to increase conversion rates by up to 20 or 30% because it is securing a first “yes” by asking the visitor to click a button before giving up their details.

Let’s look at an example which involves the older style form embedded on the page;

So while this form is above the fold, they still could have made it better by using the popup light box functionality. It also has quite a lot of fields for a visitor to fill in. If this were the first time you were gathering information from people, this may be a deterrent for some people and reduce your conversion rate. The less someone needs to do, the more chance they are of doing it. So look to minimise the amount of form fields your prospects have to fill out at the first stage of engagement.

For example, sometimes we do form analytics with tools such as Clicktale that figures out where people are dropping off in the sign up process. There was one occasion in the car hire industry where we doubled a business just by doing form analytics and figuring out what fields people thought were intrusive and where they were dropping off.

Now for a landing page example where the call-to-action is NOT positioned above the fold;

In this example the call-to-action is a long way down the page, forcing a visitor to scroll a significant amount before being able to complete the desired action.

On top of these examples it is quite hard some times to figure out where the “fold” actually is. Because these days you have everything from mobile phones through to big screen computers. Without being able to accurately predict where the fold is for every device, the best thing you can do is just include the call-to-action as close to the top of the landing page as possible.

Also, just because you have your primary call-to-action above the fold, doesn’t mean you can’t repeat it. In fact it’s good practice to include multiple versions of the same call-to-action on the same landing page for people that require more or less information about what they are signing up for.

6. Contrasting Button Colour

This point is all about making the call-to-action button standout.

We generally like to use yellow, green or orange for go forward buttons which is a tactic that has been used in the eCommerce industry for a long time.

Something to be careful of is that a lot of designers like to make your call-to-action button in-sync with your brand colours… Which can work fine, but if you are serious about conversion metrics then you really want your call-to-action button to standout.

For us, green has proven to be the highest converting button colour. I think people understand that “green means go” from a very young age. However, Amazon as an example, who are renowned for running lots of tests use yellow as their primary button colour. So inevitably this is going to be somewhat contextual for your audience.

Here is an example from LeadPages;

Their call-to-action is large with very specific text “Click here to get LeadPages now”, partnered with a second call-to-action button in the header. Both buttons are green and it’s obvious where you need to click.

This is another example that isn’t as good from Weight Watchers;

It’s hard to understand where you should click, is it “Join Online Coaching” or “Join Group Coaching” or something else entirely?

That’s not to mention that the colours of the call-to-action buttons get blended into other parts of the page, not making them standout and catch the eye.

7. Personalised Button Text

It’s no longer as effective to use words such as “Submit” on your landing page call-to-action buttons.

You really need to personalise it by telling people what they are getting, and putting yourself in their shoes with appropriate language. It is better to use language such as “My” instead of “Your”. In fact LeadPages recently conducted a study into millions and millions of landing page data from their users, which found that “My” converted on average far better than “Your”.

An element of personalisation coupled with a benefit is a well proven combination. For example, “Send me my free DVDs” is one we’ve used at the Collective in the past.

What we are finding is that this button text is just as important as the headline now. So if you are running split tests, yes the first place to start is your headline but the button text is equally as important.

Here are three good examples of where the button text has been personalised to improve conversion rates;

In contrast, these buttons aren’t so great because they are too general without highlighting a clear benefit;

8. Social Proof

The next component you need to have for a high-converting landing page is social proof.

“Nothing attracts a crowd like a crowd”

If you can show others just like “me” are getting results then it helps encourage people to take action.

Here’s a good example from Infusionsoft;

First of all they use social proof in the text “30,000 small businesses thrive with Infusionsoft”, this is so you know that you’re not the first to go down this path. Then they are also using social proof in this example with client testimonials.

One thing I would point out with these testimonials is they are slightly too generic. It’s better to be as specific as possible with your testimonials, for example “I went from 40 grand a month to 200 grand a month”.

9. Google & Facebook Compliant

Being Google and Facebook compliant is a really important area, because you can have all the other landing page elements right, but if you don’t get this right you risk having the page pulled down, your site penalised or your account closed altogether.

There are three really important things you need for Google compliance (which plays to Facebook too);

Navigation. While it doesn’t need to be detailed, Google requires your landing page to have a navigation bar of some description so users have the choice to go somewhere else rather than taking action on your offer.

Here is an example from Digital Marketer that has navigation that doesn’t distract the user;

Include your company logo above the fold, this way they can recognise you are a legitimate business. And provide a contact us link and privacy policy so that people have a way of getting in touch if they need to.

The same Digital Marketer landing page has a contact us and privacy policy at the bottom;

While some of these factors may actually have an adverse effect on conversion rates, they are worth the effort so you don’t get your ad accounts shut down.

Here is an example of a landing page that traditionally would be seen to convert better…

They don’t have a navigation bar or logo at the top, and while there is some relevant links at the bottom this wouldn’t be Google compliant.

10. Visual Cues

The 10th design element you should use in your landing pages is visual cues.

Visual cues are things such as arrows that point to a call-to-action button or ribbons on pricing tables.

Like this;

The pricing ribbon is especially effective as it is saying “If other people are buying that one, it must be the best one”.

Some more examples of visual cues are using things to encourage a certain action, such as text on ribbons and arrows like “hurry” or “start now”, see below;

Visual cues are really important for those pages where you do actually have more than one offer, or the offer is split into options such as the pricing table. The visual cue will help the call-to-action standout from the other options visitors have on the page.

11. Hero Shot

You want to include an image, if you can, of your offer. This image could be the physical product, or perhaps a personality associated to what they are getting.

Here is an example of our “How to Double Your Business” DVD landing page that has an image of the product.

The hero image helps people see that it is a tangible product, and it adds to the credibility of your message if it is a nicely rendered image too.

Sometimes images that are more natural or raw can convert well too, especially if they show off your personality and the offer is about you.

Another thing to note with the hero image is that if you are sending paid traffic to this landing page, you should include the same image in your ad – whether that be on Facebook or somewhere else. This creates a consistent experience for the prospect all the way through the process. They see that image in an ad, then they get to your landing page and see the same image, and at a subconscious level they know it’s for them.

12. Limited Form Fields

I mentioned this briefly earlier, but it’s important to limit the number of form fields on your landing page.

Do you REALLY need all those fields?

The image below shows some examples, both good and bad of the use of form fields on landing pages.

Ideally you want to just be asking for two or three things at a time so it removes the risk that a prospect will drop off halfway through completing a form. If you really need further information from prospects, once you get their email address you can collect that information later. But the purpose of the landing page is to convert.

13. Brand Congruency

This is where you want to make sure that your advertising, your website and your landing page all match up from a branding perspective.

For example, below are some Google remarketing banners of Santosha Yoga that are quite heavily branded;

The design of these banners is carried over to the pages these ads are sending visitors through to. See below;

And this…

You can see the colours, logo, images and and call-to-action button on these pages is congruent with the banner ads visitors would have clicked on.

Brand congruency is more than just aligning these elements when visitors come from ads to a landing page. It’s also important to create congruency between your landing page and other pages on your site, such as your home page.

Below is an example of how Body Trim do this;

14. Social Sharing

The final element of design that matters when it comes to optimising your landing page is to include social sharing buttons. This is about getting more visibility for your page by allowing people to share it.

You can see in the screenshot below how they have included social buttons on the left hand side;

The main decision you need to make here is about what social channels are most appropriate for your market. In this example we have used Twitter, Facebook, Pinterest and Email.

 

Next Steps

We’d recommend with this post don’t just ‘read it’, next steps would be to look at your main landing pages and see how many of these design elements you are doing and address any optimization opportunities.   Do you have any other things you do on landing pages that has really helped your conversions?  If so please join or start the conversation below in the comments and we can chat there.