Как сделать прелендинг: гид по сборке из 7 шагов

Сборка прелендинга — маршрут из семи шагов: задача и тип страницы → схема блоков → текст и призыв → вёрстка → хостинг и домен → проверка на телефоне и скорости → прогон через модерацию. Код можно писать руками, одной HTML-страницей с инлайн-стилями, или собирать в конструкторе: выбор зависит от того, сколько страниц нужно и насколько глубоко придётся править разметку.

Чек-лист маршрута:

1. Сформулировать задачу: оффер, источник трафика, что именно должен «дожать» преленд.
2. Выбрать тип страницы под эту задачу.
3. Нарисовать схему блоков — до первой строки кода.
4. Написать текст и призыв без обещаний дохода и гарантий.
5. Сверстать: одна страница, инлайн-стили, минимум внешних зависимостей.
6. Залить на хостинг и привязать домен.
7. Проверить на телефоне, прогнать скорость, отправить на модерацию.

Шаг 1. Задача и тип преленда

Тип страницы диктуют три вещи: оффер, источник трафика и то, чего не хватает на целевой странице рекламодателя. Узкая аудитория и сложная тема — преленд объясняет «зачем мне это». Холодный трафик из ленты — задача удержать внимание на несколько секунд и перевести в клик. Прогретая аудитория — не мешать: снять последнее возражение и отдать переход.

Поэтому первый шаг начинается не с дизайна и не с кода, а с ответа на вопрос: что человек должен понять или почувствовать на преленде, чего он не поймёт на странице оффера. Этот ответ и есть тип страницы.

Какой тип выбрать под свой оффер

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

Шаг 2. Схема блоков: каркас до вёрстки

Схема рисуется на бумаге или в заметках до первой строки кода: правка на уровне каркаса стоит минуту, на уровне готовой вёрстки — час. Каркас отвечает на вопрос, в каком порядке человек читает страницу, и этот порядок важнее шрифта и цвета кнопки.

Порядок такой: заголовок-крючок цепляет и обещает конкретику → доказательство объясняет, почему этому можно верить (механика, условия, факты о продукте) → выгода переводит механику в язык пользы → призыв говорит, что сделать сейчас. Логика повторяет ход мысли: «это про меня?» → «это правда работает?» → «что мне с этого?» → «что нажать».

Типовая структура и её варианты

Заголовок и призыв не убираются никогда: без них страница — текст без адресата. Доказательство можно сократить до одного сильного блока, если оффер говорит сам за себя. Выгоду иногда поднимают выше доказательства — для импульсных тем, где человеку важнее эмоция, чем аргумент. А призыв выше доказательства почти всегда вредит: читатель ещё не готов кликать и уходит.

Перед вёрсткой пронумеруйте блоки и подпишите рядом с каждым строку «зачем он здесь». Если ответа нет — блок лишний. Так отваливается половина «красивых» вставок, которые не двигают читателя к переходу.

Шаг 3. Текст и призыв без обещаний

Текст пишется под конкретный переход, а не «вообще про тему». Каждый абзац либо усиливает интерес, либо снимает возражение, либо ведёт к кнопке; остальное — украшение, которое съедает внимание.

Обещания дохода, гарантии результата, «единственный способ», «100%» — под запретом. Такая лексика почти гарантированно ловит отказ на модерации и создаёт проблемы с рекламной площадкой. Пишите о механике и условиях: что делает продукт, как устроен, от чего зависит результат. Формулировки «подходит тем, кто…» и «условия указаны на странице оффера» работают лучше любого обещания.

Призыв — одно конкретное действие, повторённое по странице в одинаковом виде. Если кнопка вверху говорит «Получить доступ», а внизу «Узнать больше», читатель начинает выбирать между действиями вместо того, чтобы действовать. Что именно стоит в форме или кнопке — разобрано в материале кнопка на прелендинге или форма: когда нужна форма, а когда достаточно ссылки.

Шаг 4. Вёрстка: одна страница, инлайн-стили

Самая надёжная техническая схема — одна HTML-страница, где стили прописаны прямо в разметке или внутри того же файла, а не разложены по внешним подключаемым файлам. Меньше запросов к серверу: страница отдаётся одним куском и быстрее показывается на слабом мобильном интернете. Файл легко перенести между хостингами и зеркалами — ничего не отваливается по путям. Правка вносится в одном месте, без сверки с тремя таблицами стилей.

Картинки держат локально, вместе со страницей, и сжимают до разумного веса. Шрифты, скрипты и счётчики с чужих доменов — потенциальная точка отказа и лишняя задержка: чем меньше внешних зависимостей, тем предсказуемее страница.

Руками или в конструкторе

Ручная сборка даёт полный контроль: любая разметка, любая логика, любой вес страницы, никаких лишних скриптов платформы. Минусы — нужен минимальный навык HTML/CSS и время на каждую новую страницу; при потоке из десятков прелендов это превращается в рутину.

Конструктор даёт скорость и почти нулевой порог входа: блоки собираются мышкой, адаптивность обычно заложена, хостинг часто включён. Минусы — больший вес из-за платформенных скриптов, затруднённый перенос на другой хостинг, нестандартную логику приходится обходить. Общее правило: один-два преленда — конструктор быстрее; серия однотипных страниц под разные гео и офферы — почти всегда выгоднее шаблон, собранный руками один раз и дальше копируемый.

Шаг 5. Хостинг и домен

Преленд — статичная страница, поэтому требования к хостингу простые: стабильная отдача статики, нормальная скорость из нужного региона, возможность привязать свой домен и поставить SSL. Мощности и базы данных не нужны — не переплачивайте за них.

Домен выбирайте отдельный от основного проекта: если страница когда-нибудь попадёт под блокировку или получит предупреждение, рабочие площадки не утащит за собой. Запасные домены в той же зоне держите под рукой — переезд тогда занимает минуты. Варианты размещения и подводные камни — в разборе хостинг для прелендинга.

Шаг 6. Проверка на телефоне и скорость

Основная часть трафика в арбитраже приходит с мобильных, значит преленд проверяется на телефоне первым, до десктопа. Проходите страницу на реальном устройстве, а не только в эмуляторе браузера: кнопка должна попадать под палец, текст — читаться без пинч-зума, ничего не должно уезжать за край экрана.

Отдельно проверьте скорость и то, что видит человек до загрузки картинок: заголовок, первый экран и кнопка должны появиться сразу. Если на медленном соединении страница сначала показывает пустое поле, часть трафика уйдёт, не дождавшись контента. Практические приёмы по адаптиву собраны в материале мобильная вёрстка прелендинга, а по загрузке — в разборе скорость прелендинга: вес картинок, порядок загрузки и типичные узкие места.

Шаг 7. Прогон через модерацию

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