08/10/2022

Everything You Need To Have The Perfect Landing Page Layout

Insights

16 min remaining

Someone who said that looks don’t matter was not a landing-page designer.

Looks matter. They play an important role in the performance of your landing pages. This doesn’t necessarily mean that your landing page must be stunning to achieve good results. While the aesthetically pleasing design is important, it should not be the only thing that matters.

Your landing page layout plays a bigger role than beauty in terms of conversion rates. Your conversion rates will suffer if your landing page layout fails to inspire visitors to take action. You could also say that beauty is in the eyes of the beholder.

There are many things to remember if you want to make a top-notch landing page.

The layout of landing pages: The science behind it

To design a highly effective landing page, you don’t necessarily have to create it from scratch. It can be the reverse. There is a lot of conversion rate optimization science. This means that a few commonly used sections can almost always increase your conversion rates. This doesn’t necessarily mean that a landing page layout is better than others.

These are the most popular sections for landing pages to include:

  • The Hero Section
  • The section on Social Proof
  • Section Feature
  • The section on How It Works
  • Section Footer

Your industry, your business type (B2B/B2C), and your product/service offer will have an impact on the sections you should include. We’ll provide more information below on each section to help you decide which sections are best for your page.

The Hero Section

Your Hero Section is the first thing that users will see when they arrive at your landing page. Your Hero Section will always be visible above the fold and include the most important information about your landing page. Let’s look at the hero section on Bill’s Comfort Systems landing pages.

Before we get into the details, let me give you some background information about Bill’s Comfort Systems. Bill’s Comfort Systems, a heating and air conditioning company, is dedicated to keeping you and your family comfortable regardless of the outside temperature.

We now have a better understanding of Bill’s Comfort Systems. Let’s talk about each section and its purpose.

The following elements will be included in your hero section if not all:

  • The Main Headline
  • Sub Headline
  • Call to Action (CTA).
  • Hero Shot

The Main Headline

Your headline is the most prominent text on your landing pages. It should be concise and convey the offer.

As an example, you can use the headline from the image above.

“Get Your Air Conditioning Check-Up Free”

The headline describes the offer and unique value proposition. It’s simple, but it works. It also fits in a category called value-based headlines. This is not the only type you can use. You can try a variety of headlines to determine which one works best on your landing page.

1. Ask a Question

This headline addresses a problem your customers already have or asks a question that they didn’t know they should ask.

If you wanted to test a headline based on a question, it might look like this.

“Is Your Air Conditioner Broken?”

2. Be the Best

Customers are aware that they have many options when it comes time to make a purchase. Your headline should highlight the reasons why customers should choose you over your competitors.

This is a great example of how to show customers why you are the best.

Utah’s Fastest AC Repairs”

3. Inspire An Emotion

Emotion is a powerful force. Your landing page must harness that power to convert visitors. You can pair your product with positive emotions to make people feel more likely to convert or to point out the potential loss if they don’t.

Here’s a great example of how emotion can be used in your headline.

“Keep Your Family Cool this Summer”

4. Value upfront

This headline is effective because it emphasizes the value and not price. Your offer should be valuable. Be specific about the what, how, when, and where.

The example below will give you an idea of how this tactic can be applied to your headlines.

A Free Air Conditioning Check-up Can Save You Thousands

5. Get Attention / Use Humor

Be bold and stand out from your peers. Tone and humor can be used to draw attention and build rapport with customers.

Here’s an example of a humorous headline for Bill’s Comfort Systems:

Don’t Sweat A Broken AC This summer!

Sub Headline

The sub-headline is typically located below the main headline. It is often smaller in font size and more detailed than the main headline. A sub-headline is a headline that expands on the main headline and provides more information or an incentive.

In our example, we have a sub-headline that explains how Bill’s Comfort Systems can help customers. It mentions “start-to-finish installations”, “repair” or “diagnosis.”

CTA (Call to Action)

Your CTA (call to action) is the text that appears on your button. Your CTA should explain what you want visitors to do and your conversion goal. Be concise when creating your CTA. Ask customers to take a specific action. Your CTA should be concise and ask customers to take a specific action.

The CTA for the hero section is “Request an appointment now”, but you can also find a second CTA at the top right corner, “Talk to a real person”. This is fine as our client needs both emails and calls. However, it’s generally more efficient to use a single CTA.

