Was ist eine Hero Section?
Die Hero Section ist der oberste Bereich deiner Startseite (oder jeder Landingpage), der direkt nach dem Header sichtbar wird. Sie heißt "Hero", weil sie der Star der Show ist — meist groß, prominent, mit einer dicken Headline, einem klaren Versprechen und einem Button, der den Nutzer zur nächsten Aktion einlädt.
Die Hero ist mehr als ein hübsches Bild. Sie ist deine Bühne. Hier beantwortest du in wenigen Worten die drei wichtigsten Fragen jedes Besuchers: Was bietest du an? Für wen ist das? Warum sollte mich das interessieren? Wer auf diese drei Fragen keine Antwort sieht, scrollt nicht — er geht.
Beispiel: Stripe macht das seit Jahren vorbildlich. Kurze, harte Headline ("Financial infrastructure for the internet"), ein Satz darunter, ein deutlicher Button — fertig. Kein überladenes Karussell, kein Stockfoto, kein "Willkommen auf unserer Website". Wer vorbeischaut, weiß sofort, woran er ist.
Was gehört in eine Hero Section?
Eine starke Hero hat fast immer dieselben Bausteine. Wenn einer fehlt, leidet die Wirkung.
| Element | Aufgabe |
|---|---|
| Headline | Das eine, klare Versprechen — was du tust, in einem Satz |
| Subheadline | Der erklärende Halbsatz, der die Headline verdeutlicht |
| Visual | Foto, Illustration, Video oder Produktbild — verstärkt das Versprechen |
| CTA-Button | Der nächste Schritt, sichtbar und eindeutig beschriftet |
| Trust-Signal | Optional: Logos, Sterne, Zahlen, Auszeichnungen |
| Sub-Navigation | Optional: kleine Hinweise wie "ohne Anmeldung", "in 2 Min." |
Nicht jede Hero braucht alle Elemente. Aber Headline und Button gehören in jede. Ohne Headline keine Aussage, ohne Button kein nächster Schritt.
Warum ist die Hero Section so wichtig?
Untersuchungen zur Aufmerksamkeit im Web sind seit Jahren eindeutig: Die ersten Sekunden auf einer Seite sind alles. Wenn jemand in der Hero nicht erkennt, was du anbietest, scrollt er nicht aus Höflichkeit weiter. Er klickt zurück. Das ist die Above the Fold-Realität: Was hier nicht funktioniert, funktioniert nirgends.
Gleichzeitig setzt die Hero den Ton für den Rest der Seite. Eine ruhige, hochwertige Hero kommuniziert: "Hier bekommst du Profi-Arbeit." Eine überladene, schreierische Hero kommuniziert: "Hier wird verkauft." Beides kann richtig sein — je nach Branche und Zielgruppe. Falsch ist nur, wenn der Ton nicht zu deinem Angebot passt. Großzügiger Whitespace um Headline und Button ist dabei das einfachste Werkzeug, um eine Hero hochwertig wirken zu lassen.
Konkretes Beispiel: Ein Coach für Führungskräfte in Hamburg lässt seine Website neu bauen. Vorher: ein generisches Stockfoto mit dem Spruch "Gemeinsam erfolgreich". Nachher: ein klares Foto vom Coach, eine harte Headline ("Ich helfe Geschäftsführern aus dem Mittelstand, ihre Teams unter Druck zu führen"), ein Button "Erstgespräch buchen". Anfragen verdoppeln sich im ersten Monat — bei gleichem Traffic.
Gute Hero vs. schlechte Hero
Schlechte Hero Sections sehen oft erstaunlich ähnlich aus. Genau wie gute. Hier ein Direktvergleich, der das Muster zeigt:
Schlechte Hero:
- Headline: "Willkommen bei Müller GmbH"
- Subheadline: keine
- Visual: generisches Stockfoto von lachenden Geschäftsleuten
- Button: "Mehr erfahren"
- Wirkung: nichtssagend, beliebig, austauschbar
Gute Hero:
- Headline: "Sanitäranlagen, die in 24 Stunden wieder laufen"
- Subheadline: "Notfall-Service in ganz Niedersachsen, ohne Anfahrtspauschale"
- Visual: echter Mitarbeiter mit Werkzeug, kein Stock
- Button: "Notdienst anrufen"
- Wirkung: konkret, glaubwürdig, handlungsorientiert
Der Unterschied ist nicht das Design — es ist die Schärfe der Aussage. Du kannst die schönste Hero der Welt bauen: Wenn die Headline "Wir sind für Sie da" lautet, ist sie verloren.
Häufige Fehler bei Hero Sections
Slider und Karussells. Studien zeigen seit Jahren, dass Karussells fast immer Conversion Rate kosten. Nutzer übersehen sie, klicken sie weg oder schauen sie wegen Banner-Blindheit gar nicht an. Eine starke statische Hero schlägt fünf rotierende Slides.
Zu lange Headlines. Zwei Zeilen sind das Maximum. Wer drei Zeilen braucht, hat noch nicht herausgearbeitet, was er sagen will.
Schwache oder fehlende CTA. Ein Button ohne klares Versprechen ("Mehr erfahren") ist verschenkt. Besser: "Termin buchen", "Angebot rechnen", "Demo starten".
Hero-Bild ohne Aussage. Stockfotos, die nichts mit deinem Angebot zu tun haben, sind reine Dekoration. Schöner ist es ohne — oder mit einem echten Bild aus deinem Alltag.
Kein Mobile-Konzept. Was am Desktop wirkt, kann am Smartphone zu eng sein. Headline darf nicht zerquetscht werden, Button darf nicht im Footer landen.