Hero Section: Your Value Proposition Area

The Hero section is the first big visual section a visitor sees on a page. It is your chance to say who you are, what you offer, and what action you want people to take next.

Since it is very flexible, it can also be used in middle of the page in case you need to use its specific layout for other purposes.

This guide explains the hero section in simple language: what each field does, what to write in it, and how it helps your visitors.

What the Hero Section is For

Think of it as a combination of:

• a headline and short message area,
• a button area,
• a logo area,
• and optional images.

You can use it to:

• introduce your brand,
• promote a product or offer,
• highlight trust signals (logos, awards),
• and guide visitors to one clear action.

Why it Matters

A strong hero section does three things:

1. Clarity – it quickly tells visitors what the page is about.
2. Trust – adding logos, badges, or images builds confidence.
3. Action – buttons make it obvious what users should do next.

In simple terms: good hero content helps people understand what you are offering and what to do next.

The Hero Section Fields

Below is an explanation for every field in the Hero section.

1) Heading

What it is: The main title line.

What it is used for: This is most likely the first sentence your visitor reads when they land on your site. It is bigger than the rest and is meant to catch attention.

SEO and layout flexibility: Even though this field is called Hero Heading, you can change its HTML level to H1, H2, or H3 right inside the field settings.

That gives you the flexibility to use the hero section in the middle of the page without sacrificing SEO friendliness.

Recommended use: Use H1 only for the single main title of the page. Use H2/H3 when the hero is used as a secondary section later on the page.

What to write:

• A clear promise: Built for small teams that want better results.
• A benefit, not a slogan: Sell more with faster checkout and cleaner product pages.

Why users benefit:

• Clear headings reduce confusion.
• Benefit-first lines increase trust and engagement.

Quick tip: Keep it short. One or two lines are usually strongest.

2) Preheading / Kicker text

What it is: A small line above the heading.

What it is used for: Sets context before the main title (like a label, category, or short lead-in).

Extra option you can use: You can add a small inline icon/image next to this text (useful for quick visual emphasis like badges, arrows, or symbols). This is great for style and brand tone as long as you keep it simple.

What to write:

• Limited-time launch offer
• Trusted by 2,000+ brands
• New: Summer campaign

If useful, keep the icon subtle (for example a small check or spark symbol) and make sure it does not distract from readability.

Why users benefit:

• Draws attention to a specific angle before your full message.
• Helps users decide quickly whether the section is relevant.

Quick tip: Keep it short; this is supporting text, not the main message.

3) Hero Text

What it is: Text area for a short explanatory paragraph.

What it is used for: Explain what your business solves or offers.

What to write:

• 1 short paragraph (1-3 short messages) in plain language.
• Use “for X, we help with Y” format.

Example:

We help online stores set up cleaner landing pages that load fast and convert better.

Why users benefit:

• Explains your value in one glance.
• Converts visitors from “interested” to “understanding.”

Quick tip: Use simple words and avoid long, technical phrases.

4) Hero Buttons

What it is: A repeatable list of buttons (up to 5).

What it is used for: Direct users to key actions:

• shop,
• book a demo,
• learn more,
• get in touch.

What to write for each button:

• Button text:
  Good examples: Get Started, Shop Collection, Book a Call
• Button link (URL):
  Paste destination page or product page.
• CTA text:
  Optional small supporting line under a button.
  Good examples: Create your account in minutes. Discover our latest arrivals. Pick a time that works for you.

Why users benefit:

• Buttons are clear pathways.
• One click can reduce drop-off and increase conversions.

Quick tip: Make the first button the most important action. Use one to two buttons when possible; more than that can overload users.

5) Logos

What it is: A logo strip (multiple images).

What it is used for: Shows trust and partnerships.

What to upload:

• Payment provider logos,
• partner logos,
• certification badges,
• social proof brands.

Why users benefit:

• Builds credibility instantly.
• Signals quality, reliability, and social trust.

Quick tip: Use clean, similarly-sized logos and keep only the strongest, most recognizable ones.

6) Hero Image

What it is: Main image for the hero block.

What it is used for: Supports your message with visual context.

What to upload:

• Product photography,
• hero campaign image,
• lifestyle image matching your brand tone.

Why users benefit:

• Helps users understand your message quickly.
• Makes your section visually memorable.

Quick tip:

• Match the image style with the tone of your heading and value text.
• Avoid cluttered images in the hero.

7) Side Logos

What it is: Logos shown at the side (or as overlays, depending on style settings).

What it is used for: Secondary trust layer: awards, certifications, press mentions, quality marks.

What to upload:

• Badge graphics,
• seal logos,
• small institution logos.

Why users benefit:

• Helps reinforce trust for hesitant visitors.
• Supports premium, secure, or official brand impression.

Quick tip: Keep sizes balanced and don’t overfill; side elements should stay secondary.

8) Hero Background Image

What it is: Optional decorative background image.

What it is used for: Adds atmosphere without changing your main hero message.

What to upload:

• Soft pattern,
• product context image,
• brand-compatible abstract visual.

Why users benefit:

• Makes the section feel polished.
• Helps set mood or style direction quickly.

Quick tip: Test readability: text must still stand out clearly. If text becomes hard to read, reduce image dominance or increase contrast.

What to Write in Hero: A Beginner Recipe

If you want a practical starting version:

• Preheading: New season is live
• Heading: Discover seasonal styles made for everyday comfort
• Value proposition: Refresh your wardrobe with comfortable seasonal staples, delivered fast and easy to return.
• Buttons:
  Shop New Arrivals
  Browse Lookbook
• Hero image: hero product shot.
  Side logos: payment/security logos.

Common Mistakes to Avoid

• Too much text in the heading and value area.
• More than 2 CTA buttons.
• Overly bright or busy images that reduce text readability.
• Too many side logos making the layout feel crowded.
• Not checking how it looks on mobile.

Better approach:

• Short message,
• One clear goal,
• One or two trusted visual/social elements,
• Clean spacing.

Quick Sanity Checklist Before Publishing

• Does the headline say what you do?
• Does the preheading support the headline?
• Is the value proposition easy to understand in 1 read?
• Is the first button the right action?
• Are logos and images enhancing trust, not distracting?
• Is it readable on mobile?

If you can answer “yes” to all six, your hero is already in good shape.

Small Suggestions for Future Improvement

If you want better results, start with these:

• Add a clear outcome in headline: not what you build, what the visitor gets.
• Use one primary button style and one secondary, not equal emphasis for all buttons.
• Rotate logos based on season/events to keep section fresh.
• Keep side images and background subtle for fast load and better readability.

Final Note

This section is intentionally flexible. You can start minimal and improve it over time. A great hero does not need to be complex – it only needs to be clear, trustworthy, and action-oriented.

Remember: It pays to get the hero section right! So, if you need a more detailed explanation, here’s a good article from CXL.