Setting Up Your Hero Section

The hero section is the first thing visitors see. Make it count with a compelling design that captures attention.

What is a Hero Section?

The hero is the large, prominent section at the top of your page, typically containing:

• A headline
• A subheadline or description
• Call-to-action buttons
• Often a background image or illustration

Creating a Hero Section

Method 1: From Component Library

Click "+" at the top of your page

Go to Components

Filter by "Hero" category

Choose a hero design you like

Customize the content

Method 2: Using AI

Click "+" > Basic Blocks > AI Component

Describe your hero: "Create a hero section with a bold headline 'Transform Your Business', a subheadline about digital solutions, and two buttons"

Generate and refine as needed

Moving a Block to Hero

Have a component you want as your hero?

Click on the component

Open the component menu

Select "Move to Hero"

The component becomes your hero section

Customizing Your Hero

Changing Content

Click on any text to edit it directly:

• Headlines
• Subheadlines
• Button text
• Descriptions

Changing Style

Use AI chat to modify the design:

• "Change the background to a gradient"
• "Make the headline larger"
• "Add more padding"
• "Use my brand colors"

Background Options

Your hero can have:

• Solid colors
• Gradients
• Images
• Videos (for some templates)
• Patterns

Hero Best Practices

Content

• Clear headline - Tell visitors what you offer
• Value proposition - Why should they care?
• Clear CTA - What should they do next?

Design

• High contrast - Ensure text is readable
• Not too cluttered - Keep it focused
• Mobile-friendly - Test on all devices

Examples of Great Hero Headlines

• "Build Your Website in Minutes"
• "The Future of [Industry]"
• "Transform How You [Benefit]"

Removing a Hero

If you want to remove the hero section:

Click on the hero

Open the component menu

Select "Move to Page" to convert it back to a regular content block

Or delete it entirely

Multiple Pages, Different Heroes

Each page can have its own hero section. Customize the hero for each page's specific purpose:

• Home: Brand overview
• About: Company story
• Products: Product highlight
• Contact: Simple with contact prompt