Hero Media 3:1
Mit dem Hero Media 3:1 können Sie ein Bild oder Video anzeigen und gleichzeitig einen Link hinterlegen. Dieses Element kann im Kopf- und Contentbereich genutzt werden und wird auf allen Endgeräten im festen Verhältnis von 3:1 ausgespielt.
Beispielansicht Anleitung Verhalten
Alle Elemente im Überblick Alle Tutorials im Überblick
Beispielansicht
Überschrift
Anleitung
Element auswählen
- Nach dem Klick auf +Inhalt wählen Sie unter dem Reiter Hero das Element Hero Media 3:1.
- In diesem Fall haben wir das Element im Headerbereich angelegt. Falls Sie das Hero Media 3:1 im Inhaltsbereich (content area) nutzen, ist die Auswahl der Reiter variantenreicher, weshalb der Reiter Hero an einer anderen Stelle erscheint. Am Vorgehen ändert sich jedoch nichts.
Medium und Link einfügen
- Unter Medienelemente fügen Sie ein Bild oder Video hinzu. Klicken Sie hierfür auf Add media file um ein Medium aus der Datenbank hochzuladen, Select & upload, um ein Medium vom PC hochzuladen oder Add media via URL, um ein ein Video einzubetten.
- Im Feld Überschrift tragen Sie den gewünschten Text ein.
- Den obligatorischen Link hinterlegen Sie im Feld Link, indem Sie auf das Ketten-Symbol rechts klicken und eine Seite aus Ihrem Seitenbaum wählen.
Einstellungen anpassen
- Unter Type können Sie für die Headline zwischen H1 bis H5 wählen.
- Die Headline Size ermöglicht Ihnen zwischen verschiedenen Textgrößen zu entscheiden.
- Mit Ausrichtung regeln Sie die Position des Headertextes.
Verhalten
Das Element Hero Media 3:1 ist für den Kopfbereich genauso wie für den Contentbereich nutzbar und wird stets im Verhältnis 3:1 in der Textlaufweite ausgespielt. Bilder und Videos, die nicht in diesem Format hochgeladen werden, werden entsprechend beschnitten. Das Element muss immer mit einem Link versehen werden. Ist ein Link hinterlegt, ist das gesamte Element anklickbar.
Besonderheit medatsu: Typ, Größe und Anordnung der Headline (Schritt 3 der Anleitung) sind in allen Themes individuell anpassbar. Im medatsu-Theme erscheint das Element beim Mouseover dunkler. Zudem erscheint in diesem Theme die Überschrift je nach Typ in den vordefinierten Farben primary, secondary und inverted.
Responsive: Auch mobil wird das Element im festen Verhältnis 3:1 auf allen Geräten angezeigt.