Hero

You might say

The top of the site feels empty. Give it a big image and headline so people immediately get what we do.

Use the opening area to explain the page's main point and next stepThe Hero usually sits directly below the Header or Navbar. It may combine a headline, supporting copy, a primary action, and a product visual, but there is no required component checklist. What matters is that these elements explain the page's main value together. Customer logos, feature lists, and pricing are normally separate sections even when they appear nearby.

New · AI website building assistant Turn your ideas into web pages with just one sentence

Describe the page you want, and AI will help you generate, modify and publish it.

Start for freeWatch a demo →

You can say this to an AI Agent

Redesign the site hero: state who the product helps and what problem it solves, clarify the outcome in support copy, emphasize one primary CTA, and use a real product view as evidence. Keep features, pricing, and FAQ in later sections, then run a five-second comprehension check.

Which part of this page is the Hero?

Select a region to see its name and how it differs from the Hero.

Look at the whole page firstThe Hero usually sits directly below the top navigation and introduces the page's main point.

You can say this to an AI Agent

Update this Hero. Only change the headline, supporting copy, button, and product visual; leave the other sections alone. When you are done, tell me exactly what changed.

Anatomy

Turn your ideas into web pages with just one sentence Describe the page you want, and AI will help you generate, modify and publish it. Start for free →

Describe the most important value of the current page

Supplement applicable objects, questions or usage methods

When the page requires user action, give a clear next step

Use product screenshots or illustrations to help understand

Variants

Centered

Less content, focus on one main action

Split

Need to explain the value and show the product picture at the same time

Screenshot

The product interface itself helps users understand

Typical use cases

Product homepage

New · AI data analysis Let every report speak for itself

Upload the table, and AI will automatically generate charts and conclusions to reduce duplication.

Start your free trialSchedule a demo →

Campaign landing page

Hello, this is a personal portfolio

Independent product designer · Focus on SaaS and efficiency tools, demonstrating product design and collaboration process

Portfolio

Mountain hiking · record every departure

Offline maps, track records, altitude curves, a pocket guide for hiking enthusiasts.

App Store ▶ Google Play

Event page

Event date · Location · How to participate Vibe Coding Creator Conference Use one sentence to describe the theme of the event, suitable groups and main content.

View agenda and guests

Recommended tool

Web fine-tuning tool · Selector Pro

Select page elements for precise AI edits

Click a button, text, or card, note the change, then copy its exact location to AI.

Open Selector Pro website

A first-time visitor opens a product site and needs to understand the problem it solves and what to do next. How should the hero work?

A. State the value in a clear heading and explanation, emphasize one action, and show the necessary product viewB. Use an abstract slogan and large decorative image, explaining the actual capability near the page bottomC. Place customer logos, every feature, three prices, and the FAQ together in the hero

ANS Original Methods

Apply this term in a real workflow

Portfolios & Sites

Present Coursework or Projects as a Clear Portfolio Page

Structure your page around a clear hero, project cards, evidence screenshots, and working links rather than hype or heavy motion.

High-Craft UI & Visual Review

Design Studio-Grade UI with 3-Direction Exploration & Context-Free Sub-Agent Review

Have the Agent propose 3 distinct hero directions in a side-by-side style-explorer.html preview, enrich with custom illustrations or frame sequences, and run a 10-point blind screenshot critique via a fresh sub-agent.