Website sections: A cheat sheet for building high-converting websites
.png)
Every website is made of building blocks or sections. Examples of website sections include:
- Hero
- Testimonials
- How it works
- Benefits
Brands that understand how to use website sections effectively build trust and provide visitors with all the information they need to make a buying decision.
A website has many purposes, but at the end of the day, it’s a tool for selling your product or services. If a business always needs to get on a call to convert a customer, then the website isn’t doing its job.
This guide breaks down the elements every landing page needs to convert. It also dives into the most common website sections, and how to choose the right ones for your business.
What are the key components of a landing page?
Every high-converting landing page has the following elements:
- One clear call-to-action
- Hero image or video
- Social proof
- Unique value proposition
The rest of the website sections in this guide are optional. View them as an à la carte menu. Pick and choose sections that best answer these five questions.
Navigation menu (navbar)
The navigation menu is a bar at the top of every website that links to the most important pages.
A well-designed navigation menu is like a map. Visitors can easily find what they’re looking for and navigate to different pages. It also establishes site structure, which influences SEO and how search engines crawl websites.
Ideally, a website menu should have four to five links. Larger sites may have up to seven. If you have more links, nest them inside a dropdown menu. However, carefully consider which pages to feature, so the navbar doesn’t feel cluttered. Too many navbar links confuse and distract visitors.
Hero section
The hero is the above fold section of a website. It’s what visitors see first, and it influences whether they leave immediately or keep scrolling and become a customer.
Think of it as an elevator pitch. You only have five seconds to convince someone that your brand is the right choice.
To do this, the hero copy should communicate what your business does, who it’s for, and what value it provides.
In addition to answering those questions, the hero section includes these elements:
- Headline
- Subheadline
- Unique value proposition
- Call-to-action (CTA)
- Hero image or video
E-commerce hero example
Flaus’ hero works because immediately visitors know it’s a flosser. It answers the three main questions in the copy.
Flaus also supports those claims by including social proof—it’s dentist-recommended with over 10,000 customers.
B2B hero example
Relume hosts a library of website components and an AI tool that generates sitemaps and wireframes. Again, its hero hits all the main parts.
It also includes social proof by showing examples of Relume sites, and stating that over 200k web designers and devs use it.
Social proof
When people shop online they expect social proof—evidence that others have bought a product or service and recommend it.
Including social proof builds trust and credibility. Without it, you’ll struggle to convert website visitors. Over 92% of people hesitate to buy from a business that doesn’t have reviews.
Social proof includes testimonials, reviews, press, and case studies. High-converting sites use several types of social proof throughout a website.
Below are examples of social proof and guidance on which type to use depending on your business.
Logos of customers or users
B2B and SaaS companies include banner sections featuring companies that use their product or services. It borrows brand equity and establishes credibility.
For example, Hotjar claims over one million websites use its platform, including large companies from Hubspot to Adobe.
Another way to show credibility is to include the logos of publications that have featured your company.
The publications should resonate with your target audience’s age and interests. For example, if your niche is finance, then the Wall Street Journal, Bloomberg, and CNBC align with your brand. If you sell home decor products, then Apartment Therapy is relevant. Fly Fisherman is probably not.
This Letterfolk landing page follows the typical product page structure but includes press features. The company sells tile mats, so most publications focus on home and interior design.
Testimonials and reviews
Every business should include customer testimonials and reviews.
The most effective types are the ones that are hard to fake. For example, saying a company has five-star ratings is not as powerful as videos of customers reviewing products.
Star ratings are easy to fabricate. Hundreds of online reviews, especially those from a customer’s social media aren’t.
Product-based businesses should include customer reviews with images and videos. It shows the product in action and can reveal before and after transformations.
Again, Flaus does this well by including YouTube Shorts and classic online reviews.
More businesses are following this format and including TikTok, Instagram, and other social media posts in reviews.
Another example is Storetasker—a Shopify platform for finding freelance marketing, design, and development.
Immediately, it shows the recognizable brands its freelancers have worked with and includes a clean graphic on the process.
Case studies
A case study tells visitors how you work with customers, what types of problems you solve, and what results to expect.
Start with a challenge or problem. Then, show how your business helped solve it and the measurable results and impact of your solution.
Case studies are common types of social proof for these businesses:
- B2B
- Tech
- SaaS
- Service-based (i.e. agencies)
Okendo’s case study leads with the impact—Feastables saw a 433% increase in conversions. It also makes the case study skimmable and believable with customer videos, bulleted lists, and graphics.
Benefits
The benefits section tells visitors what’s in it for them. What results or positive outcomes do customers typically get from using your product or service?
For example, Modern Fertility’s benefits section focuses on the cost, convenience, and comfort of taking its fertility test.
Features
You may have heard advice to focus on benefits over features. In my experience, people want both.
Benefits are the big picture. Features are the details.
Lead with benefits, because that gets potential customers interested and helps them imagine using your product or service to improve their lives.
Then follow up with features. If visitors reach the features, then they’re usually close to buying.
Mushroom coffee company Everyday Dose does this on its homepage and product pages.
- Benefit: You’ll stay focused and stress-free.
- Features: Everything else (no sugar, lab-tested, gluten-free, etc.)
How it works
How familiar is your target audience with your product or solution? The answer to this question determines whether or not you need to include a how it works section on your website.
Service-based businesses need a how it works section because everyone’s process is different. Potential customers want to know what to expect before they book a call or sign up. It also helps set expectations early on.
The how it works section should be so clear and simple that anyone can understand it.
Penji, a subscription design service, outlines the process in three, easy steps. It also includes a video on its website as an additional visual aid. This eases hesitation and increases the chances that someone will sign up solely from the website.
E-commerce or product-based businesses can show how a product works and/or how it’s made. For example, consumer packaged goods (CPG) include nutrient labels and ingredients, but also describe where
Product collections
Putting products on a website is a no-brainer. However, I’ve seen many e-commerce companies put products up without any of the other website sections or copy.
There’s no context. For example, a t-shirt company doesn’t need to explain what they are—everyone’s familiar with a t-shirt. However, why should they buy from this t-shirt company when there are millions of others?
What if your t-shirts are made of a unique, sustainable material? Maybe they’re stain-resistant? Both could be unique value propositions that turn visitors into customers. But, they won’t know that unless you highlight it on your website.
Short, concise copy in the heading section before a product collection can make a huge difference.
For example, Social Citizen sells sweat proof t-shirts. It says that before product collections, and follows it up with a “What makes us different?” section at the bottom.
It doesn’t always need to be on a home page either. Product pages are ideal for adding those unique details that set a product apart.
The exception to this is if you’ve built up so much brand awareness, that you don’t need to provide all that copy. In my experience, few brands can get away with it (i.e. Apple).
Comparison charts
Do potential customers compare your business to specific competitors or competing solutions? Then, include a comparison chart.
Comparison charts are one of the most overlooked marketing tools. They can move customers from the consideration to the purchase stage of the marketing funnel.
Chances are that people are typing “brand name + vs + competitor name” into Google anyway. Then, they’re researching your company from the information on third-party websites, or even worse, from competitors.
By including comparison charts on your website, you’re part of the conversation.
Quince’s entire mission statement focuses on selling luxury quality goods without the high cost. On every page of its website, it reinforces that mission. One way is through the comparison charts on product pages.
Call-to-action section
All hero sections should include a call-to-action button, and it’s common to include one in the navbar.
However, consider including a call-to-action section at the bottom of a webpage, just before the footer.
If someone is interested enough to scroll to the bottom of the page, they may click a CTA there rather than scroll up. Ideally, you’ll also have a sticky navbar, which means that the navbar follows as someone scrolls down the page.
Footer
The footer section is similar to the navbar because it connects to site navigation and structure. It also appears at the bottom of every page of a website.
However, it has more real estate than the navigation menu. It houses links that are important, but not necessary to navigate a site, including your:
- Privacy policy
- Terms of service
- Copyright information
- Social media profiles
- Newsletter signup
Typically, businesses link to many of the same pages in the navbar, but with these extras.
Understanding website sections and when to use them can help businesses move past the blank page. Treat each website section like building blocks for creating high-converting pages.
Then, follow up with data. Every business is different, so there isn’t a set order that works for everyone. Copy and design also influence visitors.
Track how people engage with your website using analytics from GA4 and heat mapping software like Hotjar or Clarity. Iterating on the initial landing page design helps fine-tune the overall website experience, and improve conversions.