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

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

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

Відео створює сторінку контактів міської ради.

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

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

Крок 1: додавання карти

  1. Натисніть Add Elements на порожній сторінці й виберіть Section на вкладці Layout.
  2. Натисніть + на розділі й виберіть Map на вкладці Content.
  3. Введіть вашу Address, установіть Map height на 400 і натисніть Save.

Карта вбудовує Google Maps, центровані на адресі.

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

  1. Наведіть курсор на розділ і натисніть Add Section Below. Відкрийте More > Settings нового розділу, виберіть Align text center у розділі HTML classes, потім світло-сірий Background на панелі Style. Натисніть Save.
  2. Натисніть + на розділі й виберіть Row; спочатку він має два рівні стовпці. Натисніть його піктограму сітки (Column layout), виберіть пресет 1/3 + 1/3 + 1/3 і натисніть Save.
  3. Натисніть + у першому стовпці й виберіть Text. Введіть «Visit us» як Heading 3, додайте адресу й години роботи й натисніть Save.
  4. Натисніть + у тому самому стовпці й виберіть Icon; він стане над текстом. Виберіть набір Font Awesome Free Solid, знайдіть location-dot і натисніть піктограму. Установіть Size на Extra Large (2x) і натисніть Save.
  5. Повторіть у другому стовпці з «Call us» і піктограмою phone, а в третьому з «Email us» і піктограмою envelope.

Виберіть однаковий Size для всіх трьох піктограм, щоб рядок вирівнявся.

Крок 3: додавання форми

  1. Додайте третій розділ за допомогою Add Section Below і дайте йому клас Align text center.
  2. Натисніть + на розділі й відкрийте вкладку Drupal Blocks.
  3. Виберіть блок вашої контактної форми й натисніть Save у його діалоговому вікні налаштувань; форма з’явиться в розділі.
  4. Натисніть + на розділі знову й виберіть Text; він стане над формою. Введіть «Send us a message» як Heading 2, додайте один рядок і натисніть Save.

Форми, створені в розділі Structure > Contact forms (/admin/structure/contact), не мають блока в ядрі Drupal. Сторонній модуль Contact Block додає Contact block на ту саму вкладку.

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

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

Далі

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

  • Tap to call: виділіть номер телефону в тексті, натисніть кнопку посилання на панелі інструментів і введіть tel:+31104001234
  • Click to email: виділіть адресу й дайте їй посилання на mailto:info@example.com
  • Any block: вкладка Drupal Blocks вбудовує блоки вашого сайту, як-от форми пошуку, підписки на розсилку й власні блоки

Що ви бачите

Карта вашої адреси заввишки 400 пікселів заповнює верх сторінки. Під нею сіра смуга показує три центровані стовпці, кожен із піктограмою, заголовком і вашими даними. Форма завершує сторінку під її центрованим заголовком «Send us a message».

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

  • Карта показує неправильне місце. Google Maps шукає адресу так, як введено. Додайте індекс, місто й країну до Address і збережіть знову.
  • Вашої форми немає на вкладці Drupal Blocks. Конструктор перелічує лише відкриті вебформи, а контактним формам ядра потрібен модуль Contact Block. Установіть статус вебформи на Open у розділі Structure > Webforms (/admin/structure/webform).
  • Піктограми різних розмірів. Кожна піктограма зберігає власний Size. Відкрийте налаштування кожної піктограми й виберіть однаковий.
  • Ваші зміни зникли після перезавантаження. Ви покинули сторінку, не натиснувши Save на панелі інструментів конструктора. Якщо Save показує помилку, див. Зміни не зберігаються.

Що далі?