Hero Media 3:1
With the hero media 3:1 element, you can display either an image or a video and place a link on the element at the same time. This element can be used in the header or the content are and is always displayed in the fix ratio of 3:1.
Sample view Step by step guide Screen adaption
Sample view
Headline
Manual
Choose the element
- After clicking +Content, find the hero tab and select the Hero Media 3:1 element.
Insert media and link
- Go to Media elements to add a picture or a video. Click Add media file to upload a media file from the database, Select & upload to upload a media file from the PC or Add media via URL to embed a video from the internet.
- Enter the desired text in the Header field.
- You can add a link into the field link by clicking on the chain icon on the right and selecting a page from your page tree.
Customize settings
- Under Type you can choose between H1 to H5 for the headline type.
- Headline Size allows you to choose between different text sizes.
- With Alignment you can control the alignment of the header text.
Screen adaption
The hero media 3:1 element can be used in both the header area and the content area and is always displayed in the fixed 3:1 ratio on any device. Images and videos that are not uploaded in this format are cropped accordingly. Only one medium can be used so sliding images aren't an option with this element. When a link is added, the entire element is clickable.
Special feature: Type, size and arrangement of the headline (step 3 of the instructions) are customizable in all of our existing themes. With medatsu, the element will also appear darker on mouseover. The headline in medatsu will appear in the predefined colors primary, secondary and inverted options, depending on the type chosen.
Responsive: The element is also displayed in a fixed 3:1 ratio on all devices regardless of screen size.