--- 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/%D1%84%D0%BE%D0%BD%D0%B8' title: 'Надайте розділу кольоровий фон, фон із фото або градієнтом | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:58:24+00:00' updated: '2026-10-24T20:03:43+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Ви можете заповнити будь-який розділ кольором, фото або градієнтом. Колір і фото беруться з панелі Style, яку мають усі розділи, рядки, колонки й елементи. Розділи додають панель Background effects для градієнтів, фіксованих і паралаксних фото та відео YouTube. У прикладі будується темно-синій розділ із фото міста, білим текстом і градієнтом зверху. Відео додає фото за розділом, а потім накриває його градієнтом. 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: |- Ви можете заповнити будь-який розділ кольором, фото або градієнтом. Колір і фото беруться з панелі Style, яку мають усі розділи, рядки, колонки й елементи. Розділи додають панель Background effects для градієнтів, фіксованих і паралаксних фото та відео YouTube. У прикладі будується темно-синій розділ із фото міста, білим текстом і градієнтом зверху. Відео додає фото за розділом, а потім накриває його градієнтом. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T19:58:24+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/%D1%84%D0%BE%D0%BD%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%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/%D1%84%D0%BE%D0%BD%D0%B8' description: |- Ви можете заповнити будь-який розділ кольором, фото або градієнтом. Колір і фото беруться з панелі Style, яку мають усі розділи, рядки, колонки й елементи. Розділи додають панель Background effects для градієнтів, фіксованих і паралаксних фото та відео YouTube. У прикладі будується темно-синій розділ із фото міста, білим текстом і градієнтом зверху. Відео додає фото за розділом, а потім накриває його градієнтом. 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/%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) - [Анімація елементів під час прокручування, наведення чи натискання](/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) - [Проєктування 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) Ви можете заповнити будь-який розділ кольором, фото або градієнтом. Колір і фото беруться з панелі **Style**, яку мають усі розділи, рядки, колонки й елементи. Розділи додають панель **Background effects** для градієнтів, фіксованих і паралаксних фото та відео YouTube. У прикладі будується темно-синій розділ із фото міста, білим текстом і градієнтом зверху. Відео додає фото за розділом, а потім накриває його градієнтом. ## Додавання кольору та фото 1. Натисніть **Add Elements** у порожній області вмісту й виберіть **Section** на вкладці **Layout**. 2. Наведіть курсор на розділ і відкрийте **More > Settings**. 3. Відкрийте панель **Style**. 4. Виберіть темно-синій зразок для **Background**. 5. Виберіть білий для **Font color**. 6. У розділі **Background image** натисніть **Select Image**. Знайдіть у медіабібліотеці, позначте фото й натисніть **Insert selected**. 7. Установіть **Background style** у значення **Cover**. 8. Установіть **Background position** у значення **Center center** і натисніть **Save**. 9. Натисніть **+** на розділі й виберіть **Text** на вкладці **Content**. 10. Введіть заголовок, наприклад `Evening lectures`, і один рядок під ним. Установіть для заголовка **Heading 2** і відцентруйте обидва рядки на панелі інструментів редактора. 11. Відкрийте панель **Style**, установіть **Font color** у білий колір і натисніть **Save**. ## Додавання градієнта 1. Знову наведіть курсор на розділ і відкрийте **More > Settings**. 2. Відкрийте панель **Background effects** і встановіть **Background effect** у значення **Gradient**. 3. Виберіть **Start color** і **End color**, потім натисніть **Save**. 4. Натисніть **Save** на панелі інструментів, відкрийте меню перегляду (піктограма ока) і виберіть **Preview**. ## Що ви бачите Після перших кроків фото заповнює весь розділ за білим заголовком. **Cover** обрізає те, що не вміщується, а **Center center** тримає середину фото в полі зору. Темно-синій колір видно лише доки фото завантажується або там, куди фото не сягає. Градієнт переходить від початкового кольору вгорі до кінцевого кольору внизу. Він лежить поверх фото. Непрозорі кольори повністю накривають фото; кольори з певною прозорістю дають йому просвічувати. ## Налаштування ### Панель Style (кожен розділ, рядок, колонка й елемент) | Налаштування | Що робить | Типово | |---|---|---| | **Background** | Колір заливки з вибору кольору або зразка теми | Немає | | **Background image** | Зображення з медіабібліотеки, вибране через **Select Image** | Немає | | **Background style** | **Cover** заповнює елемент і обрізає; **Contain** показує все зображення й може лишати проміжки; **No repeat** показує його один раз у власному розмірі; **Repeat** мозаїчить його | **Theme defaults** | | **Background position** | Яка частина зображення лишається в полі зору після обрізання, наприклад **Center center** або **Left top** | **Theme defaults** | Коли налаштовано створення зображень ШІ, **Background image** також приймає промпт. Див. [Створення зображень ШІ](/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%88%D1%96/%D1%81%D1%82%D0%B2%D0%BE%D1%80%D0%B5%D0%BD%D0%BD%D1%8F-%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D1%8C). ### Панель Background effects (лише розділи) | Ефект фону | Що робить | Додаткові налаштування | |---|---|---| | **Simple image** (типово) | Фото прокручується разом зі сторінкою | Немає | | **Fixed image** | Фото лишається на місці, поки сторінка прокручується поверх нього | Немає | | **Parallax image** | Фото рухається повільніше за сторінку. Приклад наведено на сторінці [Шапка-герой](/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). | **Parallax speed**, **Parallax mode** (**Fixed** або **Local**), **Disable on mobile** | | **Gradient** | Два кольори змішуються по розділу, поверх фото, якщо воно є | **Start color**, **End color**, **Gradient direction** (180 градусів іде згори вниз), **Start position**, **End position** | | **YouTube video** | Приглушене відео YouTube заповнює розділ; позначте **Loop**, щоб повторювати його | **YouTube video URL**, **Video options**, **Start time in seconds**, **Stop time in seconds** | Фіксований і паралаксний ефекти рухають фото, яке ви встановили на панелі **Style**. Відео YouTube фото не потребує. ## Якщо ви не бачите фону - **Панелі Background effects немає.** Її мають лише розділи. Наведіть курсор на розділ, а не на рядок, колонку чи елемент, і відкрийте **More > Settings**. - **Фото обрізано.** **Cover** обрізає те, що не вміщується в розділ. Змініть **Background position**, щоб тримати об’єкт у полі зору, або виберіть **Contain**. - **Градієнт ховає фото.** Градієнт лежить зверху, а непрозорі кольори накривають фото. Зменште непрозорість **Start color** і **End color** у виборі кольору. - **Розділ не показує градієнта.** Градієнт потребує обох кольорів. Виберіть **Start color** і **End color**. - **Відео YouTube не відтворюється.** **YouTube video URL** порожнє або не є посиланням на одне відео. Вставте повну адресу відео, як-от `https://www.youtube.com/watch?v=` з його ID. ## Що далі? - [Макети на повну ширину](/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): нехай фон і вміст ідуть від краю до краю. - [Вкладка анімації](/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%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): побудуйте повну шапку сторінки з паралаксним фото.