We’ve tested hundreds of landing pages for clients and found that certain CTAs work better than others. We created some formulas to help you make your own highly-performing CTA.

Here are a few to give a try:

  • Get it Now
  • Get (Product/Service) Now
  • Get a free trial of the product/service
  • Get Started
  • Get Started Today
  • Get (Feature/Benefit) Now
  • Get My Free (Offer, Consultation, etc.)
  • Buy Now
  • Get My (Product) Now
  • Reserve an appointment
  • Book My Appointment

These are just a few examples of CTAs that you can use on your landing pages or test. Landing pages are great because you can test different ideas and find the best. You should test different CTAs to improve your landing page performance. Simple CTA changes have shown us the greatest performance gains.

Hero Image

Your hero image (or background image) is the main image/background displayed in your hero section. It should relate to your product/service and, if possible, include directional cues that direct visitors’ eyes toward your CTA.

The hero section houses some of your most crucial landing page elements, such as your headline and CTA. Your landing page performance can be affected by your hero section.

Bonus tip: Your landing page’s performance will be influenced most by the elements in your hero section. For the fastest improvements, A/B test them first.

The Feature Section

This section could be renamed the “Why Choose Us” subsection. Its purpose is to tell visitors why they should choose your company. Now is your chance to explain your unique value proposition to convince people that you are the best choice.

The description text below each feature is another important part of this section. This section allows you to clarify and expand on each benefit.

Don’t forget the cute icons! They say more than you think and break up text walls. People don’t like reading so it is important to use icons and pictures as much as possible.

The purpose of your landing page should be to answer the question “What is our unique selling proposition?” It is possible to use a phrase or two to address this question, and then repeat it throughout your landing page. Conversion is all about consistency and uniformity in messaging.

Section Services

This section will allow you to showcase the services you offer to customers and explain what each service does. This section will answer any questions that visitors may have about your services.

As with the other sections of this landing page, you will notice that all copy is written in the second person. To grab users’ attention and improve their understanding of the offer, each service item is marked with an icon.

You may also have noticed that the service sections below follow a Z pattern darting left to right and back again. This pattern is common in landing page layouts because it’s the most natural way people view landing page pages.

The Testimonial Section

Positive customer reviews are an essential part of social proof. But, not every 5-star review will be a good fit for your landing pages.

Images of customers are a great way to include testimonials. Studies have shown that human faces increase trust and make claims seem more real. This is why a photo is so important.

If you are asked to quote, make sure it gives an exact example of the problem that the customer encountered and the solution your company provided.

The section on Social Proof

Although customer testimonials are a must on your landing pages, they are not the only way to add social evidence. Your landing page can be spiced up with awards, customer logos, third-party review feeds, or even the logos of famous brands you serve.

Bill’s Comfort Systems’ brands can be showcased to increase social proof by being associated with well-known brands. This also clarifies any doubts prospective customers might have about the ability to work with different brands.

Using well-known brands or trusted brands to show off your products informs and builds rapport.

There are many ways to add social proof on your landing pages. They don’t necessarily need their section. You can be creative and sprinkle social proof throughout your landing page layout.

The footer section is the final. You have one last chance to convert visitors. Make sure to include your call-to-action in the footer section. You should also use the same CTA as in your hero section.

You can remind customers what you want with a CTA in the footer sections.

Although there is less attention given to the footer section than the hero section they are very similar. Your footer section should focus on one goal, conversions, just like your hero section.

Your footer section can use the same elements that worked for your hero section. While they don’t share the same elements, it doesn’t mean you should copy and paste. You can use similar principles to create a highly effective footer section.

It doesn’t matter if you have to zoom in, or use your reading glasses, to see the section above, it is important to include it on all your landing pages. You read it right. Of all the sections that we have covered, this is the one that you must always include. This section could be considered part of the footer, but we prefer to call it the Copyright Section.

Link to your website’s privacy policies and terms & conditions should be included in copyright sections.

This is important because it will show visitors (possibly your competition) that you have the copyright to the landing page’s content. It should also include links to your privacy policies and terms and conditions pages. Google Ads technically needs these links. They’ll be especially attentive if you work in the medical field or other sensitive fields.

While you can make the copyright section more attractive by including your logo, it is important to not distract from the most important elements of your footer section.

Elite Chiropractic’s Landing page:

