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 Screen adaptation
Step by step guide
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.
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.
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.
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 element.
Linked topics
toujou set-ups & TYPO3 tutorials related to this element description.