Hero
Hero-Bereiche für den Anfang von Landingpages und Produktseiten.
Was macht eine gute Hero Section aus?
Eine Hero Section hat etwa drei Sekunden, um zu sagen, was die Seite anbietet und was als Nächstes zu tun ist. Die Heroes hier lösen das auf verschiedene Weise: eine Überschrift mit einem klaren Button, ein Produkt, das sich beim Scrollen dreht, ein Film, der mit der Seite mitläuft, oder ein Portrait mit wenigen Zeilen daneben. Jeder Hero ist eine einzelne React-Datei mit Tailwind CSS, die du von oben nach unten lesen und direkt anpassen kannst.
Wähle danach, was du zeigen kannst. Mit starken Fotos trägt ein Hero mit randlosem Bild die Botschaft. Mit einem Produkt halten ein geteiltes Layout oder ein Objekt-Hero Text und Bild nebeneinander. Mit wenig Bildmaterial wirkt ein typografischer Hero mit Bewegung in den Wörtern trotzdem fertig. Jeder Hero ist auf Handybreite geprüft, und Animationen schalten sich ab, wenn reduzierte Bewegung eingestellt ist.
Passende Guides
Weitere Section-Kategorien
Häufige Fragen
Sechs bis zehn Wörter funktionieren am besten. Die Überschrift nennt das Ergebnis, eine Unterzeile mit ein bis zwei Sätzen ergänzt das Wie. Die meisten Heroes hier sind für zwei Zeilen auf dem Desktop und drei bis vier auf dem Handy gesetzt.
Ja. Bilder und Videos stehen als einfache Adressen in der Datei, du tauschst die Adresse und behältst das Layout. Für randlose Hintergründe sollte das Bild mindestens so breit sein wie der Bildschirm, für Desktop also 1920 Pixel, sonst wirkt es unscharf.
Ja. Sie reagieren auf normales Scrollen per Touch. Ist reduzierte Bewegung eingestellt, zeigt der Hero direkt seinen Endzustand ohne Animation.
Sechs Heroes sind komplett frei, inklusive Code. Premium schaltet alle Heroes und alle anderen Kategorien frei, für eigene Projekte und Kundenprojekte.
Deine Frage war nicht dabei? Wir helfen gern weiter.
Kontakt aufnehmen
