--- 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/%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB%D0%B8' title: 'Додавання розділу | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:19:04+00:00' updated: '2026-10-24T20:03:43+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Розділ це одна смуга вашої сторінки, наприклад hero-розділ угорі або сіра смуга функцій під ним. Ви даєте кожному розділу власне тло, колір тексту, відступи й висоту, потім наповнюєте його рядками чи вмістом. Прочитайте цю сторінку, щоб додавати й налаштовувати розділи; щоб поділити розділ на стовпці, див. Рядки й стовпці.' 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: 'Розділ це одна смуга вашої сторінки, наприклад hero-розділ угорі або сіра смуга функцій під ним. Ви даєте кожному розділу власне тло, колір тексту, відступи й висоту, потім наповнюєте його рядками чи вмістом. Прочитайте цю сторінку, щоб додавати й налаштовувати розділи; щоб поділити розділ на стовпці, див. Рядки й стовпці.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T19:19:04+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/%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB%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/%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB%D0%B8' description: 'Розділ це одна смуга вашої сторінки, наприклад hero-розділ угорі або сіра смуга функцій під ним. Ви даєте кожному розділу власне тло, колір тексту, відступи й висоту, потім наповнюєте його рядками чи вмістом. Прочитайте цю сторінку, щоб додавати й налаштовувати розділи; щоб поділити розділ на стовпці, див. Рядки й стовпці.' 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%D1%8F%D0%B4%D0%BA%D0%B8-%D1%96-%D1%81%D1%82%D0%BE%D0%B2%D0%BF%D1%86%D1%96) - [Надайте розділу кольоровий фон, фон із фото або градієнтом](/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%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) Розділ це одна смуга вашої сторінки, наприклад hero-розділ угорі або сіра смуга функцій під ним. Ви даєте кожному розділу власне тло, колір тексту, відступи й висоту, потім наповнюєте його рядками чи вмістом. Прочитайте цю сторінку, щоб додавати й налаштовувати розділи; щоб поділити розділ на стовпці, див. [Рядки й стовпці](/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). ## Додавання розділу Приклад створює темно-синій hero-розділ для клініки. Під ним іде світло-сірий розділ із трьома стовпцями. 1. Натисніть **Add Elements** на порожній сторінці й виберіть **Section** на вкладці **Layout**. Під наявним розділом натисніть **Add Section Below**, круглий плюс під ним. 2. Наведіть курсор на розділ, відкрийте **More** і виберіть **Settings**. 3. Налаштуйте весь розділ: тут **Align text center** у розділі **HTML classes**, темно-синій **Background** і білий **Font color**. Натисніть **Save**. 4. Натисніть **+** на розділі, щоб додати вміст просто в нього, або додайте **Row**, щоб поділити його на стовпці. 5. Натисніть **Save** на панелі інструментів, щоб зберегти сторінку. **Background** і **Font color** містяться на панелі **Style** діалогового вікна. Нові елементи стають угорі розділу, тож додавайте найнижчий першим: у відео кнопка додається перед заголовком. ## Що ви бачите Темно-синя смуга заповнює вікно від краю до краю. Її заголовок і кнопка лишаються в центрованому блоці, внутрішньому контейнері розділу. Сірий розділ починається одразу під ним, із трьома стовпцями функцій у тому самому центрованому блоці. Кожен новий розділ уже має клас **Vertical padding size 5 (py-5)**у розділі **HTML classes**. Цей клас дає йому простір над і під його вмістом. ## Налаштування розділу Діалогове вікно налаштувань має п’ять панелей: **General**, **Background effects**, **Animation**, **Style** і **Hover style**. Лише розділи мають **Background effects**. | Налаштування | Панель | Що робить | Стандартно | |---|---|---|---| | **Full width** | General | Рядки йдуть від краю до краю замість центрованого контейнера | Off | | **100% height** | General | Розділ заввишки принаймні як вікно браузера | Off | | **Vertical centering** | General | Вміст перебуває посередині по вертикалі розділу, вищого за нього | Off | | **HTML ID** | General | Ім’я якоря, щоб посилання на `#name` стрибало до цього розділу | Empty | | **HTML classes** | General | Службові класи, як-от **Align text center** або розмір відступів | **Vertical padding size 5 (py-5)** | | **Background effect** | Background effects | **Simple image**, **Fixed image**, **Parallax image**, **Gradient** або **YouTube video** | **Simple image** | | **Background**, **Font color** | Style | Колір за розділом і колір його тексту | None: тема вирішує | Тло завжди охоплює весь розділ незалежно від **Full width**. Ефекти зображень рухають **Background image**, яке ви вибираєте на панелі **Style**; сторінка [Тла](/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) показує кожен ефект. Для більшого чи меншого простору замініть **Vertical padding size 5 (py-5)** на менший розмір або **No vertical padding (py-0)**. Для точних пікселів використовуйте блокову модель на панелі **Style**, як пояснює сторінка [Відступи](/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%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D1%96%D0%B2/%D0%B2%D1%96%D0%B4%D1%81%D1%82%D1%83%D0%BF%D0%B8). ## Рецепти розділів | Розділ | Налаштування, що його створюють | |---|---| | Hero | **100% height** і **Vertical centering** увімкнено, ефект **Parallax image**, заголовок і кнопка | | Features | Світлий **Background**, заголовок, потім рядок із трьох стовпців | | Call to action | Насичений **Background**, **Align text center**, один короткий рядок і кнопка | | Testimonials | Світлий **Background** і рядок із трьох стовпців, кожен із **Block quote** | [Проєктування hero-розділу](/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/hero-%D1%80%D0%BE%D0%B7%D0%B4%D1%96%D0%BB) створює перший крок за кроком. ## Якщо елемент не відображається - **Порожня сторінка не має кнопки Add Elements.** Помічник створення сторінок вимкнено, тож порожня сторінка пропонує лише **Choose a template**. Натисніть порожню область, щоб відкрити вибір елементів, або увімкніть **Enable page creation assistant** за адресою `/admin/dxpr_studio/dxpr_builder/ai_settings`. - **Немає кнопки Add Section Below.** Її мають лише розділи, розміщені просто на сторінці, а не розділ усередині стовпця чи вкладки. Натомість натисніть **+** на стовпці. - **Вертикальне центрування нічого не змінює.** Розділ заввишки лише як його вміст, тож немає простору для центрування. Увімкніть також **100% height**. - **Full width ніби нічого не робить.** Тло вже охоплює весь розділ; **Full width** лише виносить рядки до його країв. З коротким текстом в одному стовпці зміну важко помітити. - **З’явився розділ, якого ви не додавали.** Ви вибрали **Row** або елемент вмісту на порожній сторінці, а кожен елемент потребує розділу навколо себе. DXPR Builder додав його за вас; відкрийте його налаштування, як будь-які інші. ## Що далі? - [Рядки й стовпці](/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): поділіть розділ на стовпці. - [Тла](/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%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): коли дозволити рядкам іти від краю до краю.