Створення бази знань.

Вивчення 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 і білий Font color, потім натисніть Save.
  3. Натисніть + на розділі й виберіть Text. Введіть «Help centre» як Heading 2 і додайте «How can we help you today?». Установіть Font color на білий на панелі Style і натисніть 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. Натисніть + у першому стовпці й виберіть Card. Відкрийте його More > Settings, установіть Header на назву категорії, а Title на кількість статей, потім натисніть Save.
  4. Натисніть + у тому самому стовпці й виберіть Icon; він стане над карткою. Виберіть набір Font Awesome Free Solid, знайдіть rocket і натисніть піктограму. Установіть Size на Extra Large (2x) і натисніть Save.
  5. Повторіть для другого стовпця з credit-card, а для третього з screwdriver-wrench.
  1. Додайте третій розділ за допомогою Add Section Below. Відкрийте його More > Settings, виберіть світло-сірий Background на панелі Style і натисніть Save.
  2. Натисніть + на розділі й виберіть Row; спочатку він має два рівні стовпці.
  3. Натисніть + у кожному стовпці й виберіть Text. Введіть три заголовки статей, по одному на рядок, і натисніть Save.
  4. Натисніть + на розділі й виберіть Text; він стане над рядком. Введіть «Popular articles» як Heading 2 і натисніть Save.

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

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

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

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

Далі

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

  • Search box: увімкніть модуль ядра Search у розділі Extend. Натисніть + у розділі заголовка, відкрийте вкладку Drupal Blocks і виберіть Block: Forms: Search form. Відвідувачі потрапляють на /search/node.
  • Clickable cards: спочатку додайте до стовпця елемент Link і встановіть його Link на сторінку категорії. Потім додайте Card усередині нього.
  • Article links: виділіть кожен заголовок у списках і дайте йому посилання кнопкою посилання на панелі інструментів.
  • More categories: додайте другий Row із тим самим пресетом. Поширені: Using the editor, Templates and design і API and development.

Що ви бачите

Темно-синій заголовок вітає відвідувачів написом «Help centre» білим. Далі йдуть три центровані категорії, кожна це піктограма над карткою з назвою й кількістю статей. Сіра смуга перелічує шість популярних статей у двох стовпцях, а фіолетова смуга пропонує Contact support.

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

  • Картка не показує діалогове вікно налаштувань після додавання. Картки відкриваються порожніми, без діалогового вікна. Наведіть курсор на картку й відкрийте More > Settings, щоб заповнити Header і Title.
  • Піктограма опинилася під своєю карткою. Піктограму додано перед карткою, а нові елементи стають угорі свого стовпця. Перетягніть піктограму над картку за ручку перетягування на її панелі керування.
  • Заголовок лишається темним на темно-синьому. Елемент Text не має власного Font color. Відкрийте його панель Style і встановіть Font color на білий.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?