Hero Section (Kopfbereich der Seite)
Eine Hero Section ist der markante Block am oberen Rand einer Landingpage, der meist Überschrift, ergänzenden Text, ein Visual und eine Hauptaktion vereint.
Das Wichtigste in Kürze
- Die Hero Section ist ein Verbund und wirkt über Hierarchie, nicht über ein Einzelelement.
- Die Formulierung der Anzeige zu wiederholen senkt die Absprungrate durch sofortige Wiedererkennung.
- Ein passender Screenshot stützt die Aussage; Dekorfotos kosten Platz ohne Beleg.
- Ohne Navigation bleibt auf einer Quiz-Landingpage genau eine Sache zum Klicken.
- Flache Testergebnisse deuten auf die Positionierung, nicht auf die Gestaltung.
Im Detail
Eine Hero Section ist ein Verbund: Überschrift, Stützzeile, ein Visual, eine Hauptaktion und oft ein kleines Vertrauenselement. Sie wirkt über Hierarchie, nicht über ein einzelnes Teil. Schriftgröße, Kontrast und Weißraum legen die Lesereihenfolge fest, sodass das Auge auf der Überschrift landet, zur Stützzeile weitergereicht wird und beim Button ankommt. Konkurrieren zwei Elemente um dasselbe visuelle Gewicht, bricht die Reihenfolge, und der Besucher muss sie selbst herstellen.
Der stärkste Hebel ist der Message Match. Wiederholt die Hero Section die Formulierung aus Anzeige oder Suchergebnis, ist die Wiedererkennung sofort da und die Absprungrate sinkt. An zweiter Stelle steht das Visual: Ein passender Screenshot oder ein Diagramm stützt die Aussage, ein dekoratives Stockfoto verbraucht Platz ohne Beleg. Ein zweiter Call-to-Action, eine volle Navigationsleiste oder ein automatisch startendes Video kosten meist mehr an Verwässerung, als sie an Auswahl bringen.
In der Praxis entsteht die Hero Section zuletzt, wenn Angebot und Zielgruppe feststehen, und wird neu geschrieben, sobald sich die Traffic-Quelle ändert. Viele Teams pflegen je Kampagne mehrere Hero-Varianten, während der Rest der Seite gleich bleibt. Auf einer Quiz-Funnel-Seite ist sie der Einstieg: Die Überschrift rahmt das Ergebnis, die Stützzeile nennt Dauer und Format, und ein Button startet die Scorecard, ohne Navigation daneben.
Eine Hero Section gleicht weder die falsche Zielgruppe noch ein ungewolltes Angebot aus. Teams, die weiter Varianten testen, nachdem die Zuwächse abgeflacht sind, optimieren meist die Darstellung, obwohl die Positionierung das Problem ist. Das Muster passt außerdem schlecht dort, wo Besucher bereits überzeugt ankommen, etwa auf einer aus der Testphase aufgerufenen Preisseite, und auf redaktionellen Seiten, wo ein großer Dekoblock nur den gesuchten Text verzögert.
Beispiel aus der Praxis
So wird es gemessen
Zwei Zahlen beschreiben die Leistung: die Klickrate auf die Hauptaktion und die Absprungrate der Besucher, die nie scrollen. Lesen Sie beide je Traffic-Quelle, denn eine für eine Anzeige geschriebene Hero Section schneidet bei einer anderen schwächer ab. Hohe Absprungrate bei zugleich starker Klickrate des kleinen Rests deutet auf fehlenden Message Match, nicht auf einen schwachen Button.
Testen Sie eine Variable und halten Sie den Rest der Seite fest, sonst lässt sich nicht sagen, ob Überschrift oder Bild gewirkt hat. Verfolgen Sie den Sieger auch über den Klick hinaus: Eine Hero Section, die Quiz-Starts hebt, aber Abschlüsse senkt, hat Menschen angezogen, zu denen das Angebot nicht passt, also ein als Verbesserung verkleideter Verlust.
Häufige Fehler
Teams schreiben die Hero Section zuerst, bevor Angebot und Zielgruppe entschieden sind, und landen bei Text, der das Unternehmen beschreibt statt das Ergebnis des Besuchers. Formulieren Sie zuerst dieses Ergebnis als Satz, den Sie im Gespräch laut sagen würden, verdichten Sie ihn zur Überschrift und verschieben Sie die Details in die Stützzeile. Wer nicht sagen kann, wen die Seite ausschließt, ist noch zu breit.
Der zweite Fehler ist die überfüllte Hero Section: zwei gleich starke Buttons, eine volle Navigationsleiste, ein rotierender Slider und eine Badge-Reihe. Jede Ergänzung verlangt eine Auswahl statt einer Handlung, und Slider schieben die Botschaft weg, bevor sie gelesen ist. Geben Sie einer Aktion den dominanten Kontrast, halten Sie Nebenlinks sichtbar leichter und ersetzen Sie den Slider durch sein stärkstes Einzelbild.
Häufig gestellte Fragen
Was ist der häufigste Fehler bei der Hero Section?
Eine Überschrift, die clever oder feature-lastig statt nutzenorientiert ist, sodass Besucher nicht erkennen, was sie bekommen. Mit dem konkreten Ergebnis des Quiz zu beginnen, konvertiert meist deutlich besser.
Was gehört in eine Hero Section?
Eine Überschrift mit dem Ergebnis, eine Stützzeile mit den Details, ein klärendes statt dekoratives Visual und eine einzelne Hauptaktion. Ein kurzes Vertrauenselement wie eine Kundenzahl oder ein einzeiliges Zitat hilft, wenn es stimmt und knapp bleibt. Alles Weitere, auch die Navigation auf einer dedizierten Landingpage, ist optional und wirkt meist abträglich.
Bild oder Video in der Hero Section?
Ein Bild, wenn das Visual erklärt, was das Produkt tut, etwa ein Screenshot oder ein beschriftetes Diagramm. Video eignet sich, wenn sich das Angebot nicht in einem Satz erklären lässt, aber nur mit Klick zum Start; Autoplay konkurriert mit der Überschrift und verzögert den ersten Bildaufbau. Dekorfotos erhöhen nur das Seitengewicht.
Braucht eine Landingpage-Hero Navigation?
Auf einer dedizierten Kampagnenseite meist nicht. Navigation bietet Ausgänge aus einer Seite, deren Zweck eine Handlung ist, und der Besucher kam aus einer Anzeige, nicht vom Stöbern. Behalten Sie Logo und rechtlich nötige Links. Auf einer Startseite kehrt sich die Rechnung um, weil Besucher mit gemischter Absicht kommen und Wegweiser brauchen.
Wie unterscheidet sich Hero Section von Above the Fold?
Above the Fold ist eine Viewport-Messung: alles, was ohne Scrollen sichtbar ist. Die Hero Section ist ein gestalteter Block mit fester Komposition. Beides überschneidet sich meist, ist aber nicht dasselbe: Eine hohe Hero Section reicht auf dem Telefon unter den Falz, und ein Ankündigungsbanner belegt sichtbare Fläche, ohne zur Hero Section zu gehören.
Wie lang sollte der Hero-Text sein?
Die Überschrift funktioniert am besten als eine in Mobilbreite lesbare Zeile, also meist unter etwa zehn Wörtern. Die Stützzeile darf zwei Zeilen laufen und trägt die Einschränkungen: für wen, wie lange, zu welchem Preis. Darüber hinaus schiebt Text den Button vom Bildschirm und tauscht Klarheit gegen Vollständigkeit ein.
Wie oft sollte die Hero Section erneuert werden?
Immer dann, wenn sich Angebot, Zielgruppe oder Traffic-Quelle ändern, nicht nach Kalender. Eine in der Sprache einer Kampagne geschriebene Hero Section wirkt für Besucher aus einer anderen Anzeige unpassend. Viele Teams halten den Seitenkörper gemeinsam und tauschen nur die Hero Section je Kampagne, was den Message Match ohne separate Seiten sichert.