Landing Page Anatomy: Functional Elements

We analyzed a huge number of landing pages and identified recurring features which allowed us to create an algorithm for building an effective landing page. The sections that make up the landing page are what we call functional blocks:

Since there are quite a lot of blocks, we have divided them into 5 categories, according to their function and message they convey: cover, about the project, comprehensive advantages, integrity blocks, and call to action.

While you can arrange and edit blocks as you like, it is essential that the page contains at least one block from each category. That way you will end up with a well-rounded narrative.

Cover. Its main task is to make the right impression, to inform the visitor what exactly this website is about, and to motivate them to scroll down.

About the project. This is a detailed description of the product or service: What is it, how does it work, who is it for, and how much it costs? You simply can't ignore talking about the project. Before diving into the benefits and calls to action, you must first make sure the customer understands what you are offering.

Comprehensive advantages. This section allows you to lay out exactly how and why you are better than your competitors. You are likely to experience fierce competition in most markets, which makes it essential to let your customers know why they should choose you.

Integrity blocks. This block group allows you to establish and build trust between you and your customers. Reviews, success stories, certificates and commendations, partners, and even your office address and phone number—all these will show that your business is real and that the visitors can trust you.

Call to action (CTA). Your business needs clients, which is why your landing page should contain blocks that generate leads. These include sign-up forms, subscription forms, contact forms, or even phone numbers.

The cover gives a first impression about your business. You only have a few seconds to convince the visitor to stay on your page.

For this task, you have a rather small toolkit: heading, subheading, a button or form, logo, background color or image, menu, and a downward arrow.

The main purpose of this section is to provide a clear and detailed description of what exactly you're offering.

This is a general description of the product or service. It can be purely in text, but you can also choose to add an image. It makes sense to position this block right after the cover. That way you can ensure that every visitor will know that they have ended up at the right place and that they can find what they're looking for.

Even though you will have a description on the cover, it won't be a bad idea to add it as a separate block. The description on the cover serves more of an emotional purpose to impress your visitors. However, when in a separate block, it works to actually inform the visitor.

Your website visitor will likely see your product or service for the first time. That is why you have to be able to describe in one simple sentence what you're offering.

Advantages make your product or service cool and unique.

Usually, several short sentences are enough to outline your advantages. They are often accompanied by icons, simple illustrations, or images.

The title and image on the cover are meant to immediately capture the visitor's attention. Should that work, the description should further inform the visitor.

These scenarios show examples of the situations when your product or service can be useful. Benefits stand for all the good things clients will get after purchasing your product or service.

Here we use a similar to the advantages section format: Heading, description, image.

Benefits and advantages may look alike. However, the difference is that advantages highlight main features of the product, while benefits and user scenarios reflect your customers' gains.

Looking at the benefits, the visitor should understand what problem your business solves and how exactly your product or service will improve their life.

For example, suppose you run a subscription service for fresh fruits delivery. Your advantages are the quality of the fruits, the below-supermarket-level prices, and guaranteed delivery within 2 hours. Now, the client's benefits here are getting more vitamins, saving money on groceries, and no need to remember to place an order.

In the previous chapter, we learned how to identify your target audience. On your landing page, you could include the groups which are most likely to consume your product or service and describe how each of these groups can benefit from it.

For this part, it’s up to you to choose the best format. You can simply write some text, or add some icons, or a tiled gallery.

Pricing plans are usually added when the product or service is offered in several pricing options including a free one. It's easy to understand the option differences when the plans are presented in columns or on separate cards.

A classic move is to highlight the most popular fee option. First of all, since it's the most popular option, chances are that it will fit most visitors' needs. Secondly, you make the client's life easier, as they no longer have to compare and analyze different options. Most of the time, people tend to make decisions on the assumption that the majority can't be wrong. Therefore, by highlighting the most popular plan, you are making their choice easier.

Always put the real prices on your website. If someone is turned off by it, they're simply not the clients you're looking for. If you decide not to include prices at all, hoping that customers will call you to inquire, then all you're doing is just losing the clients who are ready to purchase the product at a price you've set. Any unnecessary move results in conversion losses.

This is essentially the most important block to have on your landing page as the main purpose of a landing page is to motivate the user to do something. That's why this block must always be visible. As for the background, you can use color or add an image.

It can usually be found at the end of a page; however if your web page is quite long, call-to-action buttons can be added to several parts of it. You can consider adding a panel with a button that is always visible in the upper right corner of the page. This could work well but it's important not to overdo it. Putting buttons after every block could get rather annoying.

You don't have to write the same thing on every button. It's better to phrase the offer differently every time, using phrases like "sign up," "try for free," or "register now." That is certainly better than having all your buttons read "buy," "buy," "buy."

