Landing Pages Explained From Top To Bottom (Plus Best Builders Reviewed)

Danielle Antosz
Last Updated on October 20, 2020
Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more

Are you looking for ways to turn your website traffic into real sales? A great landing page can help you do just that. And this article will walk you through how to do it.

A landing page is a stand-alone web page with a single objective or call-to-action. In most cases, landing pages include a form to gather information about site visitors.

For example, if you click on an ad on Facebook for a new webinar, it would send you to a landing page where you would register for the webinar.

In the digital marketing world, landing pages can be one of the most powerful aspects of your marketing funnel — but only if they are well designed and optimized.

Understanding Your Landing Page’s Goal

The first step in building a successful landing page is defining your purpose or end goal.

SociaPilot Landing Page
SocialPilot is clear on what it wants and what it is offering.

A landing page with a direct, clear goal will address any concerns the reader might have and nudge them to complete the desired action.

An aimless landing page will cause visitors to lose interest, get confused, and bounce off the site without performing the desired action.

What Goals Do Landing Pages Have?

Here are a few examples of goals you might consider for your landing page:

  • Sign up for a webinar
  • Register for a free trial
  • Download a whitepaper
  • Download a coupon
  • Fill out a survey
  • Subscribe to a service

You will notice all these goals have one thing in common:

They encourage the visitor to give information about themselves, most often in the form of an email address.

Campaigner Landing Page
While the design isn’t the strongest, Campaigner knows exactly what details it wants.

Now, let’s look at what else your landing page needs to be effective.

The Must Haves of a Great Landing Page

Landing pages may be short, with just a few hundred words and an image or two, or include interactive elements, videos, and in-depth copy. It all depends upon your goal and your niche.

But, no matter what the purpose of your landing page, there are several must-have elements. These are:

  • Informative content
  • A unique selling proposition
  • Appealing visual design
  • A strong, clear CTA
  • Lead capture element
  • Social proof

Informative Content

The copy on your landing page should be concise and easy to understand.

Explain what the offer is and what they need to do to get it. Your content should explain benefits, address pain points, and answer frequently asked questions.

Oberlo Landing Page
Oberlo’s landing page is brief, informative, and socially backed.

Don’t just redirect the landing page; consider using the update page to gather leads for when you do reopen the offer.

A Unique Selling Proposition

Why should readers care about your offer or your business? What makes your offer stand out from other offers?

Weebly Landing Page
Weebly nailed its product USP in one sentence.

This is your unique selling proposition. Here are a few examples of USPs to inspire your landing page:

  • Faster service
  • Higher quality service
  • Better product
  • Larger variety of prodcuts
  • Longer lasting product
  • Better value

Keep in mind, your USP for your landing page might not be the same as your brand’s USP. The purpose of this USP is to highlight the most important benefit of your offer.

The USP should answer the question: “What is in it for me?”

Appealing Visual Design

Your landing page should be appealing to visitors. Now, what appealing means for you will depend on the field you are in and your offer.

SimilarWeb Landing Page
SimilarWeb’s landing page has an appealing and simple design, though it doesn’t exactly state a clear USP.

There are a few general guidelines for all landing pages.

  • Use high-quality images; you don’t want pixelated images on your landing page.
  • Aim for the smallest size images you can while retaining quality (this will speed up load time).
  • Use white space well; avoid cramming too much information onto your page.
  • Use a simple, easy to read font in a large enough size to be read easily.
  • Avoid font and background color that clashes. This interactive color wheel from Adobe can help you find complementary colors.
  • Exercise headings and subheadings to break up large blocks of text. Aim for a visual element or heading/subheading every 100-150 words.

A Strong, Clear CTA

When visitors land on your landing page, you want them to quickly understand the purpose of your page.

MailChimp Landing Page
Incredibly simple, which a brand like MailChimp can get away with. The CTA and USP are concise and effective.

Your landing page should have one, clear purpose called the CTA (call to action).

A strong CTA should:

  • Use clear, easy to understand language
  • Use the active voice (Avoid the passive voice)
  • Tell them what the next step is, for example: “To get X, fill out the form below.” or “To sign up, enter your email below.”

