Створення каталогу команди.

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

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

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

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

  • Ваша роль має дозвіл 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, потім натисніть Save.
  3. Натисніть + на розділі й виберіть Text на вкладці Content.
  4. Введіть «Our team» як Heading 2, додайте один рядок вступу й натисніть Save. Тема виводить заголовок сторінки як Heading 1 сторінки. Щоб натомість зробити цей заголовок Heading 1, див. Створення SEO-дружніх сторінок.

Крок 2: додавання керівних карток

  1. Наведіть курсор на розділ і натисніть Add Section Below. Відкрийте More > Settings нового розділу, виберіть світло-сірий Background на панелі Style і натисніть Save.
  2. Натисніть + на розділі й виберіть Row. Натисніть його піктограму сітки (Column layout), виберіть пресет 1/3 + 1/3 + 1/3 і натисніть Save.
  3. Натисніть + у першому стовпці й виберіть Card. Відкрийте його More > Settings, установіть Header на посаду, а Title на ім’я, потім натисніть Save.
  4. Додайте Card до другого стовпця так само.
  5. Натисніть + у третьому стовпці й виберіть Social links. Спочатку він має два зразки рядків. Введіть linkedin поверх «Facebook» у першому рядку й введіть URL профілю поруч. Видаліть другий рядок його кнопкою ×, установіть Style на Circle, а Size на 2x, потім натисніть Save.
  6. Натисніть + у тому самому стовпці й виберіть Card; він стане над посиланнями. Установіть його Header і Title так само й натисніть Save.
  7. Натисніть + на розділі й виберіть Text; він стане над рядком. Введіть «Leadership» як Heading 2 і натисніть Save.

Крок 3: додавання сітки команди

  1. Додайте третій розділ за допомогою Add Section Below, потім Row. Натисніть його піктограму сітки (Column layout), виберіть пресет 1/4 + 1/4 + 1/4 + 1/4 і натисніть Save.
  2. Додайте Card до кожного стовпця. Відкрийте його More > Settings, установіть посаду як Header, а ім’я як Title, і натисніть Save.
  3. Натисніть + на розділі й виберіть Text; він стане над рядком. Введіть «The team» як Heading 2 і натисніть Save.

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

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

Далі

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

  • Photos and biographies: натисніть + на картці й додайте елемент Text із біографією. Потім натисніть + на картці знову й додайте Image; він стане над текстом. Заповніть Alt attribute ім’ям людини.
  • Rounded photos: на кожному зображенні встановіть Border radius на панелі Style. Значення в пікселях, до 100.
  • Lift on hover: на панелі Hover style картки встановіть Drop shadow на 2.
  • Team that updates itself: створіть тип вмісту «Team member» і вигляд Grid з відображенням типу «блок». Вставте вигляд із вкладки Drupal Views, і редактори додаватимуть людей, не торкаючись сторінки.

Що ви бачите

«Our team» відцентровано вгорі. На сірій смузі три керівні картки показують кожну посаду в заголовку, а ім’я під ним, із круглою піктограмою LinkedIn під третьою. Далі йде «The team» із чотирма картками поруч.

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

  • Картка не показує діалогове вікно налаштувань після додавання. Картки відкриваються порожніми, без діалогового вікна. Наведіть курсор на картку й відкрийте More > Settings, щоб заповнити Header і Title.
  • Соціальне посилання показує «No matching brand icon found». Бренд не є відомим ім’ям піктограми. Введіть його малими літерами, наприклад linkedin.
  • Піктограма LinkedIn опинилася над карткою. Картку додано перед посиланнями, а нові елементи стають угорі свого стовпця. Перетягніть картку над посилання за ручку перетягування на її панелі керування.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?