Створення кейса.

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

Тут ви описуєте один клієнтський проєкт у трьох частинах: виклик, рішення й результати. У результаті ви маєте сім смуг: hero-розділ із фото, огляд із головним числом, виклик, рішення поруч із фото, три лічильники, цитату й заклик до дії. Щоб показати багато проєктів на одній сторінці, натомість виконайте посібник Створення галереї портфоліо.

Відео описує роботу агенції для Northwind Retail.

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

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

Крок 1: додавання hero-розділу

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout. Наведіть на нього курсор і відкрийте More > Settings.
  2. У розділі HTML classes виберіть Align text center.
  3. Відкрийте панель Style. У розділі Background image натисніть Select Image, позначте фото й натисніть Insert selected. Установіть Background style на Cover.
  4. Виберіть темно-синій Background і білий Font color, потім натисніть Save. Колір показується, доки фото завантажується.
  5. Натисніть + на розділі й виберіть Button. Установіть Title на «Visit the site», Link на URL клієнта, Type на Light і Size на Large, потім натисніть Save.
  6. Натисніть + знову й виберіть Text; він стане над кнопкою. Введіть ім’я клієнта як Heading 2, а однорядковий підсумок під ним. Установіть Font color на білий на панелі Style і натисніть Save. Тема виводить заголовок сторінки як Heading 1 сторінки. Щоб натомість зробити цей заголовок Heading 1, див. Створення SEO-дружніх сторінок.

Крок 2: додавання огляду

  1. Наведіть курсор на hero-розділ і натисніть Add Section Below. Додайте Row до нового розділу, натисніть його піктограму сітки (Column layout), виберіть пресет 2/3 + 1/3 і натисніть Save.
  2. Натисніть + у широкому стовпці й виберіть Text. Введіть «Overview» як Heading 2, додайте підсумок і натисніть Save.
  3. Натисніть + у вузькому стовпці й виберіть Text. Введіть мітку метрики, «More online orders», і натисніть Save.
  4. Натисніть + у вузькому стовпці знову й виберіть Number counter; він стане над міткою. Установіть End на 32, Suffix на %, Thousands separator на Comma, установіть Speed на 2500, потім натисніть Save.

Лічильник не має власного поля мітки; цю роботу робить елемент Text під ним.

Крок 3: додавання виклику

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

Крок 4: додавання рішення

  1. Додайте четвертий розділ, потім Row; спочатку він має два рівні стовпці.
  2. Натисніть + у лівому стовпці й виберіть Text. Введіть «The solution» як Heading 2, опишіть створене й натисніть Save.
  3. Натисніть + у правому стовпці й виберіть Image. Натисніть Select Image, позначте фото результату й натисніть Insert selected. Введіть Alt attribute на панелі SEO і натисніть Save.

Крок 5: додавання результатів

  1. Додайте п’ятий розділ і відкрийте його More > Settings. Виберіть Align text center у розділі HTML classes, потім темно-синій Background і білий Font color на панелі Style. Натисніть Save.
  2. Натисніть + на розділі й виберіть Row. Натисніть його піктограму сітки (Column layout), виберіть пресет 1/3 + 1/3 + 1/3 і натисніть Save.
  3. У кожному стовпці спочатку додайте мітку Text, потім Number counter над нею, як у кроці 2: End 32 із Suffix %, End 2 із Suffix s і End 15000.

Крок 6: додавання цитати

  1. Додайте шостий розділ.
  2. Натисніть + на розділі й виберіть Block quote. Введіть слова клієнта, заповніть Cite ім’ям і посадою клієнта й натисніть Save.

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

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

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

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

Що ви бачите

Ім’я клієнта й кнопка Visit the site відцентровано на фото. Огляд показує 32% поруч із підсумком; відвідувачі бачать, як число зростає, коли воно з’являється на екрані під час гортання. Виклик стоїть на сірій смузі, а рішення розміщено поруч зі своїм фото.

На темно-синій смузі три результати зростають, коли з’являються на екрані під час гортання: 32%, 2s і 15 000. Цитата клієнта й фіолетова смуга Contact us завершують сторінку.

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

  • Фото hero-розділу не заповнює розділ. Background style досі на Theme defaults. Відкрийте панель Style розділу й установіть його на Cover.
  • Останній лічильник показує 15000 без коми. Thousands separator досі на None. Відкрийте налаштування лічильника й виберіть Comma.
  • Мітка опинилася над своїм лічильником. Лічильник додано перед своєю міткою, а нові елементи стають угорі свого стовпця. Перетягніть мітку під лічильник за ручку перетягування на її панелі керування.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?