---
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/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D1%82%D0%B5%D0%BC%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F'
title: 'Темізація DXPR Builder | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:21:25+00:00'
updated: '2026-10-24T20:03:43+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Вміст конструктора це звичайний HTML на вашій сторінці, тож ваша тема оформлює
  його як будь-який інший вміст. Ця сторінка охоплює успадковане темою,
  додавання класів до редактора й місце для перевизначень.
  Що оформлює ваша тема
  Опублікований вміст конструктора наслідує стилі вашої теми:
tags:
  - 'Build on it'
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: 'Темізація DXPR Builder'
      description: |-
        Вміст конструктора це звичайний HTML на вашій сторінці, тож ваша тема оформлює
        його як будь-який інший вміст. Ця сторінка охоплює успадковане темою,
        додавання класів до редактора й місце для перевизначень.
        Що оформлює ваша тема
        Опублікований вміст конструктора наслідує стилі вашої теми:
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:21:25+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/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D1%82%D0%B5%D0%BC%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F'
      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/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D1%82%D0%B5%D0%BC%D1%96%D0%B7%D0%B0%D1%86%D1%96%D1%8F'
      description: |-
        Вміст конструктора це звичайний HTML на вашій сторінці, тож ваша тема оформлює
        його як будь-який інший вміст. Ця сторінка охоплює успадковане темою,
        додавання класів до редактора й місце для перевизначень.
        Що оформлює ваша тема
        Опублікований вміст конструктора наслідує стилі вашої теми:
      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/extend) /[Розробка на платформі](/uk/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Темізація DXPR Builder.

 Вивчення DXPR BuilderРозширенняРозробка на платформі

   ## In this guide

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

## Що оформлює ваша тема

Опублікований вміст конструктора наслідує стилі вашої теми:

- Заголовки, текст тіла й посилання використовують стилі вашої теми.
- Макет використовує рядки й стовпці Bootstrap 5, тож тема Bootstrap 5 узгоджується з ним. З будь-якою іншою темою перейдіть до **DXPR Studio > DXPR Builder > Загальні налаштування** і задайте для параметра **Підвантажувати файли Bootstrap** значення **Bootstrap 5**.
- Кожен елемент має один клас на тип, наприклад `az-card` або `az-button`, а більшість також мають `az-element`; див. [Архітектура 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/%D1%80%D0%BE%D0%B7%D1%80%D0%BE%D0%B1%D0%BA%D0%B0/%D0%B0%D1%80%D1%85%D1%96%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0-css).

## Додавання класів до редактора

### У файлі info.yml теми

Перелічіть класи під `dxpr_builder_classes` у файлі `.info.yml` вашої теми. Вони з’являються в списку **Класи HTML** кожного елемента в групі параметрів, названій за темою, поки тему увімкнено:

```yaml
# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

```

### З модуля

Реалізуйте `hook_dxpr_builder_classes_alter()`. Назва має завершуватися на `_alter`; див. [Довідник 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).

```php
/**
 * Implements hook_dxpr_builder_classes_alter().
 */
function mymodule_dxpr_builder_classes_alter(&$classes) {
  $classes['optgroup-custom'] = t('Custom Styles');
  $classes['custom-card'] = t('Custom card');
  $classes['custom-hero'] = t('Custom hero');
}

```

## Стилі кнопок

Елемент «Кнопка» пропонує стилі Bootstrap: Основний, Додатковий, Успіх, Інформація, Попередження, Небезпека, Посилання, Світлий і Темний. Список фіксовано в редакторі; хук папок кнопок його не змінює. Щоб надати кнопкам фірмового вигляду, оформіть класи `btn-*` Bootstrap у своїй темі або додайте власний клас через **Класи HTML**.

## Перевизначення CSS

Перевизначайте вивід конструктора в CSS своєї теми:

```css
/* Section padding */
.az-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Card shadows */
.az-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

```

Налаштування, які редактор задає на вкладці «Стиль», записуються як вбудовані стилі. Вбудовані стилі перемагають правила теми без `!important`, тож використовуйте CSS теми для стандартів і дайте редакторам перевизначати їх для окремих елементів.

## Редактор і ваша тема

Редактор працює на сторінці, де показується поле, тобто всередині вашої теми інтерфейсу, а не теми адміністрування. Його панелі керування, меню й діалоги мають клас `dxpr-builder-ui` і завантажують власну таблицю стилів `dxpr_builder_backend.css`. Правила теми, що звертаються до широких селекторів на кшталт `button` або `.modal`, усе ще можуть їх сягати; обмежте свої правила регіонами вмісту, щоб цього уникнути.