The hero section is the top block of a web page that visitors see before scrolling. On SaaS sites it typically contains the value proposition headline, a short supporting sentence, a primary and sometimes a secondary call to action, and a product image, video or illustration. Because it is the first impression, it carries much of the work of telling visitors they are in the right place.
What belongs in a hero
A hero should answer three questions quickly: what is this, who is it for, and what can I do next. Many sites also place a strip of customer logos or a rating directly under the hero to add early proof.
- A specific headline stating the value proposition.
- One supporting sentence with the key detail or differentiator.
- A primary CTA, optionally paired with a secondary one.
- A visual that shows the actual product or outcome.
- Optional early proof such as logos or a review rating.
Performance and layout
The hero image or headline is often the largest element on screen when the page loads, which makes it the Largest Contentful Paint element. Oversized images, autoplaying video and late-loading web fonts can slow it down. Reserve space for hero media with width and height attributes or CSS aspect ratios so content below does not jump when it loads, which affects Cumulative Layout Shift.
The fold is not a hard line
Screen sizes vary so widely that there is no single fold. Visitors do scroll when the page gives them reason to. The aim is a hero that earns the scroll, not one that crams every message into the first screen.
Example
Showing the product instead of a stock photo
Hypothetical support desk Mirebell replaces an abstract illustration in its hero with a cropped screenshot of a real ticket view, annotated with the auto-tagging feature its headline promises. Visitors can now see the claim, and the team compares scroll depth and trial starts before and after the change.
Common mistakes
Rotating carousels
Sliders that cycle through several messages make each one harder to read and push important content out of view. One clear message usually works better.
Heavy media that delays the page
A large background video can make the hero the slowest part of the page. Compress media and test load times on mobile connections.
Questions
It can, especially on campaign landing pages where the offer is simple. For complex products, a button leading to a form after the visitor has read more is often clearer.
