--- 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%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/%D1%82%D0%BB%D0%BE' title: 'Розмістіть колір або фото за вмістом | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:59:10+00:00' updated: '2026-10-24T20:08:10+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Надайте смузі своєї сторінки фірмовий колір або фото, щоб заголовок вирізнявся, а смуга читалася як один блок. Колір і фото задаються на панелі Стиль будь-якого елемента. Розділ додає панель Ефекти тла для фіксованого фото, паралакса, градієнта або відео YouTube. Відео повторює рецепт нижче: воно розміщує фото за заголовком і темний градієнт поверх фото, щоб білий заголовок залишався читабельним. tags: - 'Style your elements' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T20:08:10+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Розмістіть колір або фото за вмістом' description: |- Надайте смузі своєї сторінки фірмовий колір або фото, щоб заголовок вирізнявся, а смуга читалася як один блок. Колір і фото задаються на панелі Стиль будь-якого елемента. Розділ додає панель Ефекти тла для фіксованого фото, паралакса, градієнта або відео 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:59:10+0000' dateModified: '2026-10-24T20:08:10+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%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/%D1%82%D0%BB%D0%BE' 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%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/%D1%82%D0%BB%D0%BE' description: |- Надайте смузі своєї сторінки фірмовий колір або фото, щоб заголовок вирізнявся, а смуга читалася як один блок. Колір і фото задаються на панелі Стиль будь-якого елемента. Розділ додає панель Ефекти тла для фіксованого фото, паралакса, градієнта або відео 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) # Розмістіть колір або фото за вмістом. Вивчення 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%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/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0) Надайте смузі своєї сторінки фірмовий колір або фото, щоб заголовок вирізнявся, а смуга читалася як один блок. Колір і фото задаються на панелі **Стиль** будь-якого елемента. Розділ додає панель **Ефекти тла** для фіксованого фото, паралакса, градієнта або відео YouTube. Відео повторює рецепт нижче: воно розміщує фото за заголовком і темний градієнт поверх фото, щоб білий заголовок залишався читабельним. ## Перш ніж почати - Відкрийте сторінку в 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%BF%D0%BE%D1%87%D0%B0%D1%82%D0%BE%D0%BA-%D1%80%D0%BE%D0%B1%D0%BE%D1%82%D0%B8/%D0%BF%D0%B5%D1%80%D1%88%D0%B0-%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0). - **Зберегти** у діалозі зберігає зміну в редакторі. **Зберегти** на панелі інструментів конструктора над вашим вмістом зберігає сторінку й показує «Поле збережено». - **Скористайтеся розділом** для повної смуги сторінки. Лише розділ має **Ефекти тла**. - **Скористайтеся елементом «Текст» або «Картка»** для кольорового блока за кількома рядками всередині стовпця. - **Скористайтеся своєю темою** для тла на кожній сторінці, наприклад тіла сторінки або нижнього колонтитула. - **Тримайте слова поза фото.** Фонове зображення не має альтернативного тексту, тож програми читання з екрана його пропускають. Розмістіть своє повідомлення в заголовку зверху. ## Рецепт: читабельний заголовок на фото Білий текст на строкатому фото важко читати. Темний градієнт поверх фото це виправляє й працює далі, коли ви міняєте фото. Вам потрібен розділ, що тримає ваш заголовок у текстовому елементі. 1. Наведіть вказівник на **Розділ**, натисніть **Більше**, потім **Налаштування**. 2. Відкрийте панель **Стиль** і натисніть **Вибрати зображення** під **Зображення тла**. Виберіть фото. З’явиться мініатюра зі списком розмірів зображення. 3. У списку розмірів зображення виберіть розмір принаймні завширшки з найширший екран, для якого проєктуєте, або **Оригінальне зображення (без зміни розміру)**. Уникайте **Оптимізувати для швидкого завантаження** для повної смуги. 4. Задайте для параметра **Стиль тла** значення **Покриття**, а для **Положення тла** значення **Центр–центр**. 5. Відкрийте панель **Ефекти тла** і задайте для параметра **Ефект тла** значення **Градієнт**. Ваше фото залишається; градієнт лежить поверх нього. 6. У полі кольору **Початковий колір** введіть `rgba(0, 0, 0, 0.6)`: чорний на 60%. Введіть `rgba(0, 0, 0, 0.3)` для **Кінцевий колір**. Залиште **Напрямок градієнта** на 180, щоб вуаль ішла зверху вниз. 7. Натисніть **Зберегти** у діалозі. Розділ показує фото під темною вуаллю. 8. Наведіть вказівник на елемент **Текст**, натисніть **Більше**, потім **Налаштування**. На його панелі **Стиль** задайте білий **Колір шрифту** і натисніть **Зберегти**. 9. Натисніть **Зберегти** на панелі інструментів. Перевірте заголовок на тлі найсвітлішої частини фото. Цільтеся на контраст принаймні 4,5 до 1 або 3 до 1 для великих заголовків; сторінка [типографіки](/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/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0) пояснює ці цілі. Досі важко читати? Підвищте обидва значення, наприклад до 0,8 і 0,5. ## Що ви бачите Розділ показує ваше фото під темною вуаллю, найтемнішою вгорі, з білим заголовком на ньому. **Покриття** заповнює весь розділ, тож на вузькому екрані більше боків фото обрізається. ## Як працюють налаштування | Елемент керування | Що робить | |---|---| | **Тло** | Колір за вмістом. Повзунок непрозорості засобу вибору робить його прозорим. | | **Зображення тла** | Зображення за вмістом: через **Вибрати зображення**, за URL-адресою або через **Генерування зображень ШІ**, якщо ваш сайт його не вимкнув. | | **Стиль тла** | Як зображення заповнює елемент. Див. наступну таблицю. | | **Положення тла** | Точка, до якої пришпилено зображення. У разі **Покриття** воно вирішує, яка частина фото залишається видимою. | | **Стиль тла** | Результат | |---|---| | **Стандарти теми** | Якщо ваша тема не каже інакше, зображення повторюється у власному розмірі з верхнього лівого кута. | | **Покриття** | Зображення заповнює елемент, а краї, що не вміщуються, обрізаються. Найкраще для фото. | | **Вміщення** | Усе зображення показується один раз. З двох боків можуть залишитися порожні смуги. Найкраще для логотипів. | | **Без повторення** | Одна копія у власному розмірі. | | **Повторення** | Зображення мозаїкою вкриває елемент. Добре для візерунків. | Колір лежить під зображенням. Він просвічує крізь прозорі частини зображення, у смугах навколо зображення в режимі **Вміщення** і поки фото завантажується. Виберіть колір, близький до основного тону фото. Розмір **Оптимізувати для швидкого завантаження** зменшує зображення щонайбільше до 1024 px завширшки й зберігає його як WebP. Це підходить блоку, але виглядає м’яко на повній смузі великого екрана. Те саме зображення завантажується на кожному розмірі екрана, включно з телефонами. Панель **Стиль наведення** має власні **Тло** і **Зображення тла**, тож блок може змінювати колір або міняти своє зображення під час наведення. ## Ефекти тла розділу Ці ефекти потребують розділу. **Фіксоване зображення** і **Паралакс-зображення** переміщують фото із **Зображення тла**, тож спочатку задайте фото. | **Ефект тла** | Що бачать відвідувачі | Налаштування | |---|---|---| | **Просте зображення** | Фото прокручується разом зі сторінкою. Це стандарт. | немає | | **Фіксоване зображення** | Фото стоїть на місці, поки вміст прокручується поверх нього. | немає | | **Паралакс-зображення** | Фото прокручується повільніше за вміст. | **Швидкість паралакса** (від 0 до 100; вибір **Паралакс-зображення** задає 20, коли там 0), **Режим паралакса** (**Фіксований** або **Локальний**), **Вимкнути на мобільних** (екрани вужче 481 px) | | **Градієнт** | Суміш двох кольорів окремо або поверх фото. | **Початковий колір**, **Кінцевий колір**, **Напрямок градієнта** (від 1 до 360 градусів; 180 іде зверху вниз), **Початкова позиція**, **Кінцева позиція** | | **Відео YouTube** | Відео без звуку відтворюється, поки розділ на екрані, і ставиться на паузу, коли прокручується геть. | **URL-адреса відео YouTube**, **Час початку в секундах**, **Час зупинки в секундах**, **Параметри відео** | Поверх фото градієнт завжди йде від краю до краю. **Початкова позиція** і **Кінцева позиція** застосовуються лише до градієнта без фото. ## Якщо ви не бачите тла - **Фото показується як тонка смуга.** Тло не додає висоти; розділ заввишки як його вміст і внутрішні відступи. Додайте вмісту або увімкніть **Висота 100%** на панелі **Загальне**. Для більших внутрішніх відступів див. рецепт «[Вищий розділ](/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#recipe-a-taller-section)». - **Фото повторюється або показує лише один кут.** **Стиль тла**: **Стандарти теми**. Виберіть **Покриття**. - **Фото виглядає м’яко на широкому екрані.** **Оптимізувати для швидкого завантаження** робить його щонайбільше 1024 px завширшки. Виберіть ширший розмір у списку розмірів зображення. - **Фото приховано за суцільним чорним.** Кольори градієнта не мають прозорості. Завершіть кожне значення числом менше 1, наприклад `rgba(0, 0, 0, 0.6)`. - **Заголовок залишається темним.** Клас кольору під **Класи HTML** текстового елемента або правило теми з `!important` перемагає. Приберіть чип або див. [типографіку](/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/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0). - **Тло зникло після перезавантаження сторінки.** **Зберегти** у діалозі зберігає зміну лише в редакторі. Натисніть **Зберегти** на панелі інструментів. - **Колір не показується.** Фото його вкриває. Для відтінку поверх фото скористайтеся значенням **Градієнт** у розділі **Ефекти тла**. - **Початкова й кінцева позиції нічого не змінюють.** Розділ має **Зображення тла**, тож градієнт іде від краю до краю. Натомість скористайтеся **Напрямком градієнта** й прозорими кольорами. - **Перемагає колір класу.** Такий клас, як **Основне тло** під **Класи HTML**, перемагає ваше **Тло**. Приберіть його чип. - **Тло не діє на круговий лічильник, індикатор прогресу чи роздільник.** Ці елементи використовують власні кольори. Задайте **Колір тла**, **Колір заду** або **Колір** на панелі **Загальне**. ## Що далі? - [Типографіка](/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/%D1%82%D0%B8%D0%BF%D0%BE%D0%B3%D1%80%D0%B0%D1%84%D1%96%D0%BA%D0%B0): задайте колір заголовка на своєму фото й перевірте його контраст.