--- title: "Two media elements, 50:50" url: "https://www.toujou.de/service/elementbibliothek/media-elements/two-media-elements-5050/" date: 2019-05-30 modified: 2022-09-27 --- # Two media elements, 50:50 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. [Two media elements, 50:50](https://www.toujou.de/service/elementbibliothek/media-elements/two-media-elements-5050/) Two Media elements, 50:50 ========================= Zwei Medienelemente nebeneinander in Textlaufweite Item-ID: 05-005 [Beispielansicht](#c1005725) [Anleitung](#c1005721) [Verhalten](#c1005719) ![](https://www.toujou.de/_assets/processed/0eJGXF73Voeac6gzCOGFaHtj0hbNX6xj3U4kR-9UmeA/q:85/w:433/h:54/fn:Y3NtXzA1XzAwNS1Ud29fbWVkaWFfMjAwMF8yNTBfNGE3YmJjZWVlZQ:t/cb:2ed53d9427610d1083b845ea2e562e8765163172/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wNV9NZWRpYV9FbGVtZW50c18yMDAwXzI1MC8wNV8wMDUtVHdvX21lZGlhXzIwMDBfMjUwLnBuZw) --- 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/OOMKcxh8x-DFSerHs4dxG0hMQlpTpZBV3k3RD3jZ9Rs/q:85/w:433/h:244/fn:Y3NtXzY4OHgzODdfQWVyb3BsYW5lXzQ3MjZhMDMzYzc: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/Mk80aV8tnTjLTJIk5UPPFyBontytld4P6eJ6qyx1gmo/q:85/w:433/h:244/fn:Y3NtXzY4OHgzODdfZWxlcGhhbnRfOGEzMjQ5MDI3NQ:t/cb:3b8ba21a5efd78eb83f49852ae73455572e9c425/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2VsZXBoYW50LnBuZw) ](https://www.toujou.de/fileadmin/Images/Pixelgrafik/items/688x387_items/688x387_elephant.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 --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/iZWu-lFmV29FKjBG-1M5jjFroqxDBiFkYj41RZmxUiI/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwNS0xLXZpZGVvc19hbmxlZ2VuXzExYzM5YWI5ZGE:t/cb:00d8f4425a00e3c100eca0b27b989d0cca7c181f/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDA1LXR3b19tZWRpYV9lbGVtZW50c181MC8wNS0wMDUtMS12aWRlb3NfYW5sZWdlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-005-two_media_elements_50/05-005-1-videos_anlegen.png) ### Zwei Videos anlegen - Klicken Sie auf den Button **Inhalt** und wählen unter dem Reiter *Media* das Element **Two Media elements, 50% - 50%** 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/X_UlIOe_XqIw0cSjmxgKJWRcDEVnlPDJ7DG4Gg8EK74/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA1LTAwNS0xLWJpbGRlcl9hbmxlZ2VuXzQ2Njg4MmMxZDA:t/cb:89e4856fd7e743e80ab6fea6f801c682cf0c3561/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDA1LXR3b19tZWRpYV9lbGVtZW50c181MC8wNS0wMDUtMS1iaWxkZXJfYW5sZWdlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-005-two_media_elements_50/05-005-1-bilder_anlegen.png) ### Zwei Bilder anlegen - Klicken Sie auf den Button **Inhalt** und wählen unter dem Reiter *Media* das Element **Two Media elements, 50% - 50%** 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 ----------- *Two Media elements* zeigen die von Ihnen eingefügten einzelnen Bilder oder betten zwei Videos Ihrer Wahl auf der Seite ein. Die Kombination von Video und Bild 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/)