Make readers figure out what you want them to do next.

Lead Capture Element

The lead capture element allows you to gather information about your audience.

FinalDraft Landing Page
FinalDraft’s capture elements are obvious and easily located.

In most cases, this is an email address, but it might also be a phone number.

COS landing page example
COS’s landing page for printer leasing is well-designed with a well-placed CTA of “Get a Quick Quote” and prominent phone number.

You might ask for additional information that makes sense for your offer, such as their role at work, the number of children they have, or what pets they have.

What Information Am I Looking For?

SquareSpace Landing Page
SquareSpace’s landing page actually gives you options and gamifies the experience before asking for any information.

What information should you include in your lead capture form? Here are a few best practices to follow:

  • Only ask for information you really need. Making the form too long will decrease user interaction.
  • Make the form easy to fill out. If certain fields have required elements, make sure to tell your visitors what those requirements are!
  • Be clear about how the information will be used and follow privacy laws. (Make sure you are familiar with global privacy laws and especially GDPR.)

Social Proof

Social proof is a psychological effect where people are more likely to emulate the actions of others.

Autopilot Landing Page
Autopilot uses a simple testimonial as social proof.

Essentially, social proof reassures your visitors that other people have completed this action. Social proof can be used to build trust in your product or brand as a whole.

How to Apply Social Proof

Here are a few ways to include social proof on your landing page:

  • Use a social proof plugin like Proven or WP Real-Time Social-Proof, which show popups on your landing page of others who have purchased or signed up for the same offer.
  • Include written customer reviews on your landing page.
  • Share links to case studies related to the offer.
  • Share brands you have worked with or collaborated with, preferably recognizable brands.
  • Add media mentions or endorsements.

What You Need to Know About Landing Page Design

Now that we have covered essential content elements of your landing page, let’s dive deep into designing your landing page.

Slack Landing Page
Slack’s landing page is beautiful, simple, and informative.

The actual design of your landing page will heavily depend on your goal and on what niche you are in. Let’s start by discussing a few of the most common types of landing pages, then get into best practices for designing your landing page.

What Are The Different Types of Landing Pages?

The type of landing page you use will depend on the primary aim and purpose of your landing page.

IBM Landing Page
IBM’s landing page is short and simple.

Here are the most common types.:

  • Quick-purchase landing page
  • Detailed product landing page
  • Lead capture landing page

Quick-Purchase Landing Page

Intercom Landing Page
The chat software provider Intercom gets straight to the point and uses social proof too.

This is a short and sweet landing page. You’ve already described the product, so you don’t need to sell it again. Your main goal is to give a final little nudge, then let the visitor convert.

For this type of landing page, keep the copy short and give them an option to convert at the top of the page.

Detailed Product Landing Page

Apple Landing Page
Physical products count too and Apple has created a detailed product landing page here.

Your visitor is interested in your product, but might not know exactly how it works or what it does.

You will want to include more information and focus on benefits. FAQs and social proof will be particularly important for this type of landing page.

Lead Capture Landing Page

Zoho Landing Page
Zoho’s landing page can be considered as a lead capture page.

This type of landing page is not too short, and not too long. You aren’t looking to sell, but you are still looking to convince visitors to convert.

Include information about what they will receive (e-book, free consult, PDF, etc) and how your awesome lead magnet will help them. For this type of landing page, focus on the benefits of your offer.

Landing Page Design Best Practices

Keep in mind that best practices are just that–they are what works best for the large majority of landing pages.

If you think a specific best practice won’t work for you, try testing both ways.

Snappa Landing Page
Snappa goes as far as offering an optional demo video.

Above all, focus on the user and your goal. If a design element helps visitors convert and isn’t shady, then A/B test it! You might be surprised by the results.

Keep It Simple

Your landing page should not be a cold sell. Visitors to your landing page have heard of your product or offer somewhere — maybe an ad, email, or social media.

Cloudflare Landing Page
CloudFlare CDN is another example of a simple lead capturing page.

