Створення сторінки «Про нас».

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

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

Відео створює сторінку для дизайн-студії в Роттердамі.

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

  • Ваша роль має дозвіл Edit with DXPR Builder.
  • Медіабібліотека містить фото вашого офісу, команди чи продукту.
  • Сторінка існує: перейдіть до Content > Add content > Landing Page (/node/add/landing_page), введіть «About Us» як Title і натисніть Save. Сторінка відкриється з конструктором на ній.
  • На DXPR CMS приховайте заголовок сторінки теми на цій сторінці: у формі її редагування відкрийте DXPR Theme Settings і позначте Page Title у розділі DXPR Hide Regions. Title елемента Jumbotron тоді буде єдиним Heading 1 сторінки, як пояснює посібник Створення SEO-дружніх сторінок.
  • Нові елементи стають угорі свого розділу чи стовпця. Додавайте рядки розділу або елементи стовпця у зворотному порядку, або потім перетягніть їх на місце.

Крок 1: додавання заголовка з місією

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout.
  2. Наведіть курсор на розділ і відкрийте More > Settings. Відкрийте панель Style, виберіть темний зразок Background і натисніть Save.
  3. Натисніть + на розділі й виберіть Jumbotron на вкладці Content.
  4. Введіть вашу місію як Title: «We build websites people enjoy using».
  5. Введіть супровідне речення в полі Lead: «A 24-person studio in Rotterdam working with brands across Europe since 2012.»
  6. Установіть Type на Primary для білого тексту на вашому основному кольорі, потім натисніть Save.

Крок 2: розповідь історії компанії

  1. Наведіть курсор на розділ і натисніть Add Section Below, + під ним.
  2. Натисніть + на новому розділі й виберіть Row; спочатку він має два рівні стовпці. Натисніть піктограму сітки (Column layout) на рядку, виберіть пресет 2/3 + 1/3 і натисніть Save.
  3. Натисніть + у ширшому стовпці й виберіть Text. Введіть «Our story» як Heading 2, потім два короткі абзаци: як ви починали й як проходить проєкт. Натисніть Save.
  4. Натисніть + у вужчому стовпці й виберіть Image.
  5. Натисніть Select Image, знайдіть у медіабібліотеці за допомогою Apply filters, позначте фото вашого офісу чи команди й натисніть Insert selected.
  6. Відкрийте панель SEO, заповніть Alt attribute і натисніть Save.

Порада

Робіть історію короткою й розбийте її підзаголовком. Відвідувачі спочатку сканують, потім читають.

Крок 3: додавання ключових показників із лічильниками

  1. Додайте третій розділ за допомогою Add Section Below. Відкрийте його More > Settings, виберіть світло-сірий Background на панелі Style і натисніть Save.
  2. Натисніть + на розділі й виберіть Row. Натисніть його піктограму сітки (Column layout), виберіть пресет 1/3 + 1/3 + 1/3 і натисніть Save.
  3. У кожному стовпці додайте елемент Text із міткою показника: «Projects delivered», «Years in business», «Clients who return».
  4. У кожному стовпці натисніть + знову й виберіть Number counter; він стане над міткою. Установіть:
    • End: показник (140, 12, 98)
    • Suffix: «+» або «%», де застосовується
    • Thousands separator: Comma
    • Speed: 2500, час у мілісекундах, за який число зростає
  5. Натисніть Save на кожному лічильнику.

Лічильник не має власного поля мітки, тому під ним міститься елемент Text.

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

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

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

  1. Додайте останній розділ за допомогою Add Section Below і відкрийте його More > Settings. У розділі HTML classes виберіть Align text center, щоб текст і кнопка центрувалися разом. На панелі Style виберіть ваш брендовий колір як Background і білий як Font color, потім натисніть Save.
  2. Натисніть + на розділі й виберіть Button. Установіть Title на «Get in touch», Link на /contact, Type на Light і Size на Large, потім натисніть Save.
  3. Натисніть + на розділі знову й виберіть Text; він стане над кнопкою. Введіть «Want to work with us?» як Heading 2, потім «We take on a handful of new clients each quarter.» На панелі Style установіть Font color на білий, потім натисніть Save.

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

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

Далі

Не показано у відео, але варто додати:

  • Біографію Text і портрет Image усередині кожної картки, а Social links під нею
  • 100% height у налаштуваннях першого розділу для заголовка, що заповнює екран

Що ви бачите

Попередній перегляд показує п’ять смуг. Темний заголовок містить вашу місію та її лід білим. Ваша історія розміщена поруч із фото. На сірій смузі три числа зростають від нуля, коли з’являються на екрані під час гортання.

Заголовок команди відцентровано над трьома картками, кожна із ім’ям і посадою. Завершальна смуга центрує білий заголовок над світлою кнопкою Get in touch. Виберіть Edit у меню перегляду, щоб продовжити роботу.

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

  • На порожній сторінці немає кнопки Add Elements. Помічник створення сторінок вимкнено, тож сторінка пропонує лише Choose a template. Натомість натисніть порожню область, щоб відкрити вибір елементів.
  • Новий елемент опиняється над тим, що ви додали раніше. Конструктор вставляє нові елементи угорі свого розділу чи стовпця. Перетягніть його на місце за ручку перетягування на його панелі керування.
  • Number counter або Card немає у виборі. Ваш профіль користувача DXPR Builder його ховає. Попросіть адміністратора позначити його в розділі Elements за адресою DXPR Studio > DXPR Builder > User Profiles (/admin/dxpr_studio/dxpr_builder/profile).
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?