--- title: Four media elements url: "https://www.toujou.de/service/elementbibliothek/media-elements/four-media-elements/" date: 2019-05-30 modified: 2022-09-27 --- # Four media elements 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. [Four media elements](https://www.toujou.de/service/elementbibliothek/media-elements/four-media-elements/) Four Media elements =================== Vier Medienelemente nebeneinander in maximaler Inhaltsbreite. Item-ID: 05-009 [Beispielansicht](#c1005748) [Anleitung](#c1005744) [Verhalten](#c1005742) ![](https://www.toujou.de/_assets/processed/Jb0CuxmAlogRpiigRd39DMrjDEZpGBG7_n48XcUzWlc/q:85/w:433/h:54/fn:Y3NtXzA1XzAwOS1Gb3VyX21lZGlhXzIwMDBfMjUwX2UxYjFmM2VmNDg:t/cb:02ce262cc6d9d4fbe0a524ce8ed262570ed7305e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wNV9NZWRpYV9FbGVtZW50c18yMDAwXzI1MC8wNV8wMDktRm91cl9tZWRpYV8yMDAwXzI1MC5wbmc) --- Beispielansicht Bilder ------------------------ [ ![Das Bild zeigt ein stilisiertes Flugzeug, das in der Luft fliegt, umgeben von einem ruhigen, einheitlichen grünen Farbton.](https://www.toujou.de/_assets/processed/JHsxWrbLQazSAtbf7anJl-wnqS_Obkh2Hujq9Oi2_eU/q:85/w:348/h:196/fn:Y3NtXzY4OHgzODdfQWVyb3BsYW5lXzVhOGQxMTlkNDg:t/cb:0cfa965a0a01089b986d1d37d0ce23635161b6e9/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X0Flcm9wbGFuZS5wbmc) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_Aeroplane.png) [ ![Ein grauer Elefant und sein Kind stehen auf einem einfarbigen Hintergrund, der die Aufmerksamkeit auf sie lenkt.](https://www.toujou.de/_assets/processed/Tt_LSf1QJnU5DSaI-SNqFWE51oFf0TdV7urMCczqQhc/q:85/w:348/h:196/fn:Y3NtXzY4OHgzODdfZWxlcGhhbnRfNWFkNmI3MjQxZg:t/cb:3b8ba21a5efd78eb83f49852ae73455572e9c425/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2VsZXBoYW50LnBuZw) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_elephant.png) [ ![Das Hochhaus, das in sanften Rosa-Tönen gehalten ist, hebt sich durch seine klare Linienführung und den schlichten Hintergrund hervor.](https://www.toujou.de/_assets/processed/wDez_9OU47hw4p5kV9iVGCMojtqgwx98Yx7yNB2H1w4/q:85/w:348/h:196/fn:Y3NtXzY4OHgzODdfcGhvbmVib290aF9hZDE4YjczYTBj:t/cb:25f3fa35cad280a63de1a086ce0f2f634f131a81/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3Bob25lYm9vdGgucG5n) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_phonebooth.png) [ ![Ein stilisierter Pagodenbau mit mehreren Ebenen und goldener Spitze, umgeben von einem kleinen Garten und Zäunen.](https://www.toujou.de/_assets/processed/ZkY6Oq6RlNsNGINqelVbe4ORh1gtaQXqA_3mh4mN3Tw/q:85/w:348/h:196/fn:Y3NtXzY4OHgzODdfdGVtcGxlXzRiNGY0MjgwMTQ:t/cb:6ef820cebb5d446970b97472c73df58d52c19967/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3RlbXBsZS5wbmc) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_temple.png) --- Beispielansicht Videos ------------------------ Um externe HTML-Inhalte anzuzeigen, benötigen wir Ihre Einwilligung. Weitere Informationen finden Sie in unserer [ Datenschutzerklärung. ](https://www.toujou.de/datenschutz/) Einmal erlauben Immer erlauben Um externe HTML-Inhalte anzuzeigen, benötigen wir Ihre Einwilligung. Weitere Informationen finden Sie in unserer [ Datenschutzerklärung. ](https://www.toujou.de/datenschutz/) Einmal erlauben Immer erlauben Um externe HTML-Inhalte anzuzeigen, benötigen wir Ihre Einwilligung. Weitere Informationen finden Sie in unserer [ Datenschutzerklärung. ](https://www.toujou.de/datenschutz/) Einmal erlauben Immer erlauben Um externe HTML-Inhalte anzuzeigen, benötigen wir Ihre Einwilligung. Weitere Informationen finden Sie in unserer [ Datenschutzerklärung. ](https://www.toujou.de/datenschutz/) Einmal erlauben Immer erlauben --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/W4W1mc3PiHO8fBb57jCJ-SpWiq7TLNxpbJTlsFY9gGs/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwOS0xLXZpZGVvc19hbmxlZ2VuXzQ2ZjBjNzc1MWE:t/cb:2427d711e087abcc29fba1b66f33ddf433f1b3a2/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDA5X2ZvdXJfbWVkaWFfZWxlbWVudHMtMjUvMDUtMDA5LTEtdmlkZW9zX2FubGVnZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-009_four_media_elements-25/05-009-1-videos_anlegen.png) ### Vier Videos anlegen - Klicken Sie auf den Button **Inhalt** und wählen unter dem Reiter *Media* das Element **Four Media elements, 25%** aus. - Um ein Video anzuzeigen, klicken Sie nun im Reiter *Allgemein* **Medien nach URL hinzufügen**. - Fügen Sie die vollständige URL eines YouTube- oder Vimeo-Videos in die dafür vorgesehene Maske ein. - Um ein zweites Video hinzuzufügen, klicken Sie erneut den Button **Medien nach URL hinzufügen** und wiederholen den Vorgang. [ ![](https://www.toujou.de/_assets/processed/0-jxBqf4Woa7l0IlaYjNSM-tNVdoIHPEEklhzpzzc2I/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwOS0xLWJpbGRlcl9hbmxlZ2VuX2RhNTA1MWU3YzA:t/cb:ae131b0d7b4e18366171c14746cec0b24f8ed993/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDA5X2ZvdXJfbWVkaWFfZWxlbWVudHMtMjUvMDUtMDA5LTEtYmlsZGVyX2FubGVnZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-009_four_media_elements-25/05-009-1-bilder_anlegen.png) ### Vier Bilder anlegen - Klicken Sie auf den Button **Inhalt** und wählen unter dem Reiter *Media* das Element **Fours Media elements, 25%** aus. - Um ein Bild anzuzeigen, klicken Sie nun im Reiter *Allgemein* **Bild hinzufügen/Add media file**. - Wählen Sie eine Bilddatei aus Ihrer Fileliste aus oder laden Sie eine Datei in den entsprechenden Ordner hoch. - Für das zweite Bild wiederholen Sie den Vorgang. [ ![](https://www.toujou.de/_assets/processed/DKU70rXbp1Pcqr8iDAXPbTxLrIQImkUAdx5YUZsHy4I/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwOS0yLWJpbGRfYmVhcmJlaXRlbl9lOTM1ODRlODJh:t/cb:204e120a411f69e2c1a8b36b75068740fc82d958/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDA5X2ZvdXJfbWVkaWFfZWxlbWVudHMtMjUvMDUtMDA5LTItYmlsZF9iZWFyYmVpdGVuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-009_four_media_elements-25/05-009-2-bild_bearbeiten.png) ### Bilder bearbeiten - Unter den nun hochgeladenen Bildern öffnet sich jeweils ein Menü zur Bearbeitung der **Bild-Metadaten**. - Aktivieren Sie das Feld **Beschreibung (Bildunterschrift)**, um dem Bild eine Bildunterschrift hinzuzufügen. Schreiben Sie den Text in das dafür vorgesehene Feld. [ ![](https://www.toujou.de/_assets/processed/Z7bGi4fuUrQ9I5KsUsNZcxmSsfWcFjwPpcBJeLI_rgQ/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwOS0zLWJpbGRfZm9ybWF0aWVyZW5fZWU2Njk1ZjljOQ:t/cb:94d573f701febfa173522d7e21c9c0106b051247/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDA5X2ZvdXJfbWVkaWFfZWxlbWVudHMtMjUvMDUtMDA5LTMtYmlsZF9mb3JtYXRpZXJlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-009_four_media_elements-25/05-009-3-bild_formatieren.png) ### Bilder formatieren - Unter dem Button **Editor öffnen können Sie jeweils das Seitenverhältnis für Mobile, Tablet-, Desktop- oder Widescreen-Ansicht anpassen. - Detaillierte Erläuterungen zur Arbeit mit dem Bildeditor finden Sie im [entsprechenden Tutorial](https://www.toujou.de/tutorials/seiteninhalte/bildbearbeitung/). --- Verhalten ----------- *Four Media elements* zeigen die von Ihnen eingefügten einzelnen Bilder oder betten vier Videos Ihrer Wahl auf der Seite ein. Die Kombination von Videos und Bildern innerhalb des gleichen Elements ist ebenfalls möglich. **Responsive:** Die Bilder bzw. die Videos werden in einem festen Verhältnis zunächst nebeneinander, bei kleiner werdenen Bildschirmgrößen in Zweierreihe angezeigt. --- Verknüpfte Themen ----------------- Erläuterungen aus dem [toujou](https://www.toujou.de/service/toujou-setup/)- & [TYPO3-Setup](https://www.toujou.de/tutorials/), die mit dieser Elementanleitung in Verbindung stehen. [Bildbearbeitung](https://www.toujou.de/tutorials/seiteninhalte/bildbearbeitung/) [Dateiliste](https://www.toujou.de/tutorials/dateiliste/)