Лендинг «Семейная стратегия»: посекционная навигация и заявки прямо в Telegram

Одностраничный сайт‑презентация услуги стратегического коуча с посекционной навигацией «один экран — один смысловой блок», набором всплывающих окон и автоматической отправкой заявок в Telegram.

Живой сайт: familystrategy.romandusenko.ru

---

Коротко о проекте

Клиент	Роман Дусенко — эксперт в стратегическом планировании, бизнес‑наставник, коуч ICF
Продукт	Услуга «Семейная стратегия» — построение плана гармоничной жизни для семьи
Тип сайта	Промо‑лендинг (single page) с посекционной full-page навигацией
Платформа	WordPress + Elementor Pro
Ключевые механики	8 экранов‑секций, 6 модальных окон, лид‑форма с интеграцией в Telegram
Аналитика	Яндекс.Метрика + UTM-метки в заявках

---

Задача

Эксперту нужен был не «сайт‑визитка», а продающая презентация одной услуги, которая:

• ведёт посетителя по чёткому сценарию — от знакомства с экспертом до заявки;
• подаёт информацию порционно, без длинной «простыни» со скроллом;
• раскрывает детали (программа, кейсы, дипломы, отзывы) по клику, не перегружая основной экран;
• моментально доставляет каждую заявку в рабочую Telegram-группу отдела продаж вместе с контекстом лида.

---

Решение: WordPress + Elementor

Сайт собран на WordPress с визуальным конструктором Elementor Pro на теме Hello Elementor. Вёрстка — на современных Flexbox-контейнерах Elementor, что даёт гибкую и предсказуемую адаптивность без сторонней вёрстки.

Такой стек выбран осознанно: клиент получает сайт, который может редактировать самостоятельно — менять тексты, фото, цены и содержимое всплывающих окон прямо в браузере, без разработчика.

---

Архитектура «1 секция = 1 экран»

Главная фишка интерфейса — посекционная навигация full-page: каждый смысловой блок занимает ровно один экран, а прокрутка колёсиком плавно «перелистывает» страницу целиком, как слайды презентации. Справа — точки‑навигатор, сверху — меню‑якори с подсветкой активной секции.

flowchart TD
    A["🏠 Экран 1 · Hero<br/>Семейная стратегия — оффер + 2 CTA"] --> B
    B["👤 Экран 2 · О Романе<br/>Кто такой Роман Дусенко"] --> C
    C["❓ Экран 3 · Что это?<br/>Суть стратегической сессии"] --> D
    D["🗺️ Экран 4 · Программа<br/>6 шагов работы"] --> E
    E["⭐ Экран 5 · Преимущества<br/>Почему выбирают"] --> F
    F["🎯 Экран 6 · Для кого?<br/>Целевая аудитория"] --> G
    G["🏆 Экран 7 · Результат<br/>Что получит семья"] --> H
    H["✉️ Экран 8 · Заявка<br/>Форма + контакты"]

    classDef cta fill:#1a73e8,stroke:#0b57d0,color:#fff;
    classDef end1 fill:#12b886,stroke:#0c9e75,color:#fff;
    class A cta
    class H end1

Навигация реализована через библиотеку fullPage.js: тело страницы получает классы вида fp-viewing-about, fp-viewing-program и т. д., по которым подсвечивается активный пункт меню и нужная точка навигатора.

Секция «Программа работы» — пример посекционного блока с виджетом пошагового процесса (6 этапов от инициации до долгосрочной поддержки):

---

Модальные окна (попапы)

Чтобы не перегружать экраны, вся «глубина» контента спрятана в 6 всплывающих окнах Elementor Popup. Кнопки на секциях (Об авторе, Технология работы, Преимущества участия, Все дипломы, Отзывы и др.) открывают модалки с подробностями: биография, кейсы, слайдер сертификатов, отзывы, а также кнопки скачивания PDF-презентации и списка квалификаций.

flowchart LR
    subgraph Screens["Экраны-секции"]
        S1["Hero"]
        S2["О Романе"]
        S4["Программа"]
    end
    subgraph Popups["Модальные окна Elementor"]
        P1["Опыт и достижения<br/>+ слайдер дипломов"]
        P2["Путь Романа"]
        P3["Технология работы"]
        P4["Преимущества участия"]
        P5["Отзывы"]
        P6["Записаться / форма"]
    end
    S1 -- "Об авторе" --> P1
    S1 -- "Записаться" --> P6
    S2 -- "Подробнее о Романе" --> P2
    S2 -- "Отзывы" --> P5
    S4 -- "Технология работы" --> P3
    S4 -- "Преимущества участия" --> P4
    P1 -- "Все дипломы / PDF" --> DOC["📄 PDF-документы"]

