Crafting a high converting landing page is not for the faint of heart.
There are dozens of different components to keep in mind, a whole science of psychology lurking beneath the surface, and the vague idea of “what the customer wants” whispering in the background.
This means that creating an effective page involves more than simply designing something that “looks good.”
So how can you demystify the process and unleash your landing page, to the amazement of the watching world?
Keep reading, and I’ll lay it out for you.
But before we get started, it’s important to note that there’s no standard manual on the creation of a perfect landing page.
You might be in search of a straightforward, step-by-step guide to putting together a foolproof design. And it would be great if that existed!
After all, the Internet has guides for everything, including topics as complex as how to build a real rocket.
So isn’t there an easy, go-to guide for the best landing pages?
Sadly, there’s no one-size-fits-all instruction book. No matter how hard you look, you’ll never find a landing page Holy Grail.
My goal with this post is to create the closest thing to it.
So why is it so challenging to find a definitive answer as to what makes a page?
Because landing pages that convert have so many differentiating factors.
Landing pages are as different as the people looking at them. Each one has a different call to action to drive, a different reader in mind, a different product or service to offer, and a different niche to address.
For example, consider these three scenarios:
- One landing page is selling zero drop shoes to ultramarathoners.
- Another landing page is inviting in-house marketers to a two-day conversion conference in Toronto.
- A third landing page is asking sommeliers to take an online pairing quiz.
The page that works for any of these three is unlikely to work for either of the other two.
That’s because there’s an incredible amount of variation among their audience, purpose, intent, product, angle, focus, industry, niche, perception, buy-in, cost, messaging, value proposition, and testimonial approach.
(Among a whole host of other factors.)
So one size does not fit all.
But there are unifying elements that characterize highly successful landing pages.
Despite the huge potential for variation, some things do remain constant. High-converting landing pages often have several characteristics in common.
That’s why in this post, I’ll cover 12 elements you should aim to include in all of your landing pages.
Although this article does not provide a full review of each one, my goal is that by the time you finish reading, you’ll know enough to get to work creating your own compelling landing page.
First, take a look at this video that explains how to make a beautiful landing page that converts:
Landing Page Essential Element 1: Killer Headline
A headline is where everything begins — interest, attention, and understanding.
It’s what compels a user to stay and learn more about what you’re offering — or not.
Here’s what it needs to accomplish:
- The headline should grab the reader’s attention.
- The headline should tell the user what the product or service is all about.
- The headline should be short. Never make it more than twenty words, and preferably limit it to ten.
It’s also worth noting that if your headline complements an image that explains the product or service, then you don’t need to go into quite as much detail in the copy.
Now that we’ve established the basics of an effective headline, let’s jump into some examples of companies who’ve written them well.
First, take a look at this landing page for a social skills course.
The quote, “I’m tired of being awkward” emphasizes the problem that the course solves so that readers immediately know the problem that it’s designed to help them overcome.
If a visitor relates to this statement, this will pique their interest and make them want to learn more.
Next, take a look at this headline from PictureMarketing. It does not attempt to be clever but identifies exactly what the service is intended to provide.
For a service that helps businesses capture photos of consumers at events, this is perfectly clear.
As soon as a user lands on this page, they know what the company is offering.
Now, we’ll look at an example that isn’t quite as straightforward.
Monsoon’s headline, “We are product people.” is attention-grabbing, but it doesn’t tell visitors exactly what they offer.
Fortunately, they include further explanation in a subheadline. And once you read that subheadline, it’s clear why they wouldn’t put all of that information in the main statement on the page.
It’s just a little too wordy for visitors to read and comprehend immediately. So they use a brief statement first to capture users’ attention, then give more details.
Plus, the page’s clean design helps give power to the image and headline. Because there aren’t a bunch of other elements distracting from it, readers can focus their attention on the copy.
If your product or service is too complex to be summed in up 10-20 words, this could be an effective approach.
Our next example, from MailChimp, does a nice job of summarizing the company’s main goal, instead of a specific product or tool.
This is another effective approach for companies that offer a variety of services.
Of course, landing pages for individual services can be more specific. But if you’re aiming to create a page that sparks visitors’ interest in your company as a whole, naming a high-level goal is often the best way to do so.
In this case, MailChimp uses a simple, declarative statement to democratize its product and emphasize its importance.
Essential Element 2: Persuasive Subheadline
The next element you need to create an effective landing page is the subheadline.
If the headline makes the user look, then the subheadline should make them stay. Together, these pieces of copy make up the one-two punch of a landing page’s power.
Here’s what to keep in mind as you create yours:
- Normally, the persuasive subheadline is positioned directly underneath the main headline.
- The subheadline should have some element of persuasiveness.
- The subheadline can go into slightly more depth and detail than the main headline.
As you write your subheadline, remember that your goal should be to encourage readers to stay on the page. You stick with the basic concept of the headline and push it a little bit further.Click to tweet
For example, take a look at Slack’s homepage:
Its main headline, “Where Work Happens,” is sufficiently concise and attention-grabbing.
Then, in the subline, readers can learn about the platform. If their team needs to undertake any of the listed tasks, it’s clear that they potentially benefit from using it.
And if that’s the case, they’ll be much more likely to click that “Get Started” button than they would after reading the headline alone.
It’s also worth noting that the explanation doesn’t always have to come after the page’s most compelling statement.
HelpDesk, for example, flips their headline and subheadline on the following landing page.
The page’s main headline, as indicated by the larger font and central positioning, is, “A delightful customer experience.”
Although “A help desk for teams that insist on” is placed above that main headline, it’s clearly the subheadline. It’s much smaller and not featured as prominently.
Still, it elaborates on the headline’s general idea by explaining who the platform is for.
The position switch seems to be intentional. Taken together, it forms a complete idea of what HelpDesk offers.
Plus, with the way it’s presented, visitors’ attention is first directed to that emotionally-loaded phrase: “delightful customer experience.”
If you try to rearrange the information on the page to place that phrase before the subheadline, the explanation doesn’t come across nearly as streamlined.
And considering that the only reason to do this would be to meet some standard idea of how a headline and subheadline should be arranged, there’s no reason to.
So as you write your landing page copy, remember that you don’t necessarily have to follow a specific formula.
Arrange your content in a way that efficiently explains what you’re offering, and you’ll be much more successful in connecting with readers.
Essential Element 3: Pictures
Visual content is an essential component of landing pages that work.
In fact, the brain processes images 60,000 times faster than text. This means that users will be affected by the images on your landing page immediately.
So as you select and place your images, remember that:
- The pictures should be large.
- The pictures should be relevant to your product or service. If you are selling a physical product, it is essential that your landing page contains an image of the product.
- If you are selling a service, the primary purpose of the image should be to grab attention and demonstrate relevance to the user.
- The pictures need to be high-quality.
Given the importance of the visual content on a landing page, it absolutely can’t be a last-minute addition. Your photos, graphics, and other visuals should be part of the design process right from the start.Click to tweet
And as you determine what to include, keep the focus on high-quality, relevant visuals. This is not the place to feature stock photographs or last-minute Photoshop botches.
After all, if your images are the first thing a visitor processes, they have the potential to shape that visitor’s impression of your brand before they even read your copy — and you need that impression to be a good one.
For example, Mixpanel uses images on the following landing page to show the functionality of the product and to help explain it.
These images are fun and attention-grabbing.
Plus, they give users a sense of what using the platform is like, and highlight its user-friendliness.
For software and other tools, screenshots like this are a great choice.
Repumatic takes a similar approach and includes large screenshots on the following landing page to display the software’s functionality.
Even before the user takes the time to read about what this product does, they have a sense of what using it would be like.
This essentially gives users a visual understanding of what they stand to gain. And that’s an approach that works for many service-based businesses.
For example, Shutterstock sells images — so it’s only natural that they would have a landing page with a large, high-quality photo.
After all, who would want to purchase photos for their website from a company that didn’t have a great one on their own site?
Probably not too many people.
It’s also important to remember that because many users will base their opinion of your brand on your landing page, you should view it as a chance to differentiate yourself from your competitors.
For example, PictureU, like Shutterstock, also offers photos for marketing purposes. So it makes sense that they also feature large images on their landing pages.
Both of these sites do a nice job with their landing page visuals. But if one of them didn’t, and a user viewed both, which one do you think they’d choose for their image needs?
That’s a pretty easy call.
Essential Element 4: An Explanation
Your landing page needs to make what you’re offering perfectly clear.
After all, if a user doesn’t understand what your product or service is about, you’ve lost them. So a straightforward explanation is crucial.
If your landing page is for a simple product or service, you might be able to get away with your headline and subheadline being the only copy.
But regardless of how you choose to approach your explanation, here’s what to keep in mind as you write it:
- Your explanation can be integrated with your headline, or completely separate.
- An explanation should be benefit-oriented. Explanations are functional, but functionality should be tilted in favor of the user.
So your explanation doesn’t necessarily need to be separate from your headline and subheadline.
In fact, if you think back to the examples in the previous sections, most of them don’t have an additional paragraph or chunk of text to elaborate on what they’re offering.
So instead of thinking of your explanation as a standalone element, consider it more of a goal that your page needs to accomplish.
Taken in isolation, each of the elements on your landing page might not explain your product or service. But if, as a composite, they create a clear picture, your page accomplishes what it needs to do.
That’s why for most landing pages, your best bet is to keep things straightforward. You might want to make your copy “fun” and “unique” — and that’s possible. But your top priority should always be clarity.
You can also rely on images to help with your explanation. For example, check out this graphic from Asana’s product page:
The headline and subheadline here are compelling but might leave readers wondering what, exactly, “everything you need” is.
Asana addresses that with a visual walkthrough of their platform.
This is much easier to understand than a text-based explanation, and for most users, much more interesting, too.
Essential Element 5: Value Proposition or Benefits
The value proposition is defined as “an innovation, service or feature intended to make a company or product attractive to customers.”
Essentially, it answers the user’s question, “What’s in it for me?”
And when it comes to your landing page, this answer needs to be featured prominently.
Like your explanation, your value proposition doesn’t need to be a standalone element. Instead, it can be spread among the other elements on your page.
Here’s what to keep in mind as you establish yours:
- One of the best ways to advance your value proposition is through a list of benefits. Many high converting landing pages use an unadorned bullet point list to explain the benefits of their product or service.
- Benefits should be clearly focused on the user. It’s easy to drift off the mark with benefits and start talking about yourself as a company. Don’t do this! Instead, always think about the user and how he or she will benefit.
The most important thing to understand about this part of your page is that it shouldn’t be a statement about your company. A value proposition is not “we are awesome.”
That might be true! But your goal isn’t to brag about your company. That’s not compelling.
Instead, you’d want to rewrite it to emphasize that the user will be awesome with your product or service.
For example, let’s say you are selling Web hosting, and you want to highlight your phenomenal uptime. Your first thought might be to create a value proposition that says “We have 99.98% uptime!”
But this statement focuses entirely on your company, and not your audience. You could fix this by rewriting it as “Your website will have 99.98% uptime!”
See the difference?
This is a simple shift but makes the statement much more customer-oriented. And that’s the kind of benefit you should be going for.
For example, this Crazy Egg landing page has three simple benefits.
Each highlights a task the user can accomplish: See where visitors click, improve conversion rates, and understand user behavior.
Repumatic takes a similar approach with this simple, straightforward list of benefits.
By the end of this list, the reader knows exactly what they the platform will help them do.
Instapage provides a similarly simple, straightforward presentation with this checklist.
Plus, they’re explicitly user-focused with the phrase “All the Features You Need to Succeed.”
Essential Element 6: Logical Flow
As you design your high converting page, you should make sure that the elements are arranged logically.
A truly interested customer will be cognitively engaged with the landing page. They will read the content and follow the thought process.
But if you want them to go through a process that’s logical and compelling, you need to arrange your page in a way that makes that happen.
Here’s how to do this well:
- Start with your explanation
- Continue with your benefits
- Include your testimonials
- End with your CTA.
This is the most obvious and persuasive method of structuring a landing page.
And you don’t have to be subtle with this structure, either. It’s perfectly fine to allow your landing page design to demarcate sections.
In fact, if you augment the logical flow with corresponding design flow features, you will improve the process with visual and cognitive coherence.
This is particularly important for lengthier landing pages.
Some marketers avoid long landing pages because they don’t want to risk losing visitors’ attention. But long-form landing pages can be highlight effective, as long as they’re organized well.
Although they require a bit more hierarchical rigor than their shorter counterparts, establishing an effective flow is entirely possible.
Then, as you determine which elements to place in each space on the page, remember to use persuasive elements throughout. Don’t confine “persuasion” to a single section. These features should be present in every section of the landing page.
Finally, make sure to spend some time determining CTA placement. This is a critical component of landing page flow. You can also use multiple CTAs on a single landing page, positioning each one at the end of each discrete section.
Altogether, this might sound like creating effective flow is a complex process.
Fortunately, it doesn’t have to be.
Just check out this example of landing page from Optimizely:
This short-form landing page has a single visual focus, and the simple flow from the headline to the explanation to the capture form, then finally the CTA button.
Repumatic, on the other hand, has a long-form landing page, so they use multiple CTAs throughout.
This particular landing page has six, each located after a section.
As you can see in the screenshot above, some of the sections use the same CTA of “Personal Accounts are free! Get Started!”
And that’s perfectly fine.
The main goal is simply to give users multiple opportunities to convert as they move down the page. And at that goal, this page excels.
Essential Element 7: Something about Pain
Your first reaction to this subheading might be: “Something about… ? Isn’t that pretty vague?”
Yes. But this point is intentionally vague because the idea of “pain” leaves a lot of room for interpretation.
Here’s the psychology behind pain: Humans are wired to avoid pain. Every product or service can help to alleviate pain in some way.
If you can cause the user to think about their pain, they will subconsciously seek relief from that pain, and thereby be more likely to convert.
Here’s how to accomplish that on your landing page:
- Mention what a user will lose, not just what they will gain. According to the theory of loss aversion, we are more likely to anticipate the pain of losing something than we are to feel the pleasure of gaining something of equal value.In other words, it feels good to get $50, but the pain that we feel from losing $50 is twice as intense as the pleasure we received from gaining the same sum.
- Consider implementing pain references in your testimonials, as well as in the remainder of the copy. Since pain is a powerful human element, real human testimonials are often very effective at conveying this pain in a trustworthy way.
- Be sure to relieve the pain. Your product or service is provided as an antidote to the pain. Don’t present a problem without providing a solution!
Essentially, you want to illustrate a pain point your reader might be experiencing. Then, draw the conclusion that your product or service provides the answer to that pain.
For example, Prudential has a landing page designed to persuade people not to procrastinate.
Later in the page, they do this by focusing on the worries many people experience about not having money enough to retire on, the concern about living in poverty, and the guilt for procrastinating.
But to kick things off, they start with this simple interactive element:
Many of us can relate to the challenge of overcoming procrastination on preparing for important events. By highlighting that challenge, Prudential immediately establishes a connection with their visitors.
Now, check out Ramit Sethi’s landing page for his course, “How to Talk to Anybody.”
This page is packed with pain points the course’s target audience can likely relate to.
After all, the entire course is predicated on eliminating various forms of pain: the pain of embarrassment, missing out, being rejected, and feeling lonely.
To connect with readers, Sethi features dozens of testimonials that with real people’s accounts of that kind of pain, making for a very effective landing page.
Essential Element 8: Something about Pleasure
Just as humans are pain-avoiding machines, we are also pleasure-seeking animals. Every human is motivated by the desire to gain pleasure, which can have a variety of forms.
There are two main ways you can incorporate this into your landing page:
- Show how pleasure is a by-product of having your product or service.
- Show how your product meets an emotional need beyond its functional role.
To illustrate how this might work, imagine that you’re selling arthritis-relief medication. On the surface, you’re selling a pill.
But you’re not just selling a pill. You’re selling freedom, relief, and joy.
The same principle can be applied to many different products.
If you sell cross-training footwear, you’re not just selling something that goes on a customer’s foot. You’re selling respect, trendiness, security, vibrancy, and fulfillment.
The key here is to present your product in such a way that highlights how it brings emotional and psychological pleasure.
We all desire to be accepted, loved, appreciated, recognized, honored, compensated, admired, etc. Figure out which emotional craving your product or service can help to satisfy.
And if you don’t consider your product “emotional”?
You can still make this tactic work.
To illustrate this point, we’ll take a look at a landing page from Mixpanel. The company sells A/B testing services. Not all that emotionally powerful, right?
In the hands of some marketers, sure.
But they use the following effective landing page to inspire a sense of wonder and surprise.
Humans have a psychological proclivity for surprise. It scratches an emotional itch. That’s exactly why this headline is perfect for speaking to the brain’s pleasure center.
The company helps users gain back their reputation — and it’s easy to see the emotional connection in their headline, subheadline, and CTA.
This desire to get things right on the first try resonates with an emotional need that most of us can relate to.
We recognize that doing so will build our confidence, our reputation, and maybe our income — and all of these thoughts are being inspired by landing page software.
Essential Element 9: Trustworthy Testimonials
A landing page’s testimonials are some of its most important trust signals.
A user wants to know that they can trust the product or service and if they see a trustworthy testimonial, this goes a long way in cultivating their trust.
Here’s how to incorporate them well:
- Use testimonials from real people. Celebrities and experts are great, but you don’t need testimonials from these people. Choose testimonials from people who are most relevant to your target audience.
- Make sure you use pictures. Pictures are the keystone of trust in testimonials. It’s important that every featured testimonial is accompanied by a photo of a real person.
- Testimonials should be specific. Glittering generalities don’t make great testimonies. The best testimonies are those that are backed by real numbers, real data, and specific applications.
For example, let’s take a look at this page from TasksEveryDay. The company provides offshore virtual assistant services and includes testimonials from people who’ve used those services on the following landing page:
Each featured testimonials has a picture, a name, a video, specific geolocation, and a clear discussion on how the service benefited them.
These testimonials also feature pictures, names, positions, and companies, to make the reviewers seem more relatable to readers.
Curalate, on the other hand, takes a more in-depth approach to their testimonials and styles them more like case studies. Just take a look at how they present how one specific client benefitted from working with them:
By featuring exact statistics, they take things a step beyond a generally positive review and make this much more compelling than a standard testimonial.
Essential Element 10: Methods of Contact
Is your business legit?
Then make that clear on your landing page.
Some of the most persuasive landing pages that I’ve visited have multiple methods of contact, including a phone number, a physical address, an email address, and a contact form.
Some even have popups where a customer service representative asks me if they can be of help.
These go a long way to help strengthen my trust in the company and to eliminate any friction in the conversion funnel.
Here’s what to keep in mind as you add contact information to your landing page:
- At the most basic level, provide some assurance that you are a real company. Usually, this involves a physical address and a phone number.
- Live chats featured in a popup can be helpful, but not a must-have. Using live chat is somewhat controversial. If you insist on using one, do your homework, and make sure you have some convincing reasons for keeping it there.
For example, while researching this article, I chatted with one of the representatives from IwillTeachYouToBeRich. She was helpful, courteous, and answered my questions.
As a result, I knew, as a customer, that the company was present and responsive. If I had any questions about signing up for the course, I knew I would be able to get answers.
Live Chat features are now a popular option for many businesses. For example, this “Chat Here” box is always present, regardless of scroll depth, on FotoZap’s landing page:
No matter where a visitor is on the site, they have the opportunity to speak with a real person if they’d like.
SignNow, a service of Barracuda, has also used live chat, and presents using it as a CTA on the following landing page:
If a visitor is hesitant about converting, they can easily chat with a representative and have their concerns addressed.
But live chat isn’t the only way to make your company accessible to visitors.
For example, this large contact form on the TasksEveryDay landing page makes it easy to get in touch with the company with any questions or concerns.
It’s up to you to determine which options to give your visitors for getting in touch. The most important thing is that conversion is an easy process.
The simpler you make it for visitors to contact you, the more likely they’ll be to take action.
Essential Element 11: A Guarantee
Customers love guarantees. A guarantee, regardless of what it is or how it’s presented, can help people feel reassured while on your landing page.
Simply the word itself improves the likelihood of a conversion.
Here’s what to keep in mind as you create one for your landing page:
- Guarantees can take many forms. Choose a type of guarantee that works for your business type, and state this guarantee on your landing page.
- In the absence of any explicit product guarantee (e.g., satisfaction, money back, etc.), you can provide a different type of guarantee: e.g., “100% No Spam Guarantee.”
- Position your guarantee statement close to the CTA. This proximity will help the user receive a final bit of assurance, and be ready to convert.
As you write your guarantee, you don’t necessarily need to delve into the legalities of it. Just say it. The point is that you have a guarantee, and the customer knows it.
This money-back guarantee is likely extremely compelling for users who are on the fence about investing in the course.
Although it doesn’t necessarily give an explicit guarantee, they do provide a level of comfort that’s similar to a guarantee. The award and shield icon are also reminiscent of trust badges, further enhancing this assurance.
Although it doesn’t necessarily give an explicit guarantee, they do provide a level of comfort that’s similar to a guarantee. The award and shield icon are also reminiscent of trust badges, further enhancing this assurance.
Essential Element 12: Powerful Call to Action
The last thing to create landing pages with high conversion rates is the most important element of all: the call to action.
No element listed in this article is as important as your call to action. After all, this is the element that the rest of the content on the page is designed to drive visitors’ attention to.
It’s what ultimately converts users into customers.
So with that in mind, here are a few CTA must-haves
Make it big. Generally speaking, the bigger, the better.
Make your copy compelling. The actual CTA copy is the most significant copy on your entire landing page. Don’t use the word “submit.” Instead use something explosive, exciting, and persuasive.
Use a button. Users have been trained to expect the CTA to be a button. Do not attempt to force back years of expectation by using something other than a button. Stick with the tried and true. People know what to do when they see a button.
Use a contrasting color. Your landing page, your company, your stylebook, and your designers all have certain colors that they like. Your landing page has a color scheme.
Now, whatever color you use on your CTA, make it different. At the most basic level, your CTA needs to possess color. And, to make it stand out, that color needs to contrast from the other colors on the screen. Contrasting colors help to attract the eye and compel the click.
For example, the CTA for this Help Scout landing page is located directly underneath the testimonial section.
This provides a seamless and logical flow, both from a design and cognitive perspective.
Mixpanel takes a similar approach, positioning their CTA at the bottom of their landing page.
It’s positioned brilliantly, and the “Try it for free” button copy is simple, yet compelling.
You’ll also notice that instead of using a contrasting color on the button itself, the designers chose to use a contrasting color for the entire CTA section.
In this case, that approach works. But that’s because of the CTA’s positioning.
And positioning is an essential consideration for the CTAs on each of your landing pages. It can make or break whether users click them.
For example, although the landing page featured below has some shortcomings, the positioning of the CTA underneath the image helps to draw user’s attention to it.
This makes it impossible to miss — and likely earns the page a decent conversion rate.
Instapage has another great example of a high-contrast CTA button.
Notice how this button is a contrasting red, which stands out from the grays, and blacks of its surroundings.
Monsoon’s CTA uses orange instead of red but achieves the same effect.
It’s big, bold, and impossible to ignore. That’s exactly what you should aim to achieve with your CTAs.
A high converting landing page is a place where all your efforts come to fruition. This is the place where customers click, people buy, and you earn revenue.
So don’t mess it up!
Fortunately, creating a powerful and high-converting landing page isn’t rocket science.
Start by implementing each of the 12 essentials in this post, and you’ll be well on your way to engaging your visitors and converting them into customers.
What do you consider to be some of the absolute essential elements of the best landing pages in 2018?