Hero Section

Eine Hero Section ist der hervorgehobene Einstiegsbereich einer Webseite. Sie steht meist am Anfang des Hauptinhalts und stellt das zentrale Thema oder Angebot vor. Häufig verbindet sie eine prägnante Überschrift mit einem kurzen Einführungstext, einem Bild und einer Handlungsaufforderung. Besucher sollen erkennen können, worum es geht, für wen das Angebot gedacht ist und wie sie weiterkommen.

Was ist der Unterschied zwischen Hero Section und Header?

Der Website-Header ist der Kopfbereich mit Logo, Navigation und gegebenenfalls Suche oder Kontaktmöglichkeiten. Er wiederholt sich häufig auf mehreren Seiten. Die Hero Section führt dagegen in den Inhalt der jeweiligen Seite ein. Beide Bereiche können gestalterisch ineinander übergehen, erfüllen aber unterschiedliche Aufgaben. Das U.S. Web Design System beschreibt den Header als Hilfe zur Orientierung und zum Erreichen der wichtigsten Website-Bereiche.

Ein Hero-Bild ist nur ein möglicher Bestandteil der Hero Section. Auch ein Einstieg ohne Bild kann funktionieren. „Above the Fold“ bezeichnet wiederum den Bereich, der ohne Scrollen sichtbar ist. Wie viel davon die Hero Section einnimmt, hängt vom Gerät, der Fenstergröße und dem Inhalt ab.

Welche Inhalte gehören in eine Hero Section?

• Eine klare Überschrift: Sie nennt das Angebot oder den Nutzen möglichst konkret. „Badsanierung in Heilbronn“ gibt mehr Orientierung als „Willkommen in unserer Welt“.
• Ein kurzer Einführungstext: Er ergänzt die Überschrift, etwa um Leistungsumfang, Zielgruppe oder Vorgehensweise.
• Eine optionale Eyebrow: Die kleine Dachzeile über der Überschrift kann das Thema oder die Zielgruppe einordnen.
• Ein passender nächster Schritt: Ein Call-to-Action führt beispielsweise zu Leistungen, Produkten oder einer Anfrage. Die Beschriftung sollte das Ziel erkennen lassen.
• Ein unterstützendes Bild: Ein Produkt, eine konkrete Arbeit oder eine passende Illustration kann die Aussage verdeutlichen. Es sollte einen erkennbaren Bezug zum Inhalt haben.

Diese Bausteine sind keine Pflichtliste. Auf einer Informationsseite können eine Überschrift und eine kurze Einleitung ausreichen. Das W3C-Designsystem zeigt unterschiedliche Hero-Varianten, darunter einen Einstieg für Übersichtsseiten mit Such- und Filtermöglichkeiten.

Beispiel einer Hero Section

Das folgende vereinfachte Beispiel zeigt einen Einstieg für ein Website-Angebot. Die Dachzeile nennt die Zielgruppe, die Überschrift vermittelt die Hauptaussage und der Link führt zum Angebot:

WORDPRESS FÜR HANDWERKSBETRIEBE

Zeigen Sie, was Ihr Betrieb leistet

Eine Website für Ihre Leistungen, Referenzen und Kontaktmöglichkeiten.

Website-Angebot ansehen

Auf einer echten Angebotsseite wäre die Hauptaussage üblicherweise die zentrale Seitenüberschrift. Hier dient sie als Anschauungsbeispiel innerhalb des Glossarartikels. Ein Bild könnte den Einstieg ergänzen, etwa durch eine passende Website-Ansicht; die Aussage bleibt auch ohne Bild verständlich.

Wie plant man eine hilfreiche Hero Section?

Beginnen Sie mit dem Inhalt und legen Sie danach die Gestaltung fest. Diese vier Schritte helfen bei der Abstimmung eines Website-Entwurfs:

