--- title: Three media elements url: "https://www.toujou.de/service/elementbibliothek/media-elements/three-media-elements/" date: 2019-05-30 modified: 2022-09-27 --- # Three 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. [Three media elements](https://www.toujou.de/service/elementbibliothek/media-elements/three-media-elements/) Three Media elements ==================== Drei Medienelemente nebeneinander in maximaler Inhaltsbreite. Item-ID: 05-008 [Beispielansicht](#c1005737) [Anleitung](#c1005733) [Verhalten](#c1005731) ![](https://www.toujou.de/_assets/processed/-HZ9UIcQQ9Ekm50qnWNvGkxd1BlqHKyRI_WAdS8oWXk/q:85/w:433/h:54/fn:Y3NtXzA1XzAwOC1UaHJlZV9tZWRpYV8yMDAwXzI1MF9jYjYwZDM0YmQ4:t/cb:b05ca62ae227287848bd6675a2996ecbba9baf25/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wNV9NZWRpYV9FbGVtZW50c18yMDAwXzI1MC8wNV8wMDgtVGhyZWVfbWVkaWFfMjAwMF8yNTAucG5n) --- 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/MQa0vpjUaFT7zGjCKiLmUKu2KTkxJYn0gvb2wl6cJa8/q:85/w:294/h:165/fn:Y3NtXzY4OHgzODdfQWVyb3BsYW5lXzQyNzNlZGE3NWQ: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/mRVWv2m-Y2d9JlpRc6TxgewnkRzX7uCdlVu04sr1fA8/q:85/w:294/h:165/fn:Y3NtXzY4OHgzODdfZWxlcGhhbnRfMjYyNjRlMjU4YQ: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/K__TZSx_VSs4O8KoZgdxT472dYR72WfM3FsysuBKS3U/q:85/w:294/h:165/fn:Y3NtXzY4OHgzODdfcGhvbmVib290aF85NjRmYmU0MjIx:t/cb:25f3fa35cad280a63de1a086ce0f2f634f131a81/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X3Bob25lYm9vdGgucG5n) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_phonebooth.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 --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/NpYRTeQmrIsg8XlyQmYaEpKjQ-HtrOfBrmnza8BgbMM/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwOC0xLXZpZGVvc19hbmxlZ2VuXzA2M2M1MDhiMTE:t/cb:b22b409772e3c874399a1a86939c198c04215233/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDA4X3RocmVlX21lZGlhX2VsZW1lbnRzLTMzLzA1LTAwOC0xLXZpZGVvc19hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-008_three_media_elements-33/05-008-1-videos_anlegen.png) ### Three Videos anlegen - Klicken Sie auf den Button **Inhalt** und wählen unter dem Reiter *Media* das Element **Three Media elements, 33%** 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/Hb1pIMCQDI7vFdSkyIwpJB-FbgKxrWezHop4CJjDS-o/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwOC0xLWJpbGRlcl9hbmxlZ2VuXzBiN2IwZGVkNjQ:t/cb:953e3677f85298c96c24485b93eb8a3c7b7b2124/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDA4X3RocmVlX21lZGlhX2VsZW1lbnRzLTMzLzA1LTAwOC0xLWJpbGRlcl9hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-008_three_media_elements-33/05-008-1-bilder_anlegen.png) ### Three Bilder anlegen - Klicken Sie auf den Button **Inhalt** und wählen unter dem Reiter *Media* das Element **Three Media elements, 33%** 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/8AS2raZWXJjchgFBtgnFSYyrtdVeocGI1_hcqGQvGao/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwNS0yLWJpbGRfYmVhcmJlaXRlbl80ZGQxODE1ZWUy:t/cb:204e120a411f69e2c1a8b36b75068740fc82d958/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDA1LXR3b19tZWRpYV9lbGVtZW50c181MC8wNS0wMDUtMi1iaWxkX2JlYXJiZWl0ZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-005-two_media_elements_50/05-005-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/t2QmZECI83UXKoUXnHYOUCYe6jeFIn0oDb7bR2kqg9M/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwNS0zLWJpbGRfZm9ybWF0aWVyZW5fOTYyOGFhOTAyNg:t/cb:e606ceccfe4a5d69218e0df5d076f686a0c14ee4/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDA1LXR3b19tZWRpYV9lbGVtZW50c181MC8wNS0wMDUtMy1iaWxkX2Zvcm1hdGllcmVuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-005-two_media_elements_50/05-005-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 ----------- *Three Media elements* zeigen die von Ihnen eingefügten einzelnen Bilder oder betten drei 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 bei jeder verfügbaren Bildschirmgröße in einem festen Verhältnis vollständig nebeneinander 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/)