Hero-Bausteine gestalten

Mit Hero-Bausteinen schaffst du auffällige Eröffnungsbereiche für deine Seite. Du kannst zwischen zwei Layouts wählen: einen zentrierten Hero mit schwebenden Kennzahl-Chips oder einen geteilten Hero mit Bild und Text nebeneinander. Beide Varianten lassen sich mit Schaltflächen, Vertrauens-Elementen und animierten Details ausstatten.

Voraussetzungen

Du brauchst Bearbeitungsrechte für eine Website. Der Hero-Baustein muss bereits auf einer Seite eingefügt sein.

So gehst du vor

Allgemeine Einstellungen

1. Öffne den zentrierten oder geteilten Hero-Baustein zur Bearbeitung.

2. Trage eine Bezeichnung (für Verlinkung) ein – das ist ein interner Name, unter dem die Seite auf den Baustein verlinken kann. Dieses Feld ist optional.

3. Wähle eine Farbvariante aus dem Auswahlfeld – das bestimmt den Hintergrund des gesamten Bereichs. Lässt du das Feld leer, nutzt der Baustein die Standardfarbe.

4. Schalte iPad-Mock anzeigen ein (zentrierter Hero), um eine Vorschau auf kleineren Bildschirmen zu sehen – dann kannst du prüfen, wie der Text sich anpasst.

Text und Überschrift

5. Fülle die Felder Eyebrow, Titel (oder Überschrift beim geteilten Hero) und Beschreibung (Lead). Du kannst hier Markdown schreiben – im zentrierten Hero ermöglicht *italic* im Titel eine Serifenschrift für einzelne Wörter.

6. Beim geteilten Hero: Wähle ein Symbol für das Eyebrow-Feld, indem du das Ikon-Feld neben dem Textfeld anklickst – das Symbol erscheint neben dem kleinen Titel.

Schaltflächen

7. Gib Primär Text ein – das ist die Aufschrift der Hauptschaltfläche. Der Primär Ziel-Link führt zu der Seite oder URL, auf die der Besucher klicken soll. Wähle aus, ob du auf eine interne Seite oder externe Website verlinken möchtest.

8. Für eine zweite Schaltfläche: Trage Sekundär Text ein und setze den Sekundär Ziel-Link. Diese Schaltfläche ist optional.

9. Beim geteilten Hero: Wähle zusätzlich den ButtonStyle (Farbe und Form) für jede Schaltfläche aus.

Vertrauens-Chips (zentrierter Hero) oder Vertrauens-Chips (geteilter Hero)

10. Klicke Chip hinzufügen oder Eintrag hinzufügen, um ein neues Kennzahl-Element hinzuzufügen. Ein Chip besteht aus einem Symbol, Titel und Untertitel – etwa "500+" und "zufriedene Kunden".

11. Symbol: Wähle ein Icon aus der Ikonbibliothek.

12. Titel und Untertitel: Trage hier den Text ein (Markdown erlaubt).

13. Um die Reihenfolge zu ändern, nutze die Pfeile nach oben und unten; zum Löschen klickst du auf das Mülleimer-Symbol.

14. Beim geteilten Hero heißen diese Elemente "Vertrauens-Chips" – die Struktur ist gleich, nur dass es hier nur Titel (Bezeichnung) gibt, kein Untertitel.

iPad-Screenshot (zentrierter Hero nur)

15. Lade ein Bild hoch, das deine Seite auf einem iPad zeigt – das wird als Vorschau angezeigt, damit Besucher sehen, wie es auf anderen Geräten aussieht.

Trust-Leiste (zentrierter Hero nur)

16. Klicke Eintrag hinzufügen, um Texte zur Vertrauensleiste hinzuzufügen – etwa Kundennamen oder Bewertungen.

17. Bearbeite oder lösche Einträge direkt in der Liste.

Extras für den geteilten Hero

18. Schalte Reihenfolge umdrehen ein, um Text und Bild zu tauschen – Text links, Bild rechts oder umgekehrt.

19. Unter Bild kannst du das Hauptbild des Bereichs hochladen und die Bildpassform festlegen (wie das Foto beschnitten wird).

20. Unter Kalender-Mock Inhalt kannst du einen Kalender-Vorschau einfügen – das ist eine Dekoration neben dem Text.

21. Für den Schwebenden Hinweis-Chip: Wähle ein Symbol und trage Titel sowie Untertitel ein. Mit dem Drehung in Grad-Regler drehst du das Chip-Element leicht. Schalte Schweben animieren ein, damit der Chip sanft auf und ab bewegt wird – das zieht die Aufmerksamkeit auf sich.

22. Klicke Speichern, um alle Änderungen zu sichern. weboffice aktualisiert die Vorschau sofort.

Aufbau des Bearbeitungsfensters

Die Einstellungen sind in Bereiche unterteilt:

• Allgemein: Bezeichnung, Farbe und Display-Optionen
• Text: Eyebrow, Überschrift und Beschreibung (Markdown)
• Schaltflächen: Texte und Ziele für die Primär- und Sekundärschaltfläche
• Vertrauens-Chips: Symbole, Titel und Untertitel für Kennzahl-Elemente – hinzufügen, verschieben, löschen
• iPad-Screenshot (zentriert): Vorschaubild für Tablet-Geräte
• Trust-Leiste (zentriert): Eine Textliste mit Vertrauensindikatoren
• Bild (geteilt): Das Hauptbild des Bereichs und dessen Anpassung
• Kalender-Mock Inhalt (geteilt): Dekoration mit Kalenderdaten
• Schwebender Hinweis-Chip (geteilt): Ein animiertes, frei drehbares Element

Was danach passiert

Sobald du speicherst, sind deine Änderungen im Baustein gespeichert. Die Vorschau auf der Seite aktualisiert sich automatisch. Der Hero-Bereich wird dann auf der Live-Website angezeigt – mit allen Texten, Farben, Symbolen und Animationen, die du eingestellt hast.

Wenn du den Hero später nachbearbeiten möchtest, öffnest du ihn erneut zur Bearbeitung und änderst die Felder.

Tipps und Hinweise

• Markdown nutzen: Beide Helden unterstützen Markdown – nutze *text* für Kursivdruck oder **text** für Fettdruck. Der zentrierte Hero erlaubt zusätzlich Serifenschrift im Titel mit *italic*.
• Symbole finden: Bei den Icon-Pickern kannst du nach Keywords suchen – tippe etwa "star" oder "heart" ein, um schneller ein passendes Symbol zu finden.
• Reihenfolge der Chips: Die Chips werden in der Reihenfolge angezeigt, in der du sie einfügst. Nutze die Pfeile, um sie schnell umzuordnen.
• Externe Links: Im Ziel-Feld kannst du externe URLs eingeben (etwa https://beispiel.de) oder interne Seiten wählen – weboffice erkennt automatisch, was du eingibst.
• Animationen sparsam einsetzen: Der schwebende Chip beim geteilten Hero lenkt Aufmerksamkeit ab – nutze ihn nur, wenn du einen bestimmten Punkt hervorheben möchtest.