How to Build a Landing Page (2024 Guide + Video)

The landing page is that make-or-break point in the sales funnel: you either start to build trust or waste money and resources. The objective of every landing page is to boost conversion rates and help you achieve your goal(s). While there is a wide range of factors that negate the one-size-fits approach, high-converting landing pages have numerous characteristics in common. The aim of this post is to show you how to leverage these unifying elements in order to create a strong landing page that delivers results.

1. A Short and On-Point Headline

A headline sets the overall tone in terms of visitor’s interest, especially if the visitor is coming off an ad. This is the first thing your visitors will see so it needs to be concise and crystal-clear about your offer—one main benefit will do. Anything else and your new visitors will leave. A prominent and value-driven headline that conveys a specific fact will likely catch the attention more so than a vague and long headline. You have very few words and you need to use them wisely.

Here’s an example of a good headline from Indeed that immediately conveys a clear benefit to the visitor:

The headline is in large font so it quickly catches the reader’s eye, and it wastes no time telling what the service is all about. Generally speaking, a good headline is short, sticks out, and makes it perfectly clear what is at offer as soon as a visitor lands on the landing page.

By contrast, here’s a landing page with a bad headline:

There’s a lot of bad stuff going on here, which is why you’ll see this landing page again as you scroll further down. For now, let’s focus on the headline: it doesn’t reflect the expectations of anyone that intentionally visits the website and doesn’t convey a benefit at all.

2. An Enticing Subheadline

Combined with the headline, the subheadline is one of the most important elements of the landing page. It’s the key to keeping someone interested as it expands on the headline’s general idea by further explaining the offer. In essence, the subheadline acts as a reassurance for visitors that they are on the right page—one that will meet their needs. An enticing headline followed up with an additional few lines will maintain the natural flow down the page.

This is how Oribi complemented its headline with a subheadline that conveys the benefit of signing up for the service with decisive language:

You immediately know that you’re getting: analytical data for Facebook campaigns that the social network otherwise doesn’t provide. This means you can’t get it the conventional way but instead creates a sensation that you simply need this. While the headlines isn’t strong on its own, it forms a strong value proposition with the subheadline in the mix.

3. Convincing Copy

A your copy basically the guideline that tells visitors what to do next. It’s the centerpiece of the landing page that drives visitors to perform a specific action: the point of conversion. The entire goal of the landing page revolves around this copy and how well you explain what you’re offering and how they can get it. It can be integrated with your headline or stand on its own. In the case of the latter, highlight the benefits of the offer and make the copy compelling, exciting, and persuasive enough for visitors to take your offer seriously.

The image below shows Marketo’s offer for an eBook that displays clear benefits and strong, effective wording to evoke an action:

The content speaks to the reader, especially pain points (“A lot of companies lack the budget, resources, and time to implement an effective content strategy”.) that are super relatable. Also, the form of the text is divided into bite-sized sections, making it easy to get through.

Let’s take a look at where Adobe’s AdLens gets copy wrong:

You can observe that there’s an excess of text preceding any benefit. In reality, the bolded sentence at the bottom of the copy is the only concrete benefit. The offer lacks emphasis, and the arrangement of the text fails to generate excitement for readers, you know, to encourage reading. If a substantial text block lacks a memorable sentence or phrase to accentuate, readers will swiftly categorize the copy as dull.

4. A Distinct CTA Button

The other, equally important element of the CTA is the CTA button. The point is to get a quick reaction from the visitor, which requires the use of easily understood and action-oriented words. Instead of the boring “Click Here” and “Submit” messages, use verbs to encourage action: “Download Now” not only sounds better but also creates a sense of urgency. In addition to decisive text, use contrasting colors to make the button more noticeable and distinct. This relates to the contrast between the button color and the background color. For maximum contrast, select a complimentary color that is opposite to your dominant color on the color wheel. There is no perfect color, just the one that increases the visibility of your CTA button.

Here’s a good example of a button from UserTesting that draws attention and demands action:

And here’s another example from ACT that does the color scheme well but adds a second button, which effectively reduces the conversion rate:

5. Simple Forms

Forms are there for your leads to enter their information and become customers in the end. That’s why it’s important to keep forms as simple as possible. In terms of quantity, the fewer the forms the better, although there are instances where multiple forms make sense (i.e. event registration) due to the level of necessary details. Generally speaking, requiring excessive amounts of information and having too many fields discourages people (who likes filling out forms anyway?), so strive to ask only the minimum relevant information required—typically name and email. As for design, stick to single column layouts as they look less intimidating and are easier for visitors to quickly interpret.

The Motley Fool shows just how simple things can be:

By contrast, below is a landing page from Moz whose form is too long for a free report. Not to mention, all the fields are required, which adds unwelcome friction to the page:

6. High-Quality Visuals

Having a visually distinct landing page helps your conversion rates, and properly used images and videos can greatly help the cause. People generally respond better to visual information than to text. Images, in particular, have the potential to form the first impression before the visitor even gets to the copy. Videos, on the other hand, can present your story in an engaging way and provide an extra nudge to look into your offer. The main thing is to make sure visuals are both relevant and consistent with your content and offer, and naturally, of high-quality.

Masala Body effectively uses visuals as a background:

And Outskirts Press opts to use visuals as a standalone element, placing a video that explains the concept of self publishing and does most of the talking:

7. Proof and Trust Indicators

