---
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%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css'
title: 'Додайте власний CSS до сторінок конструктора | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:59:10+00:00'
updated: '2026-10-24T20:15:47+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Вміст DXPR Builder це частина сторінки, яку рендерить ваша тема, тож CSS вашої теми стилізує його в редакторі та на опублікованій сторінці. Використовуйте цю сторінку, коли вигляд має повторюватися на багатьох елементах або сторінках, або коли налаштування елемента не можуть його створити. Ви закінчуєте таблицею стилів у своїй темі та класом, який редактори можуть застосовувати. Для одного елемента використайте його діалогове вікно налаштувань.'
tags:
  - 'Match your brand'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T20:15:47+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Додайте власний CSS до сторінок конструктора'
      description: 'Вміст DXPR Builder це частина сторінки, яку рендерить ваша тема, тож CSS вашої теми стилізує його в редакторі та на опублікованій сторінці. Використовуйте цю сторінку, коли вигляд має повторюватися на багатьох елементах або сторінках, або коли налаштування елемента не можуть його створити. Ви закінчуєте таблицею стилів у своїй темі та класом, який редактори можуть застосовувати. Для одного елемента використайте його діалогове вікно налаштувань.'
      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:15:47+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%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css'
      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%B2%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css'
      description: 'Вміст DXPR Builder це частина сторінки, яку рендерить ваша тема, тож CSS вашої теми стилізує його в редакторі та на опублікованій сторінці. Використовуйте цю сторінку, коли вигляд має повторюватися на багатьох елементах або сторінках, або коли налаштування елемента не можуть його створити. Ви закінчуєте таблицею стилів у своїй темі та класом, який редактори можуть застосовувати. Для одного елемента використайте його діалогове вікно налаштувань.'
      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/manage) /[Адаптація під бренд](/uk/hc/documentation/learn-dxpr-builder/customization) # Додайте власний CSS до сторінок конструктора.

 Вивчення 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/%D1%81%D0%BB%D1%83%D0%B6%D0%B1%D0%BE%D0%B2%D1%96-%D0%BA%D0%BB%D0%B0%D1%81%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%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%D1%96-%D1%88%D1%80%D0%B8%D1%84%D1%82%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%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D0%B8%D0%B9-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80)

Вміст DXPR Builder це частина сторінки, яку рендерить ваша тема, тож CSS вашої теми стилізує його в редакторі та на опублікованій сторінці. Використовуйте цю сторінку, коли вигляд має повторюватися на багатьох елементах або сторінках, або коли налаштування елемента не можуть його створити. Ви закінчуєте таблицею стилів у своїй темі та класом, який редактори можуть застосовувати. Для одного елемента використайте його [діалогове вікно налаштувань](/hc/documentation/learn-dxpr-builder/element-settings).

## Перш ніж почати

- Вам потрібен доступ до файлів вашої теми та спосіб їх розгортати.
- Використовуйте власну тему або підтему. Оновлення доповненої теми замінює її файли, а з ними і ваш CSS.

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

1. Створіть `css/custom.css` у теці своєї теми, наприклад `themes/custom/mytheme/css/custom.css`.
2. Заявіть файл у `mytheme.libraries.yml`:

    ```yaml
    global-styling:
      css:
        theme:
          css/custom.css: {}

    ```
3. Завантажте бібліотеку на кожній сторінці з `mytheme.info.yml`:

    ```yaml
    libraries:
      - mytheme/global-styling

    ```
4. Напишіть правило для власного імені класу:

    ```css
    .brand-hero {
      background: linear-gradient(135deg, #1a4d8f, #0f2a4d);
      color: #ffffff;
    }

    ```
5. Очистьте кеш у **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`) через **Clear all caches** або виконайте `drush cr`.
6. У конструкторі відкрийте налаштування **Section** і додайте `brand-hero` у **HTML classes**. Як ввести власний клас, показує сторінка [HTML 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%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%D0%BB%D0%B0%D1%81%D0%BD%D0%B8%D0%B9-css).

Редактори також можуть вибрати клас зі списку **HTML classes**, коли ваша тема перелічить його там; див. [Службові класи](/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/%D1%81%D0%BB%D1%83%D0%B6%D0%B1%D0%BE%D0%B2%D1%96-%D0%BA%D0%BB%D0%B0%D1%81%D0%B8).

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

Розділ приймає градієнт і білий текст, щойно ви додаєте клас, бо редактор працює на сторінці, яку рендерить ваша тема. Відвідувачі бачать те саме після збереження сторінки. Клас зберігається в HTML сторінки, тож зміна правила пізніше оновлює кожен елемент, який його має.

## Класи, які пише DXPR Builder

Ваш власний клас це найбезпечніша ціль. Ці класи теж є у збереженому HTML:

| Селектор | Відповідає |
|---|---|
| `.az-container` | обгортка кожного поля DXPR Builder; він також має `.dxpr-editor`, поки хтось його редагує |
| `.az-section` | кожен **Section**; всередині нього сидить `.container` або `.container-fluid`, коли **Full width** увімкнено |
| `.row` | кожен **Row**; DXPR Builder використовує власний клас Bootstrap і не додає `az-row` |
| `.col-*` | кожна колонка, наприклад `.col-12.col-md-6`; немає `az-column` |
| `.az-text`, `.az-image`, `.az-button`, `.az-card` | один тип елемента: `az-` плюс ім’я елемента, як-от `.az-separator` для Divider |
| `.az-element` | більшість елементів вмісту, але не Image, Icon або Button |

Панель **Style** пише вбудовані атрибути `style`, які перемагають правило класу на тій самій властивості. Службові класи Bootstrap позначено `!important` і перемагають обох.

## Якщо ви не бачите стилю

- **Клас є на елементі, але нічого не змінюється.** Бібліотеку не завантажено, або кеш досі тримає старий CSS. Перевірте, що `mytheme.info.yml` перелічує бібліотеку, потім очистьте кеші за шляхом `/admin/config/development/performance`.
- **Застосовуються лише деякі властивості.** Значення панелі **Style** на тій самій властивості перемагає. Очистьте це значення на панелі **Style** елемента або пересуньте весь вигляд у свій клас.
- **Стиль показується в редакторі, але не відвідувачам.** **Apply text format filters to frontend content** увімкнено, і текстовий формат поля здирає атрибути `class`. Вимкніть його в **Text Filters** за шляхом `/admin/dxpr_studio/dxpr_builder/settings` або дозвольте класи у форматі.
- **Правило для `.az-row` або `.az-column` ніколи не відповідає.** DXPR Builder не пише цих класів. Цільтеся на `.row`, класи `.col-*` або власний клас.

## Що далі?

- [Службові класи](/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/%D1%81%D0%BB%D1%83%D0%B6%D0%B1%D0%BE%D0%B2%D1%96-%D0%BA%D0%BB%D0%B0%D1%81%D0%B8): перелічіть свої класи в **HTML classes**, щоб редактори могли їх вибирати.
- [Власні шрифти](/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%D1%96-%D1%88%D1%80%D0%B8%D1%84%D1%82%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%BD%D0%B0%D0%BB%D0%B0%D1%88%D1%82%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D1%82%D0%B5%D0%BA%D1%81%D1%82%D0%BE%D0%B2%D0%B8%D0%B9-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80): пропонуйте класи для абзаців і слів у списку **Styles**.