«Как сделать, чтобы клиенты могли связаться в один клик?»
Знакомая ситуация. Клиент зашёл на сайт, изучил услуги, хочет заказать. А контакты спрятаны где-то в глубине сайта. Или телефон не кликабельный. Или соцсетей вообще нет.
Клиент разворачивается и уходит к конкурентам.
Контакты должны быть всегда под рукой. В шапке, в подвале, на каждой странице. Давайте настроим их правильно.
Шаг 1. Где разместить контакты
Три главных места, где должны быть контакты:
| Место | Что разместить | Почему |
|---|---|---|
| Шапка сайта | Телефон, email, ссылка на соцсети | Видно сразу при заходе |
| Страница «Контакты» | Телефон, email, адрес, карта, форма связи | Для детальной информации |
| Подвал сайта | Все контакты + ссылки на соцсети | Для тех, кто доскроллил до конца |
Дополнительное место: кнопка «Заказать звонок» или «Написать» в правом нижнем углу (плавающая кнопка).
Шаг 2. Настройка контактов в теме Astra
В теме Astra есть удобные настройки для контактов в шапке.
Как настроить:
- «Внешний вид» → «Настроить»
- В меню кастомайзера найдите раздел «Header Builder» (или «Шапка»)
- Вы увидите визуальный конструктор шапки (левая, центральная, правая часть)
- В правую часть добавьте:
- «HTML-блок» — вставьте телефон с ссылкой
- «Социальные иконки» — выберите соцсети (Telegram, WhatsApp, VK, YouTube)
Пример HTML-блока для телефона:
html
<a href="tel:+79991234567" style="font-weight:bold; color:#000;">+7 (999) 123-45-67</a>
Это сделает телефон кликабельным — по нажатию на телефоне открывается набор номера.
Шаг 3. Добавление социальных иконок через Astra
В Astra можно добавить иконки соцсетей в шапку или подвал:
- В кастомайзере зайдите в «Header Builder» → выберите место (например, правая часть)
- Нажмите «Добавить элемент»
- Выберите «Социальные иконки»
- Выберите соцсети, которые вы используете:
- Telegram
- VK
- YouTube
- Instagram (если есть)
- Вставьте ссылки на ваши страницы
- Настройте цвет и размер иконок
Совет: используйте только те соцсети, где вы реально отвечаете. Если у вас нет YouTube — не добавляйте его.
Шаг 4. Создание страницы «Контакты» через Elementor
Теперь создадим полноценную страницу с контактами:
- «Страницы» → «Добавить новую»
- Назовите страницу «Контакты»
- Нажмите «Редактировать с Elementor»
Что добавить на страницу:
| Блок | Что разместить |
|---|---|
| Заголовок | «Свяжитесь с нами» |
| Текст | Как с вами связаться и когда вы отвечаете |
| Телефон | Кликабельная ссылка |
| Кликабельная ссылка | |
| Адрес | Текст + карта (можно вставить через виджет Google Maps) |
| Форма связи | Вставьте форму из Fluent Forms (шорткод) |
| Часы работы | Ваш график |
| Соцсети | Иконки со ссылками |
Шаг 5. Настройка контактов в подвале (футере)
В подвале обычно дублируют контакты и добавляют соцсети.
В Astra:
- «Внешний вид» → «Настроить» → «Footer Builder»
- Добавьте виджеты:
- «HTML» с телефоном и email
- «Социальные иконки» с ссылками на соцсети
Также через «Внешний вид» → «Виджеты» можно добавить информацию в подвал (если ваша тема поддерживает виджеты).
Шаг 6. Добавление плавающей кнопки связи
Для максимального удобства добавьте кнопку в правом нижнем углу:
- Установите плагин «Floating Button» или «WP Sticky Button»
- Настройте кнопку:
- Текст: «Связаться» или «Заказать звонок»
- Ссылка: на телефон или в Telegram/WhatsApp
- Цвет: зелёный (как у вас на сайте)
- Кнопка будет всегда видна на всех страницах
Что в итоге?
| Где | Что добавить |
|---|---|
| Шапка | Телефон (кликабельный) + иконки соцсетей |
| Страница «Контакты» | Полная информация + форма + карта |
| Подвал | Дублирующие контакты + соцсети |
| Плавающая кнопка | Быстрая связь в один клик |
Что дальше?
👉 Читайте дальше: Как поставить главную страницу и правильно настроить «шапку» и «подвал»
Контакты настроены. Теперь переходим к завершающим штрихам — настройке главной страницы.
P.S. Проверьте, что все телефоны и email кликабельны на вашем сайте. Это мелочь, которая сильно влияет на удобство.