---
url: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
title: 'Galeria portfolio. | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T02:46:35+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Tu zbudujesz stronę portfolio: wyśrodkowany nagłówek, trzy
  projekty obok siebie ze zdjęciem okładki i jednolinijkowym wynikiem
  każdy oraz wezwanie do działania. Użyj jej, aby pokazać prace
  w skrócie i podlinkować każdy projekt do jego historii. Jeden
  projekt w głębi opisz zamiast tego według
  studium przypadku.
  Film buduje stronę agencji o nazwie „Our work”.
tags:
  - 'Volg een tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Galeria portfolio.'
      description: |-
        Tu zbudujesz stronę portfolio: wyśrodkowany nagłówek, trzy
        projekty obok siebie ze zdjęciem okładki i jednolinijkowym wynikiem
        każdy oraz wezwanie do działania. Użyj jej, aby pokazać prace
        w skrócie i podlinkować każdy projekt do jego historii. Jeden
        projekt w głębi opisz zamiast tego według
        studium przypadku.
        Film buduje stronę agencji o nazwie „Our work”.
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T02:46:35+0000'
      dateModified: '2026-10-24T09:09:48+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
      articleSection: 'Volg een tutorial'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/pl/hc/documentation/learn-dxpr-builder/tutorials/portfolio-gallery'
      description: |-
        Tu zbudujesz stronę portfolio: wyśrodkowany nagłówek, trzy
        projekty obok siebie ze zdjęciem okładki i jednolinijkowym wynikiem
        każdy oraz wezwanie do działania. Użyj jej, aby pokazać prace
        w skrócie i podlinkować każdy projekt do jego historii. Jeden
        projekt w głębi opisz zamiast tego według
        studium przypadku.
        Film buduje stronę agencji o nazwie „Our work”.
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: 'Strona Główna'
            item: 'https://dxpr.com/pl'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: pl
---
[Help Center](/pl/hc)/[Documentation](/pl/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Volg een tutorial](/hc/documentation/learn-dxpr-builder/tutorials/overview) # Galeria portfolio..

 Learn DXPR BuilderBuild pagesVolg een tutorial

   ## In this guide

 Related guides

- [Pokaż widok Drupala na swojej stronie.](/pl/hc/documentation/learn-dxpr-builder/integrations/drupal-views)
- [Napisz studium przypadku.](/pl/hc/documentation/learn-dxpr-builder/tutorials/case-study)
- [Dodawanie obrazu](/pl/hc/documentation/learn-dxpr-builder/elements/image)

Tu zbudujesz stronę portfolio: wyśrodkowany nagłówek, trzy projekty obok siebie ze zdjęciem okładki i jednolinijkowym wynikiem każdy oraz wezwanie do działania. Użyj jej, aby pokazać prace w skrócie i podlinkować każdy projekt do jego historii. Jeden projekt w głębi opisz zamiast tego według [studium przypadku](/pl/hc/documentation/learn-dxpr-builder/tutorials/case-study).

Film buduje stronę agencji o nazwie „Our work”.

  ## Zanim zaczniesz

- Twoja rola ma uprawnienie **Edit with DXPR Builder**.
- Biblioteka mediów trzyma zdjęcie okładki każdego projektu, przycięte do tych samych proporcji.
- Strona jest otwarta w kreatorze. Nową utworzysz w **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) przyciskiem **Save**.
- Nowe elementy lądują na górze kolumny, więc każde zdjęcie okładki wchodzi po swoim tekście.

## Krok 1: dodaj nagłówek

