--- title: Portfolio Gallery – Ein Slider-Grid-Element für Ihre Website url: "https://www.toujou.de/service/elementbibliothek/media-elements/portfolio-gallery/" description: "Beispiel zur Ansicht, Anleitung zum Erstellen des Elements sowie das Verhalten der Portfolio Gallery für deine toujou-Website. Jetzt informieren!" date: 2022-04-28 modified: 2023-11-24 --- # Portfolio Gallery – Ein Slider-Grid-Element für Ihre Website 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Elementbibliothek](https://www.toujou.de/service/elementbibliothek/) 4. [Media Elements](https://www.toujou.de/service/elementbibliothek/media-elements/) 5. [Portfolio Gallery](https://www.toujou.de/service/elementbibliothek/media-elements/portfolio-gallery/) Portfolio Gallery ================= Die Portfolio-Galerie ist eine Mischung aus einem [Slider](https://www.toujou.de/service/elementbibliothek/media-elements/slider-element/) und einer [Galerie](https://www.toujou.de/service/elementbibliothek/media-elements/gallery/). Auf Desktopgeräten fungiert das Element als Grid-Element, das maximal fünf Bilder anzeigt, mobil werden die Medieninhalte als Slider dargestellt. [Beispielansicht](#c1012575) [Schritt für Schritt](#c1012577) [Verhalten](#c1012579) --- Beispielansicht --------------- - [ ![Ein einladendes Café mit grünen Pflanzen, hellen Wänden und einem gemütlichen Ambiente für Kaffeeliebhaber.](https://www.toujou.de/_assets/processed/WnadFGsRfkNgmCQeSNEsFxIHrG6-ZMtxuQUzpoTrBj8/q:85/c:1024:575.2808988764:fp:0.5:0.5/rt:force/w:433/h:243/fn:Y3NtXzEwMjR4MTAyNF9jYWZlX3NxdWFyZV9kZTMwYzkyMTM4:t/cb:009effe0263859b28f376bf35f41abc7a55eb657/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9jYWZlX3NxdWFyZS5wbmc) ](https://www.toujou.de/_assets/processed/CaMQB5JclhWcxqINciIuT3UmEhUEiy5nJoC71waY5PY/q:85/w:1024/h:1024/fn:Y3NtXzEwMjR4MTAyNF9jYWZlX3NxdWFyZV8xODBlODMwZWJj:t/cb:009effe0263859b28f376bf35f41abc7a55eb657/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9jYWZlX3NxdWFyZS5wbmc) - [ ![Die Webseite präsentiert zeitgenössische Künstler, darunter Nicon Deaconné, umgeben von lebendigen Farben und kreativen Portraits.](https://www.toujou.de/_assets/processed/287KxPcUgZdYiD-dme8-gv83VTP4hMGemj9pkzxXX6Y/q:85/w:356/h:356/fn:Y3NtXzEwMjR4MTAyNF9hcnRfc3F1YXJlXzAxXzFhMzViYWMwZDc:t/cb:35147949a981601462b9565920c65cc76adcd1e1/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9hcnRfc3F1YXJlXzAxLnBuZw) ](https://www.toujou.de/_assets/processed/UBhQuWD2wAsmCCWRvGr9KPsi1J0uuhJhiLW2u0yCW2g/q:85/w:1024/h:1024/fn:Y3NtXzEwMjR4MTAyNF9hcnRfc3F1YXJlXzAxXzE0ODZmNTMwZWM:t/cb:35147949a981601462b9565920c65cc76adcd1e1/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9hcnRfc3F1YXJlXzAxLnBuZw) - [ ![Quadratischer Screenshot des Agency-Website-Templates](https://www.toujou.de/_assets/processed/V62fEYvCwZ-QAsRLpUkqhV1LEQkcGBsFuLC6pqauR3Q/q:85/w:356/h:356/fn:Y3NtXzEwMjR4MTAyNF9hZ2VuY3lfc3F1YXJlXzY2MmE5MDJkYmM:t/cb:b9e713333a6987b99f25dba4804a5d8968c47f4b/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9hZ2VuY3lfc3F1YXJlLnBuZw) ](https://www.toujou.de/_assets/processed/CKvmKh9dIvWJngMCmppgdJs1YENjKyn9JG21Z9_Rhxc/q:85/w:1024/h:1024/fn:Y3NtXzEwMjR4MTAyNF9hZ2VuY3lfc3F1YXJlXzIzYjczYzdmNjc:t/cb:b9e713333a6987b99f25dba4804a5d8968c47f4b/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9hZ2VuY3lfc3F1YXJlLnBuZw) - [ ![Ein modernes Architekturbüro mit klaren Linien und großen Fenstern, das Licht und Raum optimal nutzt.](https://www.toujou.de/_assets/processed/NlSNpYnvg2y4p4-wslScWQD4z-oGSP3yn8LPYn8KwQ0/q:85/w:356/h:356/fn:Y3NtXzEwMjR4MTAyNF9hcmNoaXRlY3Rfc3F1YXJlXzAxXzY2MzdmYzU4MmI:t/cb:bb61166983a90664bc7c529348205338794fd7a6/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9hcmNoaXRlY3Rfc3F1YXJlXzAxLnBuZw) ](https://www.toujou.de/_assets/processed/EypTlFHCX2Xn1on7UIk7zFD6hjmM3m4UEgZ5oRojQL0/q:85/w:1024/h:1024/fn:Y3NtXzEwMjR4MTAyNF9hcmNoaXRlY3Rfc3F1YXJlXzAxX2FlYzJjODJiMzY:t/cb:bb61166983a90664bc7c529348205338794fd7a6/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9hcmNoaXRlY3Rfc3F1YXJlXzAxLnBuZw) - [ ![Ein stilvolles Restaurant mit einer Holzbar, beleuchtet von warmen Lampen, bietet asiatische Küche und Getränke an.](https://www.toujou.de/_assets/processed/bJ7wM7ukhP_lLORULeP-5BLzPqySMOfSy40auXObagQ/q:85/w:356/h:356/fn:Y3NtXzEwMjR4MTAyNF9nYXN0cm9fc3F1YXJlX2MzN2E3ZGU5M2M:t/cb:d345b2e942e65c562918f4a88fb47be7cb1a29c9/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9nYXN0cm9fc3F1YXJlLnBuZw) ](https://www.toujou.de/_assets/processed/vn5rxTNNh9ms7RC2O3y9rvQBIK2CRGzuWmZym9vPNrI/q:85/w:1024/h:1024/fn:Y3NtXzEwMjR4MTAyNF9nYXN0cm9fc3F1YXJlXzVjNjJmZGQ4YWI:t/cb:d345b2e942e65c562918f4a88fb47be7cb1a29c9/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9nYXN0cm9fc3F1YXJlLnBuZw) - [ ![Ein bunter Marktstand voller frischer Obst- und Gemüsesorten, der eine einladende und gesunde Auswahl bietet.](https://www.toujou.de/_assets/processed/Dg2bAZ63TwMvirmHf0o4mxuW9ukqR2MQhP_Y6NDtSJY/q:85/w:356/h:356/fn:Y3NtXzEwMjR4MTAyNF9sb2NhbGJ1c2luZXNzX3NxdWFyZV81ZWI4YmU3NmUx:t/cb:fb05ceb730458784f86c5e08f5b08822dc87b456/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9sb2NhbGJ1c2luZXNzX3NxdWFyZS5wbmc) ](https://www.toujou.de/_assets/processed/ltc74tC1WLvEQswpDsQ1cfWryu3iwdocXOYXDnkcaUM/q:85/w:1024/h:1024/fn:Y3NtXzEwMjR4MTAyNF9sb2NhbGJ1c2luZXNzX3NxdWFyZV9hODk5MzcwMzcz:t/cb:fb05ceb730458784f86c5e08f5b08822dc87b456/bG9jYWw6L2ZpbGVhZG1pbi9CaWxkZXIvVGVtcGxhdGUtU2NyZWVuc2hvdHMvc3F1YXJlLzEwMjR4MTAyNF9sb2NhbGJ1c2luZXNzX3NxdWFyZS5wbmc) of Beispielansicht einer Portfolio Gallery ### Schematische Anordnung Die folgende schematische Anordnung bildet ein Abbild der Bilder bei der jeweiligen Anzahl an ausgewählten Medeninhalten in der Portfolio Gallery. Die Grid-Form wird dabei für Endgeräte mit mindestens 840px Bildschirm-Breite ausgespielt. Als Slider erscheint die Portfolio Gallery bei Endgeräten mit maximal 840px Breite. ![](https://www.toujou.de/_assets/processed/kmMz_Au5H89xZbG4MTGz87dGrnbdy56bFVuADMHGueQ/q:85/w:433/h:172/fn:Y3NtX3BvcnRmb2xpb19nYWxsZXJ5X2Fub3JkbnVuZ19iaWxkZXJfZ3JpZF9kOGY3MDM4Y2E2:t/cb:5293b7683f51158fa830a529a5a0ec6645429cdb/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDEwX3BvcnRmb2xpb19nYWxsZXJ5L3BvcnRmb2xpb19nYWxsZXJ5X2Fub3JkbnVuZ19iaWxkZXJfZ3JpZC5wbmc) --- Schritt für Schritt ------------------- [ ![](https://www.toujou.de/_assets/processed/bBCg4VxRiZXsXz3JfAqa_9v1ci8NaydP_-SBD5kNXA8/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3BvcnRmb2xpb19nYWxsZXJ5X2VsZW1lbnRfZXJzdGVsbGVuX2YzY2EzNDRkMTY:t/cb:29cb8cd1bcd0ef3a949981c517497c2b0ee23604/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDEwX3BvcnRmb2xpb19nYWxsZXJ5L3BvcnRmb2xpb19nYWxsZXJ5X2VsZW1lbnRfZXJzdGVsbGVuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-010_portfolio_gallery/portfolio_gallery_element_erstellen.png) ### Element erstellen - Um eine Portfolio Gallery zu erstellen, klicken Sie zunächst auf **+Inhalt**. - Anschließend wählen Sie im Reiter *Media* das Element **Portfolio gallery** aus. [ ![](https://www.toujou.de/_assets/processed/an6oSzkH4-DPRYX4wmXwuhaiuOlafIyCoERBuyT3aMU/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3BvcnRmb2xpb19nYWxsZXJ5X0JpbGRlcl9oaW56dWZ1X19nZW5fMjM2OGZiODczNw:t/cb:771ebd9413e911b84207de48377477697a8024d6/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDEwX3BvcnRmb2xpb19nYWxsZXJ5L3BvcnRmb2xpb19nYWxsZXJ5X0JpbGRlcl9oaW56dWZ1X19nZW4ucG5n) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-010_portfolio_gallery/portfolio_gallery_Bilder_hinzufu__gen.png) ### Bilder hinzufügen - Um beliebig viele Bilder hinzuzufügen, klicken Sie im Reiter *Allgemein* unter *Medienelemente* auf eine der drei Optionen **Mediendatei hinzufügen**, **Dateien auswählen und hochladen** oder **Medien nach URL hinzufügen**. (Alle Informationen zum [Hochladen von Bildern](https://www.toujou.de/tutorials/dateiliste/)) - Die Bilder werden in der angelegten Reihenfolge ausgespielt. [ ![](https://www.toujou.de/_assets/processed/8wQt8Y4zAEslqGHeVjugCoEXQymh3GADRESUdamL0To/q:85/c:1920:1080:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3BvcnRmb2xpb19nYWxsZXJ5X2J1dHRvbi10ZXh0X2VkaXRpZXJlbl9lMmZiNDhlMjI1:t/cb:49b4ae8d893b2fc0972f1954f11082656be08da9/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDEwX3BvcnRmb2xpb19nYWxsZXJ5L3BvcnRmb2xpb19nYWxsZXJ5X2J1dHRvbi10ZXh0X2VkaXRpZXJlbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-010_portfolio_gallery/portfolio_gallery_button-text_editieren.png) ### Button-Text editieren - Um einen Text beim Button auszuspielen, füllen Sie das Textfeld im Bereich *Button label* aus. Alternativ ist standardmäßig »Alle Medien anzeigen« hinterlegt. - **Speichern** Sie die Einstellungen. --- Verhalten --------- Sie können das Portfolio-Galerie-Element sowohl in der Kopfzeile als auch im Inhaltsbereich einer Seite nutzen. In der Kopfzeile platziert, nimmt es die volle Breite des Bildschirms ein, im Inhaltsbereich hingegen die durch das [Theme](https://www.toujou.de/features/toujou-themes/) definierte Content-Laufweite. Auf Desktopgeräten werden maximal fünf Bilder auf einmal angezeigt. Sind mehr als fünf Medieninhalte hinterlegt, erscheint automatisch der Button »Alle Medien anzeigen«, den Sie unter Schritt »Button-Text editieren« jederzeit editieren können. Mit Klick darauf werden die weiteren Bilder per Lightbox dargestellt. **Responsiv:** Ab einer Breite von mindestens 840px wird die Portfolio Gallery als Grid angezeigt, auf Endgeräten mit weniger Pixeln in der Breite wird das Element als Slider angezeigt. --- Verwandte Themen ---------------- [Slider](https://www.toujou.de/service/elementbibliothek/media-elements/slider-element/) [Gallery](https://www.toujou.de/service/elementbibliothek/media-elements/gallery/) [Alle Medien-Elemente](https://www.toujou.de/service/elementbibliothek/media-elements/) [Bildbearbeitung](https://www.toujou.de/tutorials/seiteninhalte/bildbearbeitung/) [Dateiliste](https://www.toujou.de/tutorials/dateiliste/)