--- title: Portfolio Gallery – A slider grid element for your website url: "https://www.toujou.com/service/element-library/media-elements/portfolio-gallery/" description: "Sample views, manuals for the element, and the behavior of the portfolio gallery for your toujou website. Find out more now!" date: 2024-01-02 modified: 2024-01-02 --- # Portfolio Gallery – A slider grid element for your website 1. [Home](https://www.toujou.de/) 2. [Service](https://www.toujou.de/service/) 3. [Element library](https://www.toujou.de/service/element-library/) 4. [Media elements](https://www.toujou.de/service/element-library/media-elements/) 5. [Portfolio Gallery](https://www.toujou.de/service/element-library/media-elements/portfolio-gallery/) Portfolio Gallery ================= The Portfolio Gallery combines slider and gallery in an element. On desktop devices, the element is displayed as a grid element with a maximum of five images. On mobile, the media content is presented as a slider. [Sample view](#c1012575) [Step by step](#c1012577) [Screen adaption](#c1012579) --- Sample view ----------- - [ ![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 ### Schematic arrangement The following schematic arrangement provides a representation of the images based on the respective number of selected media contents. The grid format is displayed for devices with a minimum screen width of 840px. On devices with a maximum width of 840px, the Portfolio Gallery appears as a slider. ![](https://www.toujou.de/_assets/processed/kmMz_Au5H89xZbG4MTGz87dGrnbdy56bFVuADMHGueQ/q:85/w:433/h:172/fn:Y3NtX3BvcnRmb2xpb19nYWxsZXJ5X2Fub3JkbnVuZ19iaWxkZXJfZ3JpZF9kOGY3MDM4Y2E2:t/cb:5293b7683f51158fa830a529a5a0ec6645429cdb/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDEwX3BvcnRmb2xpb19nYWxsZXJ5L3BvcnRmb2xpb19nYWxsZXJ5X2Fub3JkbnVuZ19iaWxkZXJfZ3JpZC5wbmc) --- Step by step ------------ [ ![](https://www.toujou.de/_assets/processed/cLumg3MfPWaHoI3DolmjYWQwCXEyU3H6hXsclUgRFoM/q:85/c:1692.4444444445:952:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3BvcnRmb2xpb19nYWxsZXJ5LWNyZWF0ZV9lbGVtZW50LWVuX2QwN2IxYzdmNTA:t/cb:76a8e594ccacc1b673a2bbf45eb1c2be5b727e23/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDEwX3BvcnRmb2xpb19nYWxsZXJ5L3BvcnRmb2xpb19nYWxsZXJ5LWNyZWF0ZV9lbGVtZW50LWVuLnBuZw) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-010_portfolio_gallery/portfolio_gallery-create_element-en.png) ### Create element - To create a Portfolio Gallery, start by clicking on **+Content**. - Then, select the **Portfolio Gallery** option in the *Media* tab. [ ![](https://www.toujou.de/_assets/processed/X8XveWFKgZzK8hqO0B7MW62HC6f5c85usoInCWzqYYI/q:85/c:1692.4444444445:952:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3BvcnRmb2xpb19nYWxsZXJ5LWFkZF9tZWRpYS1lbl9kOTFkNzFkYzk5:t/cb:d27155aacaae3552508c8c239a6f212c5bb09201/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDEwX3BvcnRmb2xpb19nYWxsZXJ5L3BvcnRmb2xpb19nYWxsZXJ5LWFkZF9tZWRpYS1lbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-010_portfolio_gallery/portfolio_gallery-add_media-en.png) ### Add media - To add as many media elements as you want, click on the "General" tab, then under "Media Elements," choose one of the three options: **Add Media File, Select and Upload Files, or Add Media by URL**. (For all information on [uploading images](https://www.toujou.de/service/tutorials/page-content/image-editing/).) - The pictures will be displayed in the specified order. [ ![](https://www.toujou.de/_assets/processed/hpQpxzl5xQPiifSBIhMikpkJpjI9wSxmWSXnfJpyMqI/q:85/c:1692.4444444445:952:fp:0.5:0.5/rt:force/w:432/h:243/fn:Y3NtX3BvcnRmb2xpb19nYWxsZXJ5LWJ1dHRvbi1sYWJlbC1lbl8zZjFiOWEwM2Y1:t/cb:7f149757363bba41464819d09f3608fdba78f971/bG9jYWw6L2ZpbGVhZG1pbi9NYW51YWwvMDVfTWVkaWFfRWxlbWVudHMvMDUtMDEwX3BvcnRmb2xpb19nYWxsZXJ5L3BvcnRmb2xpb19nYWxsZXJ5LWJ1dHRvbi1sYWJlbC1lbi5wbmc) ](https://www.toujou.de/fileadmin/Manual/05_Media_Elements/05-010_portfolio_gallery/portfolio_gallery-button-label-en.png) ### Edit button text - To display text on the button, fill in the text field in the b*utton label* section. Alternatively, "Show All Media" is set by default. - **Save** your settings. --- Screen adaption --------------- You can use the element in both the header and the content area of a page. When placed in the header, it spans the full width of the screen, while in the content area, it adheres to the content width defined by the [theme](https://www.toujou.de/features/toujou-themes/). On desktop devices, a maximum of five images is displayed at once. If there are more than five media contents, the 'Show All Media' button automatically appears, which you can edit under the 'Edit Button Text' step at any time. Clicking on it will display the additional images using a lightbox. **Responsive**: From a width of at least 840px, the Portfolio Gallery is displayes as a grid. On devices with less width in pixels, the element is displayed as a slider. --- Linked topics ------------- [All media elements](https://www.toujou.de/service/element-library/media-elements/) [Image editing](https://www.toujou.de/service/tutorials/page-content/image-editing/) [File list](https://www.toujou.de/service/tutorials/file-list-module/)