---
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/%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'
title: 'Службові класи | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:17:08+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Кожен елемент має поле HTML classes зі списком іменованих класів. Утиліти Bootstrap 5 і тіні вже вбудовано. Ваша тема може додати власну групу через свій файл .info.yml, а модуль через хук alter. Ця сторінка пояснює, що містить список і як зареєструвати власні класи, щоб редактори обирали брендовий вигляд за назвою, а не вводили імена класів.'
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: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: 'Кожен елемент має поле HTML classes зі списком іменованих класів. Утиліти Bootstrap 5 і тіні вже вбудовано. Ваша тема може додати власну групу через свій файл .info.yml, а модуль через хук alter. Ця сторінка пояснює, що містить список і як зареєструвати власні класи, щоб редактори обирали брендовий вигляд за назвою, а не вводили імена класів.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:17:08+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%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'
      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/%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'
      description: 'Кожен елемент має поле HTML classes зі списком іменованих класів. Утиліти Bootstrap 5 і тіні вже вбудовано. Ваша тема може додати власну групу через свій файл .info.yml, а модуль через хук alter. Ця сторінка пояснює, що містить список і як зареєструвати власні класи, щоб редактори обирали брендовий вигляд за назвою, а не вводили імена класів.'
      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) # Службові класи.

 Вивчення DXPR BuilderКерування сайтомАдаптація під бренд

   ## In this guide

 Related guides

- [Додайте власний 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)
- [Додайте брендові стилі та кнопки до текстового редактора](/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)
- [Довідник Hooks API](/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%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D1%85%D1%83%D0%BA%D0%B8-api)

Кожен елемент має поле **HTML classes** зі списком іменованих класів. Утиліти Bootstrap 5 і тіні вже вбудовано. Ваша тема може додати власну групу через свій файл `.info.yml`, а модуль через хук alter. Ця сторінка пояснює, що містить список і як зареєструвати власні класи, щоб редактори обирали брендовий вигляд за назвою, а не вводили імена класів.

## Застосування класу

1. Відкрийте налаштування елемента й знайдіть **HTML classes** унизу панелі **General**.
2. Натисніть поле й виберіть клас зі списку. Введення у полі фільтрує список.
3. Щоб увести клас, якого немає у списку, натисніть **Edit as text** і введіть його.
4. Натисніть **Save** у діалоговому вікні, потім **Save** на панелі інструментів конструктора.

Класи потрапляють в атрибут `class` елемента у збереженому HTML. Типові застосування редакторам показує сторінка [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).

## Що містить список

Редактор будує список під час запуску. Він об’єднує три джерела в такому порядку:

1. Вбудований список. Він містить групу **Drop shadows**, коротку групу **Bootstrap classes** та утиліти Bootstrap 5, згруповані за призначенням: **Display & Visibility**, **Responsive Visibility**, **Margins**, **Padding**, **Text Colors** тощо.
2. Група для кожної встановленої теми, чий файл `.info.yml` має ключ `dxpr_builder_classes`. Група підписана назвою теми.
3. Зміни від модулів, див. [Реєстрація класів з модуля](#register-classes-from-a-module).

Отже, кожен сайт має класи для відступів, наприклад `mt-3` і `px-4`, для відображення, наприклад `d-none`, і для тексту, наприклад `text-center` і `fw-bold`. Налаштовувати для них нічого не потрібно.

## Реєстрація класів у темі

Додайте відповідність `dxpr_builder_classes` до файлу `.info.yml` теми. Кожен ключ містить ім’я класу або кілька імен, розділених пробілами; кожне значення містить мітку, яку бачать редактори. DXPR Theme реєструє свої класи саме так:

```yaml
dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

```

1. Додайте відповідність до `themes/custom/mytheme/mytheme.info.yml`:

    ```yaml
    dxpr_builder_classes:
      brand-card: 'Brand card'
      brand-card shadow-lg: 'Brand card with shadow'

    ```
2. Напишіть CSS для класів у бібліотеці, яку тема завантажує на кожній сторінці; див. [Власний 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).
3. Очистьте кеші командою `drush cr`, щоб Drupal знову прочитав файл info.
4. Відкрийте налаштування елемента й перевірте, що **HTML classes** показує групу з назвою вашої теми та двома записами.

Кожна встановлена тема з цим ключем додає свою групу, не лише типова тема. Група завжди має назву теми; файл info не може її перейменувати.

## Реєстрація класів з модуля

Власний модуль може додавати класи або вилучати класи, зареєстровані темою, за допомогою хука alter. Він не може вилучити вбудовані записи Bootstrap, бо редактор додає їх у браузері. Код наведено в [Довіднику Hooks API](/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%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D1%85%D1%83%D0%BA%D0%B8-api#hook_dxpr_builder_classes_alter).

## Версія Bootstrap

Вбудований список це Bootstrap 5. Якщо ваша тема не завантажує Bootstrap 5, установіть **Sideload Bootstrap files** у значення **Bootstrap 5** у розділі **Bootstrap** за шляхом **DXPR Studio** > **DXPR Builder** > **General Settings**, щоб класи мали 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%B4%D0%BE%D0%B4%D0%B0%D1%82%D0%BA%D0%BE%D0%B2%D0%BE/%D0%BF%D1%80%D0%BE%D0%B4%D1%83%D0%BA%D1%82%D0%B8%D0%B2%D0%BD%D1%96%D1%81%D1%82%D1%8C#bootstrap-sideloading).

## Якщо ви не бачите своїх класів

- **Групи вашої теми немає в HTML classes.** Drupal досі використовує стару копію файла info теми. Натисніть **Clear all caches** у **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`) або виконайте `drush cr`.
- **Тема з ключем не додає групи.** Враховуються лише встановлені теми. Встановіть тему в **Appearance** (`/admin/appearance`); вона не мусить бути типовою темою.
- **Елемент виглядає так само після вибору класу.** На сторінці не завантажується CSS для цього класу. Додайте правила до бібліотеки, яку завантажує ваша тема, див. [Власний 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). Про класи Bootstrap див. [Версія Bootstrap](#bootstrap-version).

## Що далі?

- [Власний 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): напишіть правила для своїх класів.
- [Текстовий редактор](/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**.
- [Довідник Hooks API](/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%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D1%85%D1%83%D0%BA%D0%B8-api): інші хуки, які надає DXPR Builder.