regresar a página artículos

Structure of an ideal landing page or homepage

Irresistible Landing Pages: Building Landing Pages That Demand Attention and Drive Results.

Última actualización
04/2024
Web (diseño y desarrollo)
Guía práctica
Favoritos de Menta
Autor (es):
Luis Alfredo

First, it is important to differentiate if a home page is a landing page? To answer this question, it is important to first define what a landing page is. A landing page is essentially a page that a potential customer arrives at through various means (Google, social media, emails, etc.) and is specifically designed to fulfill a particular goal, especially in marketing.

That being said, a home page can often be a landing page.

A home page is not considered a landing page when its primary purpose is to provide an overview of the website and facilitate navigation to different sections. However, the foundation that we are going to see today can be used for the home page of a website and additional sections can be added depending on the client's needs.

In fact, within the same website, other pages, such as specific service pages, can be built using this landing page structure.

Without further ado, let's begin with the breakdown of each section of a landing page, but first, let's understand two important terms:

Above the fold: This refers to what is visible when a landing page is initially opened, the first screen that the potential customer sees. It is generally known as the "Hero" section.

Below the fold: This refers to what the user sees once they start scrolling.

Structure of a landing page [1]

Above the fold

The most important section of all, here your potential customer will decide whether to continue on your page or not. This section needs to be well-analyzed. It should have captivating content for your audience and a design that exudes professionalism and trust. Users make a decision within 3 to 5 seconds whether they will stay on your website or not.

1. Title (value proposition)

Perhaps one of the most challenging tasks is to come up with a unique, concise, memorable value proposition that specifically addresses your target audience. It is the precise expression of the set of benefits or values that customers will receive to meet their needs. Here is a more comprehensive article we wrote on how to create a value: link.

In simpler terms, you can consider the following three tips:

When you have a unique product: Explain it in the easiest way possible.

Example 1: Netflix - Thousands of TV shows & movies. Entertainment guaranteed.

Example 2: Uber - Your ride, just a click away.

When your product is not unique: Many products or services are not unique. In this case, a good hook adds strength. The easiest way is to write hooks that address the biggest objection of your customer.

Value Objection Value Proposition (Value + Objection)
Rank higher on Google I suck at SEO You don't have to be an SEO pro to rank higher on Google.
Approve the TOEFL It's really hard Ace the TOEFL with just 10 minutes of studying per day.

Niche proposition: Another approach is to carve out a niche with your value proposition.

Example 1: How Small Brands Sell More Online

Example 2: The All-In-One Toolkit for Working Remotely

Example 3: It's How You Make a Podcast

Example 4: The Referral Tool for Newsletters

Image obtained from Unbounce

2. Subtitle

Here, you can be more specific. Explain how it generates value in the potential customer's life.

Example 1:

Title: How Small Brands Sell More Online

Subtitle: Privy's conversion, email marketing, and text messaging tools help you get more customers from your traffic.

Example 2:

Title: Ace the TOEFL with just 10 minutes of studying per day

Subtitle: 10-minute microlessons designed to boost confidence and make TOEFL strategies easy to remember.

Image obtained from ConverKit

3. CTA (Call to Action)

Help the user quickly fulfill the goal of your page.

The most common CTAs are "Sign Up," "Start Trial," etc.

Ideas for high-converting buttons:

Call to Value: Emphasize the value rather than the action in your buttons; these generate more conversions. The idea is to fulfill the promise that your title offers.

Example 1: Record podcasts in studio quality → CTA: Start recording

Example 2: Learn why users leave your site → CTA: Show me my heatmap

Objection handle: Add a few more words to your CTA to address the main objection of your customer to clicking.

CTA Objection Objection Handled
Start Free! I bet it asks for my credit card Start Free! No CC required
Try Prisma I don't have time Try Prisma in 5 minutes
Get started I bet it's expensive Get started for just $1

