Створення сторінки продукту.

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

Тут ви створюєте сторінку одного продукту. Фото стоїть поруч із назвою, ціною й кнопкою Buy now, далі три функції, список характеристик і заклик до купівлі. Використовуйте її для всього, що продаєте. Щоб порівняти кілька планів, додайте до неї таблицю цін.

Відео створює сторінку апаратного продукту під назвою Insight Hub.

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

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

Крок 1: додавання продукту

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout.
  2. Натисніть + на розділі й виберіть Row; спочатку він має два рівні стовпці.
  3. Натисніть + у лівому стовпці й виберіть Image. Натисніть Select Image, позначте фото продукту й натисніть Insert selected. Введіть Alt attribute на панелі SEO і натисніть Save.
  4. Натисніть + у правому стовпці й виберіть Button. Установіть Title на «Buy now», Link на ваш магазин, Type на Primary і Size на Large, потім натисніть Save.
  5. Натисніть + у правому стовпці знову й виберіть Text; він стане над кнопкою. Введіть ціну як Heading 2 і натисніть Save.
  6. Натисніть + ще раз і виберіть Text; він стане вгорі. Введіть назву продукту як Heading 2, додайте один рядок опису й натисніть Save. Тема виводить заголовок сторінки як Heading 1 сторінки. Щоб натомість зробити цей заголовок Heading 1, див. Створення SEO-дружніх сторінок.

Крок 2: додавання функцій

  1. Наведіть курсор на розділ і натисніть Add Section Below. Дайте новому розділу клас Align text center.
  2. Натисніть + на розділі й виберіть Row. Натисніть його піктограму сітки (Column layout), виберіть пресет 1/3 + 1/3 + 1/3 і натисніть Save.
  3. Натисніть + у першому стовпці й виберіть Text. Введіть назву функції як Heading 3, додайте один рядок і натисніть Save.
  4. Натисніть + у тому самому стовпці й виберіть Icon; він стане над текстом. Виберіть набір Font Awesome Free Solid, знайдіть plug і натисніть піктограму. Установіть Size на Very Large (3x), відкрийте Icon utilities, установіть Style на Circle і натисніть Save.
  5. Повторіть для другого стовпця з cloud, а для третього з battery-full.

Крок 3: додавання характеристик

  1. Додайте третій розділ за допомогою Add Section Below. Відкрийте його More > Settings, виберіть світло-сірий Background на панелі Style і натисніть Save.
  2. Натисніть + на розділі й виберіть Text. Введіть «Specifications» як Heading 2, потім по одній характеристиці на рядок, і натисніть Save.

Крок 4: додавання заклику до дії

  1. Додайте четвертий розділ і відкрийте його More > Settings. Виберіть Align text center у розділі HTML classes, потім фіолетовий Background і білий Font color на панелі Style. Натисніть Save.
  2. Натисніть + на розділі й виберіть Button. Установіть Title на «Talk to sales», Link на /contact, Type на Light і Size на Large, потім натисніть Save.
  3. Натисніть + знову й виберіть Text; він стане над кнопкою. Введіть «Insight Hub from 249 euro» як Heading 2 і додайте один рядок. Установіть Font color на білий і натисніть Save.

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

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

Далі

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

  • Specification table: вставте таблицю кнопкою Table на текстовій панелі інструментів замість одного рядка на характеристику.
  • Gallery: замініть одне фото на Image carousel зі знімками продукту.
  • Plans: дайте ціні посилання на таблицю цін.

Що ви бачите

Фото продукту заповнює ліву половину, з назвою, ціною й кнопкою Buy now праворуч. Далі йдуть три центровані функції, кожна це піктограма в колі над назвою й рядком. Характеристики стоять на сірій смузі, а фіолетова смуга завершує сторінку кнопкою Talk to sales.

Якщо сторінка виглядає не так, як показано

  • Назва, ціна й кнопка в неправильному порядку. Їх додано зверху вниз, а нові елементи стають угорі свого стовпця. Перетягніть їх на місце за ручку перетягування на їхній панелі керування.
  • Піктограми не мають кола. Style міститься на панелі Icon utilities, а не в General. Відкрийте налаштування піктограми, відкрийте Icon utilities і встановіть Style на Circle.
  • Заголовок лишається темним на фіолетовому. Елемент Text не має власного Font color. Відкрийте його панель Style і встановіть Font color на білий.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?