Hero Section: So gestaltest du fesselnde Cover für deine Webseiten & Landing Pages
von Vladislav Melnik
Kennst du das?
Du sitzt vor deiner Startseite, deiner “Über mich”-Seite, deiner Landing Page für die Leadgenerierung oder deiner Sales Page und es kommt … nichts.
Es geht einfach nicht voran. Du weißt einfach nicht so recht, wo und wie du anfangen sollst. Du findest keinen Startpunkt.
Irgendwie bist du blockiert.
Irgendwie flutscht es einfach nicht so recht.
Aber du musst diese Seite erstellen. Du willst sie erstellen.
Ich habe das Problem früher auch gehabt. Ich wusste nie so richtig, wie ich anfangen soll. Deshalb habe ich nach einem Framework gesucht und gefunden. Und mit dieser Anleitung kannst du das auch! 😉
Der große Vorteil: Wenn deine Hero Section einmal fertig ist, dann flutscht der Landing-Page-Aufbau fast von allein. Der Rest wird dann viel, viel einfacher.
Du hast damit den Rahmen geschaffen.
Das ist die halbe Miete.
Und wenn du einmal verinnerlicht hast, wie das geht, kannst du immer wieder fesselnde Hero-Abschnitte erstellen.
Aber bevor wir loslegen, starten wir erst mal mit den Basics.
Jede gute Seite und Landing Page startet immer mit einem Hero.
Die Hero Section ist das Erste, was deine Besucher sehen, ohne scrollen zu müssen. Hier mal ein schönes Beispiel:
Quelle: Caroline Preuss
“Hero” klingt jetzt nach einem neuen Fachbegriff. Ist es aber nicht.
In Hollywood gibt’s den “Hero Prop”. Also die Requisiten des Helden, die wesentlich detaillierter sind als der Rest. In der Werbung gibt es auch einen “Helden”. Das ist entweder der Kunde, oder das Produkt.
Aber auch im Zeitungsdruck hat man einen Hero-Bereich oberhalb des Falzes (daher auch “Above the Fold”). Es ist der Bereich, den du in einem Kiosk siehst, wenn die Zeitung gefaltet ist.
Bei einem Printmagazin wäre es das Cover.
Dieser Abschnitt entscheidet also, ob du einen Blick rein riskierst und die Zeitung oder das Magazin kaufst. Oder eben nicht.
Und genau dieses Prinzip lässt sich auf deine Webseite und Landing Pages übertragen. Deshalb kann man auch sagen: Dein Hero ist das Cover deiner Seite oder Landing Page.
Fast immer! Deine Startseite, deiner “Über mich”-Seite, deine Landing Page für die Leadgenerierung oder deine Sales Pages – sie alle sollten einen fesselnden Hero-Abschnitt haben. Ohne geht nicht.
Schauen wir uns dazu einige Beispiele an:
Quelle: Marco Wölfel
Quelle: Chimpify
Quelle: MarathonFitness
Quelle: Souverän Skaliert
Dein Hero ist das Erste, was deine Besucher sehen, wenn sie deine Seite oder Landing Page besuchen. Es ist der Abschnitt, der am meisten Sichtbarkeit und Aufmerksamkeit bekommt.
Hier entscheiden deine Besucher, ob sie weiterschauen. Oder deine Webseite verlassen. Du musst sie also sofort überzeugen. Sonst sind sie schnell wieder weg. Vielleicht für immer.
Du hast nur 10-20 Sekunden, um mit deinem Hero zu überzeugen.
Das belegt die Nielsen Norman Group in dieser Studie. Eine andere Studie von Google zeigt, dass du nur 50 Millisekunden hast, um einen guten ersten Eindruck zu machen. Wir reden hier also von Sekunden.
Deshalb ist dein Hero die wichtigste Sektion und macht den größten Teil der Arbeit. Wenn dein Hero stark ist, werden hierüber die meisten Conversions kommen. Er hat in der Regel die größte Auswirkung auf deine Conversion Rate.
Es gibt Millionen von Webseiten und Landing Pages da draußen. Deine Kunden werden mit Informationen überflutet. Deshalb musst du hier herausstechen, glasklar kommunizieren und deine Besucher abholen.
Wenn du Menschen von einer Handlung überzeugen möchtest, lautet die wichtigste Frage:
Warum?
Warum sollte sich jemand aus deiner Zielgruppe für dein Produkt, deine Dienstleistung oder deinen Lead-Magnet interessieren? Warum sollte sie oder er ausgerechnet bei dir die gewünschte Handlung ausführen und nicht woanders? Was ist dein Mehrwert? Was machst du besonders?
Genau diese Fragen beantwortet dein Hero.
Zuallererst sollte deine Hero Section immer Above the Fold platziert werden. Das heißt, deine Besucher sollten ohne Scrollen den kompletten Abschnitt sehen.
Dein Hero ist im Prinzip eine eigene kleine Landing Page in sich und sollte im Groben folgende Fragen beantworten:
Mach dir also schon mal Gedanken über diese Fragen.
Da deine Hero Section der wichtigste Abschnitt ist, solltest du dir hier auch ausreichend Zeit lassen.
Ähnlich wie der Hero einer Zeitung oder eines Magazin aus einem Bild, Headline und Text besteht, so verhält es sich auch mit dem Hero-Abschnitt deiner Webseite oder Landing Page.
Dabei besteht eine Hero Section aus folgenden Elementen:
Jeder Hero beginnt immer mit einem Logo bzw. deinen Namen. Bei deiner Webseite hast du in der Regel noch eine Navigation. Bei einer Landing Page solltest du keine Navigation haben (hier mehr dazu).
Ein Logo strahlt Seriosität und Glaubwürdigkeit aus und baut dadurch Vertrauen auf. Außerdem arbeitet es als Anker und linkt zurück zur Startseite – so hast du immer noch ein bisschen Usability gewährleistet.
Zur Position des Logos hat die Nielsen Norman Group ein paar interessante Studienergebnisse: Knapp 90% der Nutzer erinnern sich am häufigsten an Logos, wenn sie links oben platziert sind. Aber wenn das Logo in der Mitte ist, ist die Rückkehr zur Startseite 6-mal schwieriger, als wenn es links platziert ist.
Deshalb rate ich auf einer Webseite zum Logo links. Bei einer Landing Page dagegen in der Mitte. Damit erschwerst du die Rückkehr zur Startseite – und das ist ja genau in deinem Interesse, oder? 😉
Ich sehe auch immer wieder Landing Pages komplett ohne Logo. Aber das würde ich nicht empfehlen. Da geht immer etwas Glaubwürdigkeit, Vertrauen und Usability verloren.
Eine Hero Section ist der gesamte Abschnitt deiner Seite oder Landing Page. Ein Hero Shot dagegen nur der Eyecatcher. Also das Bild, GIF oder Video.
Wir Menschen verarbeiten Bilder 60.000-mal schneller als Texte. Deine Besucher sehen in der Regel zuerst deinen Hero Shot, checken dann den Rest deiner Hero Section aus und entscheiden dann, ob sie hier richtig sind oder nicht.
Deshalb sollte dein Hero Shot folgende Kriterien erfüllen:
Deine Besucher sollten also mit dir connecten. Im Optimalfall sollten sie sich wiedererkennen. Entweder in dir, einer anderen Person, die du darstellst oder in einer bestimmten Situation.
Hier mal einige konkrete Beispiele dafür:
Der Hero Shot ist das einzige Element, bei dem du dich richtig kreativ austoben kannst. Nutzte diese Möglichkeit. 🧑🎨
Das Label ist eine Mini-Überschrift über der eigentlichen Überschrift. Man nennt es auch “Eyebrow Copy” – also die Augenbraue der Überschrift. Labels sind schwer im Trend, weil sie super nützlich sind.
Du kannst damit deine Zielgruppe direkt ansprechen (z.B. “Für Coaches, Berater & Trainer”). Oder du beschreibst bei einer Landing Page zur Leadgenerierung um, was es sich genau handelt (z.B. “Kostenloser Guide”). Außerdem wäre es auch ein perfekter Ort für eine unauffällige H1-Überschrift mit deinem Fokus-Keyword (z.B. “Marketingplattform”).
Vor allem die Überschrift ist nicht nur das wichtigste Element deiner Hero Section, sondern deiner gesamten Seite oder Landing Page. Die muss knallen. 💣
Häufige Fehler, die du unbedingt vermeiden solltest:
Generell solltest du nicht über dich, sondern über deine Kunden sprechen. Deine Kunden interessieren sich nämlich nicht für dich, sondern nur darum, wie du ein bestimmtes Problem von ihnen lösen kannst.
Du musst hier auch nicht inspirieren oder clever sein. Am besten fokussierst du dich auf die Vorteile und sagst es einfach und direkt. Kein Fachjargon (außer deine Kunden verständigen sich nur über Fachjargon).
Das alles in wenigen Wörter zu kommunizieren, ist nicht immer leicht. Genau hier kommt die Unterüberschrift ins Spiel.
Die Unterüberschrift, Subheadline oder einfach der Text unter der Überschrift ergänzen deine Überschrift. Hier kannst du deinen Besuchern mehr Informationen bereitstellen. Gehe also näher auf die Vorteile ein und beschreibe genauer, wie du ihr Problem löst.
Der Button ist die eigentliche Handlungsaufforderung. Der Call-to-Action animiert deine Besucher zu einer bestimmten Handlung.
Diese Handlung kann vieles sein. Entweder ein kostenloses Erstgespräch, die Bestellung deines Produkts, das Herunterladen deines Lead-Magneten, die Eintragung in deinen Newsletter usw.
Optisch sollte dein Button immer hervorstechen. Verwende daher immer eine Kontrastfarbe. Außerdem sollte er leicht zu klicken sein. Mache ihn also daher schön groß. 🙂
Wenn du deinen Button textest, klingt “Mehr” nicht nach einer richtigen Handlungsaufforderung. Verwende daher immer ein Verb – z.B. “Kostenloses Erstgespräch vereinbaren”.
Einige Hero Sections haben noch einen zweiten Button. Davon würde ich grundsätzlich abraten. Macht die Sache nur unnötig kompliziert. Deine Besucher müssen eine Handlung ausführen. Fokussiere dich darauf.
Das andere Extrem wäre gar keinen Button zu verwenden. Die Frage ist nämlich: Ist deine Kundin bzw. dein Kunde schon ready? Hat sie oder er alle benötigten Infos? Falls nicht, kannst du den Button weglassen (siehe #3).
Du hast hart für dein Social Proof gearbeitet. Verstecke es nicht unten auf deiner Seite oder Landing Page. Packe es anstelle dessen schön prominent in deine Hero Section.
Dabei hast du folgende Elemente zur Auswahl:
So. Das war jetzt der grundsätzliche Aufbau einer Hero Section. Schauen wir uns jetzt einige konkrete Wege an, die du gehen kannst:
Quelle: Johannes Bopp
Bei diesem Hero gehst du stumpf auf den Nutzen deines Angebots ein. Deshalb ist es der einfachste Weg, um eine Hero Section zu erstellen.
Deine Value Proposition ist das Wert- bzw. Nutzenversprechen deines Angebots. Sie beschreibt den Mehrwert, also den konkreten Nutzen, deines Produkts, deiner Dienstleistung oder deines Lead-Magneten.
Mit diesem klaren Versprechen erkennen deine Besucher recht schnell, dass sie hier richtig sind, dass dein Angebot ihnen etwas bringt und was du anders bzw. besser machst als die anderen.
Deine Value Proposition für deine Hero Section sollte folgende Fragen beantworten:
Behalte diese Punkte jetzt im Hinterkopf. Führe jetzt folgenden Satz fort:
Ich verspreche dir …
Also zum Beispiel:
Erkennst du die 4 Fragen von oben in diesen Versprechen wieder? Wie sieht’s mit deinem eigenen aus?
Damit hättest du schonmal eine grobe Richtung und eigentlich schon ein recht gutes Wertversprechen. Aber es ist nicht immer so leicht auf eine gute Value Proposition zu kommen.
Falls es bei dir noch klemmt, benutze folgende Überschrift-Formeln:
Diese Formeln sind ein guter Startpunkt. Vielleicht hast du das Gefühl, dass deine Überschrift bzw. dein Versprechen schon recht gut ist. Dann lass es einfach so. In der Regel braucht sie aber noch ein bisschen Feinschliff. Erstelle deshalb verschiedene Variationen und wähle die beste.
Schauen wir uns das mal noch genauer an. Erst mal für eine Dienstleistung:
Hier ein weiteres Beispiel für eine Landing Page zur Leadgenerierung mithilfe eines Lead-Magneten:
Bei dem Aufbau einer Hero Section verhält es sich ähnlich wie beim allgemeinen Landing-Page-Aufbau. Du musst dich also nicht immer exakt an diesen Aufbau halten. Nutze es einfach als Grundgerüst für den Anfang.
Quelle: Tony Robbins
Dein Value Proposition Hero geht eher nüchtern auf dein Wertversprechen ein. Er beschreibt einfach was du machst, für wen, was daran einzigartig ist und was die Vorteile sind.
Dein Wunsch-Hero dagegen ist wesentlich emotionaler. Er ist also eine stärkere Version deines Wertversprechens. Er ist positiv und fokussiert sich auf den Traum deiner Kunden.
Er beschreibt die Dinge, die sie fühlen wollen.
Wenn es deinen Kunden am wichtigsten ist einen idealen Traumzustand zu erreichen (z.B. nackt gut aussehen), dann verwende diesen Hero. Deine Kunden haben also einen Traum und können es mithilfe deines Produkts, deiner Dienstleitung oder deinem Lead-Magneten erreichen.
Schauen wir uns das wieder genauer an:
Was wünschen sich deine Kunden in ihrem tiefsten Inneren? Beschreibe diesen Zustand und ziehe sie so in deine Seite oder Landing Page.
Quelle: Follow Up Boss
Ähnlich wie der Wunsch-Hero ist der Problem-Hero auch emotional. Aber er ist negativ. Da man im Marketing ja eigentlich immer positiv sein sollte, erfordert er ein bisschen Mut .
Er beschreibt die Dinge, die deine Kunden nicht fühlen wollen.
Das Geheimnis ist nämlich, wenn du mit einem Problem führst, du oft bessere Ergebnisse erzielen kannst. (Wir Menschen empfinden es auch z.B. schmerzvoller etwas Vorhandenes zu verlieren als etwas Neues zu gewinnen.)
Mit diesem Hero holst du die Leute ab, die aktuell einen Schmerz haben (z.B. Rückenschmerzen). Sie haben sich vielleicht sogar schon damit abgefunden und ihn als Teil ihres Lebens akzeptiert. Aber das muss nicht sein. Dein Produkt, deine Dienstleistung oder dein Lead-Magnet sind hier die Lösung.
In dem Fall denken sich deine Besucher sofort:
Ah! Sie oder er versteht mich. Das könnte perfekt für mich sein.
Je nach Marktlage macht es auch Sinn, deine Zielgruppe an ihr Problem zu erinnern. Außerdem kannst du tief reinfühlen und den Schmerz intensivieren. Damit machst du die aktuelle Situation noch mal schön präsent.
Hier wieder ein Beispiel:
Finde den größten Schmerz deiner Zielgruppe und führe damit.
Quelle: Marco Wölfel
Du brauchst diesen Hero für spezifische Landing Pages.
Das Ding ist, verschiedene Kundensegmente möchten mit verschiedenen Messages abgeholt werden. Auch wenn am Ende dasselbe Angebot da steht. Ihnen sind einfach ganz andere Sachen in einer ganz anderen Reihenfolge wichtig.
Segmentiere zuerst deine Kunden. Also z.B. Männer, Frauen. Oder kleine Unternehmen, Mittelständer, Konzerne. Oder für Freelancer, für Marketer, für Creators.
Mit diesem Hero kannst du über deine Value Proposition (siehe #1) hinausgehen und mehr auf die Probleme, Hoffnung und Wünsche des Kundensegments eingehen.
Finde heraus, was dem Segment das wichtigste ist und führe damit.
Im Optimalfall ist die Reihenfolge der Abschnitte und auch die Inhalte fokussiert auf das Kundensegment (z.B. die Kundenstimmen oder Fallbeispiele). Also alles, was ihnen wichtig ist. Und auch nur, was ihnen wichtig ist.
Aber wenn’s schnell gehen muss, kannst du auch einfach nur den Hero nehmen und der Rest deiner Landing Page kann so aussehen wie die anderen Landing Pages. Hauptsache es konvertiert. 😉
Schauen wir uns dazu ein Beispiel an:
Die Segmentierung ist generell eines der größten Vorteile von Landing Pages (hier mehr dazu). Wenn’s für dich passt, nutze diesen Abschnitt.
Quelle: LeadPages
Diesen Hero brauchst du, wenn du etwas Neues launchst, also z.B. ein neues E-Book. Oder eine zeitlich befristete Aktion, wie z.B. die nächste Black Friday Promo.
Diese Hero Section ist für Leute, die wissen, dass sie ein Problem haben, dich schon kennen und eigentlich kaufen wollen. Aber sie brauchen nur noch den fehlenden Stupser. Daher ist dieser Hero mehr wie eine traditionelle Anzeige.
Es ist im Prinzip eine Mini-Anzeige.
Nenne hier also dein Produkt oder deine Dienstleistung. Deine Handlungsaufforderung ist die Bestellung. Am besten gibst du hier noch einen Rabatt und kombinierst das Ganze mit Verknappung – also einem Countdown Timer oder eine Limitierung in der Anzahl.
Diese Hero Section packst du temporär auf deine Startseite unter die Navigation. Oder machst eine eigenständige Squeeze Page daraus.
Hier mal ein konkretes Beispiel:
An dieser Stelle darfst du die Wörter “Neu” und “Rabatt” nicht unterschätzen. Danach scannen wir Menschen. 😉
Wenn deine Besucher auf deiner Webseite oder Landing Page landen, hast du nur 10-20 Sekunden Zeit, mit deiner Hero Section zu überzeugen.
Deshalb ist der Hero eine eigene kleine Landing Page in sich. Er ist wie ein kurzer Pitch, der versucht innerhalb von wenigen Sekunden deine Besucher von deinem Produkt, deiner Dienstleistung oder deinem Lead-Magnet zu überzeugen.
“Okay, Vladi. Aber welchen Weg soll ich nun gehen?”
Mit dieser Anleitung weißt du jetzt genau, wo du anfangen solltest. Jetzt hast du endlich einen Startpunkt. Jetzt bist du nicht mehr blockiert.
Wenn du deinen Hero hast, dann hast du die halbe Miete.
Der Rest flutscht dann fast von allein.
12 Kommentare
Superb, wie immer!
Nebenbei: Es funktioniert genau so…
In einer Medienkommunikations-Vorlesung hat ein Prof neulich noch gesagt, dass ein Interessent das Angebot innerhalb von den ersten wenigen Sekunden für sich bewertet. Denke mit Webseiten verhält es sich ähnlich. Und wenn dann keine Hero-Section da ist, oder sie nicht modern gestaltet ist, dann nimmt man sich viele Conversion-Chancen gleich vorneweg.
ich habe deinen Artikel zur Hero-Section interessiert und aufmerksam gelesen. Du beschreibst ausführlich und gut nachvollziehbar den "Hero", den jede Landingpage braucht. Ich konnte mein SEO-Wissen durch deinen Beitrag auf jeden Fall erweitern. Danke dir. :)
Liebe Grüße
Koral
wie immer ein sehr spannender Artikel. Gerade der Punkt, dass man die Hero-Section auf seiner Webseite als Werbeanzeige sehen sollte, finde ich sehr spannend. Häufig wird dieser Bereich von vielen Unternehmen vernachlässig, was natürlich fatal ist, wenn man sich das Potential anschaut. Vielen Dank für den guten Input!
Superb, wie immer!
Nebenbei: Es funktioniert genau so…
Was denkst du?