The hero section is the first thing visitors see when they land on your website. It sits at the top of your homepage, above the fold, and it has one job: convince visitors to stay and take action.
Research shows that the average visitor decides whether to stay on a website within 3-5 seconds. In that time, your hero section needs to communicate who you are, what you offer, and why it matters. If it fails at any of these, you have lost the visitor, and they will almost certainly not come back.
The hero section is not just a design element. It is the make-or-break moment for your entire website. Let us break down exactly what makes one work.
What a hero section needs
1. A clear headline
Your headline is the most important text on your entire website. It should:
- Say what you do, not who you are. "Expert Plumbing Services for Your Home" is better than "Welcome to ABC Plumbing"
- Speak to the visitor's need. Frame it in terms of what they get, not what you provide
- Be specific. "Professional Websites in 10 Minutes" is stronger than "Great Websites Made Easy"
- Be concise. 6-12 words is ideal. If it wraps to three lines on desktop, it is too long
Headline formulas that work
The direct benefit: "[Result] for [audience]"
- "Fresh Flowers Delivered Same Day Across Mumbai"
- "Pain-Free Dental Care for the Whole Family"
The problem-solution: "[Solve problem] without [pain point]"
- "Get a Professional Website Without Writing a Single Line of Code"
- "Keep Your Home Pest-Free Without Toxic Chemicals"
The specific claim: "[Specific number/timeframe] + [outcome]"
- "Professional Websites in 10 Minutes"
- "Your Tax Return Filed in 48 Hours"
The question: Address the visitor's primary concern
- "Looking for a Reliable Electrician in Pune?"
- "Need Your Car Serviced Today?"
Headline failures to avoid
Weak headlines: "Welcome to Our Website" | "We Are ABC Company" | "Quality Service Since 2015" | "Your Trusted Partner"
These tell the visitor nothing. They already know they are on your website. They do not care when you were founded (yet). Tell them why they should care right now.
Strong headlines: "Your Brand, Professionally Built in Minutes" | "Emergency Plumbing When You Need It Most" | "Fresh Baked Daily, Delivered to Your Door"
2. A supporting subheadline
The subheadline adds context to the headline. If the headline grabs attention, the subheadline gives the reason to keep reading. It should:
- Expand on the headline with 1-2 sentences
- Include specifics (numbers, locations, timeframes)
- Address the primary concern or desire of your audience
- Be readable at a smaller size than the headline (16-20px typically)
Example pairing:
- Headline: "Emergency Plumbing When You Need It Most"
- Subheadline: "Licensed plumbers available 24/7 across Jaipur. Average arrival time: 45 minutes. No call-out fees."
The subheadline provides the proof points that make the headline credible.
3. A primary call to action (CTA)
Every hero section needs a CTA button. This is the action you want visitors to take. It is arguably the most important interactive element on your entire page.
CTA best practices:
- Use action-oriented language (verbs, not nouns): "Get Started Free" not "Free Trial"
- Make the button visually prominent: contrasting color from the background, sufficient size (minimum 44x44px), adequate padding
- Limit to one primary CTA: a secondary link is okay, but one button should be clearly dominant
- Reduce friction: "Get Started Free" is better than "Sign Up for an Account"
- Be specific about the outcome: "Get Your Free Quote" is better than "Submit"
- Create urgency when appropriate: "Book Today - Limited Slots" works for appointment-based businesses
CTA text that converts:
A/B testing insight: Studies consistently show that first-person CTAs outperform third-person. "Start My Free Trial" converts 25% better than "Start Your Free Trial" (ContentVerve).
4. Visual context
The hero visual, whether an image, illustration, video, or graphic, should reinforce your message without competing with it.
Photography: Real images of your business, your work, or your team. Authentic photos outperform generic stock almost every time. If you are a restaurant, show your food. If you are a salon, show your space. Authenticity builds trust.
Product mockup or screenshot: Show your product or service in action. For Web Waala, this means showing actual generated websites. For a SaaS product, this means showing the interface.
Background image or gradient: A full-bleed background that sets the mood without demanding attention. Works well for restaurants, hotels, photographers, and lifestyle brands. Always use a dark overlay to maintain text readability.
Illustration: Custom or stock illustrations that match your brand style. Increasingly popular for tech and creative businesses.
What to avoid:
- Generic stock photos that could be any business (people shaking hands, generic office scenes)
- Cluttered visuals that compete with your text for attention
- Heavy video backgrounds that slow page loading (videos can add 2-5 MB to page weight)
- Low-quality or pixelated images
- Images that do not match the content of your headline
Hero layout patterns that work
Split layout (left text, right image)
The most versatile pattern. Text on one side, visual on the other. Works for almost any industry. The split creates clear visual hierarchy and gives both elements room to breathe. This layout is the default for a reason: it balances information and visual impact effectively.
Best for: Service businesses, SaaS products, agencies, consultants
Key considerations:
- Text block should be vertically centred against the image
- Image should be relevant, not decorative
- On mobile, text should appear above the image
Centred text over background image
Bold and impactful. Works best with a dark overlay on the image so text remains readable. Popular for restaurants, hotels, photographers, and lifestyle brands. The image creates atmosphere while the text delivers the message.
Best for: Restaurants, hotels, event venues, photographers, lifestyle brands
Key considerations:
- Background image must have a semi-transparent overlay (typically rgba(0,0,0,0.5) or similar)
- Text must be white or very light for contrast
- Image should set a mood, not convey specific information
- Test readability across different devices and screen sizes
Centred text, minimal design
Minimalist and typography-driven. Works when your headline is strong enough to stand alone. Common for SaaS products and agencies. No image means faster loading and puts 100% of focus on the message.
Best for: SaaS products, creative agencies, personal brands, event landing pages
Key considerations:
- Your headline must be compelling, as there is nothing else to look at
- Typography choices become even more critical (see our fonts guide)
- A subtle background gradient or pattern can add visual interest without distraction
Full-width image with floating text card
The image extends to the edges of the viewport, with text contained in a semi-transparent card that floats over it. Creates an immersive feel while maintaining readability.
Best for: Real estate, travel, luxury brands, photography portfolios
Mobile hero considerations
Over 60% of web traffic is mobile, and in India that number is closer to 75%. Your hero section must work on screens as small as 320px wide.
Mobile-specific best practices
- Reduce headline length. A headline that fits on one line on desktop may wrap to four lines on mobile. Consider a shorter mobile variant.
- Stack elements vertically. Split layouts should stack (text above, image below) on mobile.
- Increase button size. Touch targets should be at least 44x44px. Make CTA buttons full-width on mobile for easy tapping.
- Optimise hero image for mobile. Serve a smaller, differently-cropped image on mobile. A landscape image designed for desktop often wastes vertical space on a portrait-oriented phone.
- Test scroll behaviour. Ensure the hero section does not take up more than one full screen height on mobile. Visitors should see a hint of the content below to encourage scrolling.
- Reduce text volume. On mobile, the subheadline might need to be shorter or even hidden. Prioritise the headline and CTA.
A/B testing your hero section
The best hero section is the one that converts. You do not need fancy A/B testing tools to start optimizing.
What to test
- Different headlines: which one gets more clicks on your CTA?
- CTA text variations: does "Get Started" outperform "Learn More"?
- With and without social proof: does adding "Trusted by 500+ businesses" help?
- Different layouts: does split or centred convert better for your audience?
- Image vs no image: sometimes a clean, text-only hero outperforms one with imagery
- CTA button colour: contrast matters more than specific colour choice
Simple testing approach
If you do not have A/B testing software, you can still test effectively:
- Change one element at a time (headline, image, or CTA, not all at once)
- Run each version for at least 2 weeks to collect meaningful data
- Track a consistent metric (form submissions, phone calls, button clicks)
- Document what you tested and the results so you build knowledge over time
- Keep your winning version and test a new element
Image optimization for hero sections
Your hero image is often the largest single file on your page and directly impacts your Lighthouse performance score.
- Use WebP format (25-35% smaller than JPEG with equivalent quality)
- Size appropriately: a hero image rarely needs to be wider than 1920px
- Compress aggressively: quality 75-80 is usually visually identical to 100
- Specify width and height in HTML to prevent layout shift (CLS)
- Use a low-quality placeholder that loads instantly and is replaced by the full image
- Consider art direction: serve different image crops for different screen sizes using the picture element
Common hero section mistakes
1. Trying to say too much
Your hero is a hook, not a novel. One headline, one subheadline, one CTA. Everything else can go below the fold. If your hero section has 3 paragraphs of text, 4 buttons, and 2 navigation menus, it is overloaded.
2. Weak or vague headline
"Welcome to our website" tells the visitor nothing. They already know they are on your website. Tell them why they should care. Be specific about the benefit you provide.
3. No clear CTA
If you do not tell visitors what to do next, they will not do anything. Every hero needs a button that leads to the next step.
4. Poor text readability
Text over images without sufficient contrast overlay. Light text on a light image background. Small text on mobile. Always test readability across devices and lighting conditions.
5. Slow-loading hero images
A hero image that takes 4 seconds to load defeats the purpose. The visitor stares at a blank space while waiting. Compress your images, use modern formats, and consider a placeholder while loading.
6. Autoplay video that surprises users
Full-screen autoplay video backgrounds are contentious. They slow down the page, consume data on mobile, and can be startling. If you must use video, ensure it is muted, compressed, has a static fallback, and plays subtly (not as the centre of attention).
How Web Waala handles hero sections
We offer 12 hero layout variants (gradient overlays, split layouts, minimal bold, diagonal splits, and more). Each layout automatically adapts to your brand colors, fonts, and content. You can preview every option in real time before choosing the one that feels right for your business.
Your hero section sets the tone for everything that follows. Get it right, and you have won the hardest part of the battle.
For a complete foundation, also read about writing website content that converts, making your site accessible, and understanding your Lighthouse score. Ready to build your hero? Get started for free.
