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.

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​

Aspect Ratio Variants​

Control the height of your hero section with aspect ratio options.

Available Aspect Ratios:

  • Auto: Height determined by content (default)
  • 16:9: Widescreen cinematic ratio
  • 4:3: Traditional display ratio
  • 21:9: Ultra-wide cinematic ratio

When to Use Specific Ratios:

  • Auto: Best when content length varies or for text-heavy heroes
  • 16:9: Perfect for video backgrounds or cinematic imagery
  • 4:3: Ideal for product photos or traditional layouts
  • 21:9: Creates dramatic full-width hero experiences

Setting Aspect Ratio:

  1. Edit your Hero section
  2. Go to the Layout tab
  3. Select desired aspect ratio from the dropdown
  4. Preview updates immediately

Responsive Behavior:

  • Aspect ratios maintain proportions on desktop
  • Mobile devices may adjust to ensure content readability
  • Test on multiple screen sizes to verify appearance

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

Marquee Layout

  • Purpose: Create scrolling logo or content displays
  • Best for: Client logos, partner displays, brand showcases
  • Features:
    • Smooth horizontal scroll animation
    • Continuous loop for seamless display
    • Configurable scroll speed
    • Hover pause functionality

Scroll Animation Settings (Marquee Mode):

  • Auto-scroll: Logos move automatically in chosen direction
  • Speed control: Adjust animation pace to match your design
  • Direction options: Left-to-right or right-to-left scrolling

Vertical Strips Layout

  • Purpose: Image-rich hero with two scrolling vertical strips of photos flanking your headline content
  • Best for: Photography portfolios, services with strong visual proof, high-end brand pages
  • Layout variants:
    • Center: Strip on each side of centered content (the iconic "three-column" arrangement)
    • Content Left: Content on the left, paired strips on the right
    • Content Right: Paired strips on the left, content on the right
  • Strips flush with content (improved in v1.3.1): The strips stretch to match the height of your headline + body content, with a 520px floor on desktop and 440px on tablet so short-content heroes don't collapse the marquee. Long-content heroes have strips that reach the full top and bottom of the text.
  • Smart image padding (v1.3.1): If you upload fewer images than recommended, your photos cyclically repeat to fill the seamless loop — placeholders only appear when you've uploaded zero images. The editor surfaces the recommended count (12 for vertical strips, 6 for horizontal marquee) so you know how many images give you full visual variety.
  • Mobile behavior: On phones, the two vertical strips collapse into a single horizontal marquee below the content. The Content Left / Content Right variants both keep their text left-aligned on mobile (matching all other hero layout variants) while Center stays centered.

Remix Feature​

The Remix button lets you quickly explore different layout configurations for your Hero section without changing your content.

How it works:

  • Click the Remix button in the Layout settings
  • The system analyzes your content and suggests a new layout combination
  • Each remix produces a meaningfully different result

What changes when you remix:

  • Layout variant (left, right, center)
  • Aspect ratio settings
  • Display mode options

What stays the same:

  • All your content (headline, description, buttons, media)
  • Your theme variant (light/dark)
  • Your custom background settings

When to use it:

  • Exploring design options for a new page
  • Finding the best layout for your specific content
  • Getting inspiration when you're unsure which layout works best

Layout Modes​

The Layout Mode dropdown chooses the hero's overall structure, with a short description of each option shown as you browse:

Standard (Default)

  • Content and media side by side on desktop, stacked on mobile
  • Most versatile — supports the boxed layout, custom backgrounds, and the stacked mobile background treatment
  • Best for: Almost everything; when in doubt, start here

Split Screen

  • Full-height sections with content and media taking equal space
  • Dramatic visual impact; the strongest page opener when you have one excellent image and a short headline
  • Best for: Landing pages, portfolio sites

Banner

  • Compact, full-width CTA band rather than a page opener
  • Best for: A call-to-action moment between sections — not as the first section on a page

Vertical Strips

  • Two scrolling vertical photo strips flanking your headline — see the detailed guide under Layout Variants above
  • Requires: Several images (12 recommended) for full visual variety

Horizontal Marquee

  • Scrolling horizontal band of images with your content — see the Marquee notes above
  • Requires: Several images (6 recommended)

Boxed Layout​

