--- 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%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' title: 'Додайте брендові стилі та кнопки до текстового редактора | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T19:58:51+00:00' updated: '2026-10-24T20:15:47+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Коли редактори натискають на текст у DXPR Builder, з’являється панель інструментів. Ви можете наповнити її список Styles своїми брендовими стилями, наприклад вступним абзацом або виділеною фразою. Ви також можете вибрати, які кнопки бачить кожна роль. Тоді редактори застосовують брендовий вигляд одним натисканням замість ручного налаштування розмірів і кольорів. Шрифти беруться з вашої теми; див.' 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: 'Додайте брендові стилі та кнопки до текстового редактора' description: 'Коли редактори натискають на текст у DXPR Builder, з’являється панель інструментів. Ви можете наповнити її список Styles своїми брендовими стилями, наприклад вступним абзацом або виділеною фразою. Ви також можете вибрати, які кнопки бачить кожна роль. Тоді редактори застосовують брендовий вигляд одним натисканням замість ручного налаштування розмірів і кольорів. Шрифти беруться з вашої теми; див.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T19:58:51+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/%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' 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%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' description: 'Коли редактори натискають на текст у DXPR Builder, з’являється панель інструментів. Ви можете наповнити її список Styles своїми брендовими стилями, наприклад вступним абзацом або виділеною фразою. Ви також можете вибрати, які кнопки бачить кожна роль. Тоді редактори застосовують брендовий вигляд одним натисканням замість ручного налаштування розмірів і кольорів. Шрифти беруться з вашої теми; див.' 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%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%B0%D0%B4%D0%BC%D1%96%D0%BD%D1%96%D1%81%D1%82%D1%80%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%BF%D1%80%D0%BE%D1%84%D1%96%D0%BB%D1%96-%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%87%D1%96%D0%B2) Коли редактори натискають на текст у DXPR Builder, з’являється панель інструментів. Ви можете наповнити її список **Styles** своїми брендовими стилями, наприклад вступним абзацом або виділеною фразою. Ви також можете вибрати, які кнопки бачить кожна роль. Тоді редактори застосовують брендовий вигляд одним натисканням замість ручного налаштування розмірів і кольорів. Шрифти беруться з вашої теми; див. [Власні шрифти](/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). ## Перш ніж почати - Щоб редагувати стилі, вам потрібен дозвіл **Administer DXPR Builder configuration**. - Щоб редагувати кнопки панелі інструментів, вам потрібен дозвіл **Administer dxpr builder profile**. - Кожен стиль потребує CSS за собою. Класи Bootstrap 5, як-от `lead`, працюють, коли сторінка завантажує Bootstrap 5. Ваші власні класи потребують правила в темі; див. [Власний 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). ## Налаштування 1. Перейдіть до **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`). 2. Розгорніть **Text Editor**. Поле **Custom styles** уже містить стилі, які постачаються з DXPR Builder, по одному на рядок. 3. Додайте по одному рядку на стиль у формі `Label=element.class` і видаліть непотрібні рядки. 4. Натисніть **Save settings**. 5. Відкрийте сторінку в конструкторі або перезавантажте її, якщо вона відкрита, і натисніть на текст. 6. Натисніть **Styles** на панелі інструментів і виберіть свій стиль. Ці рядки додають чотири стилі: ```text Lead=p.lead Event date=span.text-primary.fw-semibold Callout=p.border-start.border-primary.border-4.ps-3 Sassy Title=h1.sassy-title ``` Кожен рядок має три частини: - Мітка **label** перед `=` це назва, яку редактори бачать у списку. - Елемент **element** після `=` визначає, що охоплює стиль. Блоковий елемент, як-от `p`, `h2` або `blockquote`, стилізує цілий абзац або заголовок. Вбудований елемент, як-от `span`, `mark` або `code`, огортає лише виділені слова. - Кожен **class** іде після крапки. Додавайте більше класів через більше крапок, як у `Callout` вище. Імена елементів використовують лише літери та цифри. Імена класів використовують літери, цифри, дефіси та підкреслення. Щоб повернути вбудований список, спорожніть поле та збережіть. ## Кнопки панелі інструментів для кожної ролі 1. Перейдіть до **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`) і натисніть **Edit** поруч із профілем для цієї ролі. 2. Розгорніть **Text editor buttons (inline editing)**. Позначте кнопки для тексту, який ви редагуєте на сторінці. 3. Розгорніть **Text editor buttons (modal editing)**. Позначте кнопки для текстових полів у діалоговому вікні налаштувань. 4. Натисніть **Save**. Вбудоване редагування охоплює елементи Text, Alert і Blockquote. Тримайте **Font style** позначеним в обох групах, щоб показувати власні стилі; це назва списку **Styles** у профілі. Якщо ви знімете позначки з усіх кнопок групи, ця панель інструментів повернеться до вбудованого набору. Який профіль до кого застосовується, пояснює сторінка [Профілі користувачів](/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%B0%D0%B4%D0%BC%D1%96%D0%BD%D1%96%D1%81%D1%82%D1%80%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%BF%D1%80%D0%BE%D1%84%D1%96%D0%BB%D1%96-%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%87%D1%96%D0%B2). ## Що ви бачите **Styles** на панелі інструментів відкриває панель із двома групами. **Block styles** містить стилі для цілих абзаців і заголовків, **Text styles** для виділених слів. Після вибору стилю кнопка показує його назву або **Multiple styles**, коли застосовується кілька. Редактор зберігає елемент і його класи в HTML сторінки, тож відвідувачі бачать той самий вигляд. Блоковий стиль активний лише у своєму елементі: `Sassy Title` потребує курсору в **Heading 1**. ## Налаштування Усі 36 кнопок є в обох групах. Новий профіль починається з позначеними: | Кнопка | Машинне ім’я | Типово вбудовано | Типово у вікні | |---|---|:-:|:-:| | **AI Assistant**, **AI Tone of Voice** | `aiAgentButton`, `aiAgentToneButton` | так | так | | **Bold**, **Italic** | `bold`, `italic` | так | так | | **Underline**, **Strike through** | `underline`, `strikethrough` | | так | | **Superscript**, **Subscript** | `superscript`, `subscript` | | так | | **Remove format** | `removeFormat` | так | так | | **Text color** | `fontColor` | так | так | | **Background color** | `fontBackgroundColor` | | | | **Font size** | `fontSize` | так | так | | **Font family** | `fontFamily` | | | | **HTML block format** | `heading` | так | так | | **Font style** (список **Styles**) | `style` | так | так | | **Align left**, **Center**, **Align right**, **Justify** | `alignment:left`, `alignment:center`, `alignment:right`, `alignment:justify` | так | так | | **Insert/Remove Bullet list** | `bulletedList` | так | так | | **Insert/Remove Numbered list** | `numberedList` | | так | | **Outdent**, **Indent** | `outdent`, `indent` | | так | | **Block quote** | `blockQuote` | | так | | **Link**, **Image**, **Table** | `link`, `insertImage`, `insertTable` | так | так | | **Horizontal rule**, **Character map** | `horizontalLine`, `specialCharacters` | | так | | **Source code**, **Show blocks** | `sourceEditing`, `showBlocks` | | так | | **Select all**, **Replace**, **Accessibility help** | `selectAll`, `findAndReplace`, `accessibilityHelp` | | | | **Undo**, **Redo** | `undo`, `redo` | так | так | Користувачі, чиї ролі не відповідають жодному ввімкненому профілю, отримують вбудовані панелі інструментів. Вбудовано це **Bold**, **Italic**, **Remove format**, **HTML block format**, **Font style**, обидва списки, **Link**, **Image**, **Table**, **Undo** і **Redo**. Панель у вікні додає кнопки підкреслення, закреслення, надрядкових і підрядкових знаків, вирівнювання, відступів, кольору та розміру. Вона також додає **Block quote**, **Horizontal rule**, **Character map**, **Source code** і **Show blocks**. Коли ШІ ввімкнено, обидві отримують дві кнопки ШІ. **Font family** пропонує стандартні веббезпечні шрифти CKEditor, а не шрифти вашої теми. ## Якщо ви не бачите свого стилю - **Список Styles показує лише вбудовані стилі.** Один рядок порушує формат або порожній рядок стоїть між двома стилями, тож DXPR Builder ігнорує весь список. Виправте його в **Text Editor** за шляхом `/admin/dxpr_studio/dxpr_builder/settings` і збережіть. - **Ваш стиль неактивний.** Блоковий стиль працює лише у своєму елементі: `h1.sassy-title` потребує **Heading 1**. Спершу змініть блок за допомогою списку заголовків або визначте стиль для `p`. - **На панелі інструментів немає кнопки Styles.** У профілі редактора знято позначку з **Font style**. Позначте її в обох групах кнопок за шляхом `/admin/dxpr_studio/dxpr_builder/profile`. - **Стиль застосовується, але текст виглядає так само.** Тема не має CSS для цього класу або Bootstrap 5 не завантажено. Додайте правило до теми або встановіть **Sideload Bootstrap files** у значення **Bootstrap 5** у розділі **Bootstrap** на сторінці General Settings. - **Редактори бачать стиль, а відвідувачі ні.** **Apply text format filters to frontend content** увімкнено в розділі **Text Filters**, і текстовий формат поля вилучає атрибути `class`. Вимкніть цей параметр або надайте полю формат, який зберігає класи; див. [Відвідувачі бачать інше](/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%83%D1%81%D1%83%D0%BD%D0%B5%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B5%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D0%B5%D0%B9/%D0%B2%D1%96%D0%B4%D0%B2%D1%96%D0%B4%D1%83%D0%B2%D0%B0%D1%87%D1%96-%D0%B1%D0%B0%D1%87%D0%B0%D1%82%D1%8C-%D1%96%D0%BD%D1%88%D0%B5). ## Що далі? - [Власний 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%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%B0%D0%B4%D0%BC%D1%96%D0%BD%D1%96%D1%81%D1%82%D1%80%D1%83%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F/%D0%BF%D1%80%D0%BE%D1%84%D1%96%D0%BB%D1%96-%D0%BA%D0%BE%D1%80%D0%B8%D1%81%D1%82%D1%83%D0%B2%D0%B0%D1%87%D1%96%D0%B2): усе інше, чим керує профіль.