Header-Media Element 3:1

Header-Element mit einem festen Seitenverhältnis von 3 zu 1 und einer optionalen Überschrift.

Item-ID: 07-012

Beispielansicht  Anleitung  Dateimaße & -größen  Verhalten


Beispielansicht


Anleitung

Header-Element anlegen

  • Header-Elemente sind grundsätzlich nur im Kopfbereich Ihrer Seite als Elemente wählbar.
  • Klicken Sie auf den Button Inhalt.
  • Wählen Sie unter dem Reiter Widgets das Element Header Media Element (3:1 ratio) aus.

Medium anlegen

  • Um ein Bild oder Video anzulegen, wählen Sie eine Mediendatei aus Ihrer Fileliste aus. 
  • Laden Sie eine Datei in den entsprechenden Ordner hoch oder geben Sie eine URL in die entsprechende Maske ein.

Headline einfügen

  • Sie haben die Möglichkeit, eine Überschrift zu platzieren. Überschriften können auch ohne weiteren Text & Link vergeben werden.
  • Im Reiter Content ist per Default eine H2-Tag vergeben. Ändern Sie diese Einstellung bei Bedarf über Typ und Headline Size (mehr zu Headlines ❯).

Headline-Position

  • Im Reiter Settings können Sie über die Vertical und Horizontal Position die Platzierung Ihrer Überschrift bestimmen.

Dateimaße & -größen

Allgemeine Hinweise für Dateien:
  • Bei Verwendung von Fotografien wird das Dateiformat JPEG empfohlen. Bei Grafiken können auch PNG-Dateien eingesetzt werden.
  • In toujou dürfen Mediendateien eine Größe von 8 MB nicht überschreiten.
  • Jede Datei muss nur einmal in Ihrer Dateiliste hochgeladen werden.
  • Jede Datei kann im Editor für verschiedene Verhaltensweisen je Endgerät bearbeitet und unendlich oft auf Ihrer Website in verschiedenen Elementen eingesetzt werden.
Hinweise für Header-Videos:
  • Achten Sie unbedingt auf eine moderate Dateigröße, da diese die Performance Ihrer Website beeinträchtigen kann.
  • Plattformen wie YouTube und Vimeo spielen in den eingebetteten Videos Links und Vorschläge aus, die im Header womöglich deplatziert wirken. Hierfür bietet sich die Einbindung eines Videos als Inhaltselement an. 

Verhalten

Das Verhalten des Header-Media Element 3:1 wird anhand obenstehender Beispielansicht illustriert: Unabhängig vom Endgerät bleibt das Medium stets in voller Darstellung erhalten.

Dieses Element bietet sich an, wenn auch responsiv alle Informationen transportiert werden sollen und Ihr Headerbild/-video seitlich nicht abgeschnitten werden soll. Es behält geräteunabhängig stets sein Seitenverhältnis bei.


Verknüpfte Themen

Erläuterungen aus dem toujou- & TYPO3-Setup, die mit dieser Elementanleitung in Verbindung stehen.

Bildbearbeitung  Dateiliste