--- title: "Imagecard Cover Slider: Mehrere Cover für die Website" url: "https://www.toujou.de/service/elementbibliothek/card-elements/imagecard-cover-slider/" description: Mehrere Bider anzeigen mit dem toujou-Element Imagecard Cover Slider ✓ Beispielansicht ✓ Anleitung ✓ Verhalten auf Endgeräten date: 2021-05-21 modified: 2022-09-27 --- # Imagecard Cover Slider: Mehrere Cover für die Website 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. [Imagecard Cover Slider](https://www.toujou.de/service/elementbibliothek/card-elements/imagecard-cover-slider/) Imagecard Cover Slider ====================== Mit diesem Element können Sie mehrere Cards mit Verlinkungen und Titel als Slider darstellen. [Beispielansicht](#c1009895) [Anleitung](#c1009897) [Verhalten](#c1009899) --- Beispielansicht ----------------- - [ ![](https://www.toujou.de/_assets/processed/gT9qCVGXfcexMaAhQT6mbKOxRylMV7-u1yG-YlsuLZE/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0JpbGRlcl9pbV9CbG9nZWludHJhZ18wNTVkYTQwODM0:t/cb:45a04214c9d3ca836bdb398d2fefd962fa6e26c5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL0JpbGRlcl9pbV9CbG9nZWludHJhZy5qcGc)### Bilder im Blogbeitrag ](https://www.toujou.de/blog/bilder-in-blogartikeln/) - [ ![Zwei kleine Figuren stehen vor einem großen Bildschirm, der eine Webseite mit Informationen über TYPO3 zeigt.](https://www.toujou.de/_assets/processed/5aRgE6yjMo3KbuqpFi0coKkUSeKhW_WipzMnNZGEh-s/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9UWVBPMy1UdXRvcmlhbHNfMmE5NjZmYzFmZQ:t/cb:8d218074806083852dab8bb96efbe9568d7ed93c/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9UWVBPMy1UdXRvcmlhbHMucG5n)### Alle Tutorials im Überblick ](https://www.toujou.de/tutorials/) - [ ![In einer Büroszene steht eine Frau neben dem Schreibtisch, im Hintergrund ist ein Sofa zu sehen](https://www.toujou.de/_assets/processed/-bgDqfcX92RITSTOEoEsx_qiluDaDRSziOAwkOyNNvQ/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0xpc2FfSW50ZXJ2aWV3X2FhMThmMjBhOTA:t/cb:e95d4850e2c7d7cfaf0d26091e72b53938dd70a6/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL0xpc2FfSW50ZXJ2aWV3LmpwZw)### toujou insights mit Lisa ](https://www.toujou.de/blog/mehr-wert-auf-eine-gute-website-legen/) - [ ![](https://www.toujou.de/_assets/processed/NoxIiGJSzgfKDXy1lYZpr5E94ubboIyBovwY1N3HWEE/q:85/c:345.375:557.0564516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0luc3RhZ3JhbV9JbnN0YV9Mb3N0X2FjY291bnRfYTVkODNmZGRkYg:t/cb:539f18a7c81c965433613409f16e091d64c497fd/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjFfMDhfMTVfSW5zdGFncmFtLUtvbnRvX2dlc3BlcnJ0L0luc3RhZ3JhbV9JbnN0YV9Mb3N0X2FjY291bnQucG5n)### Instagram-Konto gesperrt ](https://www.toujou.de/blog/gesperrtes-instagram-konto-wiederherstellen/) - [ ![](https://www.toujou.de/_assets/processed/53zdHpTMCFnPj2COagOiVfBhr3TQv97LbIbEgom12Go/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX2RvbWFpbl92ZXJpZml6aWVyZW5faW5zdGFfYzk3NjE1MTBjZA:t/cb:5a13af846e16ee228a22cc49f61b62c721cb008e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL2RvbWFpbl92ZXJpZml6aWVyZW5faW5zdGEuanBn)### Domain verifizieren ](https://www.toujou.de/blog/domain-verifizieren/) - [ ![](https://www.toujou.de/_assets/processed/bm5H1U-B5E_XUmQvJ7zHwVGYyxRtD9qtRrUyBbJMWlo/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX1Nlb0x1cGVfSW5zdGFfYTYzOWFiYjYyOA:t/cb:0ef86ae1114d17969c95d75300f858f4e226fb83/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL1Nlb0x1cGVfSW5zdGEuanBn)### Mehr SEO mit toujou ](https://www.toujou.de/blog/typo3-seo-suchmaschinenoptimierung-fuer-ihre-website/) - [ ![](https://www.toujou.de/_assets/processed/YU9sACVyVsRTzBixz4PXhzNtPIaRK9iaUqLd_Q2MokA/q:85/c:345.375:557.0564516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX1NjaHVsdW5nZW5fdG91am91X2I4NmRmMmUyN2U:t/cb:b949caee4f551ea0d5f30c2ff399ffee763e4d61/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL1NjaHVsdW5nZW5fdG91am91LmpwZw)### toujou-Schulungen ](https://www.toujou.de/events/toujou-schulungen/) - [ ![Ein moderner Computerbildschirm zeigt verschiedene soziale Medien-Icons auf einem schwarzen Hintergrund.](https://www.toujou.de/_assets/processed/v6RVSmAUG4RH9AItOJ5iW7rL5mpYsFSQ3kIxAqBhES0/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX3RvdWpvdV9zb2NpYWxfbWVkaWFfYmFyXzYzZmZkZTJiY2M:t/cb:c084f9f4faf54f7566a3bdc13f56207f9c28dc99/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX3RvdWpvdV9zb2NpYWxfbWVkaWFfYmFyLmpwZw)### Social Media Bar auf der Website ](https://www.toujou.de/service/elementbibliothek/widgets/social-media-bar/) - [ ![Eine digitale Benutzeroberfläche wird von zwei Figuren auf einer Hebebühne betrachtet, während sie an einem Projekt arbeiten.](https://www.toujou.de/_assets/processed/ntuG6zWQccrnAppLfPmClOcaNOuoWzSHJ5rXpGalQYg/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnlfZjliNWRmZmM0OA:t/cb:1305e23ee83a60de5f6c36c46c61c8feffa50315/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnkucG5n)### Alle Elemente im Überblick ](https://www.toujou.de/service/elementbibliothek/) - ![](https://www.toujou.de/_assets/processed/OGz7AJ-2TfC2hOiW9XJOJdhYQGbqjyIqbpNwKuwICfs/q:85/c:294.75:475.40322580645:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzkzMHg1MjVfTGF3c19vZl9VWF9mN2ExNjM5MjBi:t/cb:b5d78bcd0df6749622b7bd7078ce887b4d1922dd/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjAtMDhfSmFrb2JzX0xhdy85MzB4NTI1X0xhd3Nfb2ZfVVgucG5n)### Jacob's Law: Mehr UX-Balance - [ ![Auf einer blauen Oberfläche liegt ein weißes Blatt Papier, das wichtige Informationen und ein grünes Häkchen enthält.](https://www.toujou.de/_assets/processed/dSqS3SVtptLPriDHHPWArbbecuEvQk4czUbCoRvKQgw/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9Gb3Jtc18wMV9iZWUwNmM1ZGUy:t/cb:402e7d12441c151f7a973b016eefc808b140df99/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX0hlYWRlcl9Gb3Jtc18wMS5wbmc)### Formulare erstellen ](https://www.toujou.de/tutorials/seiteninhalte/formulare-anlegen/) - [ ![](https://www.toujou.de/_assets/processed/1V2nrsis8iX758cnunsFc5CaoRpuMxsZZBiG5OpYs94/q:85/c:295.3125:476.31048387097:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtX0NsaWNrTWVldF9taXRfdG91am91X2YzMzQxZmEwZWM:t/cb:9e751c1305a78f312e2be8b3902bfe909f58eb93/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvSW5zdGFncmFtL0NsaWNrTWVldF9taXRfdG91am91LmpwZw)### Click & Meet für Websites ](https://www.toujou.de/blog/terminbuchungen-fuer-click-meet-auf-der-website/) - [ ![Ein gemütlicher Raum mit einem Schreibtisch, wo eine Person arbeitet, während eine andere sich und eine Pflanze im Hintergrund steht.](https://www.toujou.de/_assets/processed/81bea03xNdL-UikUsEGq6T1o_8ChSOfHMt_KG0LpaME/q:85/c:450:725.8064516129:fp:0.5:0.5/rt:force/w:172/h:277/fn:Y3NtXzE5MjB4ODAwX2hlYWRlcl9zZXJ2aWNlXzk0ZmU1Mjg3Yzc:t/cb:5f1cd16c10c25895a1fef11cf127bb5c3546bb22/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX2hlYWRlcl9zZXJ2aWNlLnBuZw)### Service-Team ](https://www.toujou.de/service/support/) --- Anleitung ----------- [ ![](https://www.toujou.de/_assets/processed/ARZi1zROx8IYAJGhuuB_EJ4Uzg9-o9S1cvAJVbJOgSk/q:85/c:1919.8593509633:861.21575342466:fp:0.5:0.44948630136986/rt:force/w:432/h:194/fn:Y3NtX0ltYWdlY2FyZF9jb3Zlcl9zbGlkZXJfZWxlbWVudF93YWVobGVuX2U0ZGQzMjhkOWY:t/cb:df1512bb8303748cb5b9ac4a7f9a46967859f6a5/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDFfSW1hZ2VfY2FyZHMvSW1hZ2VjYXJkX0NvdmVyX1NsaWRlci9JbWFnZWNhcmRfY292ZXJfc2xpZGVyX2VsZW1lbnRfd2FlaGxlbi5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/01_Image_cards/Imagecard_Cover_Slider/Imagecard_cover_slider_element_waehlen.png) ### Element wählen - Nach dem Klicken auf den Button +Inhalt wählen Sie im Reiter *Card Elements* das Element **Imagecard Cover Slider aus**. [ ![](https://www.toujou.de/_assets/processed/gFa4N1kRlNjPORocm-BHTtxUIZnv5Nil7g15xKeSQVI/q:85/c:1916.9513241226:859.91126279863:fp:0.5:0.44880546075085/rt:force/w:432/h:194/fn:Y3NtX2ltYWdlY2FyZF9jb3Zlcl9zbGlkZXJfZWxlbWVudF9hbmxlZ2VuXzE0ZWU2YWU3MTA:t/cb:1f659670af381861ed838cea4c976b0b5fb7022e/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDFfSW1hZ2VfY2FyZHMvSW1hZ2VjYXJkX0NvdmVyX1NsaWRlci9pbWFnZWNhcmRfY292ZXJfc2xpZGVyX2VsZW1lbnRfYW5sZWdlbi5qcGc) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/01_Image_cards/Imagecard_Cover_Slider/imagecard_cover_slider_element_anlegen.jpg) ### Cards anlegen Im Reiter *Allgemein* können Sie beliebig viele Cards anlegen. Klicken Sie für jede einzelnen Card auf den Button **Neu anlegen**. [ ![](https://www.toujou.de/_assets/processed/NFWYRV2ZRS5QzeYe0kbpnv5niSF27ZF05v_E6F-UrdM/q:85/c:1916.9513241226:859.91126279863:fp:0.5:0.44880546075085/rt:force/w:432/h:194/fn:Y3NtX2ltYWdlY2FyZF9jb3Zlcl9zbGlkZXJfZWluc3RlbGx1bmdlbl92b3JuZWhtZW5fNTdlNGFlNDMxMA:t/cb:031f65dc31c9fd598f282e66406ddeb6b261671a/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvMDFfSW1hZ2VfY2FyZHMvSW1hZ2VjYXJkX0NvdmVyX1NsaWRlci9pbWFnZWNhcmRfY292ZXJfc2xpZGVyX2VpbnN0ZWxsdW5nZW5fdm9ybmVobWVuLmpwZw) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/01_Image_cards/Imagecard_Cover_Slider/imagecard_cover_slider_einstellungen_vornehmen.jpg) ### Cards-Einstellungen vornehmen - Für jede erstellte Card können Sie Medium, Titel und Link individuell hinterlegen. Für einen Card-Titel geben Sie im *Textfeld* Title ein. Diese wird im Frontend als Titel ausgegeben. - Um ein Bild hochzuladen, klicken Sie entwieder auf **Datei hinzufügen** oder **Dateien auswählen und hochladen**. Wie Sie Medien richtig beschneiden, erläutern wir im Tutorial [Bildbearbeitung](https://www.toujou.de/tutorials/seiteninhalte/bildbearbeitung/). - Möchten Sie einen Link hinterlegen, klicken Sie im Bereich *Link* auf das **Kettensymbol**, um die verschiedenen Link-Optionen zu erhalten. - Im **Dropdown-Menü** zum *Element Design* wählen Sie die Hintergrund-Farbe für den Titel einer Card. --- ### 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 --------- **Der Imagecard Cover Slider bildet mehrere Cards nebeneinander ab und bietet so die Möglichkeit, mehrere Bilder in Form einer Galerie darzustellen. Die einzelnen Cards werden für alle Endgeräte im festen Verhältnis von 9:16 ausgegeben und können im Bildeditor nach Wunsch angepasst werden. Zusätzlich ist das Setzen eines Links auf jeder einzelnen Card möglich, der daraus resultierende Mouseover-Effekt kann von Theme zu Theme unterschiedlich ausfallen.** **Besonderheit**: Abhängig vom Theme können Sie mit dem Element Design die Farbe der Beschriftung einer Card und der Pfeile variieren. **Responsive**: Die Anzahl der angezeigten Cards des Imagecard Cover Sliders variiert je nach genutztem Endgerät.