--- title: Selected Pages as Image Card – Ausgewählte Seiten als Card für die Website url: "https://www.toujou.de/service/elementbibliothek/collections/selected-pages-as-image-card/" description: "Beispiel zur Ansicht, Anleitung zum Erstellen des Elements sowie das Verhalten der Selected Pages as Card für deine toujou-Website. Jetzt informieren!" date: 2025-03-26 modified: 2025-03-31 --- # Selected Pages as Image Card – Ausgewählte Seiten als Card 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. [Collections](https://www.toujou.de/service/elementbibliothek/collections/) 5. [Selected Pages as Image Card](https://www.toujou.de/service/elementbibliothek/collections/selected-pages-as-image-card/) Selected Pages as Image Card ============================ Mit dem Element *Select Pages as Image Card* können Sie manuell ausgewählte Seiten als Teaser in Form von Cards darstellen und so die interne Link-Struktur Ihrer Website optimieren. Es ist möglich, mehrere Seitentypen zu vereinen. [Beispielansicht](https://www.toujou.de/service/elementbibliothek/collections/selected-pages-as-card/#c1012582) [Schritt für Schritt](https://www.toujou.de/service/elementbibliothek/collections/selected-pages-as-card/#c1012584) [Verhalten](https://www.toujou.de/service/elementbibliothek/collections/selected-pages-as-card/#c1012587) --- Beispielansicht --------------- ![](https://www.toujou.de/_assets/processed/aHE1e9n2ZnUuqEHgcuDh_lApqVxa2x-7ZZKsBa6BstM/q:85/c:1296:800:fp:0.506:0.5/rt:force/w:324/h:200/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnlfYmx1ZV80Njk5MmNkNTA2:t/cb:cc459106fe2c77cfa475a95e8dcdbd7bc3717cbc/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjJfMDdfMjZfaG93X3RvX3RvdWpvdS8xOTIweDgwMF9IZWFkZXJfRWxlbWVudC1saWJyYXJ5X2JsdWUucG5n) ![Eine Gruppe von Menschen steht in einem modernen Büro, umgeben von Pflanzen und Computern, während sie miteinander sprechen.](https://www.toujou.de/_assets/processed/yTVWvhIZugO667pCsmi0QHKPeKLeiExWGOkyzLys2Ac/q:85/c:1296:800:fp:0.5105:0.5/rt:force/w:324/h:200/fn:Y3NtXzE5MjB4ODAwX1dlYi1oZWFkZXJfb2ZmaWNlLXBlb3BsZV80MTkzN2QzZTIw:t/cb:5554be7332ef37eab8411ee2c8fd1013f2499f23/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX1dlYi1oZWFkZXJfb2ZmaWNlLXBlb3BsZS5wbmc) ![Eine moderne Produktionslinie mit Robotern und Förderbändern, die verschiedene Maschinen und Geräte umfasst.](https://www.toujou.de/_assets/processed/2D-ybnB_B1Gzzc9wx8tXIDogphWb8_BXr1WR6z6jwnA/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfQXNzZW1ibHktc2hvcnRfMjk0ZDRkOTA0Yw:t/cb:c0cb4ed07d94ea4b4f7b6fe2ff76aacb5b7c9128/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X0Fzc2VtYmx5LXNob3J0LnBuZw) ![Ein Laptop mit einer bunten Website, die kreative Inhalte präsentiert, steht auf einem Tisch neben einem Keks.](https://www.toujou.de/_assets/processed/tB2jsvySqcw_zhgLtAk098JI1F_aRHsqXsCKAyz7_Ec/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfQ29va2llc181NDQzZWI5YWY4:t/cb:7465c6070c37960bc5420ec5d160157340944483/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzY4OHgzODdfQ29va2llcy5wbmc) ### Element als Slider - ![](https://www.toujou.de/_assets/processed/aHE1e9n2ZnUuqEHgcuDh_lApqVxa2x-7ZZKsBa6BstM/q:85/c:1296:800:fp:0.506:0.5/rt:force/w:324/h:200/fn:Y3NtXzE5MjB4ODAwX0hlYWRlcl9FbGVtZW50LWxpYnJhcnlfYmx1ZV80Njk5MmNkNTA2:t/cb:cc459106fe2c77cfa475a95e8dcdbd7bc3717cbc/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzIwMjJfMDdfMjZfaG93X3RvX3RvdWpvdS8xOTIweDgwMF9IZWFkZXJfRWxlbWVudC1saWJyYXJ5X2JsdWUucG5n) - ![Eine Gruppe von Menschen steht in einem modernen Büro, umgeben von Pflanzen und Computern, während sie miteinander sprechen.](https://www.toujou.de/_assets/processed/yTVWvhIZugO667pCsmi0QHKPeKLeiExWGOkyzLys2Ac/q:85/c:1296:800:fp:0.5105:0.5/rt:force/w:324/h:200/fn:Y3NtXzE5MjB4ODAwX1dlYi1oZWFkZXJfb2ZmaWNlLXBlb3BsZV80MTkzN2QzZTIw:t/cb:5554be7332ef37eab8411ee2c8fd1013f2499f23/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvaGVhZGVyLzE5MjB4ODAwLzE5MjB4ODAwX1dlYi1oZWFkZXJfb2ZmaWNlLXBlb3BsZS5wbmc) - ![Eine moderne Produktionslinie mit Robotern und Förderbändern, die verschiedene Maschinen und Geräte umfasst.](https://www.toujou.de/_assets/processed/2D-ybnB_B1Gzzc9wx8tXIDogphWb8_BXr1WR6z6jwnA/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfQXNzZW1ibHktc2hvcnRfMjk0ZDRkOTA0Yw:t/cb:c0cb4ed07d94ea4b4f7b6fe2ff76aacb5b7c9128/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X0Fzc2VtYmx5LXNob3J0LnBuZw) - ![Ein Laptop mit einer bunten Website, die kreative Inhalte präsentiert, steht auf einem Tisch neben einem Keks.](https://www.toujou.de/_assets/processed/tB2jsvySqcw_zhgLtAk098JI1F_aRHsqXsCKAyz7_Ec/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfQ29va2llc181NDQzZWI5YWY4:t/cb:7465c6070c37960bc5420ec5d160157340944483/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvQmxvZy1Db250ZW50LzY4OHgzODdfQ29va2llcy5wbmc) von --- Schritt für Schritt ------------------- [ ![](https://www.toujou.de/_assets/processed/CbiSKGUaVtafNg5-6B2m7Y_RgmwtXbTv4zv3CVcoDpA/q:85/c:1752.8888888889:986:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1NlbGVjdGVkLXBhZ2VzLWFzLWltYWdlLWNhcmQtY29sbGVjdGlvbl9kMzc0Mjc5M2Ji:t/cb:caa8e50bf1fc6a65fe4ab66a14ea9674c9a2b314/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvQ29sbGVjdGlvbnMvU2VsZWN0ZWQtcGFnZXMtYXMtaW1hZ2UtY2FyZC1jb2xsZWN0aW9uLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/Collections/Selected-pages-as-image-card-collection.png) ### Element erstellen - Klicken Sie auf **+Inhalt** und wählen Sie im Reiter *Collections* das Element **Selected Pages as Image Card Collection**. [ ![](https://www.toujou.de/_assets/processed/w26a40PZvDhMTYWkwtIYKdAMBa0k7bMo4k5er9Z270k/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1NlbGVjdGVkX3BhZ2VzX2FzX2NhcmRfdGVhc2VyX2FubGVnZW5fZWRkOGIwOWMzOQ:t/cb:caf7fc129398f4dce5a2b4ca054cc519de16d34f/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvU2VsZWN0ZWRfUGFnZXNfYXNfY2FyZC9TZWxlY3RlZF9wYWdlc19hc19jYXJkX3RlYXNlcl9hbmxlZ2VuLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/Selected_Pages_as_card/Selected_pages_as_card_teaser_anlegen.png) ### Teaser anlegen - Klicken Sie auf **+ Neu anlegen**. - Klicken Sie auf das **Kettensymbol** rechts neben dem Linkfeld, um aus der Seitenübersicht die gewünschte Seite zu wählen. - Wählen Sie die zu verlinkenden Seite im Pop-up Fenster an. - Die Seite erscheint nun im Linkfeld. [ ![](https://www.toujou.de/_assets/processed/Avk5GJvC9bhxqsFipUQMRHipB1wjwVLqsCi2RvCIAr4/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1NlbGVjdGVkX3BhZ2VzX2FzX2NhcmRfd2VpdGVyZV90ZWFzZXJfYW5sZWdlbl83YTg1NTI1YWQ0:t/cb:7cf2b6d123d520e925ee25ce765384bcbdd3034c/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvU2VsZWN0ZWRfUGFnZXNfYXNfY2FyZC9TZWxlY3RlZF9wYWdlc19hc19jYXJkX3dlaXRlcmVfdGVhc2VyX2FubGVnZW4ucG5n) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/Selected_Pages_as_card/Selected_pages_as_card_weitere_teaser_anlegen.png) ### Weitere Teaser erstellen - Legen Sie beliebig weitere Teaser an, indem Sie wieder auf **+ Neu anlegen** klicken und wie im vorherigen Schritt beschrieben vorgehen. [ ![](https://www.toujou.de/_assets/processed/OzKHRCMqVlssxK5VLqahi6VV8xG0B-i-WZ8YFS_2hro/q:85/c:1761.7777777778:991:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3NlbGVjdGVkLXBhZ2UtYXMtaW1hZ2UtY2FyZC1mb3JtYXRfZmVlYmM4NjRkNQ:t/cb:a1061469328911f87cbe0900c3c9744c44cfb6c3/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvQ29sbGVjdGlvbnMvc2VsZWN0ZWQtcGFnZS1hcy1pbWFnZS1jYXJkLWZvcm1hdC5wbmc) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/Collections/selected-page-as-image-card-format.png) ### Format und Farbe - Legen Sie fest, ob alle Seiten als Card im Format von 16:9 oder im quadratischen Format angezeigt werden. Klicken Sie hierfür zunächst auf den Reiter **Settings**. - Klicken Sie hierfür auf das **Dropdownmenü** bei *Bildformat*. - Unter der Option *Farbe* legen Sie im **Dropdownmenü** fest, welche der zur Auswahl und im [Theme-Setting hinterlegte Farbe](https://www.toujou.de/service/toujou-setup/farben-festlegen/) die Card annimmt. [ ![](https://www.toujou.de/_assets/processed/eaRzD94FgBLy5ViUD_wC5_cfeLvMcpz8PNdtFKs5J7U/q:85/c:1916.4444444445:1078:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1NlbGVjdGVkX3BhZ2VzX2FzX2ltYWdlY2FyZC1TbGlkZXJlaW5zdGVsbHVuZ18zY2Y5MDE0N2Qw:t/cb:686cbc436e402282eb3698bb07ee79482023dace/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvQ29sbGVjdGlvbnMvU2VsZWN0ZWRfcGFnZXNfYXNfaW1hZ2VjYXJkLVNsaWRlcmVpbnN0ZWxsdW5nLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/Collections/Selected_pages_as_imagecard-Slidereinstellung.png) ### Als Slider darstellen - Möchten Sie die Cards als Slider darstellen, wählen Sie im Bereich *Template* anstelle der Option Image Card Collection über das **Dropdown-Menü** die Option *Image* *Card Slider* aus. - **Speichern** Sie die Einstellungen. ### 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 Element** ***Selected Pages as Image Card*** **ermöglicht die Mischung aus verschiedenen** [**Seitentypen**](https://www.toujou.de/tutorials/seiten-anlegen/) **(Contentseiten, Landingpages, Blogbeiträge, Eventseiten, Produktseiten etc.) und wird standardmäßig je nach Endgerät ausgespielt. Dabei erscheinen mit dem Element die Anzahl an Teaser-Cards, die Sie im Backend angelegt und freigeschaltet haben.** **Hinweise zur Funktionsweise des Elements:** Das Element erlaubt nur eine Verlinkung zu internen Website-Seiten. In den Teaser-Cards erscheinen Bild und Titel automatisch. Die dazugehörigen Daten kommen aus den [Seiteneigenschaften](https://www.toujou.de/tutorials/seiteneigenschaften/) der jeweiligen Seite. Für ein Bild muss im Reiter *Ressourcen* eine Datei hinterlegt sein. **Responsiv**: Das Element wird je nach Endgerät ausgespielt. Standardmäßig werden bei mehr als 840px vier Cards nebeneinander angezeigt. Von 839 bis 640px werden zwei Cards nebeneinander ausgespielt, die weiteren darunter. Für Endgeräte mit weniger als 640px werden alle Cards einzeln untereinander angezeigt. --- Verknüpfte Themen ----------------- [Filtered Pages as Image Card](https://www.toujou.de/service/elementbibliothek/collections/filtered-pages-as-image-card-collection/) [Selected Pages as Card](https://www.toujou.de/service/elementbibliothek/collections/selected-pages-as-card/) [Filtered Pages as card](https://www.toujou.de/service/elementbibliothek/collections/filtered-pages-as-card-collection/) [Selected Pages as list](https://www.toujou.de/service/elementbibliothek/collections/selected-pages-as-list/) [Alle Card-Elemente](https://www.toujou.de/service/elementbibliothek/card-elements/) [Blog administration](https://www.toujou.de/tutorials/blog-administration/) [Alle Elemente](https://www.toujou.de/service/elementbibliothek/) [Alle Tutorials](https://www.toujou.de/tutorials/)