--- title: Selected Pages as Card – Ausgewählte Seiten als Card für die Website url: "https://www.toujou.de/service/elementbibliothek/collections/selected-pages-as-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: 2022-04-28 modified: 2025-03-31 --- # Selected Pages as 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 Card](https://www.toujou.de/service/elementbibliothek/collections/selected-pages-as-card/) Selected Pages as Card Collection ================================= Mit dem Element *Select Pages as Card Collection* 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](#c1012582) [Schritt für Schritt](#c1012584) [Verhalten](#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)### toujou-Elementbibliothek Texte, Medien, Teaser, Blog- sowie Karten-Elemente uvm. Die Anleitungen zum Selberbauen. [ Weiterlesen ](https://www.toujou.de/service/elementbibliothek/) - ![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)### Support Sie brauchen Tipps für die Darstellung Ihrer Inhalte auf der toujou-Website? Wir helfen Ihnen gerne persönlich weiter. [ Weiterlesen ](https://www.toujou.de/service/support/) - ![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)### toujou Features Themes, SEO Yoast, Mehrsprachigkeit, Farb- und Schrifteinstellungen & 150+ Content-Elemente. [ Weiterlesen ](https://www.toujou.de/features/) - ![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) Website Qualität ### Cookie-Consent: Alles akzeptieren 28.02.2022 - Daniel Fau How to: In toujou den Datenschutz gesetzeskonform gewährleisten. [ Weiterlesen ](https://www.toujou.de/blog/cookie-consent-alles-akzeptieren/) - ![](https://www.toujou.de/_assets/processed/jKwph-aUJerTesbmr9D35BUi5yYUEeCGOkz_XXUfVcc/q:85/c:2300:1419.7530864198:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtX2RhLWthcG9fQ29tbXVuaWNhdGlvbi1FeHBlcnRzX1N0ZW1wZWxfd2ViXzQ0NzVlOWJkOTQ:t/cb:f44117f51357ef3a38e28171bf52828684fe6c69/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGFydG5lci9kYV9rYXBvL2RhLWthcG9fQ29tbXVuaWNhdGlvbi1FeHBlcnRzX1N0ZW1wZWxfd2ViLmpwZw) Nürnberg PR-Agentur Webdesign Werbeagentur ### da kapo. Communication Experts GmbH Wir sind mehr als eine Werbeagentur: als Unternehmens-Berater, Marketing-Strategen, Online-Fuzzis und Kommunikations-Sparringspartner leben wir Dienstleistung, schätzen jegliche Art von Kommunikation und lieben digitale Storys, die sich mit einer TOUJOU Website wunderbar erzählen lassen. [ Weiterlesen ](https://www.toujou.de/partner/da-kapo-communication-experts-gmbh/) - ![Das Bild zeigt verschieden große beigefarbene Pakete auf einem ockerfarbigen Grund.](https://www.toujou.de/_assets/processed/EEayuDYIcCJ_oO-ChFjCEKb_zSZh-RtsDWuEddiyk9o/q:85/c:626.94:387:fp:0.5:0.5/rt:force/w:324/h:200/fn:Y3NtXzY4OHgzODdfYm94ZXNfNDFmNDM0MmViNQ:t/cb:df27c08ccddad7ae7227813e795b272cd8ec2bcd/bG9jYWw6L2ZpbGVhZG1pbi9JbWFnZXMvUGl4ZWxncmFmaWsvaXRlbXMvNjg4eDM4N19pdGVtcy82ODh4Mzg3X2JveGVzLnBuZw)### Produkt 1 Beispielansicht der Elementbibliothek, die 12,34,- € kostet. Für mehr Informationen klicken Sie auf das Bild. [ Weiterlesen ](https://www.toujou.de/service/elementbibliothek/widgets/product-grid/product-overview/produkt-1/) --- Schritt für Schritt ------------------- [ ![](https://www.toujou.de/_assets/processed/KLBR69cFAZr-lfsVaEdjLwJZplNX_zYkCOGlD1vqa7c/q:85/c:1752.8888888889:986:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX1NlbGVjdGVkLXBhZ2VzLWFzLWNhcmQtY29sbGVjdGlvbl9iNDZmNWRiZDU3:t/cb:03b3bf79800995499e9f487bf0e36a644bc0f052/bG9jYWw6L2ZpbGVhZG1pbi90b3Vqb3UvZWxlbWVudF9saWJyYXJ5LzA0X0NhcmRfZWxlbWVudHMvQ29sbGVjdGlvbnMvU2VsZWN0ZWQtcGFnZXMtYXMtY2FyZC1jb2xsZWN0aW9uLnBuZw) ](https://www.toujou.de/fileadmin/toujou/element_library/04_Card_elements/Collections/Selected-pages-as-card-collection.png) ### Element erstellen - Klicken Sie auf **+Inhalt** und wählen Sie im Reiter *Collection* das Element **Selected Pages as 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. --- ### 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 Card Collection* 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, Titel und Teasertext 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, für den Teasertext im Reiter *Metadaten* im Textfeld *Zusammenhang* der entsprechende Text. Zudem erscheint immer das Icon für den jeweiligen [Seitentyp](https://www.toujou.de/tutorials/seiten-anlegen/#c1001669). Außerdem gilt: Sind Kategorien für eine Seite hinterlegt, werden diese ausgespielt. Verwenden Sie das Element zur Ansicht von Blogbeiträgen, werden weitere Seiteneigenschaften wie Erstellungsdatum und Autor angezeigt. Bei Eventseiten wird die Art und der Status dargestellt. **Responsiv**: Das Element wird je nach Endgerät ausgespielt. Standardmäßig werden bei mehr als 840px drei 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 card](https://www.toujou.de/service/elementbibliothek/collections/filtered-pages-as-card-collection/) [Selected Pages as Image Card](https://www.toujou.de/service/elementbibliothek/collections/selected-pages-as-image-card/) [Filtered Pages as Image Card](https://www.toujou.de/service/elementbibliothek/collections/filtered-pages-as-image-card-collection/) [Selected Pages as list](https://www.toujou.de/service/elementbibliothek/collections/selected-pages-as-list/) [Alle Collections-Elemente](https://www.toujou.de/service/elementbibliothek/collections/) [Blog administration](https://www.toujou.de/tutorials/blog-administration/) [Alle Elemente](https://www.toujou.de/service/elementbibliothek/) [Alle Tutorials](https://www.toujou.de/tutorials/)