Hero Section

The hero section is a full-width banner with a background image or video, text content, and call-to-action buttons. Unlike the slideshow, it displays a single static banner - perfect for a focused, impactful message.

Overview

The hero section creates a powerful first impression on your page. It's ideal when you want to showcase one key message, promotion, or collection without the complexity of multiple rotating slides.

Where to Use

  • Homepage: Perfect as the first section
  • Collection pages: Showcase a featured collection
  • Landing pages: Create focused entry points
  • Product launches: Highlight new products

Note: The hero section cannot be used in header or footer groups.

Key Differences from Slideshow

Feature Hero Slideshow
Number of slides 1 (static) Multiple (rotating)
Carousel No Yes
Autoplay N/A Optional
Best for Single focused message Multiple messages

Settings

Layout

Hero Minimum Height

  • Sets the minimum height of the hero section
  • Range: 300-900px
  • Default: 600px
  • Tip:
    • 400-500px: Compact, good for mobile
    • 600px: Balanced (recommended)
    • 700-900px: Large, dramatic impact

Background

Background Image

  • Upload a high-quality image
  • Recommended size: 1920 x 1080px
  • Tip: Use sharp, high-resolution images for best results

Background Video

  • Optional video background
  • Note: If video is provided, it takes priority over image
  • Tip: Videos should be optimized for web and work well on loop

Content

Content Vertical Position

Where text appears vertically on the hero:

Top

  • Text appears at the top of the hero
  • Best for: When bottom of image is important

Center (Default)

  • Text appears in the middle
  • Best for: Most cases, balanced look

Bottom

  • Text appears at the bottom
  • Best for: When top of image is important

Subheading

  • Small text above the main heading
  • Examples: "New Collection", "Limited Time", "Welcome"
  • Tip: Keep it short (3-5 words)

Heading

  • Main large text
  • This is your primary message
  • Tip: Keep it concise (5-7 words)

Heading Tag

  • HTML tag for SEO purposes
  • Options: H1, H2, H3
  • Default: H1
  • Tip: Use H1 for homepage hero (most important heading)

Heading Size

  • Controls the visual size of the heading
  • Options: XL, 2XL, 3XL, 4XL
  • Default: 3XL
  • Tip: Larger sizes (3XL, 4XL) for maximum impact

Description

  • Supporting text below the heading
  • Provides additional context or details
  • Tip: Keep it brief (1-2 sentences)

Text Alignment

  • How text aligns horizontally
  • Options: Left, Center, Right
  • Default: Center
  • Tip: Center is most common, left works for text-heavy designs

Buttons

Primary Button (Button 1)

  • Main call-to-action button
  • Label: Action text (e.g., "Shop Now", "Explore")
  • Link: Destination URL
  • Style: Primary (bold), Secondary, or Outline
  • Default: Primary style

Secondary Button (Button 2)

  • Optional second button
  • Label: Supporting action (e.g., "Learn More")
  • Link: Destination URL
  • Style: Primary, Secondary, or Outline
  • Default: Outline style

Colors

Color Scheme

  • Select a color scheme for text and buttons
  • Controls text color, button colors, and overlay
  • Leave empty to use default theme colors
  • Tip: Choose a scheme that contrasts well with your background image

Styling

Overlay Opacity

  • Controls the dark overlay on background image/video
  • Makes text more readable
  • Range: 0 (no overlay) to 0.9 (very dark)
  • Default: 0.3 (subtle overlay)
  • Tip:
    • 0-0.2: Light overlay
    • 0.3-0.5: Balanced (recommended)
    • 0.6-0.9: Dark overlay for maximum text readability

Padding

Top Padding

  • Space above the hero section
  • Range: 0-100px
  • Default: 40px
  • Tip: Set to 0 if hero is at the very top of the page

Bottom Padding

  • Space below the hero section
  • Range: 0-100px
  • Default: 40px
  • Tip: Creates breathing room before next section

Common Use Cases

Homepage Hero

  • Image: Store or product lifestyle image
  • Subheading: "Welcome" or "New Arrivals"
  • Heading: Main brand message or promotion
  • Description: Brief value proposition
  • Button 1: "Shop Now" → Main collection
  • Button 2: "Learn More" → About page

Product Launch

  • Image: New product image
  • Subheading: "Just Launched"
  • Heading: Product name or key feature
  • Description: Product benefits
  • Button 1: "Shop Now" → Product page
  • Button 2: (Optional)

Seasonal Promotion

  • Image: Seasonal themed image
  • Subheading: "Limited Time"
  • Heading: Promotion message
  • Description: Promotion details
  • Button 1: "Shop Sale" → Sale collection
  • Button 2: "View Details" → Sale page

Collection Showcase

  • Image: Collection lifestyle image
  • Subheading: "Featured Collection"
  • Heading: Collection name
  • Description: Collection description
  • Button 1: "Shop Collection" → Collection page
  • Button 2: (Optional)

Tips & Best Practices

✅ Do's

  • Use high-quality images: 1920 x 1080px minimum, sharp and clear
  • Keep text concise: Short headings (5-7 words), brief descriptions
  • Use contrasting colors: Ensure text is readable over background
  • Add clear CTAs: Use action-oriented button labels
  • Optimize images: Compress for faster loading
  • Use overlay: Adjust opacity so text is always readable
  • Test on mobile: Ensure text and buttons are readable on phones
  • Use H1 tag: For homepage hero (SEO best practice)

