--- title: "• Hero-Media 3:1" url: "https://www.toujou.de/service/elementbibliothek/media-elements/hero-media-3-1/" date: 2021-03-24 modified: 2022-09-27 --- # • Hero-Media 3:1 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Media Elements](https://www.toujou.de/service/elementbibliothek/media-elements/) 5. [• Hero-Media 3:1](https://www.toujou.de/service/elementbibliothek/media-elements/hero-media-3-1/) Hero Media 3:1 ============== Mit dem Hero Media 3:1 können Sie ein Bild oder Video anzeigen und gleichzeitig einen Link hinterlegen. Dieses Element kann im Kopf- und Contentbereich genutzt werden und wird auf allen Endgeräten im festen Verhältnis von 3:1 ausgespielt. [Beispielansicht](#c1009863) [Anleitung](#c1009666) [Verhalten](#c1009667) [Alle Elemente im Überblick](https://www.toujou.de/service/elementbibliothek/#c1001362) [Alle Tutorials im Überblick](https://www.toujou.de/tutorials/#c1001602) --- Beispielansicht --------------- [ ![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) ### Überschrift ](#c1009664)--- Anleitung --------- [ ![](https://www.toujou.de/_assets/processed/Zj9opYF72v848ZsGkDF_0rAAPVn5PWhWKGW4zCegGIU/q:85/c:1729.1095890411:972.6241438356:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX2hlcm9fbWVkaWFfM18xX2VsZW1lbnRfd2FlaGxlbl84NDY2MzM3ODNm:t/cb:7080068c61f611124a753a216edf833f32537c69/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzExX0hlcm9fTWVkaWEvaGVyb19tZWRpYV8zXzFfZWxlbWVudF93YWVobGVuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/11_Hero_Media/hero_media_3_1_element_waehlen.png) ### Element auswählen - Nach dem Klick auf **+Inhalt** wählen Sie unter dem Reiter *Hero* das Element **Hero Media 3:1**. - In diesem Fall haben wir das Element im Headerbereich angelegt. Falls Sie das Hero Media 3:1 im Inhaltsbereich (content area) nutzen, ist die Auswahl der Reiter variantenreicher, weshalb der Reiter *Hero* an einer anderen Stelle erscheint. Am Vorgehen ändert sich jedoch nichts. [ ![](https://www.toujou.de/_assets/processed/IEWUsmTfjCwGS-u-DT5vLEcSVng48rvBtUz2e_YpINk/q:85/c:1729.1095890411:972.6241438356:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0hlcm9fbWVkaWFfM18xX21lZGl1bV91bmRfbGlua19kNWZlMDI1NDhl:t/cb:b8a6064d62a55674758e4b394cd7455142515a4c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzExX0hlcm9fTWVkaWEvSGVyb19tZWRpYV8zXzFfbWVkaXVtX3VuZF9saW5rLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/11_Hero_Media/Hero_media_3_1_medium_und_link.png) ### Medium und Link einfügen - Unter *Medienelemente* fügen Sie ein Bild oder Video hinzu. Klicken Sie hierfür auf Add **media file** um ein Medium aus der Datenbank hochzuladen, **Select & upload**, um ein Medium vom PC hochzuladen oder **Add media** via URL, um ein ein Video einzubetten. - Im Feld *Überschrift* tragen Sie den gewünschten Text ein. - Den obligatorischen Link hinterlegen Sie im Feld *Link*, indem Sie auf das **Ketten-Symbol** rechts klicken und eine Seite aus Ihrem Seitenbaum wählen. [ ![](https://www.toujou.de/_assets/processed/ZqsIJ-4Sto4TnA1k95WnlnfULZmytLps2X38b8n6zm0/q:85/c:1729.1095890411:972.6241438356:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX0hlcm9fbWVkaWFfM18xX2VpbnN0ZWxsdW5nZW5fYWVkMjY1YjY0OQ:t/cb:0d9ff0a11bcc76c160d54669b30976d6153c49f8/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzExX0hlcm9fTWVkaWEvSGVyb19tZWRpYV8zXzFfZWluc3RlbGx1bmdlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/11_Hero_Media/Hero_media_3_1_einstellungen.png) ### Einstellungen anpassen - Unter *Type* können Sie für die Headline zwischen H1 bis H5 wählen. - Die *Headline Size* ermöglicht Ihnen zwischen verschiedenen Textgrößen zu entscheiden. - Mit *Ausrichtung* regeln Sie die Position des Headertextes. --- Verhalten --------- **Das Element Hero Media 3:1 ist für den Kopfbereich genauso wie für den Contentbereich nutzbar und wird stets im Verhältnis 3:1 in der Textlaufweite ausgespielt. Bilder und Videos, die nicht in diesem Format hochgeladen werden, werden entsprechend beschnitten. Das Element muss immer mit einem Link versehen werden. Ist ein Link hinterlegt, ist das gesamte Element anklickbar.** **Besonderheit medatsu**: Typ, Größe und Anordnung der Headline (Schritt 3 der Anleitung) sind in allen Themes individuell anpassbar. Im medatsu-Theme erscheint das Element beim Mouseover dunkler. Zudem erscheint in diesem Theme die Überschrift je nach Typ in den vordefinierten Farben primary, secondary und inverted. **Responsive**: Auch mobil wird das Element im festen Verhältnis 3:1 auf allen Geräten angezeigt. --- [ ![Website-Vorlagen für verschiedene Branchen](https://www.toujou.de/_assets/processed/jkDyPijbF4gDmMkzxd3MPG8oBAfAyHQ4LoqjH-ZHv8c/q:85/c:2754:1700:fp:0.5:0.5/rt:force/w:608/h:375/fn:Y3NtX1RlbXBsYXRlX092ZXJ2aWV3X25ldV8yMDIyXzllZGJiN2UwMDk:t/cb:b62d1a62d7fcde2e49e32c2d4fdb8799c6326f5a/bG9jYWw6L2ZpbGVhZG1pbi9UZW1wbGF0ZV9PdmVydmlld19uZXVfMjAyMi5wbmc) ](https://www.toujou.de/typo3-demo/#c1006221) Schnell gestalten und bequem verwalten -------------------------------------- Testen Sie in einer kostenlosen und unverbindlichen Demo alle Möglichkeiten mit toujou. Wählen Sie aus zahlreichen [Website-Vorlagen](https://www.toujou.de/templates/#c1009307) für unterschiedliche Branchen oder erstellen Sie Ihre professionelle Firmenwebsite von Grund auf selbst. [Direkt loslegen](https://www.toujou.de/typo3-demo/#c1006221)