Hero-Bausteine gestalten

Auf einer Website-Seite kannst du Hero-Bausteine als Blickfang einsetzen – große, auffällige Bereiche mit Überschrift, Beschreibung und Schaltflächen. Es gibt zwei Varianten: einen zentrierten Hero und einen Split-Hero, bei dem Text und Bild nebeneinander stehen. Beide lassen sich umfangreich personalisieren.

Voraussetzungen

Du benötigst Schreibrechte für Website-Seiten. Der Hero-Baustein muss bereits auf der Seite eingefügt sein – wie du ihn hinzufügst, erfährst du unter Block auf einer Seite einrichten (Blockkatalog).

Aufbau des Bearbeitungsbereichs

Der rechte Bereich zeigt verschiedene zusammenklappbare Abschnitte, in denen du alle Inhalte und Einstellungen des Heroes gesteuert kannst:

• Allgemein: Beschriftung, Farbvariante, optionale iPad-Vorschau
• Text: Eyebrow (kleiner Text oben), Überschrift und Beschreibung
• Schaltflächen: Primäre und sekundäre Aktion mit Zielseite oder URL
• Chips: Kleine Kärtchen mit Icon und Kennzahl (nur zentrierter Hero)
• Weitere Abschnitte je nach Variante (Bilder, Kalender-Mock, Trust-Leiste)

So gestaltest du den Hero

Grundeinstellungen

1. Klappe den Abschnitt Allgemein auf.
2. Trage unter Bezeichnung (für Verlinkung) einen aussagekräftigen Namen ein – dieser wird später für Anker-Links in der Navigation genutzt.
3. Wähle eine Farbvariante aus dem Auswahlfeld, um den visuellen Stil zu bestimmen.
4. Aktiviere iPad-Mock anzeigen, wenn du eine iPad-Vorschau mit eigenem Bild einbinden möchtest.

Textinhalte

1. Öffne den Abschnitt Text.
2. Fülle die Felder aus:
   • Eyebrow: Kleiner einleitender Text vor der Überschrift
   • Titel: Hauptüberschrift – nutze Markdown mit Asterisken (Wort) für kursive Hervorhebungen in einer speziellen Schriftart
   • Beschreibung: Ausführlicherer Text, der die Botschaft erklärt

Schaltflächen einrichten

1. Öffne den Abschnitt Schaltflächen.
2. Primäre Schaltfläche:
   • Trage unter Primär Text den Beschriftungstext ein.
   • Wähle die Primär Farbe (nur zentrierter Hero).
   • Lege das Primär Ziel fest: Du kannst eine interne Seite verlinken, eine URL eingeben oder auf Kontakt, Telefon, Mail oder Download-Datei setzen.
3. Sekundäre Schaltfläche (optional):
   • Trage Sekundär Text ein.
   • Definiere das Sekundär Ziel.

Chips mit Kennzahlen (nur zentrierter Hero)

1. Öffne Schwebende Kennzahl-Chips.
2. Klicke Chip hinzufügen, um einen neuen Chip zu erstellen.
3. Für jeden Chip:
   • Wähle ein Icon (Symbol) aus.
   • Trage Titel ein (z. B. eine Kennzahl).
   • Trage Untertitel ein (z. B. Einheit oder Erklärung).
4. Mit den Pfeil-Schaltflächen kannst du Chips nach oben oder unten verschieben. Mit dem Papierkorb-Symbol löschst du einen Chip.

Vertrauens-Chips (Split-Hero)

1. Öffne Vertrauens-Chips.
2. Klicke Eintrag hinzufügen, um einen Chip zu erstellen.
3. Für jeden Eintrag:
   • Wähle ein Icon.
   • Trage eine Bezeichnung ein (z. B. „Trusted by …").
4. Verschiebe oder lösche Einträge wie gewünscht.

iPad-Screenshot (nur zentrierter Hero)

1. Öffne iPad-Screenshot.
2. Lade oder ersetze das Bild, das im iPad-Mock angezeigt wird.

Bild einbinden (nur Split-Hero)

1. Öffne Bild.
2. Lade ein Bild hoch oder ersetze das vorhandene.
3. Stelle die Bildanpassung ein (wie das Bild in den Rahmen passt).

Kalender-Mock (nur Split-Hero)

1. Öffne Kalender-Mock Inhalt.
2. Fülle die Vorschaudaten des Kalenders aus.

Schwebender Hinweis-Chip (nur Split-Hero)

1. Öffne Schwebender Hinweis-Chip.
2. Wähle ein Icon, trage Titel und Untertitel ein.
3. Stelle die Drehung in Grad ein (−15 bis +15), um den Chip zu neigen.
4. Aktiviere Schweben animieren, damit der Chip sanft auf und ab schwebt.

Besonderheiten des Split-Heroes

• Unter Text kannst du auch ein Icon für den Eyebrow wählen.
• Mit Reihenfolge umdrehen tauschst du die Position von Text und Bild.
• Primäre und sekundäre Schaltfläche haben zusätzlich eine Schaltflächenart (Stil), den du individuell einstellen kannst.

Was danach passiert

Sobald du Änderungen vornimmst, werden sie sofort in der Vorschau auf der linken Seite sichtbar. Klicke oben rechts auf Speichern, um deine Änderungen zu sichern. Der Hero wird dann auf der Website live angezeigt.

Tipps und Hinweise

• Markdown in Texten: Du kannst überall dort, wo ein Markdown-Editor zur Verfügung steht, Fettdruck und Kursivschrift nutzen. Im Titel des zentrierten Heroes wird kursiver Text automatisch in einer besonderen Schriftart dargestellt.
• Verlinkung: Wenn du keinen Text unter Primär Text oder Sekundär Text hast, werden die Schaltflächen nicht angezeigt.
• Trust-Leiste (zentrierter Hero): Diese Liste ist ein einfacher Text-Bereich – gib dort Kundenlogos, Zertifikate oder Bewertungen ein, die Vertrauen aufbauen.
• Chips ordnen: Du kannst Chips jederzeit verschieben oder löschen. Die Reihenfolge wirkt sich auf die Darstellung auf der Website aus.