Skip to main content

Hero Sections

Hero sections are the big, attention-grabbing banners that appear at the top of your pages. They're the first thing visitors see, so they need to make a powerful impression. This guide shows you how to create compelling hero sections that convert visitors into customers.

What Are Hero Sections?​

Hero sections are large, prominent sections typically placed at the top of pages that:

  • Grab attention immediately with bold headlines
  • Communicate your main message clearly and quickly
  • Encourage action with prominent buttons
  • Set the tone for the entire page

Think of hero sections as your "elevator pitch" - you have just seconds to convince visitors to stay and learn more.

When to Use Hero Sections​

Perfect for:

  • Homepage headers - Your main company message
  • Landing pages - Product or service promotions
  • About pages - Company introduction
  • Product pages - Main product benefits
  • Service pages - Primary service overview

Best placement: Always at the top of pages, as the first section visitors see.

[Screenshot: Examples of different hero section layouts]

Hero Section Elements​

Header Content (Always Available)​

Eyebrow Heading

  • Purpose: Small text above the main headline
  • Best for: Context, category, or brand information
  • Examples: "Introducing our new service", "Award-winning design", "Trusted by 10,000+ companies"
  • Keep it short: 2-5 words maximum

Main Heading

  • Purpose: Your primary message or value proposition
  • Most important text on the entire page
  • Examples: "Build Beautiful Websites in Minutes", "The Marketing Tool That Actually Works"
  • Best practices: Clear benefit, under 10 words, compelling

Body Content

  • Purpose: Supporting details and explanation
  • Expand on the main heading
  • Examples: Feature highlights, problem/solution, social proof
  • Length: 1-3 sentences for best impact

Media Options​

Featured Image

  • Purpose: Visual support for your message
  • Best images: High-quality, relevant to content, emotionally engaging
  • Avoid: Generic stock photos, poor quality images
  • Size: At least 1200px wide for best quality

Featured Video

  • Purpose: Dynamic, engaging visual content
  • Supported: YouTube, Vimeo, or direct video URLs
  • Best practices: Auto-play with mute, under 2 minutes
  • Benefits: Higher engagement, better conversion rates

No Media

  • Purpose: Text-only focus for maximum message impact
  • Good for: Simple, clean designs or when message is most important

Call-to-Action Buttons​

Primary Button

  • Purpose: Main action you want visitors to take
  • Examples: "Get Started", "Download Now", "Contact Us"
  • Style: Prominent, uses primary brand color
  • Best practices: Action-oriented text, contrasts with background

Secondary Button

  • Purpose: Alternative action for hesitant visitors
  • Examples: "Learn More", "View Demo", "See Pricing"
  • Style: Less prominent than primary button
  • Use case: Offer low-commitment option

Footer Content​

Outro Content

  • Purpose: Additional information after buttons
  • Examples: "No credit card required", "30-day money-back guarantee", "Join 50,000+ satisfied customers"
  • Keep brief: 1-2 short sentences maximum

Layout Options​

Layout Variants​

Content Left (Default)

  • Content on left, media on right
  • Best for: Text-heavy messages, professional appearance
  • Good when: You have strong, compelling copy

Content Right

  • Media on left, content on right
  • Best for: Visual products, eye-catching images/videos
  • Good when: Your visual is more compelling than text

Center

  • Content centered, media below or above
  • Best for: Simple messages, minimal design
  • Good when: You want maximum focus on headline

Display Modes​

Standard Mode

  • Content and media side by side on desktop
  • Stacked on mobile devices
  • Most common and versatile option

Split-Screen Mode

  • Full-height sections with content and media taking equal space
  • Dramatic visual impact
  • Best for: Landing pages, portfolio sites
  • Requires: High-quality, impactful imagery

[Screenshot: Layout variants showing different arrangements]

Logo Integration​

Company Logos Feature​

Purpose: Display partner, customer, or certification logos

  • Build trust with social proof
  • Show credibility through associations
  • Demonstrate reach with client logos

When to Use:

  • "Trusted by" sections with customer logos
  • "As featured in" with media logos
  • Certifications or awards
  • Partner integrations

Logo Requirements:

  • PNG format with transparent backgrounds
  • Consistent dimensions for professional appearance
  • High resolution for crisp display
  • Proper licensing for logo usage

