Как создать прелендинг с нуля: пошаговый маршрут

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

Маршрут целиком

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

Первые три шага: задача, тип, каркас

Шаг 1. Задача: под какой оффер и какой трафик собираем страницу

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

Шаг 2. Тип преленда: квиз, лонгрид, витрина, заглушка

Формат выбирается по связке «источник → оффер», а не по красоте. Квиз вовлекает и работает на холодном трафике, лонгрид убеждает и подходит для сложных продуктов, витрина-подборка даёт выбор и снижает сопротивление, короткая заглушка нужна там, где важна скорость перехода. Разбор форматов и связок, под которые они заходят, — в материале про виды прелендингов. Трудозатраты растут от заглушки к лонгриду, поэтому для первой страницы берётся самый простой формат, который решает задачу.

Шаг 3. Схема блоков: каркас страницы на бумаге

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

Ошибка новичка: начинать с дизайна

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

Текст, вёрстка, кнопка

Шаг 4. Текст

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

Шаг 5. Вёрстка одной HTML-страницы с инлайн-стилями

Вёрстка идёт в одном файле: index.html, все стили — в атрибуте style, без внешних таблиц и подключённых шрифтов. Такую страницу не нужно заливать пачкой файлов, она не ломается при переносе и грузится одним запросом. Минимальная заготовка:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Заголовок страницы</title>
</head>
<body style="margin:0;font-family:Arial,sans-serif;background:#f5f5f5;">
  <div style="max-width:480px;margin:0 auto;padding:20px;background:#fff;">
    <h1 style="font-size:22px;line-height:1.3;">Заголовок с обещанием</h1>
    <p style="font-size:16px;line-height:1.5;color:#333;">Первый абзац с сутью.</p>
    <a href="ПАРТНЁРСКАЯ_ССЫЛКА" style="display:block;padding:16px;background:#e8590c;color:#fff;text-align:center;text-decoration:none;font-size:18px;border-radius:6px;">Получить доступ</a>
  </div>
</body>
</html>

max-width и viewport здесь держат страницу в одну колонку на телефоне и не дают ей разъехаться.

Шаг 6. Кнопка и ссылка с метками

Кнопка — это ссылка <a>, оформленная как кнопка, а не <div> с обработчиком. Метки (sub-id, sub1–sub4) подставляются в партнёрскую ссылку заранее, на этапе вёрстки: при запуске нескольких связок это единственный способ понять, какая площадка и какой креатив дали переход. Если на странице есть форма, к ней добавляются отдельные требования по валидации и защите от спама — разбор в статье про кнопку и форму на прелендинге. Проверяются два момента: ссылка открывается в новой вкладке и метки доходят до партнёрки.

Шаг 7. Проверка на телефоне

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

Телефон, хостинг, модерация

Шаг 8. Хостинг

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

Шаг 9. Проверка модерацией

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

Частые ошибки

1. Две цели на одной странице. Вторая кнопка или дополнительная форма рассеивают внимание; на прелендинге должно быть одно очевидное действие.
2. Обещания вместо аргументов. Гарантии результата и «доход от…» ломают и модерацию, и доверие. Работают конкретика по офферу и понятное объяснение, что произойдёт после клика.
3. Кнопка ниже первого экрана. Если человек не видит, куда нажать, он уходит; на телефоне это критично вдвойне.
4. Потерянные метки. Ссылка без sub-id превращает тест связок в гадание — данные по источнику не соберутся.
5. Внешние стили и тяжёлые картинки. Подключённая библиотека или крупный файл добавляют задержку до первого показа; для одной страницы это лишний риск.

Вопрос–ответ

Нужен ли дизайнер, чтобы сделать прелендинг? Нет. Для старта достаточно одной колонки, системного шрифта и одной акцентной кнопки. Дизайн начинает влиять на результат позже, когда структура и текст уже проверены на трафике.

Можно ли собрать прелендинг в конструкторе? Можно, и для быстрого теста это разумно. Ограничение в том, что конструктор добавляет свой код и вес страницы, а часть настроек ссылок и меток приходится обходить вручную. Одностраничный HTML проще контролировать полностью.

Сколько времени занимает сборка? Зависит от формата: короткая заглушка собирается за один вечер, лонгрид с доказательствами — дольше. Основное время уходит не на вёрстку, а на текст и проверку соответствия офферу.

Что важнее — текст или оформление? Текст. Оформление только поддерживает чтение и не мешает нажать кнопку: слабый текст не спасёт аккуратная вёрстка, а сильный работает и на простой странице в одну колонку.