Hero Section: Das musst du beachten!

Was ist eine Hero Section? Was muss man beachten und was sind die größten Fehler? Das musst du über den Above The Fold Bereich deiner Website wissen und so gestaltest du den Heldenbereich richtig!

Um aus Website Besuchern Kunden zu machen, muss man einen guten und unvergleichlichen Eindruck hinterlassen. Und wie wir alle wissen, hat man dafür nur eine einzige Chance und wenige Millisekunden Zeit.

Wenn es um Websites geht, ist diese einzige Chance, deine Hero Section. Mach sie falsch und Interessenten verlassen deine Website sofort.

Zum Glück gibt es aber Taktiken und Methoden, um das zu verhindern. Wie Bilder, Schriftart, Text, Call To Actions und mehr.

In diesem Beitrag möchte ich mit dir tief in das Thema eintauchen und verraten, worauf ich bei meiner täglichen Beratungsarbeit im Bereich Online-Marketing achte und was Best Practice ist.

Wenn du dir unsicher bist, was eine Hero Section genau ist und du wissen möchtest, ob du eine brauchst und wie du sie am besten gestaltest, dann bist du hier genau richtig! Ich verrate dir alles, was du über den Bereich Above The Fold wissen musst.

Lass uns im Detail ansehen, wie du eine großartige Hero Section gestaltest und wie ich dir dabei helfen kann!

Was ist eine Hero Section?

Die Hero Section (deutsch: Heldenbereich) ist das Erste, was deine Besucher sehen, wenn sie auf deine Website kommen.

Es ist der Bereich, der direkt unter deinem Logo und dem Menü erscheint. Dieser Abschnitt sollte kurz, knackig, aussagekräftig, kreativ und an die Zielgruppe gerichtet sein.

Das sollte die Hero Section zu bieten haben:

• Dein Produkt/deine Leistung: Was bietest du genau an?
• Vertrauen: Warum ist dein Angebot einzigartig?
• Vorteile: Was sind die wichtigsten Vorteile einer Zusammenarbeit mit dir?
• Call To Action: Was muss der Nutzer als Nächstes machen? Du gibst vor, welchen Schritt er jetzt setzen soll.

Neben diesen Schlüsselaspekten musst du auf diesem sehr begrenzten Raum einen Weg finden, mit du dich von deiner Konkurrenz abhebst.

Deshalb ist der Heldenbereich deiner Homepage so enorm wichtig. Nur wenn dein Hero stark ist, kannst du Interessenten von dir und einem Angebot überzeugen. Der Hero Bereich hat die größte Auswirkung auf die Conversion Rate einer Landing Page. Verschenke dieses Potenzial nicht!

Wenn du Menschen überzeugen möchtest, lautet die allerwichtigste Frage für dich immer:

Warum?

Und zwar:

• Warum sollte sich jemand aus deiner Zielgruppe genau für dich entscheiden?
• Warum sollte die Person genau bei dir die Handlung ausführen, wenn andere ein ähnliches Angebot haben?
• Warum hat dein Produkt mehr Mehrwert als das, der Konkurrenz?

Genau diese Fragen musst du im Hero Bereich deiner Website beantworten.

Der Heldenbereich der Website ist zwar ein kurzer Abschnitt. Aber du solltest dir dafür viel Zeit nehmen. Hier spielen so viele Faktoren mit, dass es als Laie fast unmöglich ist, alles abzudecken.

Aber lass uns jetzt mal die einzelnen Elemente ansehen.

Das könnte auch für dich interessant sein: 17 Wege, um online sichtbarer zu werden!

So gestaltest du eine großartige Hero Section

Die Gestaltung der perfekten Hero Section ist eine Wissenschaft und eine hohe Kunst im Bereich der Conversion Rate Optimierung. Hier spielen sehr viele Faktoren gleichzeitig mit, die sich zusätzlich gegenseitig beeinflussen.

Diese Elemente muss eine gute Hero Section enthalten:

• Header
• Hero Image/Video
• Label
• Headline
• Subheadline
• CTA
• Social Proof

Die Hero Section einer Landing Page könnte so aussehen (schematische Darstellung). Dieser Aufbau gilt als Best Practice.

Übersichtlicher, einfacher Header

Ein Punkt, den viele nicht beachten, der den Kunden aber ganz klar einen Weg auf der Website vorgibt: der Header. Deine Website-Navigation sollte übersichtlich, klar und einfach gestaltet sein.

