# Hero-Bereich gestalten: der erste Bildschirm deiner Website

[Canonical HTML page](https://gradiently.design/de/guide/hero-section-design)

Besucher entscheiden, ob sie bleiben, bevor sie scrollen. Im Hero fällt diese Entscheidung, also muss sich jedes Wort und jedes Pixel darin seinen Platz verdienen.

## The short version

- Ein Hero-Bereich ist der erste volle Bildschirm einer Website, und er sollte sagen, was das Produkt ist, für wen es ist und was als Nächstes zu tun ist.
- Die Kernbestandteile sind eine Headline, eine erklärende Zeile, ein primärer Call to Action und ein Bild, das das Produkt zeigt oder die Stimmung setzt.
- Konkrete Headlines, die ein Ergebnis nennen, funktionieren besser als Slogans, die zu jeder Firma passen könnten.
- Ein Hero braucht eine Hauptaktion; ein zweiter, leiserer Link ist in Ordnung, aber mehr Auswahl verwässert sie.
- Gestalte die Handyversion bewusst, denn viele Besucher sehen den Hero zuerst auf einem schmalen Bildschirm.

Ein guter **Hero-Bereich** beantwortet drei Fragen, bevor jemand scrollt: Was ist das, ist es für mich, und was mache ich als Nächstes? Der Hero ist der erste Bildschirm deiner Website, meist eine Headline, ein erklärender Satz, ein einziger Hauptbutton und ein Bild. Alles andere (Logos, Badges, ein zweiter Button, ein Karussell) muss den Platz rechtfertigen, den es diesen vier wegnimmt. Dieser Leitfaden behandelt Text, Layout und Umsetzung; nur zum Hintergrund siehe [Hintergründe für den Website-Hero](https://gradiently.design/de/guide/website-hero-background).

## Was in einen Hero-Bereich gehört

| Teil | Aufgabe | Typische Länge |
| --- | --- | --- |
| Dachzeile (optional) | Kontext oder Kategorie: „Für unabhängige Cafés“ | 2 bis 5 Wörter |
| Headline | Das Versprechen, in den Worten der Leser | 4 bis 10 Wörter |
| Erklärende Zeile | Wie es funktioniert oder was es anders macht | Ein Satz, 15 bis 25 Wörter |
| Primärer Button | Der eine nächste Schritt | 2 bis 4 Wörter |
| Sekundärer Link (optional) | Ein unverbindlicherer Weg: „So funktioniert’s“ | 2 bis 4 Wörter |
| Bild | Zeigt das Produkt, das Ergebnis oder das Gefühl | Ein Bild, ein Video-Loop oder ein Hintergrund |

Wenn ein Teil Besuchern nicht bei der Entscheidung hilft, ob sie bleiben, gehört er weiter nach unten.

## Die Hero-Headline schreiben

Die Headline ist der schwierigste Satz deiner Website. Clevere Slogans scheitern, weil sie zu jedem passen könnten. Eine gute nennt, für wen etwas ist, was man bekommt oder welches Problem verschwindet, in Worten, die deine Kunden wirklich benutzen. Lies sie laut neben der Startseite eines Wettbewerbers: Könntest du beide tauschen, ohne dass es jemand merkt, ist sie nicht konkret genug.

| Vage | Konkret |
| --- | --- |
| Wir befeuern dein Wachstum | Buchhaltung für Freelancer, jeden Freitag erledigt |
| Die Zukunft des Kaffees | Single-Origin-Bohnen, montags geröstet, donnerstags bei dir |
| Design ganz einfach | Social Posts, die nach deiner Marke aussehen, in jeder Größe |
| Deine Wellness-Reise beginnt hier | Pilates in kleinen Gruppen in Leeds, sechs Personen pro Kurs |
| Innovative Lösungen für moderne Teams | Geteilte Kalender für Praxen, die Doppelbuchungen hassen |

Die konkreten Versionen sind länger, und das ist in Ordnung. In einer Headline schlägt Klarheit Kürze.

Nutze die erklärende Zeile für das Wie oder den Beleg, nicht für eine Wiederholung. Mehr zur Formulierung findest du unter [Texte für Visuals schreiben](https://gradiently.design/de/guide/writing-copy-for-visuals) und [visuelle Hierarchie](https://gradiently.design/de/guide/visual-hierarchy).

## Drei Hero-Layouts, die funktionieren

- **Zentriert.** Headline, Zeile und Button übereinander in der Mitte, auf einem Hintergrund. Stark für Marken, Launches und Produkte, die eher ein Gefühl als ein Bildschirm sind.
- **Geteilt.** Text links, Produktbild oder Screenshot rechts. Am besten, wenn das Produkt zu sehen das Argument ist: Apps, physische Waren, Essen.
- **Randloses Bild oder Video.** Ein Foto oder Loop füllt den Bildschirm, der Text steht auf einer ruhigen Fläche. Passt zu Hotels, Restaurants, Events und Portfolios, sofern die Lesbarkeit sauber gelöst ist.

Ein zentrierter Website-Hero für eine Kaffeerösterei mit Headline und erklärender Zeile auf einem warmen Verlauf

Zentriert: Der Text trägt, der Hintergrund setzt die Stimmung.

Ein geteilter Website-Hero für Terminsoftware in Praxen mit Text links und Platz für ein Produktbild

Geteilt: Text auf einer Seite, Platz für einen Produkt-Screenshot auf der anderen.

## Der Call to Action

Ein primärer Button, nach der Headline das visuell stärkste Element. Beschrifte ihn mit dem, was als Nächstes passiert, nicht mit einem allgemeinen Verb: „Kostenlos testen“, „Tisch reservieren“, „Speisekarte ansehen“. Wenn du eine zweite Option ergänzt, mach sie zu einem leiseren Textlink, damit die beiden nie konkurrieren.

### Vermeide

- Drei gleich gewichtete Buttons
- „Absenden“, „Mehr erfahren“ oder „Hier klicken“
- Einen Button in der Farbe des Hintergrunds
- Den Button auf dem Handy unterhalb des ersten Bildschirms
- Ein automatisch laufendes Karussell mit verschiedenen Botschaften

### Mach

- Ein Button, ein leiserer Link
- Eine Beschriftung, die sagt, was als Nächstes passiert
- Eine Buttonfarbe, die sonst nirgends auf dem Bildschirm vorkommt
- Headline und Button sichtbar auf einem 390 px breiten Handy
- Eine Botschaft, gut formuliert

## Hero-Hintergründe und Lesbarkeit

Der Hintergrund macht den halben Eindruck aus und ist der häufigste Grund, warum ein Hero scheitert. Unruhige Fotos und grelle Verläufe kämpfen mit der Headline, und ein dunkles Overlay über allem macht die Stimmung platt. Plane eine ruhige Fläche hinter dem Text, halte die unruhigsten Details davon fern und prüfe den [Kontrast](https://gradiently.design/de/guide/color-contrast-accessibility) bei jeder Bildschirmbreite, denn der Bereich hinter dem Text verschiebt sich, wenn sich das Layout neu anordnet.

Hier ist ein Mark von Gradiently nützlich: Sein ruhigster, kontrastreichster Bereich wandert hinter deine Wörter, und die Schriftfarbe wird aus seiner eigenen Palette gewählt, sodass die Headline in 1920×1080 und auf dem Handy lesbar ist, ohne Kasten oder Schatten. Für CSS-Ansätze siehe [Verlaufs-Overlay](https://gradiently.design/de/guide/gradient-overlay) und [Text auf einem Farbverlauf](https://gradiently.design/de/guide/text-on-gradient).

## Den Hero fürs Handy gestalten

Auf dem Handy ist der Hero schmal und hoch, also stapeln sich geteilte Layouts, und randlose Bilder werden stark beschnitten. Entscheide, was das Handy zeigt, statt es dem Zufall zu überlassen: Headline und Button sollten ohne Scrollen sichtbar sein, das Bild kann nach unten wandern oder kleiner werden.

- Desktop 1920×1080: 1920 × 1080
- Laptop 1440×900: 1440 × 900
- Handy 390×844: 390 × 844

Derselbe Hero in drei gängigen Viewport-Größen. Was am Desktop neben der Headline Platz hat, muss auf dem Handy darüber oder darunter.

```css
.hero {
  min-height: min(100svh, 56rem);
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}

.hero h1 {
  font-size: clamp(2.25rem, 6vw, 4.5rem);
  line-height: 1.05;
  max-width: 18ch;
  text-wrap: balance;
}

.hero p {
  max-width: 40ch;
  margin-inline: auto;
}
```

`svh` richtet sich nach dem sichtbaren Handybildschirm, `clamp()` skaliert die Schrift zwischen Handy und Desktop, und `text-wrap: balance` gleicht die Zeilen der Headline aus.

## Checkliste für den Hero-Bereich

1. **Schreib zuerst die Headline** Bevor du Bilder wählst, schreib fünf Headlines und nimm die konkreteste. Das Layout folgt dem Text.
2. **Reduziere auf eine Aktion** Wähle den einen nächsten Schritt, den die meisten Besucher gehen sollen, und mach ihn zum einzigen Button.
3. **Wähle ein Bild, das belegt oder Stimmung setzt** Ein Screenshot, ein Produktfoto oder ein Hintergrund, der die Marke trägt. Kein Stockfoto von Leuten, die auf Laptops zeigen.
4. **Prüfe die Lesbarkeit überall** Zieh das Browserfenster von breit nach schmal und beobachte den Text vor dem Hintergrund auf dem ganzen Weg.
5. **Halte ihn schnell** Das Hero-Bild ist oft das Größte auf der Seite. Gib ihm die richtige Größe und liefere [WebP oder AVIF](https://gradiently.design/de/guide/webp-images) aus.

Der Hero eröffnet die Seite; der Rest der Seite muss das Versprechen halten. [Landingpage-Design](https://gradiently.design/de/guide/landing-page-design) behandelt die folgenden Abschnitte.

## FAQ

### Was ist ein Hero-Bereich auf einer Website?

Der erste volle Bildschirm einer Seite, oberhalb des Falzes. Er enthält meist eine Headline, eine erklärende Zeile, einen Hauptbutton und ein Bild.

### Was sollte die Headline im Hero-Bereich sagen?

Was das Produkt tut und für wen, in den eigenen Worten der Kunden. Konkrete Ergebnisse schlagen breite Slogans.

### Wie viele Buttons sollte ein Hero-Bereich haben?

Einen primären Button. Ein zweiter, leiserer Textlink für eine unverbindlichere Option ist in Ordnung, aber mehr Auswahl schwächt den Hauptbutton.

### Wie groß sollte ein Hero-Bild sein?

Gestalte für den Desktop in 1920×1080 und liefere über `srcset` kleinere Versionen fürs Handy, damit mobile Besucher eine leichtere Datei laden.

### Sollte ein Hero-Bereich den ganzen Bildschirm füllen?

Nicht unbedingt. Ein bildschirmfüllender Hero passt zu markengetriebenen Websites; Produktseiten profitieren oft von einem kürzeren Hero, der Inhalte darunter andeutet.