За три года собрал на Tilda больше полусотни лендингов - от посадочной страницы стоматологии до лендинга SaaS-продукта с приёмом оплаты через эквайринг. Разница между лендингом на Тильде, который приносит заявки, и тем, что просто аккуратно выглядит, почти никогда не в дизайне. Она в порядке блоков и в том, что происходит между первым экраном и формой заявки. Ниже - структура, которую беру за стартовую точку в большинстве проектов, и что в ней стоит донастраивать руками через код, а не готовыми блоками из библиотеки Тильды.
Из каких блоков строится структура лендинга на Тильде
Порядок блоков решает больше, чем их количество. Видел лендинги из 15 блоков с конверсией в заявку 0,8% и лендинги из 7 блоков с конверсией 4-5% - просто потому что во втором случае посетителя вели по понятной логике: зацепили оффером, объяснили выгоду, сняли возражения, попросили оставить контакт.
Рабочий каркас, с которого стартую на большинстве проектов:
| Блок | Задача | Где на странице |
|---|---|---|
| Первый экран (Hero) | Оффер и призыв к действию | 100% экрана |
| Проблема или боль | Зацепить актуальностью | 2‑й экран |
| Решение и выгоды | Показать продукт через результат | 3-4‑й экран |
| Как это работает | Снять непонимание процесса | 5‑й экран |
| Доказательства | Отзывы, кейсы, цифры | 6-7‑й экран |
| Цены и тарифы | Снять возражение по деньгам | 8‑й экран |
| FAQ | Закрыть оставшиеся вопросы | 9‑й экран |
| Форма и финальный CTA | Конверсия | Последний экран |
Это не догма - для B2B-лендинга с длинным циклом сделки перед формой добавляю блок с гарантиями и условиями договора, для лендинга под один товар - блок с калькулятором доставки прямо на странице. Но порядок «боль → решение → доказательства → цена → форма» держится почти всегда.
Первый экран лендинга: оффер без воды
Разбирал десятки лендингов клиентов до передачи мне на доработку - процентов 70 проблема одна: заголовок первого экрана рассказывает о компании, а не о результате для посетителя. «Мы - команда профессионалов с 10-летним опытом» вместо «Ремонт квартиры под ключ за 45 дней с фиксированной сметой».
На первом экране держу три вещи: заголовок с конкретной выгодой, в идеале с цифрой или сроком, подзаголовок с уточнением для кого и почему сейчас, и кнопку с понятным действием - не «Отправить», а «Получить расчёт стоимости». Форму на первом экране ставлю не всегда: если чек выше 100 000 рублей, посетитель ещё не готов оставлять телефон, не увидев доказательств - тогда кнопка ведёт скроллом к следующему блоку.
Скорость загрузки первого экрана в Tilda напрямую бьёт по конверсии: тяжёлое фоновое видео на 8 МБ на мобильном интернете грузится 4-6 секунд, и часть трафика уходит до отрисовки страницы. На мобильной версии почти всегда меняю видео на статичную картинку с ленивой подгрузкой видео уже после клика.
Бесплатный материал
🎁 Полезный скрипт в подарок
Подпишитесь на Telegram - пришлю готовый скрипт по этой теме.
Без спама. Отписка в 1 клик.
Блок боли и выгод: почему посетитель дочитывает посадочную страницу до формы
Между оффером и ценой должен быть блок, который переводит характеристики продукта в понятный результат. Разница простая: «Панорамные окна из профиля Rehau» - характеристика, «Дневной свет в комнате дольше и меньше расходов на отопление зимой» - выгода. Посетитель платит за второе, характеристики читает уже после того, как решил, что продукт интересен.
На практике делаю таблицу или список из 4-6 пунктов «без этого / с этим» - так нагляднее, чем сплошной абзац текста:
| Без лендинга | С продуманным лендингом |
|---|---|
| Заявки только по рекомендациям, 3-5 в месяц | Стабильный поток заявок с сайта и рекламы |
| Клиент уходит сравнивать цены к конкурентам | Расчёт стоимости и УТП на одном экране |
| Менеджер тратит время на типовые вопросы | FAQ и калькулятор закрывают часть вопросов сами |
Блок с болью работает только если боль реальная, а не придуманная для драматического эффекта - клиенты считывают фальшь моментально и закрывают вкладку.
Социальные доказательства на сайте: отзывы, кейсы, цифры
Блок с отзывами на Tilda часто делают формально - три карточки со стоковыми фото и текстом «Спасибо, всё понравилось!». Это не работает, потому что не отвечает на конкретное возражение посетителя.
Что действительно двигает конверсию:
- Отзывы с указанием задачи и результата, а не общих слов - «сделали лендинг за 12 дней, первая заявка пришла на третий день после запуска рекламы» весит больше, чем «профессионально и быстро»
- Скриншоты переписки или отзывов из Я.Карт, встроенные картинкой или через iframe - выглядят достовернее собранного текста
- Цифры с конкретикой: количество реализованных проектов, средний срок работы, процент повторных обращений - «127 лендингов с 2021 года» работает лучше, чем абстрактное «более 100 проектов»
- Кейсы «до/после» с цифрами по трафику или заявкам, если клиент разрешил их раскрыть
Для интернет-магазинов и услуг с оплатой на лендинге хорошо заходит блок с логотипами платёжных систем и способов доставки - эквайринг Т‑Банка, СДЭК, Boxberry. Это не столько доказательство качества, сколько снятие тревоги «а вдруг это ненадёжно».
Цены и работа с возражениями на лендинге
Блок с ценами - тот, где чаще всего теряют заявки из-за неправильной подачи, а не из-за самой цифры. Три рабочих подхода:
- Тарифная сетка из 2-3 пакетов с одним визуально выделенным - посетитель сравнивает варианты между собой, а не решает «покупать или нет»
- Цена «от» с расшифровкой, что входит в базовый пакет - работает для услуг с индивидуальным расчётом, где точная цифра невозможна до брифа
- Калькулятор на Zero Block, который считает стоимость по параметрам клиента - конверсия обычно выше, потому что человек взаимодействует со страницей, а не просто читает цифры
Сам лендинг на Тильде под ключ у меня стоит от 30 000 ₽ - в эту цену входит структура, дизайн по референсам и базовая настройка форм. Кастомная доработка блоков под конкретную задачу считается отдельно: точечный скрипт вроде калькулятора или валидации поля - от 3 000 ₽, комплексная интеграция с оплатой, CRM и доставкой - от 40 000 ₽.
Форма заявки и доработка блоков лендинга кастомным кодом
Как не терять лиды из формы
Стандартная форма Тильды с полями «Имя, телефон, email» отправляет заявку на почту или в Tilda CRM - для старта достаточно, но на потоке от 20-30 заявок в день менеджеры начинают их терять или отвечают через час-два, когда клиент уже написал конкуренту.
Что донастраиваю почти всегда:
- Webhook из формы Тильды в рабочую CRM или в Telegram-бота на aiogram, который присылает менеджеру заявку с номером телефона за несколько секунд после отправки
- Многошаговую форму вместо одной длинной - короткие формы с прогресс-баром на 3 шага дают заметно больше завершённых заявок, чем форма на 8 полей сразу
- Sticky-кнопку CTA, которая прилипает к низу экрана на мобильной версии после прокрутки первого блока - не нужно скроллить страницу заново к форме
- Автоматическую маршрутизацию заявок через n8n, если источников трафика несколько и заявки нужно раскидывать по разным менеджерам без ручной сортировки
Готовые фрагменты кода для типовых доработок форм и блоков Tilda - вебхуки, валидация полей, интеграция с Telegram - собираю в библиотеке готовых скриптов для Tilda, там же есть примеры для быстрого старта.
Где Тильда сама не справляется
Библиотека блоков Tilda закрывает процентов 80 типовых задач, но у неё есть предел - как только нужна логика, а не вёрстка, приходится писать JS-код и вешать его на конкретный блок.
Примеры того, что регулярно донастраиваю руками:
- Отправка целей в Яндекс.Метрику при отправке формы или клике по кнопке - без этого рекламный кабинет не понимает, какие объявления реально приносят заявки, а не просто клики
- Калькулятор доставки со стоимостью СДЭК по индексу или городу прямо на странице, без перехода на отдельный сайт
- Виджет оплаты Т‑Банка, встроенный в блок с ценами, а не на отдельной странице - это заметно снижает число брошенных корзин на лендингах с оплатой
- Countdown-таймер для акции, синхронизированный с реальным сроком, а не зашитый статично в вёрстку - иначе через неделю таймер покажет отрицательные числа
- Валидация телефона и email на стороне клиента до отправки формы, чтобы в CRM не попадали заявки с опечатками вместо номера
Пример простого скрипта, который отправляет цель в Метрику на отправку формы Tilda:
document.addEventListener('submit', function (e) {
if (e.target.closest('.t-form')) {
if (typeof ym !== 'undefined') {
ym(XXXXXXXX, 'reachGoal', 'lead_form_submit');
}
}
});Такие доработки не меняют дизайн блока - Тильда рисует вёрстку как обычно, код только добавляет логику поверх. Из-за этого их можно подключать даже на уже собранный лендинг, без пересборки страницы с нуля.
От лендинга до интернет-магазина
Сайт / Tilda
от 30 000 ₽
Подробнее →Частые вопросы
Сколько блоков нужно лендингу на Тильде для хорошей конверсии?
Жёсткого числа нет - на практике 7-10 смысловых блоков закрывают структуру «оффер → боль → решение → доказательства → цена → форма» без лишней воды. Лендинги на 20+ блоков чаще теряют посетителя на середине прокрутки, чем убеждают его сильнее.
Можно ли сделать многостраничный сайт на Тильде, а не одну посадочную страницу?
Да, Tilda спокойно тянет сайт на 10-20 страниц с общим меню и каталогом - движок для этого не ограничен форматом лендинга. Но если нужен полноценный интернет-магазин с фильтрами, личным кабинетом и складским учётом, на определённом масштабе разумнее переходить на WordPress с WooCommerce или на отдельный веб-сервис - Tilda не рассчитана на сложную бизнес-логику.
Зачем кастомный код, если в Тильде есть готовые блоки и Zero Block?
Zero Block закрывает вёрстку - расположение элементов, анимации, адаптив. Но он не считает стоимость доставки по API СДЭК, не отправляет заявку в Telegram-бота и не проверяет валидность телефона до отправки формы. Это логика, а не дизайн, и её добавляют отдельным JS-кодом поверх готовой вёрстки.
Сколько стоит лендинг на Тильде под ключ?
У меня лендинг на Тильде под ключ стоит от 30 000 ₽ - с проработкой структуры блоков, дизайном по референсам и базовой настройкой форм. У других разработчиков и в студиях цена на рынке обычно стартует в похожем диапазоне и может доходить до 100 000-150 000 ₽ в зависимости от объёма дизайна и сложности интеграций.