--- title: Two vertical blockquotes with image url: "https://www.toujou.de/service/elementbibliothek/blockquote-elements/two-vertical-blockquotes-with-image/" date: 2019-01-11 modified: 2022-09-27 --- # Two vertical blockquotes with image 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Blockquote Elements](https://www.toujou.de/service/elementbibliothek/blockquote-elements/) 5. [Two vertical blockquotes with image](https://www.toujou.de/service/elementbibliothek/blockquote-elements/two-vertical-blockquotes-with-image/) Two vertical blockquotes with image =================================== Zwei Zitate mit Text und Namen des Autors, nebeneinander, jeweils unter einem Bild. Item-ID: 03-003 [Beispielansicht](#c1003122) [Anleitung](#c1003120) [Verhalten](#c1003118) --- Beispielansicht ----------------- ![](https://www.toujou.de/_assets/processed/FVmzb0iS8Oh-9sirQiRKwpf4xRVKoipz3YV5N3Q35Ss/q:85/w:112/h:112/fn:Y3NtX2N1c3RvbWVyLWRvZ18wMV80MjRjNDk1ODdm:t/cb:0949e670cfb40eb0d5e85f59297544a1f66df870/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9jdXN0b21lci1kb2dfMDEuanBn)> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem Ipsum ![](https://www.toujou.de/_assets/processed/wehHyX0_rQFjYCV_xty0fR8NrTFmI69Jl5_lPl03VDs/q:85/w:112/h:112/fn:Y3NtX2N1c3RvbWVyLWRvZ18wMl9mZTE0YzQ4Yjll:t/cb:55c6453b7b63e87f85e2fefff868ddfe990ac2b1/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9jdXN0b21lci1kb2dfMDIuanBn)> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Lorem Ipsum --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/4jdJRYy3Ey1kzK0CcSv6K7mvV5ELtJ_pidCUbYqJB9A/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzAzLTAwMy0xX3ppdGF0X2VsZW1lbnRfYW5sZWdlbl8zNGRmMmEzZDNm:t/cb:d61bd10a92576c58aa251b7c9ecc8b3b494e54a4/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDNfQmxvY2txdW90ZV9FbGVtZW50cy8wMy0wMDMtdHdvX3ZlcnRpY2FsX2Jsb2NrcXVvdGVzX2ltYWdlLzAzLTAwMy0xX3ppdGF0X2VsZW1lbnRfYW5sZWdlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/03_Blockquote_Elements/03-003-two_vertical_blockquotes_image/03-003-1_zitat_element_anlegen.png) ### Zitate anlegen - Klicken Sie auf den Button **Inhalt***,* um Zitate zu erstellen. - Im Reiter *Blockquote Elements* wählen Sie **Two vertical blockquotes with image.** [ ![](https://www.toujou.de/_assets/processed/DNTSt7KfN_82OxXoLSjol6wyUUo_XeE2KJB3c4V8RiU/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzAzLTAwMy0yX3RleHRfZWluZnVlZ2VuXzE0NjhlODNkYWM:t/cb:3000ddd8db063f99d028c8fad6ddce19e704aa6a/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDNfQmxvY2txdW90ZV9FbGVtZW50cy8wMy0wMDMtdHdvX3ZlcnRpY2FsX2Jsb2NrcXVvdGVzX2ltYWdlLzAzLTAwMy0yX3RleHRfZWluZnVlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/03_Blockquote_Elements/03-003-two_vertical_blockquotes_image/03-003-2_text_einfuegen.png) ### Text einfügen & formatieren - Geben Sie die Zitate in die Textfelder ein und die/den Urheber der Zitate an. - Sollten Sie die Texte aus einer anderen Datei kopieren, achten Sie auf eventuell mitkopierte Formatierungen. - Der Text kann direkt im Textfeld, mit dem Menü über dem Textfeld, formatiert werden. [ ![](https://www.toujou.de/_assets/processed/Kld0ZvdvIKv4Umaf-9FfVd6juQ75DmxmFVoK9M5Ialw/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzAzLTAwMy0zX2JpbGQtaGluenVmdWVnZW5fMjliOWFmZWIyOA:t/cb:67fe85d97b523fd49e4e26139b96e39c686f449d/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDNfQmxvY2txdW90ZV9FbGVtZW50cy8wMy0wMDMtdHdvX3ZlcnRpY2FsX2Jsb2NrcXVvdGVzX2ltYWdlLzAzLTAwMy0zX2JpbGQtaGluenVmdWVnZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/03_Blockquote_Elements/03-003-two_vertical_blockquotes_image/03-003-3_bild-hinzufuegen.png) ### Bilder einfügen - Klicken Sie auf den Button **Bild hinzufügen**. - Wählen Sie eine Bilddatei aus Ihrer Fileliste aus oder laden Sie eine Datei in den entsprechenden Ordner hoch. [ ![](https://www.toujou.de/_assets/processed/lWqMSxJ6PGaRwoX9ee1y3RTPO-u7Z3Y7Z9nP6HLdNDo/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzAzLTAwMy00X2JpbGRfZm9ybWF0aWVyZW5fMmU0ZjY5MDU5NA:t/cb:920058a212b99c3c88a2804555fd1e65d5f6ce07/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDNfQmxvY2txdW90ZV9FbGVtZW50cy8wMy0wMDMtdHdvX3ZlcnRpY2FsX2Jsb2NrcXVvdGVzX2ltYWdlLzAzLTAwMy00X2JpbGRfZm9ybWF0aWVyZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/03_Blockquote_Elements/03-003-two_vertical_blockquotes_image/03-003-4_bild_formatieren.png) ### Bild formatieren - Bildinformationen und Links könnten hier direkt eingegeben werden. - Der Bildausschnitt kann unter *Editor öffnen* angepasst werden --- ### Element Design für mehr Individualität In diesem Element können Sie zudem das Erscheinungsbild ganz leicht mit dem *Element Design* mit einem Klick ändern. Mit der Auswahl von Standard Design, Primary Design, Secondary Design oder Umgekehrtes Design wechseln Sie Hintergrundfarbe des Elements und ggfs. die Hintergrundfarbe der Headline oder Pfeile bzw. des Textbereichs entsprechend der in den [Theme-Settings definierten Farbe](https://www.toujou.de/service/toujou-setup/farben-festlegen/). ![](https://www.toujou.de/_assets/processed/XEc5X-Qx0dzfOl3J4GUEueIei3HUGvlKhRfby_OPkOs/q:85/c:789.15789473684:200:fp:0.46421052631579:0.5/rt:force/w:432/h:109/fn:Y3NtX2VsZW1lbnRfZGVzaWduX2F1c3dhaGxfbWVkYXRzdV82NTk4MTFkYjhi:t/cb:b70ef9624e2ccbfba77c8a4e802f3ee405748758/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzAyX1RlYXNlcl9lbGVtZW50cy9DaW5lbWFfVGVhc2VyXzMzLTY2L2VsZW1lbnRfZGVzaWduX2F1c3dhaGxfbWVkYXRzdS5wbmc) - Mit Klick auf das **Element Design** im Reiter Allgemein / General erhalten Sie im Dropdown-Menü die Wahl für eine individuelle Designfarbe. - Wählen Sie aus den Optionen Standard, Primary, Secondary sowie Umgekehrt die gewünschte Option aus. - Speichern Sie die Änderungen im Element, damit sie sichtbar werden. --- Verhalten ----------- *Zwei Zitate mit Bild, vertikal* sind zwei zentrierte Zitate, bestehend aus je einem Bild, einem Zitat und dem Namen der/des Zitierten. **Responsive**: Zur Lesbarkeit auf Smartphones werden die Bilder jeweils links neben dem Zitat dargestellt und entsprechen dann einem horizontalen Zitat. **Besonderheiten:** Die Formatierung und Kennzeichnung der Zitate sind von verwendeten Themes und Templates abhängig. --- 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. [Textbearbeitung](https://www.toujou.de/tutorials/seiteninhalte/textbearbeitung/) [Bildbearbeitung](https://www.toujou.de/tutorials/seiteninhalte/bildbearbeitung/) [Dateiliste](https://www.toujou.de/tutorials/dateiliste/)