A typical sales page is built from recurring sections: the header, the hero, social proof, features, steps, pricing, FAQ, a final call to action (CTA) and the footer. On top of them sit interface elements — modals, toasts, tabs, accordions. Knowing these names lets you talk about your site in the same language as your team and explain exactly what you want changed.
Contents
Why a business owner should know section names
When a client writes “change that thing at the top with the picture and the button”, the designer and developer first have to figure out what is meant — and only then do the work. When the message says “in the hero, swap the photo and change the CTA text”, the edit can start right away. Section names are not jargon for its own sake; they shorten the back-and-forth and keep your feedback from getting lost.
Below is a tour of a typical sales page (a landing page) from top to bottom. For each section: what the team calls it, what it is for and where people most often go wrong. At the end we cover interface elements that pop up over the page.
Top of the page: header, hero and above the fold
The header is the top strip with the logo, the menu and usually a single button such as “Contact us” or “Book now”. If it stays in place while you scroll, it is called a sticky header. Below it starts the hero — the main screen with a large headline, a short subheading, an image or video and the main button. Everything a visitor sees without scrolling is called above the fold — a phrase borrowed from newspapers, where the important stories were printed above the fold of the page.
A CTA (call to action) is a button or link that asks for one specific step: send a request, call, buy. A page usually has several, but there is one main CTA, and it is repeated in several places.
- The hero headline talks about the company (“We are the market leader”) instead of the benefit to the customer
- Three equally weighted buttons above the fold — the visitor cannot tell which one matters
- A heavy background video in the hero that makes the first screen load slowly on phones
- A ten-item header menu on a single page where four items would do
- A sticky header that takes up a third of a phone screen and covers the content
The middle: trust, features and how it works
After the first screen, the visitor decides whether to trust you. This is where sections answer “why you?” and “what happens next?”. Here is what the team calls them:
Reviews, case studies, ratings
- What the team calls it
- Social proof
- What it is for
- Show that others already trust you
- Common mistake
- Anonymous reviews with no detail that nobody believes
Row of client logos
- What the team calls it
- Logo strip
- What it is for
- Quickly signal your scale and client base
- Common mistake
- Logos of companies you never really worked with
Benefits
- What the team calls it
- Features
- What it is for
- Explain what the customer gets
- Common mistake
- Vague words like “quality” and “individual approach”
Tiles of different sizes
- What the team calls it
- Bento grid
- What it is for
- Show several capabilities in one compact screen
- Common mistake
- Too many tiles — nothing for the eye to hold on to
How we work
- What the team calls it
- Steps
- What it is for
- Remove the fear of the unknown: what happens after the request
- Common mistake
- Eight steps where three or four would do
Large numbers
- What the team calls it
- Stats
- What it is for
- Back up words with facts
- Common mistake
- Numbers with no context or nothing to support them
Bottom of the page: pricing, FAQ, final CTA and footer
A pricing table shows the options and how they differ. The FAQ section collects frequent questions; it is usually built as an accordion, where questions are listed and each answer expands on tap. Right before the footer comes the final CTA — one more invitation to act for those who read to the end. The footer is the bottom part with contacts, address, links to legal documents and social media.
Not every page needs every section. If the price depends on the task and is calculated individually, the pricing table is replaced with a “What the cost depends on” section or a calculator form. If customers rarely have questions, the FAQ can shrink to three or four items. The set of sections is chosen for the path of a specific visitor, not copied from someone else’s site.
- The FAQ answers questions nobody asks instead of real objections: “what if it doesn’t fit?”, “how long will I wait?”
- Pricing tiers differ by a dozen small checkmarks, and the real difference is invisible
- There is no button after the last section — the visitor has read everything and does not know what to do
- The footer has no phone number or address, although for a local business that matters most
Interface elements: modals, toasts, tabs
Besides page sections, there are elements that appear in response to a user action. A modal is a window over the page that blocks everything else until it is closed. A drawer is a panel that slides in from the side or bottom, such as a cart or filters. A toast is a short notification in a corner of the screen that disappears on its own: “Request sent”. A tooltip is a small hint that appears when you hover over or tap an icon. Tabs switch content inside one section, and the burger menu is the three-line icon that hides navigation on phones.
A modal fits when
- An important action needs confirmation: deleting, paying
- A short form must be filled in before going further
- The user opened it by pressing a button
A toast fits when
- You need to report a result: “Saved”, “Sent”
- The message needs no response
- You do not want to interrupt the user
How to use these terms when working with a team
These names are useful not only for editing a finished site. At the start of a project, you can describe the future page as a list: “header, hero with a form, reviews, steps, FAQ, footer” — such a list already resembles the structure a designer turns into a prototype. And when accepting the work, the same names make it easy to check that nothing went missing.
- Name the section and the element: “change the headline in the hero”, not “change the text at the top”
- Attach an annotated screenshot — a section name plus a picture removes any confusion
- Separate page sections from pop-up elements: an edit in a modal is not an edit in the hero
- Say which device you noticed the problem on: sections look different on phones and desktops
- If you do not know what an element is called, find a similar wireframe in the reference and point to it
A shared vocabulary does not turn a client into a designer, but it turns “make it look nice” into a task that can be done and checked.