toujou
+49 911 23980-870

Headercontent (hier: fullscreen 100%)

Ihr maximal breites Medium im Kopfbereich in vier Bildhöhen (25%, 50%, 80%, 100%).

Item-ID: 07-006

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


Beispielansicht für fullscreen 100% nach Endgerät

 

Alternative Headerelement-Höhen

default 80%  halfscreen 50%  quarterscreen 25%


Anleitung

Header anlegen

  • Header-Elemente sind grundsätzlich nur im Kopfbereich Ihrer Seite als Elemente wählbar.
  • Klicken Sie auf den Button Inhalt und wählen unter dem Reiter Widgets das Element Headercontent Element 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.

Headerhöhe auswählen

  • Wählen Sie im Reiter Settings im Bereich Headerelement Settings die gewünschte Größe aus. 
  • In unserem Beispiel: fullscreen 100%.
  • Wenn Sie hier keine Änderungen vornehmen wird standardmäßig die default-Größe 80% ausgespielt.

Optionale Schritte

Headline einfügen

  • Sie haben die Möglichkeit, in den Bereichen Überschrift sowieText und Link (siehe nächsten Schritt) Inhalte im Header 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 ❯).

Text und Link einfügen

  • Fügen Sie Ihrem Header ggf. Inhalte in Form eines Texts hinzug.
  • Ergänzen Sie den Inhalt ggf. mit einem Link und seiner entsprechenden Beschriftung.
  • Diese erscheinen in Form einer Content-Box. 

Content-Position & -Größe

  • Im Reiter Settings können Sie über die Vertical und Horizontal Position sowie die Headercontent Size die exakte Postition und Größe der Content-Box bestimmen.

Automatische Wiedergabe von Medien

Wenn Sie mehr als ein Medium innerhalb desselben Elements einsetzen, haben Sie die Möglichkeit, die Wiedergabe zu automatisieren.

Settings-Optionen für Medienelemente mit zwei und mehr Medien

  • Slide automatically: Aktivieren Sie den Regler mittels Klick, um die automatische Wiedergabe einzurichten.
  • Interval of auto slidings (in seconds): Standardmäßig wird nach 6 Sekunden das nachfolgende Medium eingeblendet. Wenn Sie diese Frequenz ändern möchten, betätigen Sie den Regler entsprechend auf einer Skala von 1 bis 15 Sekunden (nur wenn Slide automatically aktiviert ist).

Dateimaße & -größen

Maße: 
  • Für oben stehende Beschreibung gilt im »toujou-Theme«  für das optimale Maß von Headerbildern im Modus fullscreen 100% die Faustregel 2,4:1.
  • In den Beispielansichten sind Headerbilder vom Format 1920x800 px bei einer Auflösung von 300 ppi im Einsatz. Diese Werte sind als Richtlinien zu betrachten und können je nach vorhandener Bildqualität abweichen.
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 Headercontent Elements fullscreen 100% wird anhand obenstehender Beispielansicht illustriert: Je kleiner das Endgerät, desto mehr konzentriert sich die Darstellung Ihres Mediums auf sein Zentrum bei gleichzeitiger Beibehaltung der nahezu vollen Bildschirmhöhe.

Wählen Sie daher Headerbilder aus, deren Fokus auf dem Zentrum liegt, damit in kleiner werdenden Endgeräten seitlich keine wichtigen Bildinformationen ausgeblendet werden.

Um auch responsiv alle Bild-Informationen zu transportieren, bietet sich stattdessen die Nutzung des Image-Header 3:1 an, das sein Bildverhältnis unabhängig vom Endgerät stets beibehält.

Die Position der Content-Box (Schritt 6 der Anleitung) ist variabel und kann je nach Textmenge bei kleiner werdenden Engeräten Ihr Headerbild überdecken. Prüfen Sie daher im Responsive-Verhalten, ob ein Einsatz von Text mittels Content-Box sinnvoll ist.


Verknüpfte Themen

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

Bildbearbeitung  Dateiliste