The Hero section's Container Style toggle in the Layout tab includes a Boxed option that turns the hero into a contained, rounded card with a visible gutter around it. Useful when you want the hero to feel like a self-contained "panel" rather than running edge-to-edge across the viewport — the cross-builder pattern that Elementor, Divi, and Bricks all converged on as "Boxed Width" / "Boxed Layout" / "Boxed Container".

Only available when Layout Mode is set to Standard. The other layout modes (Split-Screen, Banner, Vertical Strips, Horizontal Marquee) have their own structural rules and can't be wrapped in a boxed card.

Container Style

A two-option toggle in the Layout tab:

  • Full (default): Hero runs edge-to-edge across the viewport like every other section.
  • Boxed: Hero sits inside a rounded card with symmetric side and vertical gutters. The card uses your global card border radius, so the rounding matches the rest of your design system. The card also clips overflow, so background images and videos get rounded at the corners automatically.

Section Min Height

Pairs naturally with Boxed but works in Full mode too. Pick Full to make the section fill the viewport minus the theme header and the boxed gutter — a true "hero takes the whole screen" treatment. Pick Auto to let the section size to its content. The full-height math uses the modern dynamic viewport unit (100dvh) so the hero doesn't resize awkwardly when mobile browser chrome appears or disappears.

Frame Background

A two-option toggle controlling the color of the gutter around the boxed card. Default is Inherit — the gutter picks up your palette's body background color, so the boxed hero blends naturally with the section below it. Switch to Custom and the Frame Background Color picker becomes active for a hand-picked color (great when you want the gutter to deliberately contrast with both the hero card and the next section).

The Inherit default is what most layouts want. Use Custom for accent treatments — a colored gutter under a hero on a landing page, for example, where the visual rhythm calls for a deliberate "stripe" of color.

When to use Boxed

  • Marketing landing pages where you want the hero to feel like a distinct "card" sitting on top of the page rather than the page itself.
  • Sites with dark or richly-colored body backgrounds where a fully bleeding hero would look harsh; the boxed card softens the entrance.
  • Sequenced layouts where each section is a "card on a colored ground" — pair Boxed Hero with global section padding to extend the same treatment to every section below it.

Logos render outside the boxed card

When a Hero in boxed mode has logos enabled, the logo row appears BELOW the rounded card with proper top spacing, sitting on the frame's gutter background instead of being trapped inside the rounded box. This was the visually-cleaner choice — logos inside a boxed card felt cramped, and pushing them outside lets them breathe as a separate visual unit. The logo row's width still aligns with the card's content edges so the two pieces read as one cohesive section.

If you've set a custom Frame Background color, the logos sit on that custom color too — same surface treatment the rest of the gutter gets.

Responsive behavior

The gutter shrinks on mobile so the boxed card doesn't feel cramped — 16px side gutter on tablets, 12px on phones. The card's border radius also drops to the medium preset on phone screens so large radii don't eat into content area on narrow viewports.

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 Fields​

Each logo in the Hero's logo row supports five fields. Most logos only use the first one — the others are optional and accommodate specific use cases.

Logo Image (required) The logo file itself. Use a PNG with a transparent background for the cleanest result. Click "Choose Image" to pick from your media library or upload a new file. The image renders at consistent height across all logos in the row.

Logo Title A human-readable label for the logo — typically the company or organization name (e.g., "Acme Corp"). Shown in the admin repeater list so you can identify each logo at a glance. Also used as the image's alt text for screen readers when Alt Text is left blank. Existing logos created before alt text was a separate field continue to use Title as their alt source.

Alt Text (Accessibility) Image alt text for screen readers. Optional — leave blank to fall back to Title. Use when you want screen reader text that differs from the admin label, for example when Title is "Acme Logo PNG" (admin shorthand) but you want screen readers to announce "Acme Corp, manufacturing partner".

Link URL Optional click-through destination. When set, the logo image is wrapped in a link so visitors can click it. Common use cases: linking each logo on a "Trusted by" section to the matching case study page, or linking a "Partner integrations" row to each partner's product detail page. Supports internal site paths (/case-studies/acme), full external URLs, tel: numbers, and mailto: addresses. Pages on your site are autocompleted as you type for quick selection.