This feature is similar to the previous one but includes a form. If the purpose of your landing page is to get someone new to subscribe or sign up for a webinar, this block becomes a key section.

It is usually made up of a heading, a subheading, and a form itself.

Don't use the offer already mentioned on the cover but make sure that this one is just as inspiring. Analyze the things that could stop someone from wanting to sign up; come up with a motivation phrase. Perhaps, all you need to do is just tell your visitors what happens after they've signed up.

Put together a "Thank You" page or message that appears after the user has signed up. For example: "Thanks, your submission is well received! We will contact you within 1 hour to confirm your order," or "Thank you! You have now signed up for the conference."

Other people's opinions influence our decisions. It convinces us that if other people have tried a product and liked it then we can trust it, too.

The most popular format: heading, the review text, photo, full name, position, and the company.

The problem is that the Internet is full of fake reviews. That’s why many users are skeptical about the reviews they encounter. In order to overcome this, make sure that you seek reviews from those who can truly claim to represent an industry: a famous brand, or a well-known industry expert. Consider including links to the reviewers' social media profiles and add their photographs to the reviews. Needless to say, all your reviews should be real.

You can also think of producing video reviews. Real people sharing their experiences and commending a service or a product inspire and motivate others.

If there are well-known companies among your partners or clients, you should include their logos in a separate block. New clients are much more likely to trust you if they see that big-name brands already do.

Client and partner logos can be impressive. However, these companies must be easily recognized. Mentioning brands and names that no one knows is pointless: This way, you clutter up your page.

There is, however, one problem you might encounter: different logos have different styles and thus, it could be hard to group them in a way that they look nice together. The solution would be to have the logos displayed in a single color that would revert to its original color on hover. You should also pay attention to the size of the logos as you want your block to look neat. Therefore, make sure that all the logos are roughly the same size.

The Internet is a very visual medium, and it's a great advantage if your business can be presented using photographs.

The gallery doesn't necessarily have to look like a slideshow. In fact, every click is a small decision that users are usually reluctant to make. There are plenty of other ways to effectively combine and group your photographs.

Make sure you only use high-quality photographs: your visitors expect to see photos that have no issues with focus, brightness, contrast, or color.

If it's important to show how exactly a product or service works, you can divide the description into several phases or steps.

This could be designed in the form of vertical or horizontal diagrams, bullet points, or columns.

For example, a design studio could use this block to highlight workflow milestones and present a roadmap to the client: brief, meeting, contract, prepayment, first draft, revisions, second draft, revisions, final version, remaining payment.

This section is used when the landing page represents an event that lasts over time and consists of several parts.

The schedule is usually shown in the form of a timetable or a timeline. If there are speakers taking part in the event, it's a nice idea to add their photos to the schedule.

Show a conference schedule, the order of the talks and speaker presentations, a daily timetable in a summer camp, or a music festival lineup.

A promotional video or a screencast is an effective way to demonstrate the idea behind your project as well as to show how your product works, share impressive client success stories or put together reviews.

The video can be introduced in several ways: It can be played in the background, shown in the gallery, appear as a pop-up, or be included in a layout featuring text and images.

Watching a video requires less effort, that’s why most people prefer video to a written instruction.

The drawback is that it's not always convenient to watch a video, so make sure that you include thumbnails, descriptions, and comments that will accompany your video. This way you can ensure that the information contained in the video won’t be lost.

This section helps you work with possible issues or negative feedback. It would be a smart move to get to know your clients' doubts and concerns, then put them into questions, and provide thorough answers.

These blocks are usually designed as an interview or a chat.

FAQs can also be used to structure information. For example, if you want to describe your delivery options, you can break down the narrative into questions and answers. This will make it easier to grasp the details.

The contacts block is usually the last one on a landing page.

Contacts can include your business address, email, phone number, map, links to social media, and photos.

A map is usually accompanied by detailed directions (i.e., how to get there by car or on foot).

People trust someone they know. It's always nice to remember that even a single photo makes a difference.

The format is simple: a team member's photo, their name, role in the company, and sometimes even a quote.

It's best if the visual style of the headshots matches the overall landing page style. Also, consider the sphere of your business when choosing a style: Photos taken during expeditions may be appropriate for a travel guide, while doctors should opt for a more professional, neutral background.

Don't worry if you are the only person on the team. Feel free to tell a bit more about yourself.

Why do numbers work so well? They are easy to understand and often attract attention, as our brain is always looking for something familiar and simple.

It's best to use 3 to 4 figures with a short description for each one.

