---
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%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D1%8C'
title: 'Створення галереї зображень | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:59:35+00:00'
updated: '2026-10-24T20:15:47+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:15:47+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-24T19:59:35+0000'
      dateModified: '2026-10-24T20:15:47+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%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D1%8C'
      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%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D1%8C'
      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

- [Додавання зображення](/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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%8C-%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D1%8C)
- [Створення галереї портфоліо](/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)

Тут ви створюєте фотогалерею: центрований заголовок, три фото поруч із альтернативним текстом і слайдшоу на сірій смузі. Використовуйте її, щоб показати місце чи подію в зображеннях. Щоб показати проєкти, кожен із описом, натомість виконайте посібник [Створення галереї портфоліо](/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).

Відео створює галерею студентських картин для університету.

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

- Ваша роль має дозвіл **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. Введіть «Student art gallery» як **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**. Натисніть **+** на новому розділі й виберіть **Row**; спочатку він має два рівні стовпці.
2. Натисніть піктограму сітки рядка (**Column layout**), виберіть пресет **1/3 + 1/3 + 1/3** і натисніть **Save**.
3. Натисніть **+** у першому стовпці й виберіть **Image**.
4. Натисніть **Select Image**, знайдіть у медіабібліотеці за допомогою **Apply filters**, натисніть фото й натисніть **Insert selected**.
5. Відкрийте панель **SEO** і введіть **Alt attribute**: те, що має знати той, хто не бачить фото. Натисніть **Save**.
6. Повторіть для другого й третього стовпця.

Якщо фото обрізано в однакових пропорціях, рядок лишається рівним.

## Крок 3: додавання слайдшоу

1. Додайте третій розділ за допомогою **Add Section Below** і відкрийте його **More** > **Settings**. Виберіть **Align text center** у розділі **HTML classes** і світло-сірий **Background** на панелі **Style**. Натисніть **Save**.
2. Натисніть **+** на розділі й виберіть **Image carousel**.
3. Натисніть **Select Image**, знайдіть у бібліотеці, натисніть три фото й натисніть **Insert selected**, потім натисніть **Save**.
4. Натисніть **+** на розділі знову й виберіть **Text**; він стане над каруселлю. Введіть «Slideshow» як **Heading 2** і натисніть **Save**.

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

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

## Далі

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

- **Captions**: розмістіть **Card** у стовпці й додайте всередину елемент **Text** із підписом. Потім додайте **Image** усередині картки; він стане над підписом.
- **Full-size photos**: установіть **Image link** на повнорозмірний файл, а **Image link target** на **New window**.
- **Style**: на кожному зображенні встановіть **Border radius** на 4, а **Drop shadow** на 1 на панелі **Style** для м’якого підйому.
- **Slideshow timing**: установіть **Interval** на каруселі, у мілісекундах. У розділі **Hide** позначте **Hide pagination control** або **Hide prev/next buttons**, щоб прибрати ці елементи керування.
- **Gallery that fills itself**: у розділі **Structure** > **Views** > **Add view** створіть вигляд медіа типу Image з відображенням типу «блок» у форматі **Grid**. Вставте його з вкладки **Drupal Views**, і нові завантаження з’являтимуться самі.

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

Центрований заголовок відкриває сторінку, далі три фото поруч. На сірій смузі під ними слайдшоу показує по одному фото й переходить до наступного кожні п’ять секунд.

## Якщо фото виглядають не так, як показано

- **Insert selected не додає фото.** Бібліотека досі перезавантажувалася після **Apply filters**, тож ваше натискання не позначило фото. Зачекайте, доки сітка встоїться, перевірте, що фото показує позначку, і натисніть **Insert selected** знову.
- **Медіабібліотека порожня.** Зображення ще не завантажено або браузер медіа не налаштовано. Див. [Зображення не завантажуються чи зникають](/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%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F-%D1%96-%D0%BC%D0%B5%D0%B4%D1%96%D0%B0).
- **Три фото мають різну висоту.** Їхні пропорції різняться. Обріжте їх в однакових пропорціях, завантажте знову й виберіть нові копії.
- **Ваші зміни зникли після перезавантаження.** Ви покинули сторінку, не натиснувши **Save** на панелі інструментів конструктора. Якщо Save показує помилку, див. [Зміни не зберігаються](/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%B7%D0%B1%D0%B5%D1%80%D0%B5%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B5-%D0%B2%D0%B4%D0%B0%D1%94%D1%82%D1%8C%D1%81%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%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%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%BA%D0%B0%D1%80%D1%83%D1%81%D0%B5%D0%BB%D1%8C-%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D1%8C) для опцій слайдшоу
- [Портфоліо](/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) для сітки проєктів із фільтром