---
url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%B3%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F-%D0%BF%D0%BE%D1%80%D1%82%D1%84%D0%BE%D0%BB%D1%96%D0%BE'
title: 'Створення галереї портфоліо | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T20:07:45+00:00'
updated: '2026-10-24T20:08:10+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Тут ви створюєте сторінку портфоліо: центрований заголовок, три проєкти поруч із фото обкладинки й однорядковим результатом кожен, і заклик до дії. Використовуйте її, щоб показати роботи одним поглядом і дати кожному проєкту посилання на його історію. Щоб детально описати один проєкт, виконайте посібник Створення кейса.'
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T20:08:10+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Створення галереї портфоліо'
      description: 'Тут ви створюєте сторінку портфоліо: центрований заголовок, три проєкти поруч із фото обкладинки й однорядковим результатом кожен, і заклик до дії. Використовуйте її, щоб показати роботи одним поглядом і дати кожному проєкту посилання на його історію. Щоб детально описати один проєкт, виконайте посібник Створення кейса.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T20:07:45+0000'
      dateModified: '2026-10-24T20:08:10+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/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%B3%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F-%D0%BF%D0%BE%D1%80%D1%82%D1%84%D0%BE%D0%BB%D1%96%D0%BE'
      articleSection: 'Покрокові інструкції'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%B3%D0%B0%D0%BB%D0%B5%D1%80%D0%B5%D1%8F-%D0%BF%D0%BE%D1%80%D1%82%D1%84%D0%BE%D0%BB%D1%96%D0%BE'
      description: 'Тут ви створюєте сторінку портфоліо: центрований заголовок, три проєкти поруч із фото обкладинки й однорядковим результатом кожен, і заклик до дії. Використовуйте її, щоб показати роботи одним поглядом і дати кожному проєкту посилання на його історію. Щоб детально описати один проєкт, виконайте посібник Створення кейса.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/uk'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: uk
---
[Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Покрокові інструкції](/uk/hc/documentation/learn-dxpr-builder/tutorials/overview) # Створення галереї портфоліо.

 Вивчення DXPR BuilderСтворення сторінокПокрокові інструкції

   ## In this guide

 Related guides

- [Показ вигляду Drupal на сторінці](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%96%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B0%D1%86%D1%96%D1%97/drupal-%D0%B2%D0%B8%D0%B3%D0%BB%D1%8F%D0%B4%D0%B8)
- [Створення кейса](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BA%D0%B5%D0%B9%D1%81)
- [Додавання зображення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F)

Тут ви створюєте сторінку портфоліо: центрований заголовок, три проєкти поруч із фото обкладинки й однорядковим результатом кожен, і заклик до дії. Використовуйте її, щоб показати роботи одним поглядом і дати кожному проєкту посилання на його історію. Щоб детально описати один проєкт, виконайте посібник [Створення кейса](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BA%D0%B5%D0%B9%D1%81).

Відео створює сторінку агенції під назвою «Our work».

  ## Перед початком

- Ваша роль має дозвіл **Edit with DXPR Builder**.
- Медіабібліотека містить фото обкладинки для кожного проєкту, обрізані в однакових пропорціях.
- Сторінка відкрита в конструкторі. Для нової перейдіть до **Content** > **Add content** > **Landing Page** (`/node/add/landing_page`) і натисніть **Save**.
- Нові елементи стають угорі свого стовпця, тож кожне фото обкладинки додавайте після свого тексту.

## Крок 1: додавання заголовка

