--- title: "Header-Media 3:1-Ratio" url: "https://www.toujou.de/service/elementbibliothek/header/header-media-31-ratio/" date: 2018-11-26 modified: 2026-01-16 --- # Header-Media 3:1-Ratio 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. [Header Media 3:1-Ratio](https://www.toujou.de/service/elementbibliothek/header/header-media-31-ratio/) 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](#c1002134) [Anleitung](#c1002141) [Dateimaße & -größen](#c1002142) [Verhalten](#c1002143) --- Beispielansicht ----------------- [ ![](https://www.toujou.de/_assets/processed/rqEz28et-eeO2MS4B2TOLdoI_s2qGsVNlLJjnzb9bVU/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDFfd2lkZXNjcmVlbl8wMV84YzVjNGE1NjY0:t/cb:7a8ccdcf7550ffa13506278b0d6dca3a882432f5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wMV93aWRlc2NyZWVuXzAxLnBuZw) 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_3-1_01_widescreen_01.png) #### **Widescreen** [ ![](https://www.toujou.de/_assets/processed/sToyNoAYfFZzOXMl2kbbdq4_OfsMwblQU_8N-AHIWRQ/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDJfZGVza3RvcF8wMV9kOGY3YTRmNTcw:t/cb:cf11e2c1dd6903a060e0677edb2f44d6ab858062/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wMl9kZXNrdG9wXzAxLnBuZw) 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_3-1_02_desktop_01.png) #### **Desktop** [ ![](https://www.toujou.de/_assets/processed/93m82QIdiCPe-48YB8nXAF4YOmis5KK2hs4yqk49VC8/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDNfdGFibGV0XzcyN2JhZmQ1Y2Y:t/cb:0abb494744a57e8053ca0b0d285da55526be4c61/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wM190YWJsZXQucG5n) 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_3-1_03_tablet.png) #### **Tablet** [ ![](https://www.toujou.de/_assets/processed/dCbtxzEAYDr6_CDO689A7oG_tBeITkh0gsTS5ou8ZhU/q:85/w:432/h:281/fn:Y3NtX0hlYWRlcl8zLTFfMDRfbW9iaWxlX2EwNWQ1MjlhYmE:t/cb:50d754f02d462b2f9b0c54986c930b65b39332e2/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDFfSGVhZGVyY29udGVudC9oZWFkZXItZWxlbWVudF9iZXNjaHJlaWJ1bmcvYW5zaWNodF9lbmRnZXJhZXRlL29obmVfaGVhZGxpbmUvSGVhZGVyXzMtMV8wNF9tb2JpbGUucG5n) 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_3-1_04_mobile.png) #### **Mobile** --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/QshCPW9-CbDgkv3zSIN009wfxG2JEq_SRGLEImaw31g/q:85/w:432/h:270/fn:Y3NtX0RFXzAyXzAxX0hlYWRlcm1lZGlhX3dhZWhsZW5fOTE3MTE0YmMyMg:t/cb:2ab8034ad6acd9577361b9c67252183e56da5c44/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDJfSGVhZGVyLU1lZGlhL0RFL0RFXzAyXzAxX0hlYWRlcm1lZGlhX3dhZWhsZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/02_Header-Media/DE/DE_02_01_Headermedia_waehlen.png) ### 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. [ ![](https://www.toujou.de/_assets/processed/DhgBJJ6bYq67Hwui_5XzPWPugsfTqBIPIt9IdTYuUcA/q:85/w:432/h:270/fn:Y3NtX0RFXzAyXzAyX01lZGl1bV93YWVobGVuX2ZlMTA0ZDM4MTE:t/cb:c409989d65d406930b7899d1d5d104060ef34972/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDJfSGVhZGVyLU1lZGlhL0RFL0RFXzAyXzAyX01lZGl1bV93YWVobGVuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/02_Header-Media/DE/DE_02_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/PVi0mBWHQ4SaE_NltHtLpbl4OvsY1sitgPLifEvIl2Q/q:85/w:432/h:270/fn:Y3NtX0RFXzAyXzAzX0hlYWRsaW5lX1NpemVfZDk0ZWJhYWNhZg:t/cb:3557a4db284658bc9b48d5140e92d3aab97f83c3/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDJfSGVhZGVyLU1lZGlhL0RFL0RFXzAyXzAzX0hlYWRsaW5lX1NpemUucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/02_Header-Media/DE/DE_02_03_Headline_Size.png) ### 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 ❯](https://www.toujou.de/service/elementbibliothek/text-elements/headline-element/)). [ ![](https://www.toujou.de/_assets/processed/k7DmVQE7dgN74Tk-3vviViWjrEU07X7YG3LBWEx_9YU/q:85/w:432/h:270/fn:Y3NtX0RFXzAyXzA0X0hlYWRsaW5lX1Bvc2l0aW9uX2E0YjdiNzMyN2M:t/cb:7f608674427b704011a200bdf3978dd8631d48fc/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDJfSGVhZGVyLU1lZGlhL0RFL0RFXzAyXzA0X0hlYWRsaW5lX1Bvc2l0aW9uLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/02_Header-Media/DE/DE_02_04_Headline_Position.png) ### Headline-Position - Im Reiter *Settings* können Sie über die *Vertical* und *Horizontal* *Position* die Platzierung Ihrer Überschrift 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 ------------------------- ##### **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/service/how-to-typo3-setup/dateiliste/#c1001631) 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 *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](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/)