---
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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D0%B8-%D0%BD%D0%B0-%D0%BF%D0%BE%D0%B2%D0%BD%D1%83-%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%83'
title: 'Розтягніть розділ від краю до краю | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:59:16+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Ви можете дозволити вмісту розділу йти від краю до краю або тримати його в контейнері по центру, поки фон заповнює вікно. Вирішує один перемикач на розділі: Full width. У прикладі будується сірий розділ із трьома колонками, а потім вмикається Full width, щоб колонки розтягнулися. Про заливки кольором і фото див. Фони.'
tags:
  - 'Design guides'
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: 'Ви можете дозволити вмісту розділу йти від краю до краю або тримати його в контейнері по центру, поки фон заповнює вікно. Вирішує один перемикач на розділі: Full width. У прикладі будується сірий розділ із трьома колонками, а потім вмикається Full width, щоб колонки розтягнулися. Про заливки кольором і фото див. Фони.'
      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:16+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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D0%B8-%D0%BD%D0%B0-%D0%BF%D0%BE%D0%B2%D0%BD%D1%83-%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%83'
      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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%BC%D0%B0%D0%BA%D0%B5%D1%82%D0%B8-%D0%BD%D0%B0-%D0%BF%D0%BE%D0%B2%D0%BD%D1%83-%D1%88%D0%B8%D1%80%D0%B8%D0%BD%D1%83'
      description: 'Ви можете дозволити вмісту розділу йти від краю до краю або тримати його в контейнері по центру, поки фон заповнює вікно. Вирішує один перемикач на розділі: Full width. У прикладі будується сірий розділ із трьома колонками, а потім вмикається Full width, щоб колонки розтягнулися. Про заливки кольором і фото див. Фони.'
      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/element-settings) /[Посібники з дизайну](/uk/hc/documentation/learn-dxpr-builder/design/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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%84%D0%BE%D0%BD%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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD)

Ви можете дозволити вмісту розділу йти від краю до краю або тримати його в контейнері по центру, поки фон заповнює вікно. Вирішує один перемикач на розділі: **Full width**. У прикладі будується сірий розділ із трьома колонками, а потім вмикається **Full width**, щоб колонки розтягнулися. Про заливки кольором і фото див. [Фони](/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/%D1%84%D0%BE%D0%BD%D0%B8).

Відео будує сірий розділ із 3 колонками, а потім дозволяє його вмісту йти від краю до краю.

  ## Побудова розділу в контейнері

1. Натисніть **Add Elements** у порожній області вмісту й виберіть **Section** на вкладці **Layout**.
2. Наведіть курсор на розділ, відкрийте **More** і виберіть **Settings**.
3. Відкрийте панель **Style** і виберіть світло-сірий **Background**.
4. Натисніть **Save**. Сірий уже простягається на все вікно.
5. Натисніть **+** на розділі й виберіть **Row**.
6. Натисніть піктограму сітки на рядку, виберіть плитку з трьома рівними колонками й натисніть **Save**.
7. У кожній колонці натисніть **+**, виберіть **Text** на вкладці **Content**, введіть **Heading 4** і один рядок, а потім натисніть **Save**.

Три колонки тепер стоять у відцентрованому контейнері на сірій смузі.

## Увімкнення Full width

1. Відкрийте **More** на розділі й виберіть **Settings**.
2. На панелі **General** увімкніть **Full width**.
3. Натисніть **Save**.
4. Натисніть **Save** на панелі інструментів DXPR Builder.
5. Відкрийте меню перегляду, піктограму ока на панелі інструментів, і виберіть **Preview**.

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

Сіра смуга виглядає так само, як раніше. Змінився лише контейнер вмісту: перша колонка тепер починається від лівого краю розділу, а остання закінчується біля правого краю.

Кожен розділ має дві частини: зовнішній елемент, що несе фон, і внутрішній контейнер, що тримає рядки. **Full width** змінює лише внутрішній контейнер. Вимкнений, він відцентрований з максимальною шириною; ввімкнений, він розтягується до країв розділу.

## Налаштування

Панель **General** розділу містить три перемикачі макета, усі типово вимкнені:

| Налаштування | Що робить |
|---|---|
| **Full width** | Рядки заповнюють розділ від краю до краю замість відцентрованого контейнера |
| **100% height** | Розділ заввишки щонайменше як вікно браузера |
| **Vertical centering** | Рядки стоять посередині розділу по вертикалі |

Рядки не мають власного налаштування ширини; вирішує розділ.

## Два шаблони

- **Фон від краю до краю, текст у контейнері**: звичайна шапка-герой. Залиште **Full width** вимкненим і встановіть фон на панелі **Style** або **Background effects**.
- **Вміст від краю до краю**: смуга карток або зображень. Увімкніть **Full width** і надайте колонкам трохи **Padding**, якщо текст стоїть надто близько до краю вікна.

## Якщо ви не бачите зміни

- **Нічого не змінюється, коли ви вмикаєте Full width.** На вузькому екрані, наприклад телефоні, версія в контейнері вже заповнює ширину. Розширте вікно браузера й подивіться знову.
- **Фон не доходить до країв вікна.** Ваша тема розміщує вміст сторінки у фіксованій області, і розділ може заповнити лише цю область. Виберіть у своїй темі макет сторінки або область на повну ширину.
- **Текст торкається краю вікна.** Саме це й робить **Full width**. Додайте **Padding** на панелі **Style** колонок або залиште **Full width** вимкненим.

## Що далі?

- [Заповніть розділ кольором, фото або градієнтом](/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/%D1%84%D0%BE%D0%BD%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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D0%B8%D0%B9-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD): керуйте тим, як колонки поводяться на малих екранах.