Використовуйте кольори свого бренду.

Вивчення DXPR BuilderСтворення сторінокСтилізація елементівПосібники з дизайну

Застосовуйте кольори свого бренду до розділів, тексту та кнопок, щоб кожна сторінка виглядала частиною того самого сайту. Кожне поле кольору в DXPR Builder показує палітру вашої теми як зразки, тож ви обираєте кольори бренду замість вгадування кодів. У прикладі розділ отримує ваш основний колір бренду з білим текстом.

Відео повторює кроки нижче: воно фарбує розділ зразком вашого бренду й робить його текст білим.

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

  • Кольори вашого бренду живуть у темі. З DXPR Theme установіть їх у Appearance > Settings > DXPR Theme (/admin/appearance/settings/dxpr_theme), на панелі Colors.
  • DXPR Builder показує перші десять різних кольорів цієї палітри як зразки.

Фарбування розділу

  1. Наведіть курсор на розділ, відкрийте More і виберіть Settings.
  2. Відкрийте панель Style.
  3. Натисніть кнопку кольору Background. Вибір кольору відкриється з вашими зразками.
  4. Натисніть основний зразок вашого бренду.
  5. Натисніть кнопку кольору Font color і виберіть білий.
  6. Натисніть Save. Текст абзаців стане білим; заголовки збережуть колір заголовків теми.
  7. Щоб зробити білим і заголовок, відкрийте Settings його елемента Text, виберіть білий для Font color на його панелі Style і натисніть Save.

Що ви бачите

Розділ заповнюється кольором вашого бренду, а текст його абзаців і заголовок стають білими. Ті самі зразки з’являються в кожному полі кольору. Це стосується панелей Style і Hover style, а також Start color і End color градієнтного фону Gradient розділу.

Щоб використати колір поза палітрою, введіть його код у текстове поле вибору, наприклад #2196F3. Пересуньте повзунок непрозорості для напівпрозорого кольору. Clear вилучає колір.

Тримайте кольори пов’язаними з темою

Зразок копіює код кольору в елемент. Якщо ви пізніше зміните палітру теми, цей елемент збереже старий колір.

Щоб елемент слідував за палітрою, натомість використайте клас кольору. Відкрийте Settings елемента й виберіть чип у HTML classes:

Чип Що робить
Primary background, Secondary background та інші Кольори Bootstrap з вашої теми
Primary text color, Secondary text color та інші Текстові кольори Bootstrap з вашої теми
Background color: DXPR Theme primary Колір Primary DXPR Theme з відповідним кольором тексту
Text color: DXPR Theme accent1 Колір Secondary DXPR Theme для тексту

Чипи DXPR Theme з’являються лише коли DXPR Theme ввімкнено.

Поля кольору для кожного елемента

Де Що фарбує
Style (панель): Font color, Border color, Background Сам елемент
Hover style (панель): ті самі поля Елемент, поки вказівник на ньому
Button: Type Готова кольорова схема кнопки
Card: Type Фон і текст усієї картки
Alert: Type Success, Info, Warning або Danger
Section: Background effects > Gradient Суміш двох кольорів

Читабельний колір

  • Тримайте достатній контраст між текстом і фоном. WCAG 2.1 рівня AA вимагає щонайменше 4,5 до 1 для звичайного тексту.
  • Не використовуйте сам колір для передачі значення; поєднуйте його з міткою або піктограмою.
  • Чергуйте фони розділів, наприклад білий, світло-сірий і колір вашого бренду, щоб надати довгим сторінкам ритму.

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

  • Вибір кольору не показує зразків. Типова тема вашого сайту не надає палітри кольорів. Вводьте коди своїх кольорів або використайте тему з палітрою, наприклад DXPR Theme.
  • Елемент зберігає свій старий колір після зміни палітри теми. Зразок зберігає фіксований код кольору. Виберіть новий зразок або перейдіть на чип кольору в HTML classes, який слідує за палітрою.
  • Background або Font color не діють на картку. Type картки, відмінний від Default, установлює її кольори класами теми, які перемагають. Спершу встановіть Type у значення Default.

Що далі?