--- title: "Headercontent Slider (3:1 ratio)" url: "https://www.toujou.de/service/elementbibliothek/header/headercontent-slider-31-ratio/" date: 2020-04-20 modified: 2026-01-16 --- # Headercontent Slider (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. [Headercontent Slider (3:1 ratio)](https://www.toujou.de/service/elementbibliothek/header/headercontent-slider-31-ratio/) Headercontent Slider 3:1 ======================== Header-Medienelement mit einem festen Seitenverhältnis von 3 zu 1 als Inhaltsschleife für Bild, Headline sowie optionalen Text und Link-Buttons. Beispielansicht oben Item-ID: 07-030 [Anleitung](#c1008121) [Verhalten](#c1008123) --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/9FbOiRQ9oaYNONNbFAqWLj7DruzAm5AUH1ZtjbJUjQA/q:85/c:2897.1:1804.2976:fp:0.4995:0.4976/rt:force/w:432/h:269/fn:Y3NtXzA3LTAzMF8wMV9FbGVtZW50X3dhZWhsZW5fU2xpZGVyX2FubGVnZW5fZTdmZDNmOTRmYw:t/cb:d58b97b6b4177d5795b17c2067ff8c07e7b1000a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDlfSGVhZGVyY29udGVudF9TbGlkZXJfM18xX3JhdGlvLzA3LTAzMF8wMV9FbGVtZW50X3dhZWhsZW5fU2xpZGVyX2FubGVnZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/09_Headercontent_Slider_3_1_ratio/07-030_01_Element_waehlen_Slider_anlegen.png) ### Header-Element anlegen - Header-Elemente sind grundsätzlich nur im *Kopfbereich* Ihrer Seite als Elemente wählbar. - Klicken Sie auf den Button **+ Inhalt** und wählen Sie unter dem Reiter *Widgets* das Element **Headercontent Slider (3:1 ratio)** aus. - Klicken Sie im Reiter *Allgemein* auf **+ Neu anlegen**, um den ersten Headercontent-Slider zu erstellen. [ ![](https://www.toujou.de/_assets/processed/35puagJw5nvq_eI1TAV56bMqskwpZdmmWE1uMiacRxo/q:85/c:1918.08:1198.08:fp:0.4995:0.4992/rt:force/w:432/h:270/fn:Y3NtXzA3LTAzMF8wMl9TbGlkZXJfYmVubmVubl9UZXh0X0JpbGRfNDYzOWRiYTg0OA:t/cb:3e399c9e8a2a3d7d5f82cfa5da8a7300cb826f5f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDlfSGVhZGVyY29udGVudF9TbGlkZXJfM18xX3JhdGlvLzA3LTAzMF8wMl9TbGlkZXJfYmVubmVubl9UZXh0X0JpbGQucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/09_Headercontent_Slider_3_1_ratio/07-030_02_Slider_bennenn_Text_Bild.png) ### Slidercontent + Bild hochladen - *Title*: Geben Sie in die Titlemaske eine Bezeichnung für ihren jeweiligen Slider ein, um diese im Backend unterscheiden zu können. - *Description Text*: Im Editor fügen Sie (wie bei der [Text-Erstellung](https://www.toujou.de/service/elementbibliothek/text-elements/text/)) Headline, Teasertext und ggf. Button (siehe Beispielansicht oben) ein und stylen diese. - *Images*: Um ein Bild anzulegen, wählen Sie eine **Mediendatei** aus Ihrer Fileliste aus. [ ![](https://www.toujou.de/_assets/processed/_rmh5jGFxGA1zyZ1GW-wRhPi9zX_oYu43-kO1FuV6dg/q:85/c:2000:1242:fp:0.5:0.4968/rt:force/w:432/h:268/fn:Y3NtXzA3LTAzMF8wM19TbGlkZXJfcG9zaXRpb25pZXJlbl9lOWUzMGRmNzI0:t/cb:e3fc0fb13b814737f94732013107ba2f974152fa/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDlfSGVhZGVyY29udGVudF9TbGlkZXJfM18xX3JhdGlvLzA3LTAzMF8wM19TbGlkZXJfcG9zaXRpb25pZXJlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/09_Headercontent_Slider_3_1_ratio/07-030_03_Slider_positionieren.png) ### Content im Header platzieren - *Headercontent Position*: Bestimmen Sie über die *Vertical* und *Horizontal* *Position* und *Size* die Platzierung und Größe Ihres Headercontents. - **Speichern** Sie Ihre Einstellungen. [ ![](https://www.toujou.de/_assets/processed/FlUTLLaEF-7ohrhjYq8Y0WplZjy3FXOdEVlEyYuEGTQ/q:85/c:1918.08:1200:fp:0.4995:0.5/rt:force/w:432/h:270/fn:Y3NtXzA3LTAyOV8wNF93ZWl0ZXJlX1NsaWRlcl9jZGRlMmUxM2Ey:t/cb:18496d9726507b4c2e19073ead157ca89e723edc/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDhfSGVhZGVyY29udGVudF9TbGlkZXIvMDctMDI5XzA0X3dlaXRlcmVfU2xpZGVyLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/08_Headercontent_Slider/07-029_04_weitere_Slider.png) ### Weitere Slider anlegen - Sie sehen nun den vergebenen Titel für bereits gespeicherte Slider. - Für weitere Slider klicken Sie wieder auf **+ Neu anlegen***.* - Sie können die Reihenfolge der einzelnen Header mittels Pfeiltasten auf der rechten Seite nachträglich verändern. --- ### 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). --- Verhalten ----------- **Der *Headercontent Slider (3:1 ratio)* stellt mehrere Bilder im Kopfbereich mit unterschiedlichen Textinhalten in einer Schleife dar, wobei das Bild stets sein Seitenverhältnis beibehält. **Verhalten:** Der Slider verhält sich analog zum [Header Media 3:1 Ratio-Element](https://www.toujou.de/service/elementbibliothek/header/header-media-31-ratio/) mit dem Unterschied, dass je Slider unterschiedlicher Textcontent in Form von Headline, Text und Verlinkung platziert werden kann. Alle Bild-Informationen werden responsiv transportiert. **Wichtig:** Das Element ist nur sichtbar und sinnvoll, wenn Sie mehr als ein Bild mit unterschiedlichem Content erstellen möchten. Andernfalls nutzen Sie das [Header Media 3:1 Ratio-Element](https://www.toujou.de/service/elementbibliothek/header/header-media-31-ratio/). --- 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/)