Everything you do can either build or hurt your credibility. In that regard, testimonials, social proof, reviews, and badges make it easier to boost your visitors’ confidence. Like it or not, trust plays a major role in deciding whether or not a visitor will convert on your offer. Adding proof elements and trust symbols act as a guarantee you are legitimate, while also raising the likelihood of a conversion. This includes inserting a privacy policy because, regardless of how valuable your offer is, visitors won’t convert if they think their information isn’t secure.

Take a look at how Domo leverages testimonials as social proof:

Salesforce applies certificates (even though they are a huge name in the B2B market) and their privacy policy on their landing page:

8. Perfect Grammar and Simple Wording

People are quick to dismiss the effect of a typo in regards to a conversion but there’s a lot more to it. First off, there is a real chance grammatical errors could lead to confusion, including a misinterpretation of the offer. Even if that isn’t the case, sloppy grammar is unprofessional and can cost you leads when you consider you’re asking people to provide often sensitive information. As for wording, use simple and familiar words that people will easily understand and go over your content multiple times in order to make sure everything is written properly.

Like Infusionsoft, for example:

There are no big, fancy words – everything is explained in simple terms, starting with the subheadline.

For comparison, here’s an example of an awkward and grammatically incorrect (extra quotation) headline from The Fletcher Method:

9. Testing

While not a tangible element like the rest of this list, testing is crucial to maximizing the effectiveness of your landing page. Naturally, important elements get a highly visible place but further testing actually shows how well they work. For instance, a simple landing page A/B test can show the difference between having a video and not having it. Everything is up for grabs here: headline, CTA placement, wording, visuals, benefits, the number of forms—anything you can tweak to determine what direction to take in order to improve your conversion rate. It’s important to keep an open mind and use tangible data to inform your decisions.

Watch our video right here:

5 Things to Remember When Designing Your Landing Page

1. Optimize for Speed:

With today’s super fast machines, speed shouldn’t be a problem. Yet, you should always strive for your landing pages to load almost instantly. Research shows you only have a few seconds to pique interest, so the quicker the page loads, the less likely your visitors will flee elsewhere. Resize large images without affecting quality, reduce the number of graphic elements and embedded content, and test out different landing page builders that have fast(er) loading times. Free tools like KeyCDN, Google PageSpeed Insights, GTmetrix, and others can help you optimize your landing page for speed.

2. Optimize for Mobile:

Equally important is to optimize your landing page for mobile views. We are at the point where the majority of online traffic today comes from mobile devices. Visitors demand an experience tailored to their device—it’s as simple as that. Hence, one of the priorities should be making a mobile responsive landing page with great readability, especially in light of Google’s algorithm calculations. You can also leverage touch elements like image buttons and sliders that make form filling much easier. Apart from the majority of landing page builders having mobile optimization tools, you can also use Google’s Mobile-Friendly Test to see how easily a visitor can use your webpage on a mobile device.

3. Ensure Browser Compatibility:

A website sometimes looks dissimilar between different web browsers; this is because different browsers read website code differently. They use different rendering engines which are responsible for displaying requested content. Because users will be accessing your landing page on all sorts of browsers, you need to make sure that it is compatible with as many browsers as possible to provide the best possible user experience. Look for browser compatibility tools like Browser Shots to check how your landing page looks in different browsers and different versions of them.

4. Make It SEO-friendly:

Your landing page needs traffic in order to accomplish its goal. That’s where SEO (search engine optimization) comes into play, as it not only drives traffic to your offer, it drives targeted traffic—i.e. people who are most likely to find your offer valuable. Publishing to your own domain, incorporating targeted keywords and their implementation on the landing page (i.e. meta description), and the aforementioned page speed are just some of the SEO ranking factors that can help you capitalize on search traffic. You can check the level of your website’s SEO friendliness with tools like SEO Web Page Analyzer, Sitechecker, SEO Analyzer, WooRank, and other SEO audit software.

5. Create Multiple Versions:

This is particularly important if your traffic is coming from different sources. Some of your audience comes from paid search, some from organic search, others from social media, and so on. Each of these sources represent a different segment of your audience. By creating multiple versions of your landing page, you tailor the experience to different people to make it more relevant, as opposed to offering the same experience to everyone.

Keep It Simple:

The idea to pack in as much as you can is noble—after all, you want to showcase the best of your offer. However, there’s the risk of having too much, which often translates to confusion and the sense of visitors being overwhelmed. Follow the “less is more” mantra: The simpler the design, the easier it is for your visitors to get around and convert.

Need to remember it all, and quickly. Here is a handy-dandy infographic for you to use and share:

One High-Converting Landing Page Coming Right Up

Keep in mind that there is no one right or wrong approach to creating an effective landing page. The main point is to display your content in a way that efficiently presents and explains your offer—doing so will make connecting with visitors that much easier. By implementing the information outlined in this post, you’ll be closer to creating a strong landing page that builds trust, improves user experience, and inspires people to follow your CTA.

---

Image Credits

https://instapage.com/blog/landing-page-examples
https://www.crazyegg.com/blog/30-landing-page-examples-to-steal-from/
https://downloads.digitalmarketingdepot.com/MOZ_1811_LocSEO2019_landingpage.html?utm_source=sel&utm_medium=newspost
https://unbounce.com/landing-page-examples/10-landing-page-samples-that-pissed-me-off/