--- title: One vertical blockquote with image url: "https://www.toujou.de/service/elementbibliothek/blockquote-elements/one-vertical-blockquote-with-image/" date: 2019-01-11 modified: 2022-09-27 --- # One vertical blockquote 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. [One vertical blockquote with image](https://www.toujou.de/service/elementbibliothek/blockquote-elements/one-vertical-blockquote-with-image/) One vertical blockquote with image ================================== Ein Zitat mit Text und Namen des Autors unter einem Bild. Item-ID: 03-002 [Beispielansicht](#c1003129) [Anleitung](#c1003127) [Verhalten](#c1003125) ![](https://www.toujou.de/_assets/processed/hPEcpT0FPjglrPtj8f33TS9OIKYJWVmtLDHZ3D_8uaM/q:85/w:433/h:54/fn:Y3NtXzAzXzAwMi1PbmVfdmVydGljYWxfYmxvY2txdW90ZV9pbWFnZV8yMDAwXzI1MF8yNGZiNTVkMTM0:t/cb:cb0e453b6652a87e6b851a6f70bf7af4d91b98cf/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wM19CbG9ja3F1b3RlX0VsZW1lbnRzXzIwMDBfMjUwLzAzXzAwMi1PbmVfdmVydGljYWxfYmxvY2txdW90ZV9pbWFnZV8yMDAwXzI1MC5wbmc) --- Beispielansicht ----------------- ![](https://www.toujou.de/_assets/processed/FVmzb0iS8Oh-9sirQiRKwpf4xRVKoipz3YV5N3Q35Ss/q:85/w:112/h:112/fn:Y3NtX2N1c3RvbWVyLWRvZ18wMV80MjRjNDk1ODdm:t/cb:0949e670cfb40eb0d5e85f59297544a1f66df870/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9jdXN0b21lci1kb2dfMDEuanBn)> Look deep into nature, and then you will understand everything better Albert Einstein --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/9TFCCDv_yWgJnDpufE_TsgSGiS7t3ApeL6W68b5fONg/q:85/c:5120:2880:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzAzLTAwMi0xX3ppdGF0X2VsZW1lbnRfYW5sZWdlbl8zNjVlNjIyZGQw:t/cb:1237f4a98f182e979d1cc7b439454970c27ab4da/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDNfQmxvY2txdW90ZV9FbGVtZW50cy8wMy0wMDItT25lX3ZlcnRpY2FsX2Jsb2NrcXVvdGVfaW1hZ2UvMDMtMDAyLTFfeml0YXRfZWxlbWVudF9hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/03_Blockquote_Elements/03-002-One_vertical_blockquote_image/03-002-1_zitat_element_anlegen.png) ### Zitat anlegen - Klicken Sie auf den Button **Inhalt***,* um ein Zitat zu erstellen. - Im Reiter *Blockquote Elements* wählen Sie **One vertical blockquote with image**. [ ![](https://www.toujou.de/_assets/processed/ejIMtyb4EapgTIhCztooN7T4iEVmAFQm1-v12R78Nj8/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzAzLTAwMi0yX3RleHRfZWluZnVlZ2VuXzEzM2M1YTM3YWI:t/cb:e2584a429ea8143fdb42ce2e38df29f5199148ed/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDNfQmxvY2txdW90ZV9FbGVtZW50cy8wMy0wMDItT25lX3ZlcnRpY2FsX2Jsb2NrcXVvdGVfaW1hZ2UvMDMtMDAyLTJfdGV4dF9laW5mdWVnZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/03_Blockquote_Elements/03-002-One_vertical_blockquote_image/03-002-2_text_einfuegen.png) ### Text einfügen & formatieren - Geben Sie Ihren Text ins Textfeld ein und den Urheber des Zitats an. - Sollten Sie den Text 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/CgS9byyBhWwwT8K3oja1Ijwjdk-NDD3GgJKfT3lt6wg/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzAzLTAwMi0zX2JpbGQtaGluenVmdWVnZW5fZjM5MGVhYWU2OA:t/cb:e15352c357829887be26c3909f5f2f12a13f7ff0/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDNfQmxvY2txdW90ZV9FbGVtZW50cy8wMy0wMDItT25lX3ZlcnRpY2FsX2Jsb2NrcXVvdGVfaW1hZ2UvMDMtMDAyLTNfYmlsZC1oaW56dWZ1ZWdlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/03_Blockquote_Elements/03-002-One_vertical_blockquote_image/03-002-3_bild-hinzufuegen.png) ### Bild 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 *(Datei auswählen und hochladen*) hoch. [ ![](https://www.toujou.de/_assets/processed/BYbgfyhXlcVmMgGtkYKrxTXvsSVn7BrZNS0REHAwve8/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzAzLTAwNC00X2JpbGRfZm9ybWF0aWVyZW5fN2Y2OTgwYzQxNw:t/cb:920058a212b99c3c88a2804555fd1e65d5f6ce07/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDNfQmxvY2txdW90ZV9FbGVtZW50cy8wMy0wMDItT25lX3ZlcnRpY2FsX2Jsb2NrcXVvdGVfaW1hZ2UvMDMtMDA0LTRfYmlsZF9mb3JtYXRpZXJlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/03_Blockquote_Elements/03-002-One_vertical_blockquote_image/03-004-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 ----------- Das Zitat mit Bild, vertikal* ist ein zentriertes Element, bestehend aus einem Bild, einem Zitat und dem Namen des Zitierten. **Besonderheiten:** Die Formatierung und Kennzeichnung des Zitates sind von verwendeten Themes und Templates abhängig. **Responsive**: Zur Lesbarkeit auf Smartphones wird das Bild jeweils links neben dem Zitat dargestellt und entspricht dann einem horizontalen Zitat. --- 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/)