Keep the copy and the visual elements simple. Don’t over sell and don’t overwhelm.

Be sure to include plenty of margins and white space. And, for the love of all that is good in the world, leave the auto-play music and flashing text in 1998 where it belongs.

Keep Colors and Visuals On-Brand

Your branding should be coordinated across all mediums–landing pages, website, social media, and even print.

HubSpot Landing Page
HubSpot has a brilliantly branded landing page, even without their logo.

Your branding design tells the world who your brand is and makes you recognizable, so be sure to include colors and images. Use whatever makes sense for your brand.

Also, keep colors and visuals of your landing page similar to the ad or email that sent them to the landing page.

Use Headlines Well and Often

People don’t read on the internet; they scan. Headings make it easier to make sure visitors see important information. Long blocks of text are a turn off on any page, but particularly on landing pages.

Break up text with headings and use bold to highlight important info. It will make your landing page easier to read and prevent your copy from overwhelming visitors.

Keep Important Elements Above the Fold

‘Above the fold’ refers to the content visitors see on a site without scrolling. Since a good portion of your traffic will bounce before they scroll, make the most of this space. (Don’t worry, it’s not you; its science.)

ConvertKit Landing Page
ConvertKit ensures all necessary content is in sight by using a slider.

Don’t take up all your above the fold space with a hero image that provides no information. Instead, use this space to highlight the most important benefit of your offer.

Lastly, don’t forget the mobile fold. A small image on desktop may force your visitor to scroll two or three times on a mobile phone.

Landing Page Design Templates

If you use a tool or a plugin to design your landing page, there is a good chance it will come with a library of landing page templates for you to choose from. (We will dig into the best tools below!)

But, what if you are building your landing page from scratch or need some inspiration?

Questions to Bear in Mind

Below we share a few questions to bear in mind when creating the content of your new landing page — try answering them.

Value Proposition Heading and Image
Why would someone want your product/service/lead magnet? Include an image or video of the product or another appropriate image.
Address Benefits/Pain Points
What problem does your product/service/lead magnet solve? Reduce barriers they might have. Use bold or highlights when it makes sense.
Social Proof/Testimonials
Who loves your product/service/lead magnet? What results have they seen?
Sense of Urgency
Is there a limited supply (Be honest here, don’t create a false sense of urgency)? Or is there something they are missing out on (time or money) by not having your offer right now?
CTA and Form
How do they get what you have to offer? What are the next steps? Be clear and concise.

Here are a few more resources for landing page templates: Template Monster and One Page Love, which also hosts landing pages.

Favorite Landing Pages

We’ve covered a lot of information about landing pages so far. Now, let’s look at what some of our favorite landing pages look like in practice.

Alexa

Alexa is a suite of analytics tools for marketers.

They provide access to tools and data designed to help SEO and PPC folks grow their online traffic. Unsurprisingly, they have a pretty spot on landing page for downloading their new ebook.

Alexa Landing Page
Alexa provides a landing page with exceptional content and design.

What Works:

  • Alexa does a fantastic job of using clear, easy to understand copy. You know exactly what you are going to get when you fill out the form.
  • White space and margins keep the page looking clean.
  • Bullet point list makes it easy to understand what topics the book covers.
  • Below the fold they include a button to sign up for their Advanced Plan, so people can convert in two ways.
  • The logos at the bottom serve as trust signals.

What Could Be Better:

  • The Alexa logo in the upper left corner doesn’t link to the home page. This may be in an effort to keep people on page, but it seems like a missed opportunity if someone wants to learn more about the brand.
  • The form is a bit long. This is likely done in an effort to get more qualified leads, so it may work out for them.
  • The only place benefits are addressed is in the sub heading “Maximize Your Entire Workflow.”

One of the reasons this is such a good landing page example is because it is simple and to the point. While videos and fancy features might work for some brands, you don’t need those things to build a successful landing page.

FlyWheel

FlyWheel is a hosting provider who specializes in managed WordPress hosting.

FlyWheel Landing Page
FlyWheel truly outdid themselves with a simple design.

