Der Hero ist ein großes Banner mit einem Bild oder Video hinter deinem Text und deinen Schaltflächen. Er steht auf deiner Startseite und ist oft das Erste, was Kunden sehen.
Hero hinzufügen
- Öffne den Builder und wähle im Tab Seiten die Startseite.
- Klicke im Tab Abschnitte auf Neuen Abschnitt hinzufügen und wähle Hero aus der Gruppe Inhalt.
- Wähle deine Medien, schreibe deinen Text und klicke auf Veröffentlichen.
Den Hero gibt es nur auf der Startseite, und du kannst einen pro Seite hinzufügen. Wie du ihn verschiebst, kopierst oder ausblendest, steht in Abschnitte und Blöcke
Medien und Höhe
- Modus: Einzeln zeigt ein Bild oder Video. Geteilt zeigt zwei, festgelegt unter Medien 1 und Medien 2. Sie stehen nebeneinander, wenn die Richtung des Inhalts Vertikal ist, und übereinander, wenn sie Horizontal ist. Auf Handys sind die beiden immer gestapelt.
- Medien 1 und Medien 2: ein Bild oder Video aus deiner Medienbibliothek. Ein Video läuft stumm in Schleife als bewegter Hintergrund.
- Höhe: Klein, Mittel, Groß, Vollbild (füllt den Bildschirm), Bild (folgt der Form deines ersten Bildes, damit nichts abgeschnitten wird) oder Benutzerdefiniert. Bei Benutzerdefiniert legt Benutzerdefinierte Höhe die Höhe als Anteil der Bildschirmhöhe fest. Neue Heros starten mit Bild.
Text und Schaltflächen darüber
Wähle den Hero aus und klicke auf Neuen Block hinzufügen, um Inhalte über die Medien zu legen: bis zu 2 Blöcke Text, 2 Schaltfläche, 2 Gruppe und 2 Trennlinie. Ihre eigenen Einstellungen findest du in Blöcke Gruppe, Text, Schaltfläche und Trennlinie: Wie funktionieren die Einstellungen der Layout-Komponenten?
Unter Layout platzierst du diese Inhalte:
- Richtung: Vertikal stapelt die Blöcke, Horizontal stellt sie nebeneinander. Bei Horizontal stapelt Auf Mobilgeräten vertikal stapeln sie auf Handys.
- Position und Ausrichtung: verschieben den Inhalt nach oben oder unten und nach links oder rechts, zum Beispiel unten links oder mittig. Abstand dazwischen verteilt die Blöcke.
- Inhaltsbreite: Seite hält den Inhalt innerhalb deiner Seitenbreite, Voll lässt ihn bis an die Bildschirmränder reichen. Die Medien füllen immer die volle Breite.
Abstand (unter Abstand) legt den Platz zwischen den Blöcken fest, Innenabstand den Platz um sie herum.
Farben und Overlay
- Farbschema: die Text- und Schaltflächenfarben des Heros. Siehe Farbschemata.
- Medien-Overlay: legt eine Farbschicht über die Medien, damit dein Text leichter lesbar ist. Stelle dann Overlay-Farbe und Overlay-Stil ein: Gefüllt deckt die Medien gleichmäßig ab, Farbverlauf lässt die Farbe auslaufen. Farbverlaufsrichtung (Hoch oder Runter) legt fest, in welche Richtung sie ausläuft.
Im Tab Benutzerdefiniertes CSS kannst du eigenes CSS nur für diesen Hero hinzufügen.
Häufige Aufgaben
- Kopfzeile über dem Hero: Schalte Transparenter Header in den Einstellungen der Kopfzeile ein. Das funktioniert nur, wenn der Hero direkt unter der Kopfzeile steht. Siehe Einstellungen der Kopfzeile.
- Zentrierter Titel und zentrierte Schaltfläche: Richtung Vertikal, dann Position und Ausrichtung auf Mitte.
- Weißer Text auf einem hellen Foto: Schalte Medien-Overlay mit einer dunklen Overlay-Farbe und dem Stil Farbverlauf ein.
Gut zu wissen
- Wenn sich ein Hero-Video nicht bewegt, prüfe Videos automatisch abspielen im Einstellungs-Tab Automatisierungen. Ist es aus, bleiben Hintergrundvideos stehen. Siehe Einstellungen für Automatisierungen.
- Wenn die Größe deines ersten Bildes nicht bekannt ist, nutzt die Höhe Bild stattdessen Mittel.
- Du brauchst ein Banner auf einer anderen Seite? Den Hero gibt es nur auf der Startseite, aber der Bild-Abschnitt funktioniert auf jeder Seite. Siehe Abschnitte Text, Bild und Trennlinie.