Как создать страницу Контакты в Elementor на WordPress

В этой статье разберём пошагово, как создать страницу контактов с формой обратной связи на WordPress с помощью бесплатного конструктора Elementor.

Шаг 1. Создание новой страницы и настройка макета

1. Создайте новую страницу в WordPress и назовите её соответствующим образом (например, «Контакты»).

2. Перейдите в редактор Elementor.

3. В настройках страницы выберите макет «Elementor — полная ширина», чтобы оставить только шапку и подвал страницы. Дождитесь обновления.

Шаг 2. Настройка секции с заголовком

1. Добавьте секцию с одной колонкой.

2. В настройках секции перейдите в раздел «Стиль»:

   • выберите градиентный фон;

   • задайте нужные цвета (первый цвет — базовый, второй — более яркий);

   • установите ширину страницы 1200 px и минимальную высоту 500 px.

3. Настройте разделитель секции (нижний):

   • выберите стиль (например, волну);

   • задайте ширину 260 px и высоту 120 px;

   • при необходимости отразите разделитель по вертикали или горизонтали;

   • поставьте его на передний план, чтобы он перекрывал другие элементы.

4. Добавьте фоновое изображение:

   • в разделе «Перекрытие фона» выберите «Классический» и загрузите нужную картинку;

   • настройте прозрачность (например, 15 %) и позицию (центр-центр).

Шаг 3. Добавление заголовка

1. Перетащите элемент «Заголовок» в секцию.

2. Напишите текст (например, «Контакты») и выровняйте его по центру.

3. Скопируйте стиль заголовка для единообразия дизайна.

Шаг 4. Создание секции с формой и текстом

1. Добавьте новую секцию с двумя колонками.

2. Настройте секцию:

   • ширина — 1200 px;

   • добавьте то же фоновое изображение, что и в предыдущей секции.

3. В расширенных настройках задайте отступы:

   • снаружи — 2 %;

   • внутри — 8 %;

   • снизу — 8 %.

Шаг 5. Добавление формы обратной связи (бесплатная версия)

В бесплатной версии Elementor нет встроенного элемента формы, поэтому понадобятся дополнительные плагины:

1. Установите и активируйте плагины:

   • VPForms — для создания формы;

   • Essential Addons for Elementor — для стилизации формы.

2. В настройках Essential Addons включите поддержку VPForms.

3. Перейдите в VPForms и создайте новую форму:

   • выберите шаблон (например, простая контактная форма);

   • добавьте поля:

     • Имя (вкладка «Дополнительно» — укажите подсказку и спрячьте заголовок поля);

     • E‑mail (аналогично настройте);

     • Телефон (используйте поле «Строка поиска», отключите заголовок поля, задайте маску ввода: +7 (999) 999-99-99 для России или +9 ____ ___ __ __ для международных номеров).

4. Настройте общие параметры формы:

   • название;

   • текст на кнопке «Отправить»;

   • сообщение после отправки;

   • перенаправление на другую страницу (опционально).

5. Вернитесь на страницу в Elementor, обновите её и найдите виджет VPForms (ищите по запросу wpforms в виджете).

6. Выберите созданную форму и настройте её отображение (спрячьте заголовок, описание и т. д.).

Шаг 6. Настройка внешнего вида формы

1. В редакторе Elementor настройте стиль формы:

   • выравнивание (на всю ширину или заданную в px/%);

   • внешний отступ;

   • цвет фона и текста полей;

   • тень при наведении;

   • стиль кнопки «Отправить» (цвет фона, текста, hover‑эффект, скругление углов).

Шаг 7. Добавление контактных данных с иконками

Для каждого способа связи добавьте иконку и ссылку:

• Телефон:

  • выберите иконку телефона;

  • в настройках ссылки укажите tel:+79999999999 (номер в международном формате без скобок и пробелов).

• WhatsApp:

  • замените иконку на логотип WhatsApp;

  • ссылка: https://wa.me/+79999999999.

• Telegram:

  • иконка Telegram;

  • ссылка: t.me/+79999999999 или t.me/ваш_ник (если номер скрыт).

• E‑mail:

  • иконка почты;

  • ссылка: mailto:example@domain.com?subject=Вопрос с сайта.

Шаг 8. Добавление карты

1. Google Maps:

   • вставьте стандартную карту;

   • укажите адрес;

   • задайте высоту (например, 500 px) и масштаб.

2. Яндекс Карты:

   • зарегистрируйтесь на Яндексе;

   • создайте карту с маршрутами и метками;

   • скопируйте HTML‑код;

   • вставьте код на страницу через HTML‑виджет.

Итог

Вы создали полноценную страницу контактов в бесплатной версии Elementor. Она включает:

• стильную секцию с заголовком и градиентным фоном;

• форму обратной связи с полями для имени, e‑mail и телефона;

• иконки с прямыми ссылками для связи по телефону, WhatsApp, Telegram и e‑mail;

• интерактивную карту (Google или Яндекс).

Форма отправляет данные на указанный e‑mail, а при желании можно настроить уведомления в Telegram через плагин TelSender.

Если у вас остались вопросы, задавайте их в комментариях!