Hero-Bausteine gestalten

Du gestaltest hier einen zentralen Eyecatcher für deine Website: einen großflächigen Hero-Block mit Überschrift, Text und Schaltflächen. Es gibt zwei Varianten – eine mit zentriertem Layout und eine mit geteilter Anordnung von Text und Bild. Beide lassen sich umfangreich personalisieren.

Voraussetzungen

Du benötigst das Modul Website und einen bestehenden Hero-Block auf deiner Seite. Wie du einen Block einrichtest, beschreiben wir unter Block auf einer Seite einrichten (Blockkatalog).

Aufbau des Bearbeitungsfensters

Das Fenster zeigt mehrere Bereiche, die du durchgehend von oben nach unten ausfüllst. Jeder Bereich enthält verwandte Einstellungen: Grundlagen wie Farbschema, dann Text-Inhalte, dann Schaltflächen, spezielle Elemente wie Chips und Vertrauens-Listen, sowie Bild und Animationen. Die Änderungen werden laufend in der Vorschau sichtbar.

So gehst du vor

Gib im Feld Bezeichnung (für Verlinkung) einen internen Namen ein, unter dem du diesen Block wiederfindest – etwa für interne Sprungmarken auf der Seite.
Wähle eine Farbvariante aus der Liste. Dies bestimmt das Farbschema für den gesamten Block.
Wenn du mit iPad-Vorschau arbeiten möchtest: Aktiviere iPad-Mock anzeigen, um zu sehen, wie der Block auf Tablets aussieht.
Fülle das Feld Eyebrow (kleine Überschrift über der Hauptüberschrift). Dies ist optional und dient als Ankündigung oder Kategorie.
Trage die Überschrift (oder Titel, je nach Variante) ein. Sie ist der Haupttext und wird besonders prominent angezeigt. In der zentrierten Variante kannst du mit Markdown-Formatierung (Sternchen) eine Zeile als Serif-Text (elegante Schriftart) hervorheben.
Schreib eine Beschreibung – der erklärende Text unter der Überschrift.
Gib den Primär Text ein – die Beschriftung der Hauptschaltfläche.
Wähle die Primär Farbe für diese Schaltfläche (nur bei zentrierter Variante). Bei der geteilten Variante wählst du stattdessen den Stil mit ButtonStyleSelector.
Setze das Primär Ziel oder Navigationsziel: Klicke auf die Eingabezeile und wähle eine Seite deiner Website, eine externe URL oder einen Anker. Dorthin werden Besucher weitergeleitet, die die Schaltfläche anklicken.
Trage optional einen Sekundär Text ein und setze das Sekundär Ziel nach dem gleichen Muster wie die primäre Schaltfläche.
Nur bei zentrierter Variante – Kennzahl-Chips: Klicke auf Chip hinzufügen. Ein neuer Chip erscheint. Für jeden Chip wählst du ein Icon und füllst Titel und Untertitel ein. Mit den Pfeil-Schaltflächen verschiebst du Chips nach oben oder unten, um ihre Reihenfolge zu ändern. Mit dem Papierkorb-Icon entfernst du sie.
Nur bei zentrierter Variante – iPad-Screenshot: Lade im Bereich iPad-Screenshot ein Bild hoch, das die Ansicht auf einem iPad darstellt. Es wird als Mockup angezeigt, wenn du in Schritt 3 die iPad-Mock aktiviert hast.
Nur bei zentrierter Variante – Trust-Leiste: Klicke im Bereich Trust-Leiste auf Eintrag hinzufügen, um Namen oder Marken einzutragen, die Vertrauen aufbauen. Diese Einträge werden in einer Leiste am unteren Rand des Blocks angezeigt.
Nur bei geteilter Variante – Reihenfolge umdrehen: Aktiviere Reihenfolge umdrehen, wenn Text und Bild auf der Seite getauscht angezeigt werden sollen.
Nur bei geteilter Variante – Vertrauens-Chips: Klicke auf Eintrag hinzufügen. Für jeden Chip wählst du ein Icon und eine Bezeichnung. Mit den Pfeil-Schaltflächen änderst du die Reihenfolge, mit dem Papierkorb-Icon entfernst du sie.
Nur bei geteilter Variante – Bild: Lade im Bereich Bild ein Foto oder eine Grafik hoch. Es wird neben dem Text angezeigt.
Nur bei geteilter Variante – Kalender-Mock Inhalt: Du kannst einen Beispiel-Kalender eintragen, der als visuelle Ergänzung angezeigt wird.
Nur bei geteilter Variante – Schwebender Hinweis-Chip: Richte im gleichnamigen Bereich ein zusätzliches schwebendes Element ein: Wähle ein Icon, trage Titel und Untertitel ein. Mit dem Schieberegler Drehung in Grad legst du fest, in welchem Winkel es angezeigt wird. Aktiviere Schweben animieren, um eine sanfte Animation hinzuzufügen.
Speichere deine Einstellungen mit der grünen Schaltfläche Speichern oben rechts.

Was danach passiert

Dein Hero-Block wird mit den eingegebenen Daten sofort auf der Seite angezeigt. Besucher sehen die Überschrift, den Text und können die Schaltflächen anklicken. Die Chips und Trust-Elemente erscheinen als visuelle Highlights. Du kannst jederzeit zurückkehren und Inhalte oder Design ändern – die Änderungen sind nach dem erneuten Speichern live.

Wenn deine Seite noch nicht veröffentlicht ist, siehst du die Änderungen nur in der Vorschau. Zum Veröffentlichen folge den Schritten unter Website veröffentlichen.

Tipps und Hinweise

Markdown nutzen: In den Textfeldern darfst du Markdown-Formatierung verwenden (z.B. fett, kursiv). Das ist besonders in der zentrierten Variante bei der Überschrift hilfreich, um Teile eleganter zu gestalten.
Schaltflächen-Ziele prüfen: Teste nach dem Speichern, dass die Ziele der Schaltflächen funktionieren. Externe URLs müssen vollständig sein (mit https://).
Chips und Trust sparsam einsetzen: Zu viele Elemente wirken überladen. Konzentriere dich auf die wichtigsten Kennzahlen oder Kundenstimmen.
Farbvarianten testen: Die Farbvariante beeinflusst nicht nur den Hintergrund, sondern auch die Lesbarkeit. Probiere aus, welche Variante deine Schaltflächen und Text am besten hervorhebt.
Unterschied zwischen den Varianten: Die zentrierte Variante wirkt eleganter und funktioniert gut für Startseiten. Die geteilte Variante mit Bild eignet sich besser, um ein Produkt oder eine Dienstleistung konkret zu zeigen.