Проєктування hero-розділу.

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

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

Відео створює hero-розділ звітного продукту.

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

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

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

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout. Наведіть на нього курсор і відкрийте More > Settings.
  2. У розділі HTML classes виберіть Align text center, щоб заголовок, текст і кнопка центрувалися разом.
  3. Увімкніть 100% height, щоб hero-розділ заповнив екран, і Vertical centering, щоб вміст був посередині.
  4. Відкрийте панель Style. У розділі Background image натисніть Select Image, позначте широке фото й натисніть Insert selected.
  5. Установіть Background style на Cover, щоб фото заповнило розділ.
  6. Виберіть темний колір Background, який показується, доки фото завантажується. Установіть Font color на білий, потім натисніть Save.

Порада

Стисніть фото до менш ніж 500 КБ, щоб hero-розділ завантажувався швидко.

Крок 2: додавання кнопки

  1. Натисніть + на розділі й виберіть Button на вкладці Content.
  2. Установіть Title на «Start free trial», Link на /trial, Type на Light для контрасту на фото й Size на Large, потім натисніть Save.

Крок 3: додавання заголовка

  1. Натисніть + на розділі знову й виберіть Text на вкладці Content. Він стане над кнопкою, бо нові елементи стають угорі.
  2. Введіть ваш заголовок, «Reporting that keeps up with your team», і виберіть Heading 2 у розкривному списку заголовків. Тема виводить заголовок сторінки як Heading 1 сторінки. Щоб натомість зробити цей заголовок Heading 1, див. Створення SEO-дружніх сторінок.
  3. Додайте один супровідний рядок: «Dashboards, alerts and integrations in one workspace. Set up in minutes, no developers required.»
  4. На панелі Style установіть Font color на білий, потім натисніть Save.

Крок 4: додавання паралакса

  1. Наведіть курсор на розділ і відкрийте More > Settings знову.
  2. Відкрийте панель Background effects і встановіть Background effect на Parallax image. Parallax speed починається з 20; перетягніть до 35 для сильнішого ефекту й натисніть Save.

Крок 5: додавання вмісту під hero-розділом

  1. Наведіть курсор на hero-розділ і натисніть Add Section Below, щоб сторінка мала вміст для гортання.
  2. Натисніть + на новому розділі й виберіть Text на вкладці Content. Введіть заголовок і короткий абзац, установіть перший рядок на Heading 2 і натисніть Save.

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

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

Далі

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

  • Overlay: установіть Background effect на Gradient і виберіть темні Start color і End color із непрозорістю близько 50%. Текст лишається читабельним на будь-якому фото. Ефект має лише одне значення, тож накладання замінює паралакс.
  • Shorter hero: вимкніть 100% height і задайте розділу власні верхній і нижній відступи на панелі Style, наприклад 100 пікселів.
  • Wide button: увімкніть Block button для кнопки завширшки зі стовпець.

Варіації

Альтернативи до показаного у відео:

Hero-розділ із фоновим відео

  1. На панелі Background effects установіть Background effect на YouTube video.
  2. Вставте URL відео в поле YouTube video URL.
  3. У розділі Video options позначте Loop і Disable on mobile devices; звук лишіть вимкненим.

Hero-розділ лише з градієнтом

Пропустіть фонове зображення й використовуйте ефект Gradient із двома суцільними брендовими кольорами для hero-розділу, що швидко завантажується.

Розділений hero-розділ

  1. Додайте Row усередині розділу; спочатку він має два рівні стовпці.
  2. Розмістіть текст і кнопку в лівому стовпці, а зображення в правому стовпці.

Що ви бачите

Фото заповнює екран із вашим заголовком, супровідним рядком і кнопкою Start free trial, відцентрованими білим кольором угорі. Коли ви гортаєте вниз до другого розділу, фото рухається повільніше за сторінку.

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

  • Hero-розділ заввишки лише як його текст. 100% height вимкнено. Увімкніть його в налаштуваннях розділу й натисніть Save.
  • Фото стоїть на місці, коли ви гортаєте. Background effect досі на Simple image, Parallax speed дорівнює 0, або під hero-розділом нічого немає, куди гортати. Установіть Parallax image, перетягніть Parallax speed вище 0 і додайте другий розділ із кроку 5.
  • Заголовок лишається темним на фото. Елемент Text не має власного Font color. Відкрийте його панель Style і встановіть Font color на білий.

Що далі?