Logo Display Options:

  • Grayscale filter for subtle, professional look
  • Color logos for brand recognition
  • Grid layout automatically responsive

Logo Best Practices​

Number of Logos: 3-8 logos work best Sizing: Keep logos roughly same height Quality: Use high-resolution images Relevance: Only include recognizable, relevant logos Permissions: Ensure you have rights to use logos

Theme Variants​

Light Theme​

  • Light background with dark text
  • Professional appearance
  • Best for: Corporate sites, professional services
  • High readability in most lighting conditions

Dark Theme​

  • Dark background with light text
  • Modern, dramatic appearance
  • Best for: Creative agencies, tech companies
  • Eye-catching and memorable

Auto Theme​

  • Follows global settings for consistency
  • Changes automatically based on site-wide theme
  • Best for: Consistent brand experience

Custom Backgrounds​

When to Use Custom Backgrounds​

  • Brand color enforcement for specific sections
  • Visual hierarchy - make important sections stand out
  • Campaign-specific colors for promotions
  • Seasonal updates without changing global settings

How Custom Backgrounds Work​

  1. Enable "Use Custom Background" in Layout tab
  2. Choose background color with color picker
  3. Smart color system automatically adjusts text colors for readability
  4. Preview updates immediately

Smart Color Adjustments​

When you use custom backgrounds, the system automatically:

  • Calculates optimal text color for readability
  • Ensures accessibility compliance (WCAG standards)
  • Adjusts muted text colors proportionally
  • Updates button colors if needed for contrast

[Screenshot: Custom background selection and smart color adjustments]

Writing Effective Hero Content​

Headline Best Practices​

Focus on Benefits, Not Features

  • ❌ "Advanced CRM Software with 50+ Features"
  • ✅ "Close 3x More Deals with Less Work"

Use Numbers When Possible

  • ❌ "Save Time on Marketing"
  • ✅ "Cut Marketing Time in Half"

Create Urgency or Curiosity

  • ❌ "Our New Product"
  • ✅ "The Tool Everyone's Talking About"

Keep It Conversational

  • ❌ "Sophisticated Solutions for Complex Business Challenges"
  • ✅ "Finally, Software That Actually Makes Sense"

Supporting Content Guidelines​

Expand on the Promise

  • Explain HOW you deliver the benefit
  • Address the biggest objection or concern
  • Include social proof or credibility markers

Use Clear, Simple Language

  • Avoid jargon and technical terms
  • Write like you're talking to a friend
  • Use active voice ("We help you grow" not "Growth is achieved")

Include Proof Points

  • Customer numbers or results
  • Time in business or experience
  • Awards or recognition
  • Guarantees or promises

Button Text That Converts​

Action-Oriented Verbs

  • "Get", "Start", "Download", "Try", "Join"
  • Avoid passive words like "Submit" or "Click"

Create Value Clarity

  • "Get Your Free Quote" (not just "Get Quote")
  • "Start Your 30-Day Trial" (not just "Start Trial")
  • "Download the Complete Guide" (not just "Download")

Remove Friction Language

  • ❌ "Request Information" (sounds like sales pitch)
  • ✅ "Get Instant Access" (sounds immediate and valuable)

[Screenshot: Examples of good vs poor hero content]

Technical Considerations​

Image Optimization​

Recommended Dimensions:

  • Minimum width: 1200px for desktop displays
  • Aspect ratio: 16:9 or 4:3 work well
  • File size: Under 500KB for fast loading

File Formats:

  • JPG: Best for photos, smaller file sizes
  • PNG: Best for graphics with transparency
  • WebP: Best compression, modern browsers only

Optimization Tips:

  • Use image compression tools before uploading
  • Choose images that support your message
  • Ensure images look good when cropped for mobile

Video Considerations​

Platform Support:

  • YouTube: Most reliable, good loading performance
  • Vimeo: Professional appearance, fewer ads
  • Direct uploads: Largest file sizes, hosting bandwidth usage

Video Best Practices:

  • Length: Keep under 2 minutes for hero sections
  • Auto-play: Enable with mute for best user experience
  • Mobile: Ensure video works well on small screens
  • Fallback: Provide thumbnail image for slow connections