Lead Capture Form: It is recommended to keep the form as short as possible, and more information can be obtained later. However, this may vary if you are a B2B company that offers a high-value product or service and wants to pre-qualify leads in advance. In that case, you can include more fields, but it is not recommended to exceed 5 fields.

In some cases, there can be a primary CTA and a secondary CTA, especially on more comprehensive pages like the Home page.

Image obtained from Swipe Pages

4. Social proof

Social proof in this first section adds instant credibility. You can display logos of brands you have worked with, the number of projects or downloads, review scores, customer face photos, among others.

Image obtained from Monday

5. Visual proof

The idea is to show something as close as possible to what you are selling. Showcase your product, or even better, a video of your product in action.

Image obtained from Loom

Example of a great Above the fold

Image obtained from Stripe

Below the fold

In the Above the fold section, you capture the attention of the potential customer. In the Below the fold section, you convert that attention into a purchase.

6. Features and objections

Here, you need to explain in more detail the features of your product, how it benefits your potential customer, and what the main objections are. This section can be the longest and most comprehensive. Group all the main objections and use their own words to highlight them. You can even divide this section into two parts: one for the features of your product or service and another for objections.

Example:

So simple Grandma can use it.Guests join with just one click. Nothing to download. No need to make an account.We built this for non-techies.

Objection Copy Solving Objections
It is hard to use So simple Grandma can use it
The setup is hard Guests join with just one click…
I suck at tech We built this for non-techies

Image obtained from Unbounce

7. More social proof

In the previous section, we included a snippet of social proof to gain credibility. Here, we aim to inspire action. Use testimonials from your current customers that reinforce your value proposition. You can use more data, such as the number of satisfied customers, completed projects, countries, NPS (Net Promoter Score), etc.

Image obtained from ConverKit

8. FAQ (Frequently Asked Questions)

Include all the features and objections that were not suitable to address earlier.

Image obtained from Leadpages

9. 2nd CTA

Here, remind the customer why they should click.

Image obtained from Swipepages

10. Extra reinforcement and/or footer

Finally, leave the potential customer with a story that helps and reinforces everything mentioned before. It could be a letter from the founder (with a photograph).

A suitable structure for the letter is:

Structure Example
Put yourself in their shoes Out of the 12+ million e-commerce businesses, only 8% sell over $1,000 per year
Explain the problem Yup - while it's easier than ever to build an online store (thanks, Shopify!), it's harder than ever to grow it. Most e-commerce brands have two challenges with growth:
1. Getting people to make their first purchase.
2. Getting the people who do to come back and buy again.
Take ownership That's why we built Privy - to give small e-commerce brands like yours a leg-up
Happy ending In the last ten years, we've helped over 600k stores (like yours) generate $5 billion in sales. I'd love for you to give it a try

Conclusion

All the aforementioned content should be supported by an interface design that captivates potential customers. Seek support from expert agencies in web design and development that can provide further guidance. If you're interested, Menta would be happy to assist you.

In summary, the structure is as follows:

  1. Title: Explain the value you provide.
  2. Subtitle: Explain how you'll create it.
  3. CTA: Indicate the next step for the user.
  4. Social Proof: Make it believable.
  5. Visual support: Help them visualize it.
  6. Features and objections: Support your product/service.
  7. More social proof: Encourage them to buy.
  8. FAQ: Answer all objections.
  9. 2nd CTA: Remind them what to do.
  10. Extra reinforcement and/or footer: Address any remaining doubts.

References

Disclaimer: The information is obtained from the following sources, using the same structure and explanation. It is recommended that the user review the following information:

[1] My step-by-step guide to landing pages that convert (no date) Marketing Examples. Available at: link

[2] Perfect landing page design explained (in 5 minutes) (2022) Flux Academy. Available at: link

Buscas generar leads mediante una web única y robusta que proyecte tu marca, destaque sobre la web de tu competencia y te haga sentir orgullo de mostrarla a clientes, amigos y familiares.

Llegaste al lugar correcto
Conoce más sobre Menta aquí.