1. Натисніть **Add Elements** на порожній сторінці й виберіть **Section** на вкладці **Layout**.
2. Наведіть курсор на розділ і відкрийте **More** > **Settings**. У розділі **HTML classes** виберіть **Align text center**, потім натисніть **Save**.
3. Натисніть **+** на розділі й виберіть **Text** на вкладці **Content**.
4. Введіть «Our work» як **Heading 2**, додайте один рядок вступу й натисніть **Save**. Тема виводить заголовок сторінки як Heading 1 сторінки. Щоб натомість зробити цей заголовок Heading 1, див. [Створення SEO-дружніх сторінок](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/seo#step-1-start-the-content-at-heading-2).

## Крок 2: додавання сітки проєктів

1. Наведіть курсор на розділ і натисніть **Add Section Below**. Відкрийте **More** > **Settings** нового розділу, виберіть світло-сірий **Background** на панелі **Style** і натисніть **Save**.
2. Натисніть **+** на розділі й виберіть **Row**; спочатку він має два рівні стовпці. Натисніть його піктограму сітки (**Column layout**), виберіть пресет **1/3 + 1/3 + 1/3** і натисніть **Save**.
3. Натисніть **+** у першому стовпці й виберіть **Text**. Введіть назву проєкту як **Heading 3**, додайте однорядковий результат і натисніть **Save**.
4. Натисніть **+** у тому самому стовпці й виберіть **Image**; він стане над текстом. Натисніть **Select Image**, позначте фото обкладинки й натисніть **Insert selected**. Введіть **Alt attribute** на панелі **SEO** і натисніть **Save**.
5. Повторіть для другого й третього стовпця.

## Крок 3: додавання заклику до дії

1. Додайте третій розділ за допомогою **Add Section Below** і відкрийте його **More** > **Settings**. Виберіть **Align text center** у розділі **HTML classes**, потім фіолетовий **Background** і білий **Font color** на панелі **Style**. Натисніть **Save**.
2. Натисніть **+** на розділі й виберіть **Button**. Установіть **Title** на «Contact us», **Link** на `/contact`, **Type** на **Light** і **Size** на **Large**, потім натисніть **Save**.
3. Натисніть **+** знову й виберіть **Text**; він стане над кнопкою. Введіть «Let's work together» як **Heading 2** і додайте один рядок. Установіть **Font color** на білий на панелі **Style** і натисніть **Save**.

## Крок 4: збереження й попередній перегляд

1. Натисніть **Save** на панелі інструментів конструктора.
2. Відкрийте меню перегляду (**піктограма ока**) і виберіть **Preview**.

## Далі

Не показано у відео:

- **Link each project**: установіть **Image link** на фото обкладинки на сторінку кейса.
- **Lift on hover**: на панелі **Style** кожного зображення встановіть **Border radius** на 4, а **Drop shadow** на 1. У розділі **Hover style** підніміть **Drop shadow** до 3.
- **More projects**: додайте ще один **Row** із тим самим пресетом під першим.

## Додавання фільтрів до сітки

Статична сітка пасує жменьці проєктів. Щоб відвідувачі фільтрували за типом, зберігайте кожен проєкт як вміст і показуйте їх виглядом із відкритим фільтром. Views це частина ядра Drupal.

### 1. Створення типу вмісту Portfolio

1. Перейдіть до **Structure** > **Content types** > **Add content type** (`/admin/structure/types/add`).
2. Назвіть його «Portfolio» й збережіть.
3. На вкладці **Manage fields** додайте поле **Image** з міткою «Cover image».
4. Додайте поле **List (text)** з міткою «Project type» зі значеннями, як-от `web|Web`, `branding|Branding` і `campaign|Campaign`.
5. Створіть кілька матеріалів Portfolio в розділі **Content** > **Add content** > **Portfolio**.

### 2. Створення вигляду

1. Перейдіть до **Structure** > **Views** > **Add view** (`/admin/structure/views/add`).
2. Назвіть його «Portfolio grid»; у розділі **View settings** показуйте **Content** типу **Portfolio**.
3. Позначте **Create a block**, установіть формат відображення на **Grid** із **fields** і збережіть.
4. У редакторі вигляду додайте поля **Cover image** і **Title** і встановіть сітку на 3 стовпці в її налаштуваннях формату.
5. У розділі **Filter criteria** натисніть **Add**, виберіть **Project type** і позначте **Expose this filter to visitors**. Підпишіть його «Filter by type».
6. У розділі **Advanced** установіть **Use AJAX** на Yes. Відкриті фільтри на сторінці конструктора працюють лише через AJAX.
7. Збережіть вигляд.

### 3. Вставлення вигляду на сторінку

1. Назад у DXPR Builder: спорожніть три статичні стовпці або додайте новий **Row**.
2. Натисніть **+**, відкрийте вкладку **Drupal Views** і виберіть **View: Portfolio grid (Block)**.
3. У діалоговому вікні налаштувань позначте **Show exposed filters** і натисніть **Save**. Сітка покажеться з розкривним списком «Filter by type» над нею, а нові матеріали Portfolio з’являтимуться самі.
4. Натисніть **Save** на панелі інструментів конструктора.

## Що ви бачите

Центрований заголовок «Our work» відкриває сторінку. На сірій смузі під ним три проєкти стоять поруч, кожен це фото обкладинки над назвою й результатом. Фіолетова смуга завершує сторінку кнопкою **Contact us**.

## Якщо сторінка виглядає не так, як показано

- **Фото обкладинки опинилося під своїм текстом.** Фото додано перед текстом, а нові елементи стають угорі свого стовпця. Перетягніть фото над текст за ручку перетягування на його панелі керування.
- **Обкладинки мають різну висоту.** Їхні пропорції різняться. Обріжте їх в однакових пропорціях, завантажте знову й виберіть нові копії.
- **Portfolio grid немає на вкладці Drupal Views.** Вигляд вимкнено або ваш профіль користувача DXPR Builder його ховає. Увімкніть його в розділі **Structure** > **Views** або попросіть адміністратора позначити його в розділі **Views** вашого профілю користувача.
- **Редактор показує «Turn on Ajax on this view to use exposed filters.»** Вигляд не використовує AJAX. Установіть **Use AJAX** на Yes у розділі **Advanced** редактора вигляду; див. [Елемент виглядає чи поводиться неправильно](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%83%D1%81%D1%83%D0%BD%D0%B5%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B5%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D0%B5%D0%B9/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8-%D0%B2%D0%B8%D0%B3%D0%BB%D1%8F%D0%B4%D0%B0%D1%8E%D1%82%D1%8C-%D0%BD%D0%B5%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D1%8C%D0%BD%D0%BE).
- **Розкривного списку «Filter by type» бракує.** **Show exposed filters** вимкнено на елементі. Відкрийте налаштування елемента вигляду, позначте його й натисніть **Save**.

## Що далі?

- [Інтеграція виглядів Drupal](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%96%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B0%D1%86%D1%96%D1%97/drupal-%D0%B2%D0%B8%D0%B3%D0%BB%D1%8F%D0%B4%D0%B8): як відображення виглядів потрапляють до вибору елементів
- [Кейс](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BA%D0%B5%D0%B9%D1%81) для сторінки, на яку посилається кожен проєкт
- [Елемент зображення](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F) для кожного налаштування зображення