---
title: "Hero Media 3:1: Use case, tutorial, pieces of advice"
url: "https://www.toujou.com/service/element-library/media-elements/hero-media-3-1/"
description: "Description of the toujou element Hero Media 3:1 based on TYPO3 ❘ For images and videos in a fixed format ❘ All information → toujou.com"
date: 2021-05-17
modified: 2022-09-27
---

# Hero Media 3:1: Use case, tutorial, pieces of advice

1. [Home](https://www.toujou.de/)
2. [Service](https://www.toujou.de/service/)
3. [Element library](https://www.toujou.de/service/element-library/)
4. [Media elements](https://www.toujou.de/service/element-library/media-elements/)
5. [Hero-Media 3:1](https://www.toujou.de/service/element-library/media-elements/hero-media-3-1/)

   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](#c1009854) [Step by step guide](#c1009855) [Screen adaption](#c1009857)

---

 Sample view
-----------

 [  ![Eine farbenfrohe, stilisierte Szene mit verschiedenen Maschinen und Figuren, die in einer kreativen Umgebung arbeiten.](https://www.toujou.de/_assets/processed/6fLeAfMme7JK2xi1NsVCsiItjI_6YpwjI5WccWGne3s/q:85/c:1920:640:fp:0.5:0.5/rt:force/w:480/h:160/fn:Y3NtXzE5MjB4ODAwX3dlYmhlYWRlcl9hc3NlbWJseV9saW5lX3R1ZXJraXNfMDFfMTZjYThkNzlkMA:t/cb:5accec2d07d7cd030050b69544ff0a620f5aa001/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX3dlYmhlYWRlcl9hc3NlbWJseV9saW5lX3R1ZXJraXNfMDEucG5n) ### Headline

 ](#c1009853)---

 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.

---

  [   ###   All media elements

 ](https://www.toujou.de/service/element-library/media-elements/#c2606) [   ###   All elements at a glance

 ](https://www.toujou.de/service/element-library/#c1004331) [   ###   All tutorials at a glance

 ](https://www.toujou.de/service/tutorials/#c1004326)