Little Glossary · Web and conversion
Hero section
The hero section is the first large block of a page, usually the homepage or a landing page: the main headline, a subheadline, the call to action and an image or video of the product.
Hero section vs above the fold
They aren't the same. Above the fold is everything visible without scrolling, and it depends on the device. The hero section is a specific design block: it may fill the whole first screen, only part of it or, on mobile, extend below it.
Typical elements
- Headline: what the product solves, in the customer's words. Concrete beats clever.
- Subheadline: who it's for, how it works or the main benefit, in one or two sentences.
- Primary CTA and, if needed, a lower-commitment secondary one.
- Product visual: a real screenshot, a short video or an interactive demo. With software, showing the product usually explains more than an abstract illustration.
- Brief social proof: customer logos or a rating, just below.
Common patterns on software websites
- Text on the left, product on the right: the most common on desktop.
- Centered, with a screenshot below: good for short messages.
- Interactive demo or video: useful when the product is hard to explain with a single image.
Common mistakes
- Generic headlines that would fit any company: "The all-in-one platform to grow your business".
- Stock photos of people smiling at a laptop.
- Heavy background videos that slow loading and hurt LCP.
- Two or three CTAs with the same weight.
- Hiding what the product is until the third block.
A quick test
Show the hero section for five seconds to someone who doesn't know the company and ask what it sells and to whom. If they can't answer, the problem is the message, not the design.
Related terms
At Little we design and build for B2B tech companies for a monthly fee. See how it works →