1. Kliknij **Add Elements** na pustej stronie i wybierz **Section** z karty **Layout**.
2. Najedź na sekcję i otwórz **More** > **Settings**. W **HTML classes** wybierz **Align text center**, a potem kliknij **Save**.
3. Kliknij **+** na sekcji i wybierz **Text** z karty **Content**.
4. Wpisz „Our work” jako **Heading 2**, dodaj jedną linijkę wprowadzenia i kliknij **Save**. Motyw drukuje tytuł strony jako jej nagłówek Heading 1. Aby ten nagłówek stał się nagłówkiem Heading 1, zobacz [projektowanie stron przyjaznych SEO](/pl/hc/documentation/learn-dxpr-builder/tutorials/seo#step-1-start-the-content-at-heading-2).

## Krok 2: dodaj siatkę projektów

1. Najedź na sekcję i kliknij **Add Section Below**. Otwórz **More** > **Settings** nowej sekcji, wybierz jasnoszary **Background** w panelu **Style** i kliknij **Save**.
2. Kliknij **+** na sekcji i wybierz **Row**; powstaje z dwiema równymi kolumnami. Kliknij jej ikonę siatki (**Column layout**), wybierz preset **1/3 + 1/3 + 1/3** i kliknij **Save**.
3. Kliknij **+** w pierwszej kolumnie i wybierz **Text**. Wpisz nazwę projektu jako **Heading 3**, dodaj jednolinijkowy wynik i kliknij **Save**.
4. Kliknij **+** w tej samej kolumnie i wybierz **Image**; ląduje nad tekstem. Kliknij **Select Image**, zaznacz zdjęcie okładki i kliknij **Insert selected**. Wpisz **Alt attribute** w panelu **SEO** i kliknij **Save**.
5. Powtórz dla drugiej i trzeciej kolumny.

## Krok 3: dodaj wezwanie do działania

1. Dodaj trzecią sekcję opcją **Add Section Below** i otwórz jej **More** > **Settings**. Wybierz **Align text center** w **HTML classes**, potem fioletowy **Background** i biały **Font color** w panelu **Style**. Kliknij **Save**.
2. Kliknij **+** na sekcji i wybierz **Button**. Ustaw **Title** na „Contact us”, **Link** na `/contact`, **Type** na **Light**, a **Size** na **Large**, a potem kliknij **Save**.
3. Kliknij **+** jeszcze raz i wybierz **Text**; ląduje nad przyciskiem. Wpisz „Let's work together” jako **Heading 2** i dodaj jedną linijkę. Ustaw **Font color** na biały w panelu **Style** i kliknij **Save**.

## Krok 4: zapisz i podejrzyj

1. Kliknij **Save** na pasku narzędzi DXPR Builder.
2. Otwórz menu widoku (**ikona oka**) i wybierz **Preview**.

## Idź dalej

Niepokazane w filmie:

- **Podlinkuj każdy projekt**: ustaw **Image link** na zdjęciu okładki na stronę studium przypadku.
- **Uniesienie po najechaniu**: w panelu **Style** każdego zdjęcia ustaw **Border radius** na 4 i **Drop shadow** na 1. W **Hover style** podnieś **Drop shadow** do 3.
- **Kolejne projekty**: dodaj kolejny **Row** z tym samym presetem pod pierwszym.

## Siatka z filtrem

Statyczna siatka sprawdza się przy kilku projektach. Aby odwiedzający filtrowali według rodzaju, przechowaj każdy projekt jako treść i pokaż je widokiem z odsłoniętym filtrem. Views jest częścią rdzenia Drupala.

### 1. Utwórz rodzaj treści Portfolio

1. Przejdź do **Structure** > **Content types** > **Add content type** (`/admin/structure/types/add`).
2. Nazwij go „Portfolio” i zapisz.
3. Na karcie **Manage fields** dodaj pole **Image** o etykiecie „Cover image”.
4. Dodaj pole **List (text)** o etykiecie „Project type” z wartościami takimi jak `web|Web`, `branding|Branding` i `campaign|Campaign`.
5. Utwórz kilka elementów Portfolio w **Content** > **Add content** > **Portfolio**.

### 2. Zbuduj widok

1. Przejdź do **Structure** > **Views** > **Add view** (`/admin/structure/views/add`).
2. Nazwij go „Portfolio grid”; w **View settings** pokazuj **Content** rodzaju **Portfolio**.
3. Zaznacz **Create a block**, ustaw format wyświetlania na **Grid** z **fields** i zapisz.
4. W edytorze widoku dodaj pola **Cover image** i **Title** oraz ustaw siatkę na 3 kolumny w jej ustawieniach formatu.
5. W **Filter criteria** kliknij **Add**, wybierz **Project type** i zaznacz **Expose this filter to visitors**. Nazwij go „Filter by type”.
6. W **Advanced** ustaw **Use AJAX** na Yes. Odsłonięte filtry na stronie kreatora działają tylko przez AJAX.
7. Zapisz widok.

### 3. Wstaw widok na stronę

1. Wróć do DXPR Builder, opróżnij trzy statyczne kolumny albo dodaj nowy **Row**.
2. Kliknij **+**, otwórz kartę **Drupal Views** i wybierz **View: Portfolio grid (Block)**.
3. W oknie ustawień zaznacz **Show exposed filters** i kliknij **Save**. Siatka renderuje się z listą „Filter by type” nad nią, a nowe elementy Portfolio pojawiają się same.
4. Kliknij **Save** na pasku narzędzi kreatora.

## Efekt

Wyśrodkowany nagłówek „Our work” otwiera stronę. Na szarym pasie pod spodem trzy projekty stoją obok siebie, każdy ze zdjęciem okładki nad nazwą i wynikiem. Fioletowy pas zamyka stronę przyciskiem **Contact us**.

## Jeśli nie widzisz strony jak na filmie

- **Zdjęcie okładki siada pod tekstem.** Zdjęcie weszło przed tekstem, a nowe elementy lądują na górze kolumny. Przeciągnij zdjęcie nad tekst za uchwyt na jego pasku sterowania.
- **Okładki mają różne wysokości.** Ich proporcje się różnią. Przytnij je do tych samych proporcji, wgraj ponownie i wybierz nowe kopie.
- **Widoku Portfolio grid nie ma na karcie Drupal Views.** Widok jest wyłączony albo twój profil użytkownika DXPR Builder go ukrywa. Włącz go w **Structure** > **Views** albo poproś administratora o zaznaczenie go w **Views** w twoim profilu użytkownika.
- **Edytor pokazuje „Turn on Ajax on this view to use exposed filters.”** Widok nie używa mechanizmu Ajax. Ustaw **Use AJAX** na Yes w **Advanced** w edytorze widoku; zobacz [Element wygląda albo działa źle](/pl/hc/documentation/learn-dxpr-builder/troubleshooting/elements-look-wrong).
- **Listy „Filter by type” nie ma.** **Show exposed filters** jest wyłączone na elemencie. Otwórz ustawienia elementu widoku, zaznacz je i kliknij **Save**.

## Co dalej?

- [Integracja widoków Drupala](/pl/hc/documentation/learn-dxpr-builder/integrations/drupal-views) o tym, jak wyświetlania widoków trafiają do selektora elementów
- [Studium przypadku](/pl/hc/documentation/learn-dxpr-builder/tutorials/case-study) o stronie, do której linkuje każdy projekt
- [Element Zdjęcie](/pl/hc/documentation/learn-dxpr-builder/elements/image) o każdym ustawieniu zdjęć