Створення таблиці цін.

Вивчення DXPR BuilderСтворення сторінокПокрокові інструкції

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

Відео створює три плани для звітного інструмента.

Перед початком

  • Ваша роль має дозвіл Edit with DXPR Builder.
  • Сторінка відкрита в конструкторі. Для нової перейдіть до Content > Add content > Landing Page (/node/add/landing_page) і натисніть Save.
  • Нові елементи стають угорі свого контейнера, тож у кожній панелі кнопка додається перед ціною.

Крок 1: додавання розділу й стовпців

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout.
  2. Наведіть курсор на розділ і відкрийте More > Settings. У розділі HTML classes виберіть Align text center. Відкрийте панель Style, виберіть світло-сірий Background і натисніть Save.
  3. Натисніть + на розділі й виберіть Row; спочатку він має два рівні стовпці.
  4. Натисніть піктограму сітки рядка (Column layout), виберіть пресет 1/3 + 1/3 + 1/3 і натисніть Save.

Крок 2: створення першого плану

  1. Натисніть + у першому стовпці й виберіть Panel на вкладці Content.
  2. Наведіть курсор на панель і відкрийте More > Settings. Установіть Title на «Starter», лишіть Type на DXPR і натисніть Save.
  3. Натисніть + на панелі й виберіть Button. Установіть Title на «Choose plan», Link на /signup, а Type на Primary. Увімкніть Block button, щоб вона заповнила стовпець, потім натисніть Save.
  4. Натисніть + на панелі знову й виберіть Text; він стане над кнопкою. Введіть ціну як Heading 2, додайте функції по одній на рядок і натисніть Save.

Крок 3: створення інших планів

  1. Повторіть крок 2 у другому стовпці для «Professional». На панелі Style панелі виберіть фіолетовий Background, а Type кнопки встановіть на Success, щоб план виділявся.
  2. Повторіть крок 2 у третьому стовпці для «Enterprise», із «Custom pricing» як ціною.

Порада

Середній стовпець притягує погляд. Розмістіть там план, який найбільше хочете продати.

Крок 4: додавання заголовка

  1. Натисніть + на розділі й виберіть Text; він стане над рядком.
  2. Введіть «Choose your plan» як Heading 2, додайте один рядок, як-от «Simple monthly pricing. Cancel any time.», і натисніть Save.

Крок 5: збереження й попередній перегляд

  1. Натисніть Save на панелі інструментів конструктора.
  2. Відкрийте меню перегляду (піктограма ока) і виберіть Preview.

Далі

Не показано у відео:

  • Four plans: натомість виберіть пресет 1/4 + 1/4 + 1/4 + 1/4 і створіть четвертий стовпець.
  • Most popular badge: додайте елемент Text угорі виділеної панелі з «Most popular» жирним.
  • Annual and monthly: додайте рядок Text над рядком, як-от «Monthly | Annual (save 20%)». Рядок статичний; живий перемикач потребує елемента HTML із власним скриптом.
  • Feature ticks: вставте галочку перед кожним рядком функцій або додайте елемент Icon над списком.

Що ви бачите

«Choose your plan» відцентровано над трьома планами на сірій смузі. Кожна панель показує свою назву в рядку заголовка, ціну, три функції й кнопку Choose plan на повну ширину. Середній план виділяється фіолетовим із зеленою кнопкою.

Якщо плани виглядають не так, як показано

  • Панель відкривається без діалогового вікна налаштувань. Панелі відкриваються порожніми, без діалогового вікна. Наведіть курсор на панель і відкрийте More > Settings, щоб установити її Title.
  • Тип панелі, як-от Primary, не показує кольору. Ваша тема не стилізує цей тип панелей. Лишіть Type на DXPR і виберіть Background на панелі Style панелі, як у кроці 3.
  • Кнопки завширшки лише як їхній текст. Block button вимкнено. Відкрийте налаштування кожної кнопки й увімкніть його.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?