We knew that one landing page layout would not suffice so we will spend the remainder of this article creating a second landing page for Elite Chiropractic.

Elite Chiropractic, a multi-location chiropractic practice that focuses on restoring health and function to patients, is just a brief overview.

The Hero Section

This article already covered the elements of the hero section. Instead, we will be discussing how to A/B-test different elements of your hero section.

The first variant we showed above used a vague call-to-action “Continue”, rather than a more specific CTA such as the one in the second variant. This small difference is what makes these landing pages different. We have good reason to be cautious with how many changes we make at once. If we do this, we will not be able to identify which change causes an increase or decrease in performance.

The second variant uses the very specific CTA “Reserve Now”.   

We compared the pages until we were able to determine which page has a higher conversion rate.

Guess which page was the winner?

You deserve a pat on your back if you correctly guessed the first variant. The first variant was a clear winner, beating the more specific CTA by 30%. Linear has noticed that vague CTAs perform better on lead-generation landing pages.

The About Our Location Section

Elite Chiropractic is a local company, so we included a section about the area and some dynamic text replacements. This enabled us to show the closest location to potential customers without having to create multiple landing pages.

To add dynamic text to landing pages, you can use a landing page builder such as Instapage. This will increase conversion rates and make it easier to create landing pages for each location.

Why Elite Chiropractic Sections

These sections will explain why Elite Chiropractic is a good choice for you. These sections should be easy to skim, with the most important information in bold and easily read headline text. This will make it easier for readers to find the most important information quickly, which should improve your conversion rates.

Bonus tip: Take candid photos yourself, instead of using stock images. This is particularly important for local services and healthcare. Your page will feel more personal and friendlier if you have photos of your staff or your location.

The Section of Customer Testimonials

Yes, I get what you are thinking. You didn’t tell us to keep the text short and sweet, that’s a lot.

Landing pages with less text perform better than those with more text, but there are exceptions to this rule.

To find out whether visitors prefer shorter testimonials or more concise ones, you can use A/B Testing. You’ll be able to determine which one works best on your page after your test. However, it is important not to assume that the best. Think of your assumption as a hypothesis. It’s possible to believe that one variant is better than the other. However, you won’t know until you test it.

This small change resulted in a 110% increase in full scroll conversions. A worthwhile test no doubt.

Elite Chiropractic’s footer section ends similarly to its beginning. That’s what you want. The same call to action in your footer as the hero section will help keep visitors focused on one goal, or what we call a 1:1 Attention Ratio.

The Attention Ratio measures the amount of information you can put on one landing page in comparison to the number you want your customers to do. This ratio is one of the first things that we look for in a landing page that isn’t converting. This ratio will improve your conversion rates if you keep it tight.

The footer headlines should sum up what customers can expect from you when they hire you or buy your product.

Take note of the headline in the footer section of Elite Chiropractic. The headline uses the word Pain and conveys the same message as the hero section. This reinforces visitors’ expectations and creates emotion.

Conclusion on Landing Page Layout

The first rule about landing page layout is that there are no rules.

Okay, I am joking…

There are many best practices available and plenty of testing ideas to help you avoid starting from scratch. To maximize performance, each page will have a unique set of requirements. If a certain strategy isn’t working, it’s best to not stick with them. Instead, prioritize the most important elements on your page and focus your efforts on them first.

Your landing page copy is the most important aspect of your page. If we had to reduce it further, the headline and CTA would be the two most crucial elements on your page. Spend some time testing and developing these items before you move on to the other sections of your landing pages.

Your social proof is next. When possible, get reviews and testimonials from real people.

If in doubt, try it out! It is impossible to know the performance of a product until you have it tested. Let me leave you with some testing tips to get you started.

  • CTA – Try different call to actions text, color, and button placement.
  • Main Headline – Test various headlines, from asking a question to inciting emotion or offering discounts.
  • Forms – Use long forms instead of short forms and one-step vs. multiple-step forms.
  • Social Proof – Test Reviews with Photos vs Without and Long vs Short Testimonials
  • Landing Page Layout: Test the page’s length, then add, remove, or change the order in which they are placed.

About the author

Kobe Digital is a unified team of performance marketing, design, and video production experts. Our mastery of these disciplines is what makes us effective. Our ability to integrate them seamlessly is what makes us unique.