# Лендинг «Семейная стратегия»: посекционная навигация и заявки прямо в Telegram > Кейс промо‑лендинга стратегического коуча на WordPress + Elementor: 8 экранов‑секций с full-page навигацией «один экран — одна мысль», 6 модальных окон с глубиной контента и мгновенная доставка заявок в рабочую Telegram-группу с полным контекстом лида. Источник: https://blog.uspeshnyy.ru/blog/keys-familystrategy-lending/ Автор: Александр Успешный · blog.uspeshnyy.ru Опубликовано: 2026-02-16 Теги: кейс, лендинг, Telegram, воронка --- > Одностраничный сайт‑презентация услуги стратегического коуча с посекционной навигацией «один экран — один смысловой блок», набором всплывающих окон и автоматической отправкой заявок в Telegram. ![Первый экран сайта «Семейная стратегия»](/images/cases/keys-familystrategy-lending/01-hero.webp) **Живой сайт:** [familystrategy.romandusenko.ru](https://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, что даёт гибкую и предсказуемую адаптивность без сторонней вёрстки. Такой стек выбран осознанно: клиент получает сайт, который **может редактировать самостоятельно** — менять тексты, фото, цены и содержимое всплывающих окон [прямо в браузере, без разработчика](/blog/keys-burnout-reset-landing/). ![Сборка первого экрана в редакторе Elementor](/images/cases/keys-familystrategy-lending/02-elementor1.webp) ![Блок «Кто такой Роман Дусенко?» в Elementor](/images/cases/keys-familystrategy-lending/03-elementor2.webp) --- ## Архитектура «1 секция = 1 экран» Главная фишка интерфейса — **посекционная навигация full-page**: каждый смысловой блок занимает ровно один экран, а прокрутка колёсиком плавно «перелистывает» страницу целиком, как слайды презентации. Справа — точки‑навигатор, сверху — меню‑якори с подсветкой активной секции. Навигация реализована через библиотеку **fullPage.js**: тело страницы получает классы вида `fp-viewing-about`, `fp-viewing-program` и т. д., по которым подсвечивается активный пункт меню и нужная точка навигатора. **Секция «Программа работы»** — пример посекционного блока с виджетом пошагового процесса (6 этапов от инициации до долгосрочной поддержки): ![Экран «Программа работы»](/images/cases/keys-familystrategy-lending/04-program.webp) --- ## Модальные окна (попапы) Чтобы не перегружать экраны, вся «глубина» контента спрятана в **6 всплывающих окнах Elementor Popup**. Кнопки на секциях (`Об авторе`, `Технология работы`, `Преимущества участия`, `Все дипломы`, `Отзывы` и др.) открывают модалки с подробностями: биография, кейсы, слайдер сертификатов, отзывы, а также кнопки скачивания PDF-презентации и списка квалификаций. ![Модальное окно с сертификатами эксперта](/images/cases/keys-familystrategy-lending/05-popup.webp) Все попапы встроены в саму страницу и открываются мгновенно, без дозагрузки. --- ## Заявки → Telegram Ядро лидогенерации — форма на **Contact Form 7** (отдельный экземпляр в финальной секции и в каждом попапе «Записаться»). Поля минимальны, чтобы не отпугнуть: **имя** и **телефон**. ![Финальный экран с формой заявки](/images/cases/keys-familystrategy-lending/06-form.webp) Каждая отправка через плагин‑мост **CF7 → Telegram** мгновенно улетает в рабочую группу «Дусенко Лиды». Вместе с контактом менеджеры сразу видят весь контекст лида: **какая именно форма** сработала, дату и время, страницу, IP и устройство посетителя (плюс скрытые UTM-метки для аналитики источников). ![Пример уведомления о заявке в Telegram: форма, телефон, страница, IP и устройство](/images/cases/keys-familystrategy-lending/07-tg-leads.webp) Всё, что нужно менеджеру для быстрого и адресного звонка, приходит одним сообщением. --- ## Адаптивность Лендинг одинаково аккуратно работает и на десктопе, и на смартфоне: full-page навигация превращается в удобное вертикальное перелистывание, меню сворачивается в бургер, а сетки контейнеров перестраиваются в одну колонку. Десктоп‑версия сайта в динамике — плавное перелистывание секций. --- ## Технологический стек **Итоговый набор:** WordPress · Hello Elementor · Elementor Pro (Flexbox-контейнеры, Popup) · The Plus Addons · fullPage.js · Contact Form 7 + Dynamic Text · мост CF7 → Telegram · Яндекс.Метрика. --- ## Что получил клиент - **Лендинг‑презентацию** с посекционной навигацией «один экран — одна мысль» — посетитель не теряется в длинной странице, а идёт по подготовленному сценарию. - **6 всплывающих окон**, которые держат основные экраны чистыми, а всю глубину (биография, дипломы, кейсы, отзывы, PDF) отдают по клику. - **Автоматическую доставку заявок в Telegram** с полным контекстом лида — отдел продаж реагирует мгновенно и знает, с какой формы и страницы пришёл клиент. - **Полностью адаптивный** сайт для десктопа и смартфона. - **Самостоятельное управление** контентом через Elementor — без обращения к разработчику. Для того же эксперта я делал парный лендинг [«Персональная стратегия»](/blog/keys-personalstrategy-lending/) с фирменной презентацией продукта, а также [Telegram-бота «Навигатор»](/blog/keys-event-bot-navigator/), который превращает офлайн‑выступления Романа в воронку продаж. ## Посмотреть вживую **Следующий шаг:** хотите продающий лендинг, который сам ведёт посетителя к заявке и складывает всё в Telegram, [напишите мне в Telegram](https://t.me/uspeshnyy). Со стороны сайт читается не так, как изнутри. Пришлите адрес — покажу первое впечатление человека, который вас не знает.