Your maximum width header element in four height sizes as content loop for image, headline, optional text and link buttons.
Sample view above
Item ID: 07-029
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 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.
- Headercontent Position: Use the vertical and horizontal position and size to determine the placement and size of your header content.
Select header height
- In the Settings tab, select the desired image hight of the header element.
- If you don't make any changes here, the default size 80% (see above) will be displayed.
- 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 Header content slider displays several images in the header area with different text contents in a loop.
Behavior: The slider behaves in the same way as the Header content element with the difference that different text content can be placed per slider in the form of headline, text and link. You should therefore select header images that focus on the center so that no important image information is hidden laterally on smaller devices. In order to deliver all image information responsively, the Header content slider (3:1 ratio) can be used instead, which always maintains its image ratio regardless of the device.
Important information:
- The element is only visible and useful if you want to create more than one image with content. Otherwise, please use the Header content element.
- If you only use different images, but want the same content box to be visible, use the Header content element as well.