Лендинг консалтинга для руководителей за 8 дней — из Figma в Elementor Pro
Одностраничный лендинг для консалтинга руководителей, построенный за 8 дней — из Figma в Elementor Pro, навигация по 6 якорям, Gravity Forms, 17 часов. Сдан по графику.
Скриншоты сделаны автоматическими инструментами — некоторые элементы могли не загрузиться полностью или перекрываться. Для наиболее точного представления открыть действующий сайт →
Клиент (конечный пользователь): Kazoo Leadership — коучинг и консалтинг для руководителей
Формат сотрудничества: White-label разработка для маркетингового агентства из США
Сроки: июнь 2025 · 8 дней · ~17 часов на сборку + QA
Подход к проекту
Одностраничный лендинг на свежей установке WordPress, заменяющий существующий сайт на Squarespace за 8 дней — из Figma в Elementor Pro на WP Engine, с Gravity Forms и шестью якорными секциями, корректно работающими на мобильных устройствах и большом экране. Ключевое ограничение поставки — точность: на сайте из одного URL якорная навигация — не вспомогательная функция, а вся UX-архитектура, и ошибочная цель не имеет запаса прочности.
Краткий обзор
| Поле | Значение |
|---|---|
| Индустрия конечного клиента | Профессиональный консалтинг — коучинг для руководителей |
| Конечный клиент | Kazoo Leadership (коучинг и консалтинг для руководителей) |
| Формат сотрудничества | White-label сборка лендинга для маркетингового агентства из США, специализирующегося на сайтах для локального бизнеса |
| Тип проекта | Из Figma в Elementor Pro — одностраничный лендинг на WP Engine, заменяющий существующий сайт клиента на Squarespace |
| Объём | 1 лендинг — полная реализация Figma на новой установке WordPress; якорная навигация по шести именованным секциям; интеграция контактной формы Gravity Forms |
| Сроки | 8 дней (18–26 июня 2025), по графику |
| Затраты | ~17 часов — ~14 ч сборка и правки · ~3 ч QA |
| Команда | 3 специалиста (разработчик + QA + руководитель проекта) |
| Передача дизайна | дизайн в Figma (принадлежит агентству; URL дизайна не раскрыт) — бриф требовал Elementor Pro и Gravity Forms на новой тестовой среде WP Engine |
| Технологии | WordPress · Elementor Pro · Gravity Forms · WP Engine · Site Checker (плагин QA от xaverPRO) |
| Режим сборки | Сначала черновик на тестовой среде — страница собрана и проверена на тестовом инстансе WP Engine; не переносилась на действующий сайт до согласования QA |
| Сдано | Одностраничный лендинг сдан по ТЗ — Figma реализована в Elementor Pro, якорная навигация по шести секциям, форма направляется клиенту, сайт работает на kazooleadership.com |
| Раунды проверки | ≈1 раунд проверки |
| Затраты на задачу | 2 внутренних задачи Redmine · медиана 8,5 ч / P75 14 ч на задачу |
Постановка задачи
Маркетинговое агентство из США, работающее с Kazoo Leadership — практикой коучинга и консалтинга для руководителей, — нуждалось в новом лендинге на основе готового дизайна в Figma с развёртыванием на домене клиента. Существующий сайт работал на Squarespace; бриф агентства предусматривал свежую установку WordPress на WP Engine со стеком Elementor Pro и Gravity Forms. Без миграции страниц, без карты редиректов, без предыдущей установки WordPress — чистая сборка на пустом инстансе WordPress.
Формат одной страницы означал, что страница должна делать всё: представить руководителя (David Hopkins), описать спектр услуг, обозначить критерии идеального партнёра, показать отзывы и принимать заявки — всё в виде одностраничного сайта с прокруткой и переходами по секциям. Figma специфицировала шесть якорных целей (About David, Services, Ideal Practice Partners, Testimonials, Contact) плюс навигационный элемент перехода по темам, который должен был корректно отрабатывать по каждой.
Задача была прямой: воспроизвести Figma в Elementor Pro на новом тестовом инстансе WP Engine; настроить Gravity Forms на email клиента; сделать якорную навигацию функциональной и поточечно точной на мобильных устройствах и большом экране; передать, когда QA удовлетворено.
Контекст рисков. На одностраничном лендинге якорная навигация — не вспомогательная функция, а вся UX-архитектура сайта. Каждая именованная секция — одновременно и контент, и пункт назначения: посетитель, следующий по меню перехода агентства, должен оказаться именно там, где предусмотрено дизайном. На одностраничном сайте нет запаса в виде корректно адресованной подстраницы; сломанный или неверно названный якорь разрушает структуру, которую агентство спроектировало для каждого посетителя с любого канала.
В сочетании со сменой платформы с Squarespace на WordPress эта сборка несла требование к точности, которого обычно нет при доработке темы: каждая якорная цель, каждая мобильная точка адаптации и каждый маршрут формы должны были пройти проверку по ТЗ до того, как страница могла выйти на боевой домен.
Как мы это сделали
1. Из Figma в Elementor Pro на чистой установке WordPress. Никита Тумашевич собрал полный лендинг по утверждённой Figma на тестовом инстансе WP Engine, выделенном под проект. Elementor Pro и Gravity Forms были установлены до начала сборки; лендинг был единственным URL на установке WordPress, что сохраняло среду сборки чистой, а область проверки QA — минимальной.
2. Реализация якорной навигации по шести именованным секциям. Figma специфицировала навигационное меню перехода по темам с шестью именованными пунктами назначения. Каждая секция требовала соответствующей якорной цели в Elementor — точно обозначенной по дизайн-спецификации — со списком перехода, корректно работающим как на большом экране, так и на мобильных устройствах.
В Elementor это реализуется прямо, но требует явного QA: якорь, выглядящий корректно на полной ширине большого экрана, может незаметно отработать некорректно на мобильных, где высота секции меняется. Первый проход QA выявил якорь, который ещё не был подключён к контактной секции; второй проход подтвердил корректную работу всех шести после исправления.
3. Соответствие Figma на всех разрешениях экрана. QA-проверка по Figma выявила несколько расхождений вёрстки, характерных для переноса из Figma в Elementor Pro: секция hero отображалась с уменьшенной шириной относительно full-bleed замысла дизайна; межбуквенное расстояние в типографике, которое стандартные настройки Elementor не воспроизводили; и мобильная вёрстка со сжатыми секциями, требовавшая корректировки точки адаптации. Павел Сажин задокументировал каждое расхождение с референс-скриншотами; Никита применил исправления до того, как QA было передано на согласование агентству.
4. Маршрутизация формы и проверка перед передачей. Gravity Forms была настроена на email клиента для контактной секции в нижней части страницы. QA перед передачей подтвердило маршрутизацию формы, все якорные переходы и страницу на трёх типах экранов до того, как тестовая среда была представлена агентству для проверки.
Якорь контактной кнопки был исправлением, завершившим сборку. Первый проход QA Павла отметил все пять целей меню перехода как неподключённые; Никита подключил их; второй проход два дня спустя выявил кнопку контакта — не в меню, но доступную из каждого CTA на странице. На сайте из одного URL каждый якорь либо работает корректно, либо ломает единственную навигационную структуру страницы.
Контроль качества
QA этого одностраничного лендинга прошло два прохода — первый выявил сломанную мобильную вёрстку на малых ширинах экрана и все пять целей меню перехода как неподключённые; второй проход после исправлений Никиты выявил дополнительный якорь контактной кнопки до того, как сборка была представлена агентству.
Предварительное QA прошло через Site Checker — см. наш подход к QA по категориям и принципу «ноль ошибок». Собственный слой QA агентства — их инструменты, их процессы — запускался после передачи и фиксировал замечания в общую очередь задач для нашего цикла исправлений до окончательного согласования.
Результаты
| Метрика | Результат |
|---|---|
| Сборка лендинга | Сдан — Figma реализована в Elementor Pro на чистой установке WordPress на WP Engine |
| Режим сборки | Сначала черновик на тестовой среде — страница собрана и проверена на тестовом инстансе WP Engine; выведена в продакшен после согласования с агентством |
| Объём | 1 лендинг · 6 секций с якорями · интеграция контактной формы Gravity Forms |
| Раунды QA | Внутренний QA-проход Павла Сажина по Figma и трём типам экранов; исправления Никиты; второй раунд пройден до передачи |
| Сроки | 8 дней (18–26 июня 2025), по графику |
| Затраты | ~17 часов — 14 ч сборка и правки · 3 ч QA |
| Команда | 3 специалиста — без отдельного аналитика, без дизайн-лида (принадлежит агентству), без SEO-лида (нет объёма миграции) |
| Статус сайта, проверено 04.2026 | kazooleadership.com работает, возвращает HTTP 200 по свежей curl-проверке |
Результат, если переформулировать прямо: одностраничный лендинг был построен по Figma на свежей установке WordPress, проверен на точность якорей и соответствие вёрстки на всех разрешениях экрана, с настроенной маршрутизацией формы и передан агентству на утверждение за восемь календарных дней и семнадцать часов работы.
Процесс
| Этап | Длительность | Результат |
|---|---|---|
| Бриф и оценка | 1 день | Figma проанализирована, тестовая среда WP Engine настроена, Elementor Pro и Gravity Forms установлены |
| Сборка лендинга (тестовая среда) | ~4 дня | Полный одностраничный лендинг реализован в Elementor Pro; все шесть секций, якорные цели и блок формы построены |
| Внутреннее QA | ~1 день | Павел Сажин по Figma и трём типам экранов; расхождения вёрстки и отсутствующие якоря задокументированы |
| Правки | ~1 день | Никита применил коррективы вёрстки — hero на полную ширину, межбуквенное расстояние, мобильная точка адаптации, подключён якорь контакта |
| Финальная проверка + передача | ~1 день | Все шесть якорей проверены; маршрутизация формы подтверждена; страница одобрена для проверки и согласования с агентством |
На одностраничном проекте цикл правок замыкается быстро — каждое исправление изолировано в известной секции Elementor, а не распределено по многостраничному дереву шаблонов. QA и правки шли как один непрерывный проход в последний день перед передачей.
Команда
Команда проекта
- Никита Тумашевич — сборка лендинга в Elementor Pro по Figma; правки вёрстки и реализация якорей
- Павел Сажин — QA по Figma и типам экранов; направление правок; согласование перед передачей
- Антон Херсун, xaverPRO — руководитель проекта (оценка, коммуникация с агентством, настройка тестовой среды, координация согласований)
Проектное управление, дизайн и коммуникация с клиентом со стороны агентства оставались за партнёрским агентством на протяжении всего проекта. Наша команда была невидима для конечного клиента. Бриф, Figma и все замечания поступали через агентство; клиент получил готовую страницу.
Агентствам с продуктовыми задачами
На сайте коучинговой практики якоря — это не просто навигация, а вся воронка: внешние ссылки, реклама и письма агентства ведут посетителя прямиком в конкретную секцию. У этой практики — одностраничный лендинг с личным брендом и программой; у других — многостраничный портал с вебинарами, кейсами и корпоративными программами. Если подрядчик возьмётся неаккуратно, якорная ссылка из рекламного объявления поведёт посетителя в пустую секцию. Мобильный блок с формой записи окажется за границей видимости. Партнёрские обратные ссылки, которые агентство выстраивало месяцами, перестанут вести на нужный контент. Агентству придётся объяснять коучу, почему лиды не доходят.
Подрядчику стоит задавать не вопрос «соберёте ли одностраничник?», а вопрос «как именно вы зафиксируете якоря, чтобы они совпадали с нашими маршрутами после сборки и правок?»
Пришлите макеты или рабочую таблицу проекта. Мы пройдём по каждому маршруту ваших кампаний. Сверим его с якорной картой после сборки и отметим расхождения для всех каналов. Вернём фиксированную смету в часах.
У вас ещё нет ТЗ? Пришлите описание в один абзац — мы вернёмся с вопросами, которые стоит задать. Прислать описание →