--- title: "One image card, 1:1" url: "https://www.toujou.de/service/elementbibliothek/card-elements/one-image-card-11/" date: 2019-01-11 modified: 2022-09-27 --- # One image card, 1:1 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Card Elements](https://www.toujou.de/service/elementbibliothek/card-elements/) 5. [One image card, 1:1](https://www.toujou.de/service/elementbibliothek/card-elements/one-image-card-11/) One Image Card, 1:1 =================== Eine Imagecard (1:1), mit einem Link Item-ID: 04-005 [Beispielansicht](#c1003253) [Anleitung](#c1003251) [Verhalten](#c1003249) ![](https://www.toujou.de/_assets/processed/_StSKzQmO4aR1Xdm6Sd-mFRbeQk16CdfB112ULXMa-o/q:85/w:433/h:54/fn:Y3NtXzA0XzAwNS1vbmVfaW1hZ2VfY2FyZF8xXzFfMjAwMF8yNTBfNzgyMDRiZTVlZg:t/cb:bfa27a7c4a83a603a2f779895848e5e274252b4e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZGVtby9JY29ucy9Gb3JtYXRlL0JpYl8yMDAwXzI1MC8wNF9DYXJkX0VsZW1lbnRzXzIwMDBfMjUwLzA0XzAwNS1vbmVfaW1hZ2VfY2FyZF8xXzFfMjAwMF8yNTAucG5n) --- Beispielansicht ----------------- [ ![](https://www.toujou.de/_assets/processed/hi6BA99eZNHbhkdo7pkXWULsaDaEEZbP6jX3m1xb5vg/q:85/c:262:262:fp:0.5:0.5/rt:force/w:262/h:262/fn:Y3NtX3R5cG8zLWJhc2VfZjAzZTFiZjBiZA:t/cb:496bcd90b125f9124d8fc39ac4bca61e5cddb6a7/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsva29sbGVrdGlvbmVuL3R5cG8zLWJhc2UucG5n) ### Lorem Ipsum ](https://www.toujou.de/service/elementbibliothek/card-elements/one-image-card-11/) --- Anleitung --------- [ ![](https://www.toujou.de/_assets/processed/TtnPawYnq-1PTlBktwxX9rspO6DXOPZu6i8PaOnUEzE/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA0LTAwNS0xX2VsZW1lbnRfYW5sZWdlbl9iYzBjZTdlZGE1:t/cb:6baf862e8ef30d57e73a05382a323659fd2a9151/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDRfQ2FyZF9FbGVtZW50cy8wNC0wMDUtb25lX2ltYWdlY2FyZF8xXzEvMDQtMDA1LTFfZWxlbWVudF9hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/04_Card_Elements/04-005-one_imagecard_1_1/04-005-1_element_anlegen.png) ### Imagecard anlegen - Klicken Sie auf den Button **Inhalt***,* um eine Imagecard zu erstellen. - Im Reiter *Card Elements* wählen Sie **One image card, 1:1**. [ ![](https://www.toujou.de/_assets/processed/Y1jLMNpfx4GnVCU2lUrnp8PBitg2aCDJVBhBIFAOCa8/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA0LTAwNS0yX2JpbGRfZWluZnVlZ2VuX2M5ODVmYzQxYTI:t/cb:79c17cc10a9fe212dcd3a53de67ce175ca6c0654/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDRfQ2FyZF9FbGVtZW50cy8wNC0wMDUtb25lX2ltYWdlY2FyZF8xXzEvMDQtMDA1LTJfYmlsZF9laW5mdWVnZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/04_Card_Elements/04-005-one_imagecard_1_1/04-005-2_bild_einfuegen.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 hoch. [ ![](https://www.toujou.de/_assets/processed/H_RK7Q9kBLh1Po0xtlo50pAQdoK7VoUT5KCgCJgQGzA/q:85/c:2560:1440:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtXzA0LTAwNS0zX2xpbmtlaW5mdWVnZW5fZDI0NmM0N2FiMA:t/cb:e6e41c444f6eb46346f07e23288a603d9cc996b3/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDRfQ2FyZF9FbGVtZW50cy8wNC0wMDUtb25lX2ltYWdlY2FyZF8xXzEvMDQtMDA1LTNfbGlua2VpbmZ1ZWdlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/04_Card_Elements/04-005-one_imagecard_1_1/04-005-3_linkeinfuegen.png) ### Link einfügen - Geben Sie einen **Titel** in die Titelmaske ein. - Klicken Sie auf den **Link**-Button um eine Verlinkung einzufügen. - Wählen Sie aus einem der verfügbaren Reiter, um innerhalb der Unterseiten, Elemente oder auf eine externe URL zu verlinken. --- ### 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 ----------- **Eine *Karte mit Bild, 1:1* ist eine einzelne Schaltfläche mit unterschiedlichen Optionen für Hover-Effekte (ggf. Template-abhängig). Sie besteht aus einem quadratischen Bild und einer Beschriftung. Der dazugehörige Link macht das gesamte Element zu einer Schaltfläche.** **Besonderheiten:** Eher selten als einzelnes Element genutzt, bietet sich die *Karte mit Bild, 1:1* an, um in kombinierten Elementen Schaltflächen und Optionen neben anderen Inhalten darzustellen. --- 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/)