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

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

Тут ви створюєте лендинг для однієї пропозиції: hero-розділ із фото та кнопкою Request a demo, три функції з піктограмами, два відгуки й завершальний заклик до дії. Використовуйте його для кампанії чи сторінки продукту із однією метою. Для цілого сайту на одній сторінці з гортанням натомість виконайте посібник Створення односторінкового сайту з гортанням.

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

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

  • Ваша роль має дозвіл 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 на «Request a demo», Link на /demo, Type на Light і Size на Large, потім натисніть Save.
  6. Натисніть + знову й виберіть Text; він стане над кнопкою. Введіть заголовок як Heading 2, а підзаголовок під ним. Установіть Font color на білий на панелі Style і натисніть Save. Тема виводить заголовок сторінки як Heading 1 сторінки. Щоб натомість зробити цей заголовок Heading 1, див. Створення SEO-дружніх сторінок.

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

  1. Наведіть курсор на hero-розділ і натисніть 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, знайдіть bolt і натисніть піктограму. Установіть Size на Very Large (3x), відкрийте Icon utilities, установіть Style на Circle і натисніть Save.
  5. Повторіть для другого стовпця з chart-line, а для третього з shield.

Крок 3: додавання відгуків

  1. Додайте третій розділ за допомогою Add Section Below. Відкрийте його More > Settings, виберіть світло-сірий Background на панелі Style і натисніть Save.
  2. Натисніть + на розділі й виберіть Row; спочатку він має два рівні стовпці.
  3. Натисніть + у кожному стовпці й виберіть Block quote. Введіть цитату, заповніть Cite ім’ям людини й посадою й натисніть Save.

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

  1. Додайте четвертий розділ і відкрийте його More > Settings. Виберіть Align text center у розділі HTML classes, потім фіолетовий Background і білий Font color на панелі Style. Натисніть Save.
  2. Натисніть + на розділі й виберіть Button. Установіть Title на «Book a walkthrough», Link на /demo, Type на Light і Size на Large, потім натисніть Save.
  3. Натисніть + знову й виберіть Text; він стане над кнопкою. Введіть «See Insight on your own data» як Heading 2 і додайте один рядок. Установіть Font color на білий і натисніть Save.

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

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

Далі

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

  • Lead form: вставте блок вебформи з вкладки Drupal Blocks замість останньої кнопки; див. Додавання форм на сторінки
  • Darker photo: на панелі Background effects hero-розділу встановіть Background effect на Gradient. Виберіть той самий темний колір із непрозорістю близько 60% як Start color і End color
  • Taller hero: дайте hero-розділу 100 пікселів верхніх і нижніх відступів на панелі Style.
  • Start from a template: на порожній сторінці натисніть Choose a template і виберіть макет лендингу; див. Шаблони сторінок

Що ви бачите

Заголовок, підзаголовок і кнопка Request a demo відцентровані білим кольором на фото. Далі йдуть три функції, кожна це піктограма в колі над коротким заголовком і рядком. Дві цитати стоять поруч на сірій смузі, а фіолетова смуга завершує сторінку кнопкою Book a walkthrough.

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

  • Піктограми не мають кола. Style міститься на панелі Icon utilities, а не в General. Відкрийте налаштування піктограми, відкрийте Icon utilities і встановіть Style на Circle.
  • Фото hero-розділу не заповнює розділ. Background style досі на Theme defaults. Відкрийте панель Style розділу й установіть його на Cover.
  • Піктограма опинилася під текстом функції. Піктограму додано перед текстом, а нові елементи стають угорі свого стовпця. Перетягніть піктограму над текст за ручку перетягування на її панелі керування.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?