---
title: "Headercontent Slider (3:1 ratio)"
url: "https://www.toujou.com/service/element-library/header/headercontent-slider-31-ratio/"
date: 2020-04-20
modified: 2026-01-16
lastUpdated: 2026-01-16
---

# Headercontent Slider (3:1 ratio)

1. [Home](https://www.toujou.de/)
2. [Service](https://www.toujou.de/service/)
3. [Element library](https://www.toujou.de/service/element-library/)
4. [Header](https://www.toujou.de/service/element-library/header/)
5. [Headercontent Slider (3:1 ratio)](https://www.toujou.de/service/element-library/header/headercontent-slider-31-ratio/)

   Headercontent Slider 3:1
========================

Your maximum width header element with a fixed 3:1 aspect ratio as content loop for image, headline, optional text and link buttons..

Sample view above
Item-ID: 07-030

[Step by step guide](#c1008134) [Screen adaptation](#c1008136)

---

  Step by step guide
--------------------

     [ ![](https://www.toujou.de/_assets/processed/UUp_LgYjnPjO4RmshZDxfWDo0b2c85VZZky-6DYwbhI/q:85/c:2897.1:1813:fp:0.5005:0.5/rt:force/w:432/h:270/fn:Y3NtX0VOXzA3LTAzMF8wMV9FbGVtZW50X3dhZWhsZW5fU2xpZGVyX2FubGVnZW5fMmI5MWYzODVlOQ:t/cb:70e30947ebb532b99cd87def77505408a26f8799/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDlfSGVhZGVyY29udGVudF9TbGlkZXJfM18xX3JhdGlvL0VOL0VOXzA3LTAzMF8wMV9FbGVtZW50X3dhZWhsZW5fU2xpZGVyX2FubGVnZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/09_Headercontent_Slider_3_1_ratio/EN/EN_07-030_01_Element_waehlen_Slider_anlegen.png) ### Create header element

- Header elements are only selectable as elements in the header area *(Kopfbereich*) of your page.
- Click on the **+ Content** button and select the **Headercontent Slider(3:1 ratio)** element under the *Widgets* tab.
- Click on the **+ Create new** button in the *General* tab to create the first slider.

    [ ![](https://www.toujou.de/_assets/processed/mDY4AkONV0_9TgvUJ778ffIBTqvgQMLGa9iDPjlGeMs/q:85/c:1918.08:1200:fp:0.5005:0.5/rt:force/w:432/h:270/fn:Y3NtX0VOXzA3LTAzMF8wMl9TbGlkZXJfYmVubmVubl9UZXh0X0JpbGRfZjBmNWRiZGFjZA:t/cb:669878fc300cbe3654cd9ce1d2da14a58cb5ea37/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDlfSGVhZGVyY29udGVudF9TbGlkZXJfM18xX3JhdGlvL0VOL0VOXzA3LTAzMF8wMl9TbGlkZXJfYmVubmVubl9UZXh0X0JpbGQucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/09_Headercontent_Slider_3_1_ratio/EN/EN_07-030_02_Slider_bennenn_Text_Bild.png) ### Slider content + select image

- *Title*: Enter a name for your first slider in the title mask in order to be able to distinguish them in the backend. This title is not displayed in the frontend.
- *Description Text*: In the editor, you insert and style the headline, teaser text, and button (see sample view above).
- *Images*: To create an image, select a media file from your file list.

    [ ![](https://www.toujou.de/_assets/processed/cmXcDyNmw3ZswxmNEqzme6CHeNBPWJKBZZJK-1IV-i8/q:85/w:432/h:270/fn:Y3NtX0VOXzA3LTAzMF8wM19TbGlkZXJfcG9zaXRpb25pZXJlbl85NzFjOWYzNWMy:t/cb:56f42f231beb943f4e53ec2c84890d8d3f6dbf98/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDlfSGVhZGVyY29udGVudF9TbGlkZXJfM18xX3JhdGlvL0VOL0VOXzA3LTAzMF8wM19TbGlkZXJfcG9zaXRpb25pZXJlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/09_Headercontent_Slider_3_1_ratio/EN/EN_07-030_03_Slider_positionieren.png) ### Content position

- *Headercontent Position*: Use the *vertical* and *horizontal* position and *size* to determine the placement and size of your header content.
- **Save** your settings.

    [ ![](https://www.toujou.de/_assets/processed/0yVHMhkWk_PSMztau_gFpAdDpdnw69vvTDTuWWYh8MQ/q:85/c:1918.08:1200:fp:0.4995:0.5/rt:force/w:432/h:270/fn:Y3NtX0VOXzA3LTAyOV8wNF93ZWl0ZXJlX1NsaWRlcl8xZGI0NjBkNmY1:t/cb:6d2dbe81d20bdc699ff1526530793ba0e1cba19c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA3X1dpZGdldHMvMDhfSGVhZGVyY29udGVudF9TbGlkZXIvRU4vRU5fMDctMDI5XzA0X3dlaXRlcmVfU2xpZGVyLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/07_Widgets/08_Headercontent_Slider/EN/EN_07-029_04_weitere_Slider.png) ### Create more sliders

- You will now see the assigned title for sliders already saved.
- For further sliders click on the **+ Create new** button again.
- You can change the order of the individual headers afterwards using the arrow buttons on the right side.

  ---

  Screen adaptation
-------------------

 **The behaviour of the *Headercontent Slider (3:1 ratio)* displays several images in the header area with different text contents in a loop while the images always remain in full display.**

This element is useful, if all image information should be transported on all devices and your header image/video should not be cut off at the sides. It always retains its aspect ratio regardless of the device with the difference that different text content can be placed per slider in the form of headline, text and link. All image information is transported responsively.

**Important**: The element is only visible and useful if you want to create more than one image with different content. Otherwise, use the [Header Media 3:1 Ratio](https://www.toujou.de/service/element-library/header/header-media-31-ratio/) element.

---

 Linked topics
-------------

[toujou set-ups](https://www.toujou.de/service/toujou-set-up/) & [TYPO3 tutorials](https://www.toujou.de/service/tutorials/) related to this element description.

[Image editing](https://www.toujou.com/service/tutorials/page-content/text-editing/) [Filelist](https://www.toujou.de/service/tutorials/file-list-module/)