Ich sage es meinen Kunden immer wieder und kann es nicht oft genug betonen: Verzichte auf Fantasiebegriffe oder komplizierte Strukturen.

Erst neulich habe ich eine Fotografin beraten. Statt ganz klipp und klar „das (oder dein) Shooting“ im Menü anzuführen, setze sie auf „dein Erlebnis“. Das ist zwar kreativ, aber darunter kann sich nicht jeder etwas vorstellen. Verstehst du, was ich meine? Keep it simple!

Der User muss sofort erkennen, welche Inhalte er wo findet. Du darfst die Navigation keinesfalls überladen. Für Websites mit viel Inhalt überlege dir eine logische DropDown Struktur. Ebenso solltest du dein Logo links im Header platzieren.

Verwende ein fesselndes Hero Image oder Hero Video

Der Heldenbereich einer Website ist meist mit einem Hero Image gefüllt. Man nennt diesen Abschnitt auch Hero Shot, weil er Platz für einen Eyecatcher bietet. Deine Besucher sehen immer zuerst den Hero Shot, schauen sich danach den Text links davon an.

Anhand des Bildes entscheiden Interessenten, ob sie bei dir richtig sind oder nicht.

Der Hero Shot muss diese Kriterien erfüllen:

• Aufmerksamkeit auf sich ziehen
• Überschrift und Text unterstützten
• Authentisch sein

Das Bild kann sich über die gesamte Seite ziehen oder rechts neben dem Text platziert werden (auch links ist möglich, wird aber eher selten gemacht). Das Bild sollte dein Produkt/deine Leistung unterstreichen und an die Zielgruppe gerichtet sein. Verwendest du Menschen auf dem Bild, achte auf ihre Ausstrahlung.

Statt Hero Images können auch Videos zum Einsatz kommen. Diese müssen aber hochqualitativ sein. Das Video sollte kein gekauftes Stockmaterial sein. Bist du etwa Hundefriseur, dann sollte das Video dich zeigen, wie du dich gerade um das Fell eines Hundes kümmerst.

Videos dürfen nicht zu lang sein, aber auch nicht zu kurz. Sie sollen einen kurzen Einblick geben, neugierig machen, aber nicht in die Länge gezogen werden. Ob sie gesprochenen Text enthalten sollten, ist umstritten und Geschmackssache. Ich persönlich würde darauf verzichten und bewegte Bilder sprechen lassen.

Das Bild oder das Video müssen die Aufmerksamkeit des potenziellen Kunden auf sich ziehen und ihm sofort die passenden Informationen liefern. Er/sie muss deine Leistung sofort einordnen können.

Beispiele für Hero Images:

• Dienstleistung: Ein Bild von dir, während du die Dienstleistung ausführst. Wenn das nicht möglich ist, ein Bild von einem zufriedenen Kunden, der sein gewünschtes Ergebnis erreicht hat
• Produkt: Das Produkt selbst steht im Fokus – im Idealfall mit einer Person, die das Produkt nutzt.
• Lead Magnet: Du bietest ein E-Book als Lead-Magnet an? Dann sollte die Titelseite des Buchs zu sehen sein. In den meisten Fällen verzichtet man auf Personen, weil das zu sehr ablenkt.

Als Dienstleister bist du häufig selbst das Produkt. In so einem Fall vermarktest du dich als Person. Zeige deinen Nutzern dein Gesicht – so haben sie sofort den richtigen Ansprechpartner im Blick.

Optimiere jedes Bild, das du auf der Landing Page verwendest. Nutze dafür meine einfachen Tipps und Tricks für Bild SEO!

Nutze ein Label

Nicht verpflichtend, aber sehr praktisch, um die Zielgruppe anzusprechen. Das Label ist eine Art Mini-Überschrift, über der Headline. Labels werden manchmal auch „Eyebrow Copy“ genannt.

Sie sind gerade sehr im Trend – es gibt kaum gute Lading Pages, auf denen sie fehlen.

Das Label bietet eine sehr gute Möglichkeit, um der Zielgruppe klipp und klar zu sagen: Das Angebot richtet sich an euch, hier seid ihr richtig.

Du kannst hier etwa „für Trainer“, „für Ärzte“, „für Nagelstudios“ etc. unterbringen.

Wenn du eine Landing Page aufsetzt, um Leads zu generieren, kannst du hier noch mal ganz genau sagen, um welches Produkte/Angebot es sich handelt – etwa „kostenloser SEO Guide“.

Du kannst in das Label sehr unauffällig dein Keyword platzieren – dazu später mehr.

Schreibe eine starke Headline

Die Überschrift ist der wichtigste Part deiner Hero Section. Sie muss richtig knallen.

Auch wenn es immer mehr in Richtung Video geht: Worte haben Macht. Viel mehr, als du wahrscheinlich vermutest. Vor allem der erste Text, den User sehen, wenn sie auf deine Website kommen, muss sehr gut überlegt werden.

Die Überschrift deiner Hero Section spielt eine enorm große Rolle, wenn es darum geht, das Interesse der Besucher zu wecken. Sie kann aber auch so verwirrend oder langweilig gestaltet sein, dass die User sofort die Seite verlassen. Oft ist es ein schmaler Grat, der zwischen Erfolg und Misserfolg entscheidet.

Ich empfehle maximal 10 Wörter. Noch besser sind natürlich weniger – also alles im Bereich 4 bis 6 Wörter. Hier musst du ganz kurz und einfach sagen, was die Nutzer auf deiner Website erwartet.

Beispiel:

Die Nr. 1 Werkstatt für Oldtimer in Berlin!

Formuliere eine gute Subheadline

In der Subheadline (Unterüberschrift) hast du etwas mehr Platz, um dein Angebot und Unternehmen vorzustellen. Aber auch hier gilt: kurz und knackig.

Ich sehe auf vielen Seiten, dass hier Features und Funktionen aufgezählt werden. Dabei solltest du hier die Vorteile für deinen Kunden festhalten. Oft ist es gar nicht so einfach, das voneinander zu unterscheiden, wenn man die Hero Section anlegt.

Überlege dir gut, welche Vorteile dein Kunde hat, wenn er sich für dich entscheidet. Was bietest du ihm? Was unterscheidet dich von anderen? Und was macht dich attraktiv? Wofür möchtest du stehen? Wie löst du sein Problem?

Versuche Vertrauen zu schaffen, Neugierde zu wecken und dem Kunden seine Vorteile deiner Leistung zu zeigen.

Füge einen aussagekräftigen Call To Action hinzu

Der Call To Action Button ist die Handlungsaufforderung. Er soll deine Besucher animieren, eine bestimmte Handlung zu tätigen.

Verzichte auf langweilige Standard Call To Actions wie „mehr erfahren“.

Frage dich selbst:

• Was soll der Nutzer auf der Website jetzt als Nächstes tun?
• Was passiert, wenn er diesen Button oder Link klickt?
• Welches Ziel verfolgt die Website?

Dein Call To Action muss klar beschreiben, was beim Klick passiert. Beispiel: Beratung vereinbaren, Erstgespräch ausmachen oder zum Newsletter anmelden.

Der Call To Action Button sollte sich farblich deutlich abheben – das lenkt den Blick des Nutzers direkt auf den CTA. In der Psychologie gibt es ein paar Farben, die besonders stark zum Klicken anregen. Besonders gerne verwendet wird übrigens blau. Verwende für den Call To Action immer eine Kontrastfarbe – ganz egal, welche Farbe dein Corporate Design hat.

Die Buttons können abgerundet werden oder rechteckig sein. Es kommt nicht darauf an, was dir gefällt, sondern wie deine Zielgruppe tickt. So werden etwa Frauen von anderen Farben und Formen angesprochen wie Männer. Und hier hängt es noch mal stark vom beworbenen Produkt ab.

Alleine durch den Text, die Form, die Größe und die Farbe des Call To Action Buttons kann die Conversion Rate deutlich gesteigert werden.

Bei einem Call To Action kannst du den User direkt auf der Seite runterscrollen lassen. Bringe ihn dazu, sich für deinen Newsletter anzumelden oder lade ihn ein, deine App zu installieren (falls du eine hast). Du kannst ihm hier einen Rabatt auf den ersten Kauf geben oder eine kostenlose Testversion einer Software anbieten.

Einige Hero Bereiche haben zwei Buttons. Davon rate ich eher ab, denn das kann sehr verwirrend für die User sein. Je simpler du es hältst, desto besser. Versuche deine Nutzer von einer Handlung zu überzeugen, nicht von zwei. Das führt zu höheren Absprungraten.

Social Proof zeigen

Potenzielle Käufer sind eher kaufbereit, wenn sie sehen, dass auch andere Menschen schon deine Leistung bezogen haben. Dadurch steigt das Vertrauen in dich und dein Angebot.

Mit welchen Firmen hast du schon zusammengearbeitet? Wie viele Kunden hast du schon bedient? Seit wie vielen Jahren gibt es dein Unternehmen? Hast du gute Bewertungen, die du herzeigen kannst?

Social Proof kannst du zeigen, indem du Logos deiner Kunden oder Partner auf der Landing Page einbindest. Du kannst aber auch deine Kunden ein paar Sätze sagen lassen – füge hier auch ein Bild und den Namen des Kunden ein. Am einfachsten ist das, wenn du die deine Google Bewertungen auf deiner Website einfügst.

Diese Elemente sind die beliebtesten, um Social Proof zu zeigen:

• „Bekannt aus“
• Namhafte, große, bekannte Kunden
• Kundenmeinungen
• Bewertungen
• Siegel, Auszeichnungen, Zertifikate
• Kennzahlen
• Partner
• Tools, die du einsetzt

Schau mal hier: So bekommst du endlich mehr Google Bewertungen!

Hero Bereich an die Zielgruppe anpassen

Es gibt unzählige Ideen für die Gestaltung der Hero Section. Je nach Zielgruppe, Produkt/Dienstleistung wird dieser Bereich an deinen Verwendungszweck angepasst. Anpassungen gibt es bei:

• Wording
• Format
• Design
• Stil
• Aufbau und Struktur
• Bildauswahl
• Platzierung der Elemente

Eine Hero Section brauchst du nicht auf jeder Unterseite. Sie ist aber zumindest auf der Startseite und auf wichtigen Unterseiten (meist in abgewandelter Form) enorm wichtig. Sie wird gerne auf Seiten eingesetzt, für die man Google Ads schaltet.

Die größten und häufigsten Fehler

Wenn ich gebeten werde, mir anzusehen und herauszufinden, warum die Nutzer einer Website nicht den nächsten Schritt setzen und eine Anfrage stellen oder direkt kaufen, dann liegt es meistens an der Hero Section.

Diese Fehler habe ich in der Hero Section der letzten Kundenprojekte gefunden:

• nicht für die Zielgruppe gemacht
• schwammig, blumige Texte, die verwirrend waren
• zu viel Text
• schwer lesbare Texte, die über das Hero Image laufen
• nicht aussagekräftige Fotos
• sehr auffällige Stockfotos
• statt einer klaren Überschrift einen Slogan verwenden
• fehlender Call To Action, zu viele Call To Actions
• unklare Call To Actions
• Slide-Shows mit wechselnden Bildern und Texten
• keine Kontaktmöglichkeiten
• kein Responsive Design fürs Smartphones
• keine Keywords
• keine Trust-Elemente wie Bewertungen

Und einiges mehr wie „Willkommen auf meiner Website“ oder kreative, ausgefallene Formulierungen und erfunde Wörter, die kein Mensch versteht.

Beispiel eines Kunden, der Solarpanele anbietet: „Watt will man mehr“. Das ist zwar lustig, aber für eine professionelle Landing Page meiner Meinung nach weniger geeignet.

Noch ein Beispiel eines Kunden, der Carports anbietet. Er schreibt auf seiner Website: „Nix wagen mit dem Wagen“.

Was haben Keywords mit dem Thema zu tun?

Möchtest du, dass die Seite organisch gefunden wird, solltest du unbedingt Keywords verwenden. Dafür brauchst du zuerst mal eine ausführliche Keyword Recherche. Damit verstehst du, wie deine Zielgruppe nach dir und deinen Produkten sucht.

Selbst dann, wenn du zu wenig Wert auf SEO legst, weil du die Website über SEA (Search Engine Advertising wie Google Ads) bewirbst, empfehle ich eine Keyword Recherche.

Du lernst deine potenziellen Kunden damit besser kennen. Du kannst dir vergleichbare Websites ansehen und verstehen, was sie in ihrer Hero Section gut machen und was nicht.

Das Keyword muss unbedingt in deinen Header und/oder Subheader. Im Idealfall ist es als h1 definiert.

Also: „Nix wagen mit dem Wagen“ ist keine gute h1 Überschrift. Dagegen wäre „Deutschlands #1 Solarcarports“ schon viel eindeutiger.

Beispiele für Hero Sections, die mir gut gefallen

Ich zeige dir hier noch ein paar gelungene Hero Sections und Beispiele, wie du diesen Bereich umsetzen kannst. Es gibt viele Möglichkeiten, was Design, Farbe, Aufbau, Text, Schriftart, Schriftgröße, Schriftfarbe uvm. anbelangt. Natürlich sind diese Beispiele auch Geschmackssache.

Ein toller Eyecatcher, ein kurzer Text und schön abgestimmte Farben. Mir gefällt dieser Hero Bereich sehr gut. Hier wurde die Position des Images links gewählt, was eher selten zu sehen ist. Screenshot: www.santevet.de

Kurz, knackig, auf den Punkt gebracht. Mir gefällt dieses Beispiel für eine Hero Section sehr gut. Screenshot: www.webpunks.at

Ein bisschen überladen rund ums Hero Image, aber sonst sehr ansprechend: die Landing Page bei hello bello. Screenshot: www.hellobello.at

Leicht und einfach verständlich: Die Hero Section des Online-Brokers Flatex. Screenshot: www.flatex.at

Wie wäre es mit günstigen, neuen Fenstern in Markenqualität? Aber nur noch 13 Stunden lang! Clever gelöste Landing Page von Fensterversand. Screenshot: www.fensterversand.at

Eine schöne klare Lösung, die Neugierde für die neue Produktlinie wecken soll. Screenshot: www.karibu.de

Brauchst du Hilfe bei der Gestaltung deiner Hero Section?

Das Erstellen des Hero Bereichs kann sehr viel Zeit, Recherche und Geduld fordern. Wenn du es aber richtig machst, lohnt sich jede Minute, die du investiert hast. Du wirst sehen, dass dieser kleine Teil der Webseite einen enormen Unterschied für das Ergebnis deines Unternehmens ausmachen wird.

Wenn du Hilfe bei der Gestaltung einer erstklassigen Hero Section benötigst, steht dir das Team von Let’s Do SEO gerne zur Seite! Lass uns noch heute damit beginnen, Landing Pages zu erstellen, die Interessenten in Kunden verwandeln. Wir haben 15 Jahre Erfahrung im Online-Marketing und wissen genau, worauf es ankommt.

Nutze unser Kontaktformular, um mit uns in Verbindung zu treten. Wir helfen dir gerne!

FAQ – Häufige Fragen rund um den Hero Bereich

Was ist der Unterschied zwischen einer Hero Section und einem Hero Image?

Die Hero Section ist der gesamte Abschnitt im Header Bereich. Dazu zählen Texte, Bilder, Button und andere Elemente. Alles zusammen ergibt die Hero Section.

Das Hero Image ist ein Teil der Hero Section. Es handelt sich dabei nur um das Bild. Man platziert es meistens rechts neben dem Text oder kann es so einfügen, dass das Bild im Hintergrund des gesamten Abschnitts liegt. Im Hero Image kannst du dich, einen Wunsch-Kunden, dein Unternehmen oder das Produkt zeigen.

Was bedeutet Above the Fold?

Wenn du dich mit der Hero Section beschäftigst, wirst du schon nach kurzer Zeit über „Above the Fold“ stolpern. Dieser Begriff stammt eigentlich noch aus dem Marketing von Zeitschriften. Wenn man es ins Deutsche übersetzt, heißt es so etwas wie „über der Knickfalte“.

Große Zeitungen werden für den Verkauf gefaltet. Deshalb sind eine auffällige Headline und ein aussagekräftiges Bild so wichtig. Das Wichtige kommt also wie bei einer Lading Page über die Knickstelle.

Diese Strategie wurde rasch auf Websites übertragen. Einige Online-Marketer sprechen auch von „Above the Scroll“. Also die Platzierung von wichtigen Informationen auf der Website, die ohne Scrollen sichtbar sind.

Mein Fazit

Eine Hero Section macht nur einen kleinen Teil der Website aus, aber genau dieser Teil entscheidet darüber, ob Interessenten schnell von deiner Website verschwinden oder ob sie sich für dein Angebot entscheiden. Lasse die Chance auf eine bessere Conversion Rate nicht verstreichen. Nutze sie!

Solltest du Fragen haben oder Hilfe benötigen, steht dir das Team hinter Let’s Do SEO gerne jederzeit zur Verfügung. Wir freuen uns auf dein spannendes Projekt! 🙂

Über Lydia Kulterer

Lydia ist eine versierte Texterin mit über 10 Jahren Erfahrung und Betreiberin des erfolgreichen Online-Magazins we-go-wild.com mit über 150.000 monatlichen LeserInnen. Sie hat mehr als 3500 Website-Texte verfasst und ist spezialisiert auf On-Page SEO, Local SEO und nutzerzentrierten Content.
LinkedIn