Hero-Bereiche gestalten

Du gestaltest hier zwei Varianten von Eröffnungsbereichen für deine Webseite: einen zentrierten Hero mit großem Text und schwebenden Kennzahl-Chips, oder einen geteilten Hero mit Text auf einer Seite und Bild auf der anderen. Beide erlauben dir, Überschriften, Schaltflächen und Vertrauenselemente einzubinden.

Voraussetzungen

Es gibt keine besonderen Voraussetzungen. Die Einstellungen zu beiden Varianten sind immer vorhanden.

So gehst du vor

Allgemeine Einstellungen

1. Trage eine Bezeichnung (für Verlinkung) ein – das ist der Name, unter dem du diesen Bereich später in Seitenmenüs oder bei Sprunglinks wiederfindest. Dies ist erforderlich.
2. Wähle eine Farbvariante aus – diese bestimmt die Hintergrundfarbe des Bereichs.
3. Falls du einen zentrierten Hero bearbeitest: Schalte iPad-Mock anzeigen ein, um zu sehen, wie der Bereich auf einem Tablet aussieht.

Texte einfügen

4. Fülle die Textfelder aus:
   • Eyebrow (beim zentrierten Hero): Ein kleiner, einleitender Text über der Überschrift. Du kannst hier zwei Zeilen verwenden.
   • Eyebrow (beim geteilten Hero): Ein kleiner Text über der Überschrift mit einem Symbol. Klicke auf das Ikon-Feld links, um ein Symbol auszuwählen.
   • Titel: Deine Hauptüberschrift. Im zentrierten Hero kannst du mit *Wort* (Sternchen) ein Wort kursiv formatieren – es wird dann in einer anderen Schriftart (Serif) dargestellt.
   • Beschreibung: Ein längerer Fließtext unter der Überschrift.

Schaltflächen hinzufügen

5. Gib den Text für die primäre (erste) Schaltfläche ein.
6. Wähle bei geteiltem Hero einen Schaltflächenstil für die primäre Schaltfläche – das bestimmt ihre Farbe und Form. Bei zentriertem Hero wählst du die Primär Farbe aus.
7. Klicke auf Primär Ziel (zentriert) oder Navigationsziel (geteilt) und wähle die Seite oder Adresse, auf die die Schaltfläche zeigen soll. Du kannst eine interne Seite, eine externe URL oder eine E-Mail-Adresse eingeben.
8. Wiederhole Schritte 5–7 für die sekundäre (zweite) Schaltfläche – sie ist optional.

Chips mit Kennzahlen oder Vertrauenssignalen

Bei zentriertem Hero – Schwebende Kennzahl-Chips:

9. Klicke auf Chip hinzufügen, um einen Chip zu erstellen.
10. Wähle ein Symbol (Icon), trage einen Titel und optional einen Untertitel ein. Du kannst hier Markdown verwenden, zum Beispiel um Zahlen hervorzuheben.
11. Um die Reihenfolge zu ändern, nutze die Pfeile nach oben und unten. Mit dem Papierkorb-Icon entfernst du einen Chip.
12. Wiederhole die Schritte, bis alle Chips eingetragen sind.

Bei geteiltem Hero – Vertrauens-Chips:

9. Klicke auf Eintrag hinzufügen.
10. Wähle ein Symbol und trage eine Bezeichnung ein – zum Beispiel „Kostenloser Versand" oder „Schnelle Lieferung".
11. Nutze die Pfeile und den Papierkorb wie oben beschrieben.

Zusätzliche Inhalte (nur geteilter Hero)

13. Lade ein Bild hoch oder wähle es aus. Du kannst dabei einstellen, wie das Bild in den verfügbaren Platz passt.
14. Falls du einen Kalender-Mock anzeigen möchtest: Befülle die Kalender-Mock Inhalt – trage Termine oder Ereignisse ein, die auf dem Tablet oder Desktop als schwebendes Element erscheinen.
15. Richte einen Schwebenden Hinweis-Chip ein: Wähle ein Symbol, trage Titel und Untertitel ein und stelle die Drehung in Grad ein (zwischen –15 und +15 Grad). Schalte Schweben animieren ein, damit der Chip eine Schwebebewegung macht.

iPad-Screenshot (nur zentrierter Hero)

16. Falls du iPad-Mock anzeigen aktiviert hast: Lade unter iPad-Screenshot ein Bild hoch, das zeigt, wie der Bereich auf einem iPad aussieht.

Trust-Leiste (nur zentrierter Hero)

17. Klicke auf Eintrag hinzufügen, um eine neue Zeile in der Trust-Leiste zu erstellen.
18. Trage einen Eintrag ein – zum Beispiel ein Logo, einen Partner-Namen oder eine Auszeichnung.
19. Mit dem Papierkorb-Icon entfernst du einen Eintrag.

Reihenfolge umdrehen (nur geteilter Hero)

20. Schalte Reihenfolge umdrehen ein, um Text und Bild die Seiten zu wechseln – der Text erscheint dann auf der rechten Seite, das Bild auf der linken.

Aufbau der Einstellungen

Die Einstellungen gliedern sich in mehrere Bereiche:

• Allgemein: Bezeichnung, Farbvariante und Anzeige-Einstellungen
• Text: Eyebrow, Titel und Beschreibung
• Schaltflächen: Primäre und sekundäre Schaltfläche mit jeweils Text, Farbe oder Stil und Navigationsziel
• Schwebende Kennzahl-Chips (zentriert) oder Vertrauens-Chips (geteilt): Listen von Chips oder Vertrauenssignalen mit Icons und Texten
• Bild (geteilter Hero): Bild und Bildanpassung
• Kalender-Mock Inhalt (geteilter Hero): Termine und Ereignisse
• Schwebender Hinweis-Chip (geteilter Hero): Symbol, Titel, Untertitel, Drehung und Animation
• iPad-Screenshot (zentrierter Hero): Vorschaubild für Tablet-Ansicht
• Trust-Leiste (zentrierter Hero): Liste von Logos oder Partnernamen

Was danach passiert

Sobald du deine Einstellungen speicherst, werden sie für diesen Bereich gespeichert. Du siehst eine Vorschau – bei aktiviertem iPad-Mock kannst du parallel die Tablet-Version anschauen. Der Hero-Bereich erscheint dann mit all deinen Inhalten auf der Webseite.

Tipps und Hinweise

• Markdown in Texten: Du kannst in Eyebrow, Titel und Beschreibung Markdown verwenden – zum Beispiel **fett**, *kursiv* oder [Link](https://beispiel.de). Im zentrierten Hero bewirken die Sternchen beim Titel eine Serif-Schriftart.
• Bilder und Mocks: Der iPad-Screenshot dient nur zur Vorschau – er wird nicht automatisch auf echten Tablets angezeigt. Der Kalender-Mock beim geteilten Hero ist ein gestalterisches Element, kein funktionsfähiger Kalender.
• Schaltflächen auf Mobilgeräten: Die Schaltflächen stapeln sich auf kleinen Bildschirmen übereinander. Teste deine Seite auf dem Handy.
• Chips ordnen: Bei beiden Varianten kannst du Chips verschieben – wichtige Elemente nach oben, unwichtige nach unten.
• Interne Links: Nutze das Navigationsziel-Feld, um auf andere Seiten deiner Website zu verlinken. Du kannst auch Sprungmarken (Ankerpunkte) verwenden, die du mit der Bezeichnung dieses oder eines anderen Bereichs erstellst.