--- title: Headercontent-Element url: "https://www.toujou.de/service/elementbibliothek/header/headercontent-element/" date: 2018-11-26 modified: 2026-01-16 --- # Headercontent-Element 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Header](https://www.toujou.de/service/elementbibliothek/header/) 5. [Headercontent-Element](https://www.toujou.de/service/elementbibliothek/header/headercontent-element/) Ihr maximal breites Medium im Kopfbereich in vier Bildhöhen ([25%](https://www.toujou.de/service/elementbibliothek/header/headercontent-element/headercontent-25/), [50%](https://www.toujou.de/service/elementbibliothek/header/headercontent-element/headercontent-50/), [80%](https://www.toujou.de/service/elementbibliothek/header/headercontent-element/headercontent-80/), 100%). Item-ID: 07-006 [Beispielansicht](#c1002128) [Anleitung](#c1001990) [Dateimaße & -größen](#c1001988) [Verhalten](#c1002130) --- Beispielansicht für fullscreen 100% nach Endgerät --------------------------------------------------- [ ![](https://www.toujou.de/_assets/processed/9Or_-OFdCeZZPKNoPDUXwM7lbkCBc2zRbgw5PgyFGt0/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8xMDBfMDFfd2lkZXNjcmVlbl8xMDI4Nzg2OGUw:t/cb:4e51770aa30ed837de6e0b1cc4ca84c69bbd5b13/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzEwMF8wMV93aWRlc2NyZWVuLnBuZw) Ansicht für Endgeräte mit mehr als 1440 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_100_01_widescreen.png) #### **Widescreen** [ ![](https://www.toujou.de/_assets/processed/Qt50UuoypCxgYP1InkQUVuXUdxOhYtWCepGvAzU0UcM/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8xMDBfMDJfZGVza3RvcF8yZGEyZTA2YzY4:t/cb:9151149686bc4ebeedf12c6027a6b58be2ef92ef/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzEwMF8wMl9kZXNrdG9wLnBuZw) Ansicht für Endgeräte mit mehr als 1024 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_100_02_desktop.png) #### **Desktop** [ ![](https://www.toujou.de/_assets/processed/Ci8XeSfY9Mz5rGHwacjC8B68bGd9tuyJ3OeaHepmuFs/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8xMDBfMDNfdGFibGV0Xzk5MGUxZThhNmM:t/cb:9cb66c501b7a032d18828af6e142dc23ada05f56/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzEwMF8wM190YWJsZXQucG5n) Ansicht für Endgeräte mit mehr als 600 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_100_03_tablet.png) #### **Tablet** [ ![](https://www.toujou.de/_assets/processed/NDWLWw6wKTO97iQUPB58qX1n2Gy9Yzy0fTcTIc4CnIQ/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8xMDBfbW9iaWxlXzk2Y2MwYmRkMjk:t/cb:71fd73f34d2528b6e68671b15ca0d0d1e5029dae/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzEwMF9tb2JpbGUucG5n) Ansicht exemplarisch mit 375 px Breite ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/ansicht_endgeraete/ohne_headline/Header_100_mobile.png) #### **Mobile** - #### Alternative Headerelement-Höhen [default 80%](https://www.toujou.de/service/elementbibliothek/header/headercontent-element/headercontent-80/) [halfscreen 50%](https://www.toujou.de/service/elementbibliothek/header/headercontent-element/headercontent-50/) [quarterscreen 25%](https://www.toujou.de/service/elementbibliothek/header/headercontent-element/headercontent-25/) --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/_40nrKIByROCuWpWqP8ORVoimrelknJ7z56EgnkJDnU/q:85/w:432/h:270/fn:Y3NtX0RFXzAxXzAxX0VsZW1lbnRfd2FlaGxlbl81NWExOTA0ZGY5:t/cb:c1b5ff7c058643d93a8bfad539f1c3267f73eef0/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYmVzY2hyZWlidW5nLzEwMC9ERV8wMV8wMV9FbGVtZW50X3dhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/beschreibung/100/DE_01_01_Element_waehlen.png) ### 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. [ ![](https://www.toujou.de/_assets/processed/8ZH7W9c7pxDxd2nEW4mHAFwvtScgl_OYt2sfmwqnPUg/q:85/w:432/h:270/fn:Y3NtX0RFXzAxXzAyX01lZGl1bV93YWVobGVuXzllNzRiNjU1Mzk:t/cb:23327937bad34b6869b21170374f04839c02f8ab/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYmVzY2hyZWlidW5nLzEwMC9ERV8wMV8wMl9NZWRpdW1fd2FlaGxlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/beschreibung/100/DE_01_02_Medium_waehlen.png) ### 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. - Ausrichten lässt sich der Text innerhalb des Feldes durch die Optionen unter **Ausrichtung**. [ ![](https://www.toujou.de/_assets/processed/jbfsvIDmpW1YW832h1zqr1XBeqjZinsPYtzghsAGhXo/q:85/w:432/h:270/fn:Y3NtX0RFXzAxXzAzX1NldHRpbmdzXzAxXzQwZGE4ZDRhYTQ:t/cb:ca6bc002e993efceb147b6e477784503cd0a17af/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYmVzY2hyZWlidW5nLzEwMC9ERV8wMV8wM19TZXR0aW5nc18wMS5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/beschreibung/100/DE_01_03_Settings_01.png) ### 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 -------------------- [ ![](https://www.toujou.de/_assets/processed/hMBnDq0CGqUp5CpSBSxHHGiUzRhB8pXZUcUOeiZ-9SQ/q:85/w:432/h:270/fn:Y3NtX0RFXzAxXzA0X0hlYWRsaW5lX1NpemVfNDQzNjBhMDIyYQ:t/cb:f2d113ca48989794a530df6b83b40299636d42f2/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYmVzY2hyZWlidW5nLzEwMC9ERV8wMV8wNF9IZWFkbGluZV9TaXplLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/beschreibung/100/DE_01_04_Headline_Size.png) ### Headline einfügen - Sie haben die Möglichkeit, in den Bereichen *Überschrift* sowie*Text* 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 ❯](https://www.toujou.de/service/elementbibliothek/text-elements/headline-element/headline-h1/#c1003851)). [ ![](https://www.toujou.de/_assets/processed/mKhivZ7wpxeUnPd4KSgAPeqWz_ZTEyy5rq8rv-7rnBg/q:85/w:432/h:270/fn:Y3NtX0RFXzAxXzA1X0xpbmtfTGlua3RleHRfMDFfZmM5MmY3NWQ4MQ:t/cb:8bba031cd6ac9d9f610b3fc1cff1d7f1346ab5b6/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYmVzY2hyZWlidW5nLzEwMC9ERV8wMV8wNV9MaW5rX0xpbmt0ZXh0XzAxLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/beschreibung/100/DE_01_05_Link_Linktext_01.png) ### Text und Link einfügen - Fügen Sie Ihrem Header ggf. Inhalte in Form eines Texts hinzu. - Ergänzen Sie den Inhalt ggf. mit einem Link und seiner entsprechenden Beschriftung. - Diese erscheinen in Form einer Content-Box. - Text und Link orientieren sich bei der Ausrichtung an den für die Headline getroffenen Einstellungen. [ ![](https://www.toujou.de/_assets/processed/Nm6iQvaIhUsKBU_H6UdzGpjsFzxzLW0FRfTGzVTJjIo/q:85/w:432/h:270/fn:Y3NtX0RFXzAxXzA2X1Bvc2l0aW9uXzBlZDY5ODdlYTQ:t/cb:765146779a8fa8ae5c15bfe4cacb89924c9fd76c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYmVzY2hyZWlidW5nLzEwMC9ERV8wMV8wNl9Qb3NpdGlvbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/01_Headercontent/header-element_beschreibung/beschreibung/100/DE_01_06_Position.png) ### 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. [ ![](https://www.toujou.de/_assets/processed/JifPUxrl_I7sWOE9Ud9tNfSLNIrAJzwUIs2_D5s9E_Y/q:85/c:1075.98:277:fp:0.499:0.5/rt:force/w:432/h:111/fn:Y3NtX0F1dG9tYXRpY19TbGljZXJfTWVkaWFfRWxlbWVudHNfYjk0OTEyMzAzZA:t/cb:4672a7b07f9ba75bc8c8b644a15f357d4d6438df/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5L0F1dG9tYXRpY19TbGljZXJfTWVkaWFfRWxlbWVudHMucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/Automatic_Slicer_Media_Elements.png) 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](#c1002128) 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](https://www.toujou.de/tutorials/dateiliste/) hochgeladen werden. - Jede Datei kann im [Editor](https://www.toujou.de/tutorials/seiteninhalte/bildbearbeitung/) 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](https://www.toujou.de/service/elementbibliothek/media-elements/) 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](https://www.toujou.de/service/elementbibliothek/header/header-media-31-ratio/) 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](https://www.toujou.de/service/toujou-setup/)- & [TYPO3-Setup](https://www.toujou.de/tutorials/), die mit dieser Elementanleitung in Verbindung stehen. [Bildbearbeitung](https://www.toujou.de/tutorials/seiteninhalte/bildbearbeitung/) [Dateiliste](https://www.toujou.de/tutorials/dateiliste/)