---
url: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0-%D0%BA%D0%BE%D0%BD%D1%82%D0%B0%D0%BA%D1%82%D1%96%D0%B2'
title: 'Створення сторінки контактів | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:59:34+00:00'
updated: '2026-10-24T20:15:47+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Тут ви створюєте сторінку контактів: карту вашої адреси, три способи зв’язатися з вами з піктограмою для кожного й контактну форму. Використовуйте її для сторінки, на яку ваше меню посилається як «Contact».'
tags:
  - 'Follow a tutorial'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T20:15:47+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Створення сторінки контактів'
      description: 'Тут ви створюєте сторінку контактів: карту вашої адреси, три способи зв’язатися з вами з піктограмою для кожного й контактну форму. Використовуйте її для сторінки, на яку ваше меню посилається як «Contact».'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:59:34+0000'
      dateModified: '2026-10-24T20:15:47+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0-%D0%BA%D0%BE%D0%BD%D1%82%D0%B0%D0%BA%D1%82%D1%96%D0%B2'
      articleSection: 'Покрокові інструкції'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D1%81%D1%82%D0%BE%D1%80%D1%96%D0%BD%D0%BA%D0%B0-%D0%BA%D0%BE%D0%BD%D1%82%D0%B0%D0%BA%D1%82%D1%96%D0%B2'
      description: 'Тут ви створюєте сторінку контактів: карту вашої адреси, три способи зв’язатися з вами з піктограмою для кожного й контактну форму. Використовуйте її для сторінки, на яку ваше меню посилається як «Contact».'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/uk'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: uk
---
[Help Center](/uk/hc)/[Documentation](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F) /[Вивчення DXPR Builder](/uk/hc/documentation/learn-dxpr-builder) /[Створення сторінок](/uk/hc/documentation/learn-dxpr-builder/build) /[Покрокові інструкції](/uk/hc/documentation/learn-dxpr-builder/tutorials/overview) # Створення сторінки контактів.

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

   ## In this guide

 Related guides

- [Додавання відео](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B2%D1%96%D0%B4%D0%B5%D0%BE)
- [Створення маркетингового лендингу](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%B8%D0%BD%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3)
- [Додавання блока Drupal на сторінку](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%96%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B0%D1%86%D1%96%D1%97/%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8-drupal)

Тут ви створюєте сторінку контактів: карту вашої адреси, три способи зв’язатися з вами з піктограмою для кожного й контактну форму. Використовуйте її для сторінки, на яку ваше меню посилається як «Contact». Щоб розмістити лише форму всередині іншої сторінки, натомість виконайте посібник [Додавання форм на сторінки](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%B4%D0%BE%D0%B4%D0%B0%D0%B2%D0%B0%D0%BD%D0%BD%D1%8F-%D1%84%D0%BE%D1%80%D0%BC).

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

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

- Ваша роль має дозвіл **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 показує помилку, див. [Зміни не зберігаються](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%83%D1%81%D1%83%D0%BD%D0%B5%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B5%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BD%D0%BE%D1%81%D1%82%D0%B5%D0%B9/%D0%B7%D0%B1%D0%B5%D1%80%D0%B5%D0%B6%D0%B5%D0%BD%D0%BD%D1%8F-%D0%BD%D0%B5-%D0%B2%D0%B4%D0%B0%D1%94%D1%82%D1%8C%D1%81%D1%8F).

## Що далі?

- [Елемент відео](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%B5%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82%D0%B8/%D0%B2%D1%96%D0%B4%D0%B5%D0%BE), щоб додати віртуальний тур офісом
- [Лендинг](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D0%BF%D0%BE%D1%81%D1%96%D0%B1%D0%BD%D0%B8%D0%BA%D0%B8/%D0%BC%D0%B0%D1%80%D0%BA%D0%B5%D1%82%D0%B8%D0%BD%D0%B3%D0%BE%D0%B2%D0%B8%D0%B9-%D0%BB%D0%B5%D0%BD%D0%B4%D0%B8%D0%BD%D0%B3) для вашої головної маркетингової сторінки
- [Інтеграція блоків Drupal](/uk/hc/%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0%D1%86%D1%96%D1%8F/%D0%BD%D0%B0%D0%B2%D1%87%D0%B0%D0%BD%D0%BD%D1%8F-dxpr-builder/%D1%96%D0%BD%D1%82%D0%B5%D0%B3%D1%80%D0%B0%D1%86%D1%96%D1%97/%D0%B1%D0%BB%D0%BE%D0%BA%D0%B8-drupal) для деталей про вбудовування блоків