Du nutzt Hero-Bausteine, um beeindruckende Einstiegsbereiche auf deiner Website zu schaffen. Es gibt zwei Varianten: einen zentrierten Aufbau mit Kennzahlen oder einen Split-Layout mit Bild und Text nebeneinander. Beide lassen sich vollständig anpassen – von Überschriften bis zu Schaltflächen und zusätzlichen Elementen.
Voraussetzungen
Es gibt keine besonderen Voraussetzungen.
So gehst du vor
Zentrierte Hero-Sektion
Öffne den Bereich Kopf und trage dort deine Texte ein:
- Kleine Überschrift: optional, kurzer Text, der vor der Hauptüberschrift steht
- Überschrift: deine Hauptüberschrift – Text in Sternchen wird kursiv und in der Zweitschrift angezeigt
- Einleitung: eine kurze Beschreibung darunter
Wechsle zum Bereich Merkmale. Hier listest du Stärken oder Besonderheiten auf:
- Klicke Merkmal hinzufügen, um einen neuen Eintrag zu schaffen.
- Trage die Bezeichnung ein. Du kannst beliebig viele Merkmale hinzufügen; sie werden untereinander angezeigt.
- Um ein Merkmal zu löschen, klicke das Löschen-Symbol neben dem Eintrag.
Im Bereich Schwebende Kennzahlen erstellst du markante Zahlenblöcke mit Symbol:
- Klicke Kennzahl hinzufügen.
- Trage Titel (z. B. eine Zahl) und Untertitel (z. B. die Erklärung) ein. Beide können kursiv formatiert werden.
- Wähle ein Symbol aus der Iconbibliothek. Klicke auf das Feld, um die verfügbaren Symbole zu durchsuchen.
- Du kannst Kennzahlen mit den Pfeil-Symbolen verschieben oder löschen.
Im Bereich Tablet-Attrappe entscheidest du, ob ein Bild auf einem Tablet-Display angezeigt werden soll:
- Schalte Tablet-Attrappe zeigen an, um diese Option zu nutzen.
- Lade ein Bild hoch – es wird in einer Tablet-Rahmen-Attrappe angezeigt.
Öffne Schaltfläche und konfiguriere bis zu zwei Aktionsschaltflächen:
- Erste Schaltfläche: Trage den Text ein (z. B. „Jetzt anfragen") und wähle das Ziel (eine Seite, eine externe URL oder ein Anker).
- Zweite Schaltfläche: funktioniert genauso.
- Farben der ersten Schaltfläche lassen sich speichern, wenn du sie von der Vorgabe abweichst.
Split-Hero-Sektion (nebeneinander)
Im Bereich Kopf ergänzt sich die Einrichtung:
- Trage wie oben Kleine Überschrift, Überschrift und Einleitung ein.
- Optional: Wähle ein Symbol der kleinen Überschrift aus – das wird neben dem kleinen Text angezeigt.
Im Bereich Merkmale fügst du wieder Stärken hinzu:
- Klicke Merkmal hinzufügen.
- Trage Bezeichnung ein und wähle ein Symbol aus.
- Die Merkmale werden als Chips mit Icon angezeigt.
Je nachdem, welche Variante du gewählt hast, unterscheidet sich der nächste Bereich:
- Bei Kalender-Attrappe: Konfiguriere den Kalender-Mock mit Einträgen.
- Bei Bild: Lade dein Bild hoch. Du kannst das Seitenverhältnis auf 4:3 (Querformat) zuschneiden.
Im Bereich Schwebender Hinweis erstellst du eine Callout-Box, die über dem Bild schwebt:
- Titel des Hinweises: Haupttext (optional kursiv)
- Text des Hinweises: Untere Zeile
- Symbol: Wähle ein Icon aus.
Öffne Schaltfläche und gestalte zwei Schaltflächen:
- Für jede Schaltfläche: Text, Ziel (Seite, externe URL oder Anker) und Stil (Farbe und Aussehen).
- Der Stil zeigt dir eine Vorschau mit deinem eingegebenen Text.
Im erweiterten Bereich konfigurierst du die Anordnung und Animation:
- Bild links / Bild rechts: Entscheide, auf welcher Seite das Bild oder der Kalender steht.
- Drehung des Hinweises in Grad: Drehe den schwebenden Hinweis leicht (von –15° bis +15°), um mehr Dynamik zu schaffen.
- Hinweis schweben lassen: Schalte eine sanfte Animation ein, die den Hinweis auf und ab bewegt.
Aufbau der Hero-Bausteine
Beide Varianten sind in vier bis fünf Bereiche unterteilt:
- Kopf: Überschriften und Einleitung – das Fundament deiner Botschaft
- Merkmale: Listen von Stärken oder Eigenschaften, optional mit Icons (Split-Variante)
- Mittlerer Bereich: Bei der zentrierten Variante sind das die schwebenden Kennzahlen mit Symbolen; bei Split kommt hier das Bild oder der Kalender hin
- Tablet-Attrappe (nur zentriert): Bild in einer Tablet-Rahmen
- Schaltflächen: Bis zu zwei CTA-Buttons mit Zielen und Stilen
- Erweiterte Optionen (nur Split): Bildposition, Rotation und Animation des schwebenden Hinweises
Was danach passiert
Die Änderungen werden sofort gespeichert. Auf der Website sehen deine Besucher den Hero-Bereich mit allen eingestellten Texten, Bildern, Symbolen und Schaltflächen. Die Darstellung passt sich automatisch an Mobilgeräte, Tablets und Desktops an.
Block auf einer Seite einrichten (Blockkatalog) zeigt dir, wie du Hero-Bausteine in deine Seite einfügst.
Tipps und Hinweise
- Markdown nutzen: Text in Sternchen macht ihn kursiv und zeigt ihn in deiner Zweitschrift – ideal für Hervorhebungen in Überschriften.
- Symbole suchen: Das Icon-Feld öffnet eine durchsuchbare Bibliothek. Gib ein Stichwort ein (z. B. „check", „star"), um schneller zu finden.
- Schwebende Kennzahlen (zentriert): Sie funktionieren am besten mit kurzen, prägnanten Zahlen und einer Ein-Wort-Erklärung.
- Bild-Ausrichtung (Split): Wechsle zwischen links und rechts, um Abwechslung auf mehreren Seiten zu schaffen.
- Tablet-Mock: Das Tablet wird nur auf größeren Bildschirmen sichtbar. Auf Mobilgeräten wird stattdessen das Bild allein angezeigt.
- Ziele für Schaltflächen: Du kannst auf interne Seiten, externe URLs, E-Mail-Adressen oder Anker (z. B. #kontakt) verlinken.