--- 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/%D0%B0%D1%80%D1%85%D1%96%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0-css' title: 'Архітектура CSS | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:21:21+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- Вміст конструктора це розмітка Bootstrap 5 плюс малий набір класів az-. Знання того, які класи з’являються на опублікованих сторінках, а які існують лише поки працює редактор, каже вам, на що може цілитися CSS вашої теми. tags: - 'Architecture and APIs' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T19:21:21+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Архітектура CSS' description: |- Вміст конструктора це розмітка Bootstrap 5 плюс малий набір класів az-. Знання того, які класи з’являються на опублікованих сторінках, а які існують лише поки працює редактор, каже вам, на що може цілитися 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:21:21+0000' dateModified: '2026-10-24T19:21:21+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/%D0%B0%D1%80%D1%85%D1%96%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0-css' articleSection: 'Архітектура та API' - '@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/%D0%B0%D1%80%D1%85%D1%96%D1%82%D0%B5%D0%BA%D1%82%D1%83%D1%80%D0%B0-css' description: |- Вміст конструктора це розмітка Bootstrap 5 плюс малий набір класів az-. Знання того, які класи з’являються на опублікованих сторінках, а які існують лише поки працює редактор, каже вам, на що може цілитися 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/extend) /[Архітектура та API](/uk/hc/documentation/learn-dxpr-builder/extend/architecture) # Архітектура CSS. Вивчення DXPR BuilderРозширенняАрхітектура та API ## In this guide Вміст конструктора це розмітка Bootstrap 5 плюс малий набір класів `az-`. Знання того, які класи з’являються на опублікованих сторінках, а які існують лише поки працює редактор, каже вам, на що може цілитися CSS вашої теми. ## Класи на опублікованих сторінках ### Макет | Розмітка | Класи | |---|---| | Розділ | `az-section`, з `container` або `container-fluid` всередині | | Рядок | Bootstrap `row` | | Колонка | Класи Bootstrap `col-*`, по одному на брейкпоїнт | | Елемент вмісту | Один клас на тип елемента, як-от `az-text`, `az-image` або `az-images-carousel`; Social Links використовує `st-social`. Більшість також несуть `az-element`; Button і Image ні | Вміст, збережений старішими версіями, досі може нести `az-row` і `az-column`. Редактор їх розпізнає й опускає наступного разу, коли рядок або колонка зберігається. ### Модифікатори | Клас | Встановлено | |---|---| | `az-row--equal-height` | **Equal-height columns** на рядку; без нього рядок отримує `align-items-start` | | `az-row--reverse-horizontal` | **Mirror row** на рядку | | `az-util-vertical-centering` | **Vertical centering** на розділі або колонці | ### Сітка Bootstrap Колонки використовують класи сітки Bootstrap: | Клас | Ширина | |---|---| | `col` | Ділить рядок порівну | | `col-6` | 50% | | `col-md-4` | 33% від 768 px | | `col-lg-3` | 25% від 992 px | ## Написання власного CSS - Обмежуйте правила для конструктора до `.az-section` або до класів типів, як-от `.az-text` або `.az-button`. `.az-element` пропускає Button і Image. - Не перевизначайте класи сітки Bootstrap; редактор встановлює ширину колонок через них. - Для разової стилізації додайте клас у полі **HTML classes**елемента й стилізуйте цей клас. ## Класи лише редактора Ці класи існують лише поки працює редактор, тож опубліковані сторінки ніколи їм не відповідають: | Клас | Де | |---|---| | `dxpr-builder-ui` | Кожен шматок інтерфейсу редактора: панелі керування, меню, діалогові вікна | | `controls` | Панель керування елемента | | `dxpr-editor` | Контейнер поля в кожному режимі перегляду, крім Preview | | `az-ctnr` | Контейнер поля, коли редактор запустився | | `az-sortable-placeholder` | Заповнювач скидання, поки ви перетягуєте елемент | Власні стилі редактора знаходяться в `dxpr_builder/css/dxpr_builder_backend.css`, побудованому з `dxpr_builder/sass/dxpr_builder_backend.scss`. ## Версія Bootstrap Конструктор пише розмітку Bootstrap 5. Якщо ваша тема не завантажує Bootstrap 5, установіть **Sideload Bootstrap files** у **Bootstrap 5** у **DXPR Studio > DXPR Builder > General Settings**, у розділі **Bootstrap**. **None (theme provides Bootstrap)** припускає, що ваша тема його завантажує.