Оберіть стилі кнопок, які ведуть відвідувачів.

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

Ви вирішуєте, наскільки помітною буде кожна кнопка. Суцільна кнопка позначає одну дію, яку ви хочете найбільше, а контурна кнопка поруч пропонує альтернативу, не конкуруючи. Ця сторінка показує, як стилізувати таку пару і яке налаштування що змінює. Як додати кнопку та встановити її посилання, див. Додавання кнопки.

Відео повторює кроки нижче: воно робить Apply now головною кнопкою й додає другу контурну кнопку.

Стилізація головної та другої кнопок

Почніть із кнопки на сторінці, наприклад Apply now.

  1. Наведіть курсор на кнопку й відкрийте More > Settings.
  2. Установіть Type у значення Primary.
  3. Установіть Size у значення Large і натисніть Save.
  4. Знову наведіть курсор на кнопку й відкрийте More > Clone. Копія з’явиться просто під оригіналом.
  5. Відкрийте More > Settings на копії. Змініть її Title, наприклад на Download brochure, та її Link.
  6. Увімкніть Outline style і натисніть Save.
  7. Натисніть Save на панелі інструментів.

Виберіть стиль для кожної дії

Дія Стиль Приклад
Одна дія, яку ви хочете найбільше Суцільна Primary Apply now
Альтернатива Outline style у тому самому Type Download brochure
Другорядна дія Link, який виглядає як текстове посилання Read the terms
Попередження або останній крок Danger або Warning Cancel my booking

Використовуйте одну суцільну кнопку на розділ, щоб відвідувачі одразу бачили, куди натискати. Пишіть мітки, які кажуть, що станеться: «Get started», а не «Click here»; «Send message», а не «Submit».

Що ви бачите

Дві великі кнопки розташовуються в колонці одна під одною: суцільна з основним кольором вашої теми й контурна з рамкою та текстом того самого кольору. Суцільна першою привертає погляд. Під час редагування посилання не відкриваються. Щоб перевірити їх, збережіть сторінку, відкрийте меню перегляду (піктограма ока) і виберіть Preview.

Панель General кнопки Button з увімкненим Outline style, Type Primary і Size Large, поруч із суцільною кнопкою Apply now та контурною кнопкою Download brochure під нею

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

Налаштування Що робить Типово
Type Стиль кольору: Primary, Secondary, Success, Info, Warning, Danger, Link, Light або Dark. Кольори беруться з вашої теми. Primary
Outline style Кольорова рамка й текст без заливки Вимкнено
Size Normal, Large або Small Normal
Block button Розтягує кнопку на повну ширину її колонки Вимкнено
Link target Same window або New window. Показується, коли Link має значення. Same window

Для розробників тем: кожен Type додає клас Bootstrap btn-<type>, наприклад btn-primary. З увімкненим Outline style він стає btn-outline-<type>, крім Link, який завжди лишається btn-link. Large додає btn-lg, Small додає btn-sm, а Block button додає btn-block.

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

  • Контурна кнопка не показує рамки. Type має значення Link, який завжди виглядає як текстове посилання, тож Outline style не діє. Виберіть інший Type для контурної кнопки.
  • Кнопка майже зникає. Light близький до білого, тож він губиться на білому розділі. Виберіть темніший Type або надайте розділу колір фону.
  • Посилання відкривається в тій самій вкладці. Link target має значення Same window, і воно показується лише коли Link має значення. Спершу заповніть Link, потім виберіть New window.

Що далі?