--- 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%BA%D0%BE%D0%BB%D1%8C%D0%BE%D1%80%D0%B8-%D1%82%D0%B0-%D0%B1%D1%80%D0%B5%D0%BD%D0%B4' title: 'Використовуйте кольори свого бренду | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:20:22+00:00' updated: '2026-10-24T20:03:43+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Застосовуйте кольори свого бренду до розділів, тексту та кнопок, щоб кожна сторінка виглядала частиною того самого сайту. Кожне поле кольору в DXPR Builder показує палітру вашої теми як зразки, тож ви обираєте кольори бренду замість вгадування кодів. У прикладі розділ отримує ваш основний колір бренду з білим текстом. Відео повторює кроки нижче: воно фарбує розділ зразком вашого бренду й робить його текст білим. 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: |- Застосовуйте кольори свого бренду до розділів, тексту та кнопок, щоб кожна сторінка виглядала частиною того самого сайту. Кожне поле кольору в DXPR Builder показує палітру вашої теми як зразки, тож ви обираєте кольори бренду замість вгадування кодів. У прикладі розділ отримує ваш основний колір бренду з білим текстом. Відео повторює кроки нижче: воно фарбує розділ зразком вашого бренду й робить його текст білим. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T19:20:22+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%BA%D0%BE%D0%BB%D1%8C%D0%BE%D1%80%D0%B8-%D1%82%D0%B0-%D0%B1%D1%80%D0%B5%D0%BD%D0%B4' 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%BA%D0%BE%D0%BB%D1%8C%D0%BE%D1%80%D0%B8-%D1%82%D0%B0-%D0%B1%D1%80%D0%B5%D0%BD%D0%B4' description: |- Застосовуйте кольори свого бренду до розділів, тексту та кнопок, щоб кожна сторінка виглядала частиною того самого сайту. Кожне поле кольору в DXPR Builder показує палітру вашої теми як зразки, тож ви обираєте кольори бренду замість вгадування кодів. У прикладі розділ отримує ваш основний колір бренду з білим текстом. Відео повторює кроки нижче: воно фарбує розділ зразком вашого бренду й робить його текст білим. 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%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%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/%D1%81%D1%82%D0%B8%D0%BB%D1%96-%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BA) - [Додайте власний CSS до сторінок конструктора](/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%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css) Застосовуйте кольори свого бренду до розділів, тексту та кнопок, щоб кожна сторінка виглядала частиною того самого сайту. Кожне поле кольору в DXPR Builder показує палітру вашої теми як зразки, тож ви обираєте кольори бренду замість вгадування кодів. У прикладі розділ отримує ваш основний колір бренду з білим текстом. Відео повторює кроки нижче: воно фарбує розділ зразком вашого бренду й робить його текст білим. ## Перш ніж почати - Кольори вашого бренду живуть у темі. З DXPR Theme установіть їх у **Appearance** > **Settings** > **DXPR Theme** (`/admin/appearance/settings/dxpr_theme`), на панелі **Colors**. - DXPR Builder показує перші десять різних кольорів цієї палітри як зразки. ## Фарбування розділу 1. Наведіть курсор на розділ, відкрийте **More** і виберіть **Settings**. 2. Відкрийте панель **Style**. 3. Натисніть кнопку кольору **Background**. Вибір кольору відкриється з вашими зразками. 4. Натисніть основний зразок вашого бренду. 5. Натисніть кнопку кольору **Font color** і виберіть білий. 6. Натисніть **Save**. Текст абзаців стане білим; заголовки збережуть колір заголовків теми. 7. Щоб зробити білим і заголовок, відкрийте **Settings** його елемента **Text**, виберіть білий для **Font color** на його панелі **Style** і натисніть **Save**. ## Що ви бачите Розділ заповнюється кольором вашого бренду, а текст його абзаців і заголовок стають білими. Ті самі зразки з’являються в кожному полі кольору. Це стосується панелей **Style** і **Hover style**, а також **Start color** і **End color** градієнтного фону **Gradient** розділу. Щоб використати колір поза палітрою, введіть його код у текстове поле вибору, наприклад `#2196F3`. Пересуньте повзунок непрозорості для напівпрозорого кольору. **Clear** вилучає колір. ## Тримайте кольори пов’язаними з темою Зразок копіює код кольору в елемент. Якщо ви пізніше зміните палітру теми, цей елемент збереже старий колір. Щоб елемент слідував за палітрою, натомість використайте клас кольору. Відкрийте **Settings** елемента й виберіть чип у **HTML classes**: | Чип | Що робить | |---|---| | **Primary background**, **Secondary background** та інші | Кольори Bootstrap з вашої теми | | **Primary text color**, **Secondary text color** та інші | Текстові кольори Bootstrap з вашої теми | | **Background color: DXPR Theme primary** | Колір **Primary** DXPR Theme з відповідним кольором тексту | | **Text color: DXPR Theme accent1** | Колір **Secondary** DXPR Theme для тексту | Чипи **DXPR Theme** з’являються лише коли DXPR Theme ввімкнено. ## Поля кольору для кожного елемента | Де | Що фарбує | |---|---| | **Style** (панель): **Font color**, **Border color**, **Background** | Сам елемент | | **Hover style** (панель): ті самі поля | Елемент, поки вказівник на ньому | | **Button**: **Type** | Готова кольорова схема кнопки | | **Card**: **Type** | Фон і текст усієї картки | | **Alert**: **Type** | **Success**, **Info**, **Warning** або **Danger** | | **Section**: **Background effects** > **Gradient** | Суміш двох кольорів | ## Читабельний колір - Тримайте достатній контраст між текстом і фоном. WCAG 2.1 рівня AA вимагає щонайменше 4,5 до 1 для звичайного тексту. - Не використовуйте сам колір для передачі значення; поєднуйте його з міткою або піктограмою. - Чергуйте фони розділів, наприклад білий, світло-сірий і колір вашого бренду, щоб надати довгим сторінкам ритму. ## Якщо ви не бачите своїх кольорів - **Вибір кольору не показує зразків.** Типова тема вашого сайту не надає палітри кольорів. Вводьте коди своїх кольорів або використайте тему з палітрою, наприклад DXPR Theme. - **Елемент зберігає свій старий колір після зміни палітри теми.** Зразок зберігає фіксований код кольору. Виберіть новий зразок або перейдіть на чип кольору в **HTML classes**, який слідує за палітрою. - **Background або Font color не діють на картку.** **Type** картки, відмінний від **Default**, установлює її кольори класами теми, які перемагають. Спершу встановіть **Type** у значення **Default**. ## Що далі? - [Змусьте елементи реагувати на наведення](/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%B5%D1%84%D0%B5%D0%BA%D1%82%D0%B8-%D0%BD%D0%B0%D0%B2%D0%B5%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/%D1%81%D1%82%D0%B8%D0%BB%D1%96-%D0%BA%D0%B0%D1%80%D1%82%D0%BE%D0%BA): застосовуйте свої кольори до карток. - [Власний CSS](/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%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css): установлюйте правила бренду, яких не охоплюють панелі.