Стилізуйте свої картки.

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

Надайте своїм карткам вигляд, що пасує вашому сайту: кольорову схему з Type картки, заокруглені кути й тінь з панелі Style. Наприкінці ви матимете картку, яку можна повторювати в рядку для функцій, членів команди або цін. Як спершу розмістити картку на сторінці, див. Додавання картки.

Відео повторює кроки нижче: воно надає картці світлого вигляду, круглих кутів і м’якої тіні.

Стилізація картки

  1. Наведіть курсор на картку, відкрийте More і виберіть Settings.
  2. У розділі Type виберіть Light.
  3. Відкрийте панель Style.
  4. Установіть Border radius у значення 8.
  5. Установіть Drop shadow у значення 2.
  6. Натисніть Save.

Що ви бачите

Картка має світлий фон, заокруглені кути й м’яку тінь. Її смуга Header розташована вгорі, її Title відкриває тіло, а додані всередину елементи йдуть нижче.

Параметр Type фарбує всю картку, а не лише шапку. Primary, Secondary, Success, Info, Warning, Danger і Dark заповнюють картку цим кольором теми й роблять текст білим. Light дає світлий фон зі звичайним текстом. Default залишає картку вашій темі.

Налаштування

Налаштування Де Що робить
Header General Текст у смузі вгорі картки; залиште порожнім, щоб смуги не було
Title General Заголовок угорі тіла картки
Type General Кольорова схема всієї картки; типово Default
Background, Font color Style Ваші власні кольори, коли Type має значення Default
Border radius Style Заокруглені кути, у пікселях
Drop shadow Style Глибина, від 1 до 5
Border (блокова модель), Border style, Border color Style Рамка з одного або кількох боків

Шаблони карток

  • Плоска картка: Border style Solid, світлий Border color, Border radius 4, без тіні.
  • Піднята картка: Drop shadow 2, Border style None, Border radius 8.
  • Виділена картка: установіть лівий бік Border у блоковій моделі в значення 4, Border style Solid і акцентний Border color.
  • Картка, що піднімається: Drop shadow 1 у Style і 4 у Hover style; див. Змусьте елементи реагувати на наведення.

Картки в ряд

Для сітки карток функцій, членів команди або цін:

  1. Додайте рядок і виберіть макет із трьома або чотирма рівними колонками.
  2. Додайте картку до кожної колонки й надайте кожній картці однакові значення Type і Style.
  3. Відкрийте меню More рядка, виберіть Settings і ввімкніть Equal-height columns.

Колонки вирівнюються, але кожна картка лишається заввишки зі свій вміст. Тримайте текст кожної картки приблизно однакової довжини, щоб картки закінчувалися на однаковій висоті. Для таблиці цін виділіть рекомендований план іншим Type або глибшим Drop shadow.

Якщо ви не бачите стилю

  • Background або Font color на панелі Style не діють. Type, відмінний від Default, установлює кольори картки класами теми, які перемагають панель Style. Установіть Type у значення Default і виберіть власні кольори.
  • Білий текст на кольоровій картці важко читати. Кольори Warning і Info багатьох тем бліді, а ці типи завжди встановлюють білий текст. Виберіть темніший Type або Light, який зберігає звичайний колір тексту.
  • Тінь не показується. Drop shadow має значення 0, що означає відсутність тіні. Установіть 1 або більше.

Що далі?