1. Den Anlass klären: Was sucht jemand auf dieser Seite? Auf einer konkreten Leistungsseite sollte diese Leistung im Mittelpunkt stehen.
2. Eine Hauptaussage formulieren: Schreiben Sie auf, was Sie anbieten und wem es hilft. Kürzen Sie allgemeine Werbesätze, die ebenso auf einer anderen Website stehen könnten.
3. Den nächsten Schritt wählen: Soll jemand zunächst Beispiele ansehen, ein Produkt auswählen oder direkt Kontakt aufnehmen? Heben Sie die wichtigste Handlung hervor. Ein zweiter, weniger auffälliger Weg kann sinnvoll sein.
4. Verständlichkeit prüfen: Zeigen Sie den Einstieg einer Person, die Ihr Angebot noch nicht kennt. Fragen Sie anschließend, was angeboten wird, für wen es gedacht ist und wohin sie als Nächstes klicken würde.

Auf einer Landingpage sollte der Einstieg das angekündigte Angebot aufgreifen und zum passenden nächsten Schritt führen. Nicht jede Unterseite braucht einen großflächigen Hero. Bei einer Kontaktseite, einem Hilfetext oder einer Produktübersicht kann ein kompakter Titelbereich den Zugang zum eigentlichen Inhalt erleichtern. Die Gestaltung sollte zur Aufgabe der Seite passen.

Was ist auf Smartphones und bei der Barrierefreiheit wichtig?

Eine Hero Section sollte sich an den Inhalt anpassen. Eine fest erzwungene Bildschirmhöhe kann bei langen Überschriften oder vergrößerter Schrift zu Platzproblemen führen. Prüfen Sie Umbrüche, Abstände und den nächsten Seitenabschnitt auch auf kleinen Geräten. Grundlagen dazu erklärt der Artikel über Responsive Design.

Überschrift und Einführung sollten als echter Text vorliegen. Text über einem unruhigen Foto ist oft schwer lesbar; eine eigene Textfläche neben oder unter dem Bild kann helfen. Prüfen Sie außerdem, ob der Hauptlink mit der Tastatur erreichbar ist und sein Fokus sichtbar bleibt.

Informative Bilder benötigen einen passenden Alt-Text; rein dekorative Bilder erhalten in HTML ein leeres alt-Attribut. Entscheidend ist die Funktion des Bildes im jeweiligen Zusammenhang. Die W3C-Entscheidungshilfe für Alternativtexte unterstützt diese Einordnung.

Häufige Fragen zur Hero Section

Wir bieten mehrere Leistungen an. Welche gehört in die Hero Section?

Formulieren Sie zunächst, was Ihre Leistungen aus Kundensicht verbindet. Ein Betrieb kann beispielsweise „Bäder modernisieren aus einer Hand“ als Hauptaussage verwenden und anschließend zu Planung, Installation und Sanierung führen. Bei sehr unterschiedlichen Zielgruppen helfen klar beschriftete Einstiege unterhalb des Heros, etwa „Für Privatkunden“ und „Für Unternehmen“. Auf einer einzelnen Leistungsseite sollte dagegen genau diese Leistung im Mittelpunkt stehen. Eine wechselnde Slideshow ist dafür nicht erforderlich.

Warum wird mein Hero-Bild auf dem Smartphone abgeschnitten?

Häufig füllt das Bild einen vorgegebenen Rahmen und wird dafür zugeschnitten. Prüfen Sie zuerst den Bildfokus beziehungsweise die Bildposition in Ihrem Editor. Reicht das nicht aus, verwenden Sie einen geeigneteren mobilen Ausschnitt oder ordnen Sie Bild und Text untereinander an. Kontrollieren Sie besonders Gesichter, Produkte und andere wichtige Bilddetails. Ein zusätzlicher mobiler Ausschnitt und kleinere Bilddateien für kleinere Displays lösen unterschiedliche Aufgaben; web.dev zu responsiven Bildern erklärt die technischen Möglichkeiten.

Was sollte ich prüfen, wenn das Hero-Bild erst spät erscheint?

Prüfen Sie zuerst Dateigröße, ausgelieferte Bildabmessungen und Ladeeinstellungen. Ein großes Originalfoto kann unnötig lange übertragen werden. Ein sofort sichtbares Hero-Bild sollte nicht durch Lazy Loading verzögert werden. Lassen Sie außerdem prüfen, ob es das für den Largest Contentful Paint (LCP) maßgebliche Element ist und früh genug angefordert wird. Die LCP-Anleitung von web.dev erläutert diese Ladeverzögerungen. Prüfen Sie nach einer Änderung erneut auf einem Mobilgerät beziehungsweise unter gedrosselten Netzwerkbedingungen.