Performance Impact​

Loading Speed Factors:

  • Image size: Larger images slow down page loading
  • Video files: Can significantly impact load times
  • Custom fonts: May delay text rendering

Optimization Strategies:

  • Compress images before uploading
  • Use modern formats (WebP, MP4)
  • Consider lazy loading for below-the-fold content
  • Monitor page speed with testing tools

Common Hero Section Mistakes​

Content Mistakes​

Vague Headlines

  • ❌ "Welcome to Our Company"
  • ❌ "Quality Service Since 1995"
  • ❌ "Your Partner in Success"

Too Much Text

  • Don't write paragraphs in hero sections
  • Visitors scan, they don't read everything
  • Save details for later sections

Weak Calls-to-Action

  • ❌ "Learn More" (learn what?)
  • ❌ "Click Here" (why should I?)
  • ❌ "Submit" (submit what?)

Design Mistakes​

Poor Image Choices

  • Generic stock photos that don't relate to content
  • Low-resolution or pixelated images
  • Images that don't support the message

Too Many Buttons

  • More than 2 buttons creates decision paralysis
  • Competing calls-to-action confuse visitors
  • One primary action is usually best

Inconsistent Styling

  • Colors that don't match the rest of the site
  • Fonts that clash with brand guidelines
  • Layout that doesn't work on mobile

Testing and Optimization​

A/B Testing Ideas​

Headlines:

  • Benefit-focused vs feature-focused
  • Question format vs statement format
  • Short vs longer headlines

Button Text:

  • "Free" vs "Start Now" vs specific benefit
  • First-person ("Get My") vs second-person ("Get Your")
  • Urgency language vs value language

Images:

  • People vs product shots
  • Happy faces vs serious expressions
  • Close-ups vs wide shots

Performance Metrics to Track​

Engagement Metrics:

  • Time on page - Are people staying to read?
  • Scroll depth - Do they scroll past the hero?
  • Click-through rate - Are buttons being clicked?

Conversion Metrics:

  • Form submissions from hero buttons
  • Product page visits from hero links
  • Phone calls if number is displayed

Quality Metrics:

  • Bounce rate - Are people leaving immediately?
  • Page load speed - Is hero section slowing down site?
  • Mobile usability - Does it work well on phones?

Advanced Hero Features​

Custom CSS and IDs​

When to Use Custom CSS:

  • Specific brand requirements not covered by global settings
  • Unique animations or effects
  • Integration with other tools or tracking

Adding Custom ID:

  1. Go to Advanced tab when editing hero section
  2. Enter unique ID (like "homepage-hero")
  3. Use in CSS or JavaScript targeting
  4. Helpful for analytics tracking and custom styling

Shortcode Integration​

Purpose: Embed forms, widgets, or other dynamic content Common uses: Newsletter signups, contact forms, social media feeds Location: Use the shortcode content field in Media tab

Best Practices:

  • Test shortcodes before publishing
  • Ensure shortcode plugins are active
  • Check mobile compatibility
  • Monitor loading impact

Troubleshooting Hero Sections​

Content Not Displaying​

Check These Items:

  • All required fields filled out (heading is required)
  • No conflicting custom CSS
  • Section is not hidden or disabled
  • Browser cache cleared

Images Not Loading​

Common Causes:

  • File too large (over 10MB limit)
  • Unsupported file format
  • Broken image URLs
  • Slow internet connection

Solutions:

  • Compress images before uploading
  • Use JPG or PNG formats
  • Re-upload from media library
  • Test with different image

Mobile Display Issues​

Typical Problems:

  • Text too small to read
  • Buttons too small to tap easily
  • Images don't fit screen properly
  • Content doesn't stack correctly

Solutions:

  • Test on actual mobile devices
  • Use responsive image sizing
  • Ensure button text is readable
  • Check stacking order in preview

Next Steps​

Now that you understand hero sections:

  1. Practice creating different hero variations
  2. Learn about Features Sections for supporting content
  3. Explore Design System for advanced styling
  4. Test different approaches to see what works for your audience

Need More Help?​

Remember: Your hero section has one job - convince visitors to stay and learn more about what you offer!