What Works:

  • FlyWheel clearly states the user benefits on the left-hand side.
  • The rotating slider gives three opportunities to present the USPs.
  • FlyWheel state how long it takes to fill out the form — a brilliant prompter.
  • The design is simple, yet appealing.
  • Some color and media is used, but not too much.

What Could Be Improved:

  • There are a total of 8 fields to be filled in, some of these seem excessive and could likely be cut down.
  • Fields do not indicate whether they are compulsory or not.

Landing Page Tools

Ready to build your landing page? Whether you are looking for a quick and simple build or want to dig into the code, we’ve got a solution.

Top WordPress Plugins for Landing Pages

WordPress remains one of the most popular CMS on the market, and there are dozens of plugins that make it easy to launch landing pages.

Here are our favorites.

Thrive Architect

Code-free landing page building with tons of features. Thrive Architect lets you choose from over 250 templates and integrate with tons of other platforms such as GoToWebinar, MailChimp, and more.

InstaBuilder

This is one of the simplest landing page builders on the market. InstaBuilder’s features include over 70 different templates, mobile transformation tools, and the ability to embed buttons, videos, MP4s, and more.

Best Landing Page Builders

Don’t have WordPress? There are plenty of landing page tools for you. Here are our favorites.

LeadPages

LeadPages
LeadPages is a popular choice for creating great landing pages.

This is a full-featured platform for creating landing pages. LeadPages features a drag-and-drop editor, unlimited landing pages, and easy integration with other tools.

It is a really powerful tool that works with WordPress, but can do so much more.

InstaPage

InstaPage does more than just help you build a landing page, it actually helps you with the entire process.

Build, collaborate with your team, test, review, and so much more. They also offer a free two-week trial so you can try before you buy.

Unbounce

The Unbounce builder is a conversion-focused drag-and-drop builder (no coding knowledge required!) with tons of features.

Unbounce
Unbounce offers a drag-and-drop front-end editor to create landing pages.

Add buttons, maps, your logo, social proof, and more in minutes.

Site123 Landing Page Builder

It takes less than a minute to get a landing page built with Site123. Designs are professional and you can choose one to match your industry. 

We chose “business” and wound up with a template that had a contact form; click-to-call; and map built in.

site123 landing page builder

Site 123 is easy and intuitive to use. You may have heard of their full-featured website builder. You can easily turn a landing page into a multi-page website with this tool.

HubSpot Landing Pages

HubSpot’s Landing Page builder pulls data from the (free) HubSpot CRM to display personalized content to each visitor.

What’s personalized (i.e. tailored) to individuals? Calls-to-action, content, and forms.  

hubspot landing pages

The landing page detects the visitor’s location, device, and referring source. Key: it tailors content based on what stage the individual is at in the buying process.

This level of personalization can boost conversions significantly.

Also: You can A/B test all elements on the page. And all landing pages are mobile optimized. Use a template or create your landing page from scratch. 

How To Plan and Create a Landing Page — Step-by-Step

Ready to get started building your landing page? Use this landing page check list to ensure your page checks all the boxes.

  1. Define your objective or goal.
  2. Outline your audience.
  3. Decide on an incentive.
  4. Create a content brief.
  5. Find a suitable template and/or create a mock-up. (Use the tools above!)
  6. Review with your team and proof your landing page.
  7. Create your landing page (using code, one of our suggested tools or plugins).
  8. Test to make sure your form works and ensure assets are delivered (if you are using them).
  9. After publishing, be sure to test on different devices and browsers.
  10. Test! Try different headings, button colors, CTAs. This data will help you create an even better landing page.

Final Thoughts on Landing Pages

Ready to get started building a landing page that converts?

We have one final piece of advice: test, test, test. Best practices are fine, but only you know your audience.

Do you have a favorite tool or platform for building landing pages? We’d love to hear about your preferences in the comments!

Contributing Editors: Horace Bates and Frank Moraes.

Read previous post:
meeting agendas
How to Create a Time-Saving Meeting Agenda [Plus Free Template]

I can’t count the number of times I’ve almost fallen asleep in meetings due to boredom. The large number of...

Close