❌ Don'ts

  • Don't use low-quality images: Blurry images look unprofessional
  • Don't overcrowd text: Too much text is hard to read
  • Don't use tiny text: Ensure headings are large and readable
  • Don't forget mobile: Always preview on mobile devices
  • Don't skip buttons: Always include at least one call-to-action
  • Don't ignore loading speed: Large images/videos can slow down your site
  • Don't use too much overlay: Can make images look dull

Image Guidelines

Recommended Size

  • Width: 1920px minimum
  • Height: 1080px (or maintain aspect ratio)
  • Aspect Ratio: 16:9 works well

Image Quality

  • Format: JPEG or PNG
  • Quality: High resolution, sharp focus
  • File Size: Optimize to 200-500KB for faster loading

Image Content

  • Focus: Clear subject in center
  • Text Placement: Leave space for text overlay
  • Colors: Consider how text will look over the image

Video Guidelines

Video Requirements

  • Format: MP4 recommended
  • Length: 10-30 seconds (loops automatically)
  • Size: Keep file size reasonable for loading speed
  • Content: Should work well on loop

Video Tips

  • Videos take priority over images if both are provided
  • Ensure video content is appropriate for looping
  • Test video playback on different devices
  • Consider video file size impact on page speed

Content Positioning Guide

Center (Recommended)

  • Best for: Most hero sections
  • Balanced: Works well with most images
  • Professional: Classic, polished look

Top

  • Best for: When image bottom is important
  • Use when: Bottom of image has key visual elements
  • Example: Product image where bottom shows product details

Bottom

  • Best for: When image top is important
  • Use when: Top of image has key visual elements
  • Example: Landscape where sky is important

Text Alignment Guide

Center (Default)

  • Best for: Most hero sections
  • Balanced: Professional, polished look
  • Works with: Most image compositions

Left

  • Best for: Text-heavy designs
  • Use when: You have longer descriptions
  • Works with: Images where right side is important

Right

  • Best for: Unique, creative designs
  • Use when: You want a distinctive look
  • Works with: Images where left side is important

Button Best Practices

Primary Button (Button 1)

  • Label: Action-oriented ("Shop Now", "Explore", "Get Started")
  • Style: Primary (bold, prominent)
  • Link: Most important destination
  • Tip: Make this your main call-to-action

Secondary Button (Button 2)

  • Label: Supporting action ("Learn More", "View Details")
  • Style: Outline or Secondary
  • Link: Additional information
  • Tip: Optional - only add if you have a second action

When to Use Two Buttons

  • ✅ Primary action + secondary information
  • ✅ Two different destinations
  • ✅ Give users choice

When to Use One Button

  • ✅ Single clear call-to-action
  • ✅ Simpler, more focused
  • ✅ Less decision fatigue

SEO Considerations

Heading Tag

  • H1: Use for homepage hero (most important)
  • H2: Use for other pages (if page already has H1)
  • H3: Use if page has multiple headings

Best Practice

  • Homepage hero should use H1
  • Only one H1 per page
  • Other pages: Use H2 or H3

Examples

Example 1: Welcome Hero

  • Image: Store interior or lifestyle
  • Subheading: "Welcome"
  • Heading: "Your Home, Your Style"
  • Description: "Discover beautiful flooring for every room"
  • Button 1: "Shop Now" → Collections
  • Button 2: "Learn More" → About
  • Position: Center
  • Alignment: Center

Example 2: Sale Hero

  • Image: Product showcase
  • Subheading: "Limited Time"
  • Heading: "Summer Sale - Up to 50% Off"
  • Description: "Shop our best deals on premium flooring"
  • Button 1: "Shop Sale" → Sale collection
  • Button 2: (None)
  • Position: Center
  • Alignment: Center

Example 3: Product Launch

  • Image: New product
  • Subheading: "Just Launched"
  • Heading: "Introducing Our New Collection"
  • Description: "Premium quality meets modern design"
  • Button 1: "Shop Collection" → New collection
  • Button 2: "View Details" → Product page
  • Position: Center
  • Alignment: Center

Troubleshooting

Text Not Readable

  • Solution: Increase overlay opacity (0.4-0.6)
  • Solution: Use darker images or adjust color scheme
  • Solution: Ensure good contrast between text and background

Image Looks Blurry

  • Solution: Use images at least 1920px wide
  • Solution: Upload high-resolution images
  • Solution: Don't stretch small images

Buttons Not Clickable

  • Check: Verify button links are filled in
  • Check: Test on different devices
  • Check: Ensure buttons aren't hidden

Video Not Playing

  • Check: Video format should be MP4
  • Check: File size should be reasonable
  • Check: Test video in different browsers

Hero Too Tall/Short

  • Adjust: Change "Hero Minimum Height" setting
  • Tip: 600px is usually a good balance

Content Not Centered

  • Check: Set "Content Vertical Position" to Center
  • Check: Set "Text Alignment" to Center

Related Sections

  • Slideshow - Multiple rotating slides
  • Image with Text - Static image with text content
  • Featured Collection - Showcase specific collections

Next Steps: