Ein Onepager ist kein Portfolio und keine Visitenkarte. Er ist dein Pitch, verdichtet auf eine Seite. Und wie bei jedem Pitch zählt vor allem der erste Eindruck. Das gilt genauso für die Startseite einer größeren Website.
Besucher entscheiden sehr schnell, ob sie bleiben. Bevor sie einen Satz bewusst gelesen haben, haben sie schon ein Gefühl. Bin ich hier richtig? Wirkt das kompetent? Finde ich mich zurecht? Diese Fragen beantwortet die Hero Section.
Was eine Hero Section ist
Die Hero Section ist der Bereich ganz oben, den man ohne Scrollen sieht. Auf Deutsch heißt sie oft Hero-Bereich oder einfach Kopfbereich. Sie muss drei Fragen beantworten:
- Was machst du?
- Für wen ist das?
- Was bringt es mir?
Klingt einfach, ist es aber nicht. Viele Überschriften klingen gut und sagen nichts:
- „Ich begleite Menschen auf ihrem Weg.“
- „Digitale Lösungen mit Herz und Verstand.“
- „Dein Erfolg ist unsere Leidenschaft.“
Sie sind austauschbar, nennen keine Zielgruppe und keinen Nutzen. Besser sind Sätze, die konkret werden:
- „Websites für Selbständige, deren Kunden bei Google suchen.“
- „Business-Fotografie, die Haltung zeigt, nicht nur ein Lächeln.“
- „Steuerberatung für Online-Händler.“
Wie du so einen Satz für dein eigenes Angebot findest, steht im Beitrag So formulierst du dein Nutzenversprechen.
Der Aufbau einer guten Hero Section
Muss rein:
- Eine klare Überschrift. Sie nennt, was du machst, und für wen. Kurz genug, um sie auf einen Blick zu erfassen.
- Ein erklärender Satz. Er vertieft die Überschrift und beantwortet, wie oder warum.
- Ein eindeutiger Button. Der nächste logische Schritt, etwa „Kostenloses Erstgespräch“. Wie du ihn formulierst, steht im Beitrag Gute Call to Actions für deine Website.
Kann rein:
- Ein echtes Foto von dir oder deiner Arbeit
- Ein Vertrauenssignal, etwa deine Google-Bewertung oder Logos bekannter Kunden, wenn sie wirklich zu dir passen
- Ein zweiter, schlichterer Link für alle, die sich erst umsehen wollen, etwa „Projekte ansehen“
Muss raus:
- Videos, die automatisch starten
- Slider, die sich selbst weiterdrehen
- mehrere gleich starke Buttons nebeneinander
- austauschbare Stockfotos
- Floskeln wie „Herzlich willkommen“
Drei Beispiele
Für eine Physiotherapie-Praxis
- Überschrift: „Physiotherapie in Bamberg-Ost, auch am Abend“
- Satz darunter: „Termine bis 20 Uhr, ohne lange Wartezeit. Für Kassen- und Privatpatienten.“
- Button: „Termin anfragen“
Für eine Texterin
- Überschrift: „Website-Texte für Handwerksbetriebe“
- Satz darunter: „Damit Kunden verstehen, was du kannst, bevor sie anrufen.“
- Button: „Beispiele ansehen“
Für einen Coach
- Überschrift: „Coaching für Führungskräfte im ersten Jahr“
- Satz darunter: „Damit du dein Team führst, statt nur Aufgaben zu verteilen.“
- Button: „Kennenlerngespräch buchen“
Alle drei sagen, was angeboten wird, für wen und warum es sich lohnt. Die Beispiele sind ausgedacht, das Muster funktioniert in jeder Branche.
Der größte Fehler, zu viel auf einmal
Viele Hero-Bereiche wirken wie ein Inhaltsverzeichnis. Slogan, Unterzeile, vier Buttons, Slider mit Projekten, Newsletter-Anmeldung, Social-Media-Icons und ein Pop-up obendrauf. Das ist kein Pitch, das ist ein Überfall.
Je mehr Möglichkeiten gleichzeitig angeboten werden, desto länger dauert die Entscheidung, und desto öfter fällt sie gegen alle Möglichkeiten aus. In der Psychologie ist das als Hick-Hyman-Gesetz bekannt. Ein ruhiger Hero mit einer Überschrift, einem Satz und einem Button wirkt sicherer und lädt eher zum Weiterlesen ein.
Denk den Onepager wie ein Gespräch
Beim Kaffee würdest du nicht sagen „Ich bin Webdesigner, hier meine Tools, mein Portfolio, mein Newsletter, meine Preise, meine Philosophie“. Du würdest sagen „Ich arbeite mit Selbständigen, die …“, und schauen, ob es passt.
Genau so baust du die Seite unter der Hero Section auf:
- Oben: Was du machst, für wen, und der wichtigste nächste Schritt
- Problem und Lösung: Woran deine Kunden gerade scheitern und wie du helfen kannst
- Belege: Beispiele, Kundenstimmen, der Ablauf der Zusammenarbeit
- Abschluss: kurze Zusammenfassung und noch einmal die Einladung zum Gespräch
Auf dem Handy zählt jeder Zentimeter
Viele Besucher sehen deine Seite zuerst auf dem Handy. Dort ist der sichtbare Bereich klein:
- Kurze Überschrift, die nicht über fünf Zeilen umbricht
- Ein Button, groß genug für den Daumen
- Bilder nur, wenn sie wirklich etwas beitragen, und so klein wie möglich in der Datei
- Schnell laden: Schriften selbst hosten, Bilder in modernen Formaten, nichts, was den ersten Bildschirm blockiert
Ob deine Hero Section schnell genug lädt, zeigt dir der Wert LCP, einer der Core Web Vitals. Mehr dazu im Ratgeber Core Web Vitals.
Woran du merkst, dass deine Hero Section nicht funktioniert
- Viele Besucher verlassen die Seite, ohne zu scrollen.
- Menschen fragen im Erstgespräch, was du eigentlich genau machst.
- Freunde können nach fünf Sekunden auf deiner Seite nicht sagen, für wen du arbeitest.
Der letzte Punkt ist ein einfacher Test. Zeig deine Seite jemandem fünf Sekunden lang und frag dann, was du anbietest und für wen. Stimmt die Antwort nicht, überarbeite die Überschrift.
Kurz zusammengefasst
Die Hero Section ist nicht dein ganzes Angebot, sie ist die Tür dazu. Eine klare Überschrift, ein erklärender Satz und ein Button reichen. Alles andere darf weiter unten kommen. Klarheit vor Tiefe.
Wie es unter der Hero Section weitergeht, steht im Beitrag So gestaltest du eine Startseite, die Besucher führt. Ob ein Onepager überhaupt zu dir passt, im Beitrag Wann ein Onepager als Website reicht.
Titelbild: Foto von Freestocks.org über StockSnap, Lizenz CC0 (öffnet in neuem Tab), gefunden über Openverse.
