Додайте брендові стилі та кнопки до текстового редактора.

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

Коли редактори натискають на текст у DXPR Builder, з’являється панель інструментів. Ви можете наповнити її список Styles своїми брендовими стилями, наприклад вступним абзацом або виділеною фразою. Ви також можете вибрати, які кнопки бачить кожна роль. Тоді редактори застосовують брендовий вигляд одним натисканням замість ручного налаштування розмірів і кольорів. Шрифти беруться з вашої теми; див. Власні шрифти.

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

  • Щоб редагувати стилі, вам потрібен дозвіл Administer DXPR Builder configuration.
  • Щоб редагувати кнопки панелі інструментів, вам потрібен дозвіл Administer dxpr builder profile.
  • Кожен стиль потребує CSS за собою. Класи Bootstrap 5, як-от lead, працюють, коли сторінка завантажує Bootstrap 5. Ваші власні класи потребують правила в темі; див. Власний 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 на панелі інструментів і виберіть свій стиль.

Ці рядки додають чотири стилі:

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 у профілі. Якщо ви знімете позначки з усіх кнопок групи, ця панель інструментів повернеться до вбудованого набору. Який профіль до кого застосовується, пояснює сторінка Профілі користувачів.

Що ви бачите

Styles на панелі інструментів відкриває панель із двома групами. Block styles містить стилі для цілих абзаців і заголовків, Text styles для виділених слів. Після вибору стилю кнопка показує його назву або Multiple styles, коли застосовується кілька.

Текстова панель інструментів елемента Text, чия кнопка Styles показує Lead, над абзацом із кареткою, тепер набраним більшим стилем Lead над звичайним абзацом

Редактор зберігає елемент і його класи в 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. Вимкніть цей параметр або надайте полю формат, який зберігає класи; див. Відвідувачі бачать інше.

Що далі?