Створення сторінки події.

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

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

Відео створює сторінку для дня відкритих дверей університету.

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

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

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

  1. Наведіть курсор на hero-розділ і натисніть Add Section Below. Натисніть + на новому розділі й виберіть Row; його два рівні стовпці це потрібний вам поділ.
  2. Натисніть + у лівому стовпці й виберіть Text. Введіть «Event details» як Heading 2, додайте по одному рядку для дати, місця й контактів і натисніть Save.
  3. Натисніть + у правому стовпці й виберіть Map. Введіть Address місця, установіть Map height на 320 і натисніть Save.

Крок 3: додавання спікерів

  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: додавання заклику до реєстрації

  1. Додайте четвертий розділ і відкрийте його More > Settings. Виберіть Align text center у розділі HTML classes, потім фіолетовий Background і білий Font color на панелі Style. Натисніть Save.
  2. Натисніть + на розділі й виберіть Button. Установіть Title на «Sign up», Link на сторінку реєстрації, Type на Light і Size на Large, потім натисніть Save.
  3. Натисніть + знову й виберіть Text; він стане над кнопкою. Введіть «Register today» як Heading 2 і додайте один рядок. Установіть Font color на білий і натисніть Save.

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

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

Далі

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

  • Speaker photos: натисніть + на картці й додайте елемент Text із біографією, потім натисніть + на картці знову й додайте Image; він стане над текстом
  • Darker photo: на панелі Background effects hero-розділу встановіть Background effect на Gradient. Виберіть той самий темний колір із непрозорістю близько 60% як Start color і End color
  • Schedule: додайте елемент Text і вставте таблицю кнопкою Table для часу, сесії й спікера
  • Registration on the page: див. Додавання форм на сторінки

Що ви бачите

Назва події, дата й кнопка Register now відцентровані білим кольором на фото. Під ними деталі заповнюють ліву половину, а карта місця праву. Три картки спікерів стоять на сірій смузі, а фіолетова смуга завершує сторінку кнопкою Sign up.

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

  • Фото hero-розділу не заповнює розділ. Background style досі на Theme defaults. Відкрийте панель Style розділу й установіть його на Cover.
  • Карта показує неправильне місце. Google Maps шукає адресу так, як введено. Додайте індекс, місто й країну до Address і збережіть знову.
  • Картка не показує діалогове вікно налаштувань після додавання. Картки відкриваються порожніми, без діалогового вікна. Наведіть курсор на картку й відкрийте More > Settings, щоб заповнити Header і Title.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?