Figures should clearly outline key facts about your business. It's not obvious to everyone what every figure means. For example, "Our company has 6000 employees," is an easily interpretable statement: it means the company is quite big. However, "Last year we sold 3000 gift sets" is a much more ambiguous use of figures, and it isn't immediately clear whether the company is doing well or is in fact on the verge of bankruptcy.

This block is a variation of advantages and benefits. However, its format is different. While benefits and advantages are 3-4 bullet points with icons and images, the list of key features is exactly what it sounds like, a list. For example, 5 reasons to book our cover band, the reasons our backpack is a hiking essential, working with us means, etc.

Professional certificates or commendations work to increase trust in your product or service. In some areas, such as education, law, or medicine they are not only useful but also essential.

Another type of certificate is a certificate that you present to your clients, for example, upon completing an online course. Show the certificate sample and explain how it will strengthen their CV and why it will be useful in the future.

These are essentially your business case studies, or your clients' stories showcasing how your product, courses, or event contributed to their success.

For case studies, describe how you were able to successfully solve your clients' problems. Select several cases and show what solutions you came up with and how you tailored them to your clients' needs. If all your projects are similar and follow the same pattern, it would make sense to create a "what we do" section and describe your workflow roadmap for your clients. Likewise, you could divide your case studies into two blocks. If your success stories can be presented visually, use the "before/after" block.

Suppose you are an interior designer. In your case studies section, you could show "before/after" photos of home interiors and provide a short description of the tasks you were given. In the "what we do" block, you could share the process of the blueprint development and approval, and expand on working with clients and contractors.

The projects featured on a landing page are usually a selection of your best work. Let the visitors see the details on other pages of your website.

A motivational phrase or inspirational quote against the backdrop of a stunning video, photo, or color triggers an emotional response to your website.

This allows for a break from the blocks filled with numbers and makes your landing page less formal.

A countdown timer highlight upcoming events or deadlines on your website. Its main purpose is to motivate a potential customer to make their choice quicker.

Countdowns can display time as well as quantity.

If the event has both a registration deadline and limited capacity, the countdown serves both a motivational and informative purpose. Thus, its presence on the landing page is fully justified.

There are also fake countdowns urging you to "hurry up and get a discount until the end of April," "limited edition," "last hours to get 50% off," etc. These are obvious marketing techniques that reduce the credibility of your brand and make your offering less attractive overall.

Countdowns can also inform customers about an upcoming launch of a new product. If the product is not yet available but you want to start building up a potential customer base, you can create a landing page that contains only a submit form and a countdown.

Pop-ups are used to convey information about promotions or invitations to subscribe to the newsletter.

Pop-ups can also appear as a result of a specific action taken by the visitor. These can include: clicking a button, moving the mouse towards the "close page" icon, or scrolling down to a certain point on the page. Likewise, they can also appear automatically after a certain period of time.

"Get-in-touch" widgets increase user engagement. The easier it is for someone to contact you, the more likely they will actually reach out to you.

Widgets are usually located in the lower right corner of the page and open up into a chat, or a form suggesting to send a message or leave your phone number.

A chat or call window is in itself a rather annoying element on the page. That is why you shouldn't make it worse by adding animated icons or stock photos of consultants ready to take your call.

If you have a long page you could add a fixed navigation menu with hyperlinks to the main sections of the website along with a call-to-action button.

Another way to help your visitors navigate the website is to add a side navigation menu. The sidebar is less distracting and allows visitors to quickly jump to any part of the website.

A common problem with navigation menus is that they are often overloaded and instead of helping the user, they distract them from the content. To avoid this, make sure to include no more than 5-7 items in short words. The menu is there as a support element, what matters is the content.

The menu could also take the form of tiles & links: this way, you first show the complete list of items and then let your visitors see the details on click or on hover. For example, if your landing page is about job opportunities, first, list all of them with hyperlinks to each one (make sure the opportunities can be found further down the page), and then provide a detailed description of each one.

There are two types of such buttons: direct links to social media profiles and share buttons.

Buttons can be added as a separate block or can be included in the navigation menu, or footer, appear in a pop-up, or be found in the contacts section.

Strictly speaking, social media buttons distract users from the main purpose of a landing page (unless the purpose of your landing page is to grow your Facebook group). At the same time, a large number of followers and likes (about 100 people for a landing page) tend to inspire trust. Most people are very selective about what they share on social media so if a page has a lot of shares, it's worth checking it out.

Now you know what makes up a landing page and can decide which features you find most useful for your projects. Bear in mind that you don't have to use them in the same order as they appear in this chapter. Design is a narrative, so make sure your landing page provides a consistent narrative about your project.