---
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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D1%96%D0%BE%D0%BD%D0%BE%D0%B2%D0%B0%D0%BD%D1%96-%D1%88%D0%B0%D1%80%D0%B8'
title: 'Додавання контейнера позиціонованих шарів | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:57:27+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Використовуйте позиціоновані шари, коли хочете, щоб елементи перекривалися або стояли в точному місці, чого рядки й стовпці не вміють. Ви отримуєте полотно, на якому перетягуєте кожен елемент куди хочете, наприклад заголовок поверх фото. Приклад накладає білий заголовок дня відкритих дверей поверх зображення.'
tags:
  - Layout
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T20:03:43+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:57:27+0000'
      dateModified: '2026-10-24T20:03:43+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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D1%96%D0%BE%D0%BD%D0%BE%D0%B2%D0%B0%D0%BD%D1%96-%D1%88%D0%B0%D1%80%D0%B8'
      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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D1%96%D0%BE%D0%BD%D0%BE%D0%B2%D0%B0%D0%BD%D1%96-%D1%88%D0%B0%D1%80%D0%B8'
      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/elements) /[Макет](/uk/hc/documentation/learn-dxpr-builder/layout/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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB%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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%BD%D1%96%D0%BC%D0%B0%D1%86%D1%96%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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D1%8F%D0%B4%D0%BA%D0%B8-%D1%96-%D1%81%D1%82%D0%BE%D0%B2%D0%BF%D1%86%D1%96) легше утримувати охайними на телефонах.

  ## Додавання контейнера позиціонованих шарів

1. Наведіть курсор на стовпець і натисніть **+** на його панелі керування або **+** посередині порожнього стовпця, щоб відкрити вибір елементів.
2. На вкладці **Layout** натисніть **Positioned layers**.
3. Спочатку відкриються його налаштування. Установіть **Height** так, щоб умістився найвищий шар, потім натисніть **Save**. З’явиться порожнє полотно.
4. Наведіть курсор на полотно й натисніть **+** на його панелі керування, щоб додати елемент, наприклад **Text** або **Image**. Кожен доданий елемент стає шаром, який можна позиціонувати.

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

Полотно зберігає задану висоту, і кожен шар лишається там, де ви його розмістили, поверх інших або під ними. Відвідувачі бачать композицію такою, як у редакторі. Позиції зберігаються як частка полотна, тож шар зберігає місце, коли полотно вужчає. Текст зберігає розмір, якщо ви не ввімкнете **Responsive**.

## Налаштування позиціонованих шарів

Відкрийте налаштування через **More** > **Settings** на панелі керування **Positioned layers**.

| Налаштування | Що робить | Стандартно |
|---|---|---|
| **Width** | Ширина полотна, наприклад 100% або 600px | 100% |
| **Height** | Висота полотна в пікселях | 500 |
| **Responsive** | Масштабує висоту полотна й текст разом із шириною полотна, тож композиція зберігає пропорції на малих екранах | Off |

## Позиціонування шарів

- **Select**: натисніть шар. На його кутах і краях з’являться маркери.
- **Move**: перетягніть шар за його ім’я на панелі керування, наприклад **Text** або **Image**. Шари лишаються всередині полотна.
- **Resize**: перетягніть маркер вибраного шару.
- **Add at a spot**: двічі натисніть порожню частину полотна. Відкриється вибір елементів, і новий елемент стане там, де ви натиснули.

Меню **More** кожного шару має чотири додаткові пункти. **100% width** і **100% height** розтягують шар через полотно. **Bring forward** і **Send backward** переміщують його над або під інші шари.

## Якщо елемент не відображається

- **Шар не рухається, коли ви його тягнете.** Шари рухаються лише за ручку із їхнім ім’ям на панелі керування. Наведіть курсор на шар і потягніть цю ручку.
- **Шар ховається за іншим.** Він міститься нижче в стосі. Відкрийте меню **More** шару й виберіть **Bring forward**.
- **Шари перекриваються або вилазять на телефонах.** **Responsive** вимкнено, тож висота полотна й текст зберігають розмір. Увімкніть **Responsive** у налаштуваннях **Positioned layers**.
- **Positioned layers немає у виборі всередині полотна.** Полотно не може містити інше полотно. Натомість додайте новий елемент **Positioned layers** до стовпця.
- **Positioned layers немає у виборі ніде.** Ваш профіль користувача DXPR Builder його не включає. Адміністратор позначає **Layers** у розділі **Elements** вашого профілю за адресою `/admin/dxpr_studio/dxpr_builder/profile`.

## Що далі?

- [Розділи](/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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB%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%BC%D0%B0%D0%BA%D0%B5%D1%82/%D0%B2%D0%BA%D0%BB%D0%B0%D0%B4%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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%BD%D1%96%D0%BC%D0%B0%D1%86%D1%96%D1%8F): нехай кожен шар з’являється з власним ефектом появи.