Link Target Same tab (default) or new tab. Only appears in the form when Link URL is filled in. Choose "New Window" for external links so visitors don't lose your site; choose "Same Window" (default) for internal links. The renderer automatically adds the security attribute rel="noopener noreferrer" to new-tab links so you don't have to think about that yourself.

Logo Size​

A Logo Size control (Small / Medium / Large) sets how prominently the logo strip renders, so it can match the visual weight of the rest of your hero — small for a quiet trust bar, large when the logos are the point.

Logo Display Style — Grid or Marquee​

The Hero's logo section can render logos two ways. The toggle lives directly under the Logo Filter control in the same Layout tab.

Grid (default)

A static horizontal row of logos below the hero content. The classic "Trusted by" / "As featured in" pattern. Logos render at consistent height with even spacing. Best when you have a small, curated set (3-6 logos) and want each to be deliberately visible.

Marquee

An auto-scrolling horizontal strip. Logos cycle continuously from right to left across the visible area, fading in and out at the container edges. The modern landing-page pattern used by Stripe, Linear, Vercel, and most SaaS sites. Best when you have many logos (6+) and want to convey breadth — "we work with lots of partners" — without taking up four rows of vertical space.

The marquee includes these behaviors automatically (no toggles needed):

  • Pauses on hover. Visitors who want to read or click a logo can mouse over the strip and the animation stops. Resumes when they move away.
  • Pauses on keyboard focus. Critical for visitors using keyboard navigation — when a Tab keystroke lands focus on a logo with a link, the marquee pauses so the visitor can press Enter to follow the link without the logo scrolling out from under them.
  • Auto-pads small logo sets. If you only have 3-4 logos, the renderer cycles them automatically so the strip doesn't have visible gaps as it scrolls. You don't need to add filler logos manually.
  • Respects reduced-motion preferences. Visitors who've enabled "reduce motion" at the OS level (a common accessibility setting) see the logos as a static wrapped row instead of an animation. Same content, no motion. WCAG 2.2.2 compliance built in.
  • Edge fade. Logos appear and disappear smoothly at the strip's left and right edges instead of popping in / out abruptly. The container's mask handles this — no per-logo styling needed.
  • Mobile-aware speed. The animation runs ~30 seconds per cycle on desktop; ~40 seconds on phones so smaller viewports give visitors time to perceive each logo as it passes.

When the Marquee Toggle Is Hidden​

The marquee animation requires enough horizontal space for the scrolling effect to read as polished. In two Hero layout modes this isn't the case, so the marquee is gated:

  • Split-Screen — the logos render inside the content column (half the viewport on desktop). A scrolling strip in a half-viewport column reads as cramped and looks more like a broken layout than a deliberate design choice.
  • Horizontal-Marquee layout mode — the hero already runs a horizontal marquee at the top of the section. A second marquee for logos competes visually with the first one; the eye doesn't know where to rest.

In both modes, the form shows the toggle but a notice appears explaining that the marquee is paused for the current layout. Your marquee preference is preserved — switch back to Standard, Banner, or Vertical-Strips and the marquee reactivates automatically.

Linked Logos in Marquee Mode​

Linked logos still work as click-through targets when the marquee is active. The pause-on-hover and pause-on-focus behaviors above are specifically designed to handle this — visitors can mouse over a scrolling logo, the animation stops, and they click through normally. Without those pauses, marquee + linked logos would be a usability bug; with them, it's the same as the static grid for click-through behavior.

If you have a mix of linked and unlinked logos, the marquee handles both gracefully — only the linked ones pause when focused, and only the linked ones get the click-through cursor.

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

Background Image Support​

Hero sections also support background images for a more dramatic visual impact:

  1. Enable "Use Background Image" in Layout tab
  2. Choose an existing image from your media library, or
  3. Generate with AI - Click the sparkle icon to create a custom background image tailored to your content
  4. Adjust position to control which part of the image is visible
  5. Add overlay for better text readability over busy images

AI-Generated Backgrounds: You can generate custom background images using AI. Select "Background" as the purpose for optimized results. See the AI Image Generation Guide for detailed tips on creating effective background images.

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

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)

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: Background videos play on mobile devices too — keep files lean, since phone connections pay the cost
  • 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!