Все попапы встроены в саму страницу и открываются мгновенно, без дозагрузки.

---

Заявки → Telegram

Ядро лидогенерации — форма на Contact Form 7 (отдельный экземпляр в финальной секции и в каждом попапе «Записаться»). Поля минимальны, чтобы не отпугнуть: имя и телефон.

Каждая отправка через плагин‑мост CF7 → Telegram мгновенно улетает в рабочую группу «Дусенко Лиды». Вместе с контактом менеджеры сразу видят весь контекст лида: какая именно форма сработала, дату и время, страницу, IP и устройство посетителя (плюс скрытые UTM-метки для аналитики источников).

sequenceDiagram
    autonumber
    actor U as Посетитель
    participant F as Форма CF7<br/>(имя + телефон)
    participant WP as WordPress<br/>+ CF7
    participant TG as Бот Telegram
    participant G as Группа «Дусенко Лиды»

    U->>F: Заполняет и нажимает «Отправить»
    F->>WP: AJAX-отправка + скрытые поля<br/>(название формы, page-title, UTM)
    WP->>WP: Сбор метаданных<br/>(дата, время, IP, User-Agent)
    WP->>TG: Формирует и шлёт сообщение
    TG->>G: 📨 «Заявка с сайта» со всем контекстом
    G-->>U: Менеджер перезванивает

Всё, что нужно менеджеру для быстрого и адресного звонка, приходит одним сообщением.

---

Адаптивность

Лендинг одинаково аккуратно работает и на десктопе, и на смартфоне: full-page навигация превращается в удобное вертикальное перелистывание, меню сворачивается в бургер, а сетки контейнеров перестраиваются в одну колонку.

Десктоп‑версия сайта в динамике — плавное перелистывание секций.

---

Технологический стек

flowchart TB
    subgraph CMS["Платформа"]
        WP["WordPress"]
        TH["Тема Hello Elementor"]
    end
    subgraph Builder["Конструктор"]
        EL["Elementor Pro"]
        FC["Flexbox-контейнеры"]
        EP["Elementor Popup ×6"]
    end
    subgraph UX["Интерфейс"]
        FP["fullPage — навигация по экранам"]
        AN["Анимации появления секций"]
    end
    subgraph Lead["Лиды и аналитика"]
        CF7["Contact Form 7"]
        DTX["Dynamic Text — page-title, UTM"]
        TGP["CF7 → Telegram"]
        YM["Яндекс.Метрика"]
    end

    WP --> TH --> EL
    EL --> FC --> EP
    EL --> FP --> AN
    EL --> CF7 --> DTX
    CF7 --> TGP --> BOT["🤖 Telegram-бот → группа лидов"]
    WP --> YM

Итоговый набор: WordPress · Hello Elementor · Elementor Pro (Flexbox-контейнеры, Popup) · The Plus Addons · fullPage.js · Contact Form 7 + Dynamic Text · мост CF7 → Telegram · Яндекс.Метрика.

---

Что получил клиент

• Лендинг‑презентацию с посекционной навигацией «один экран — одна мысль» — посетитель не теряется в длинной странице, а идёт по подготовленному сценарию.
• 6 всплывающих окон, которые держат основные экраны чистыми, а всю глубину (биография, дипломы, кейсы, отзывы, PDF) отдают по клику.
• Автоматическую доставку заявок в Telegram с полным контекстом лида — отдел продаж реагирует мгновенно и знает, с какой формы и страницы пришёл клиент.
• Полностью адаптивный сайт для десктопа и смартфона.
• Самостоятельное управление контентом через Elementor — без обращения к разработчику.

Открыть сайтfamilystrategy.romandusenko.ru

Для того же эксперта я делал парный лендинг «Персональная стратегия» с фирменной презентацией продукта, а также Telegram-бота «Навигатор», который превращает офлайн‑выступления Романа в воронку продаж.

Посмотреть вживую

Перейти на сайтfamilystrategy.romandusenko.ru

Следующий шаг: хотите продающий лендинг, который сам ведёт посетителя к заявке и складывает всё в Telegram, напишите мне в Telegram.