Дизайн лендинга
Дизайн лендинга сводится к одной задаче на страницу: заголовок повторяет обещание рекламы, рядом с единственной кнопкой стоят доказательства, а короткая форма быстро открывается на телефоне. Ниже — шесть частей, восемь правил, три примера и бесплатный способ собрать такую страницу.
Руководство проверено 13 октября 2026 года · команда Mobirise
Из чего состоит лендинг
Лендинг — это страница, куда человек приходит из конкретного объявления, письма, поста или QR-кода и где от него ждут одного действия. Страница держится на шести частях, обычно в таком порядке.
Заголовок, который повторяет обещание
Возьмите слова из объявления или сообщения, по которому пришёл посетитель. Если реклама обещает бесплатный расчёт ремонта крыши, в заголовке должно стоять именно это, а не девиз вашей компании.
Одна строка о том, для кого предложение
Подзаголовок из одного-двух предложений: кому подходит предложение, что человек получит и как скоро. Существительные и цифры работают лучше прилагательных: «фиксированная цена к завтрашнему дню» говорит читателю больше, чем «быстрый и дружелюбный сервис».
Реальное изображение
Продукт, помещение, команда или результат. Постановочные стоковые фото утяжеляют страницу, но ничего не сообщают. Проверьте, как изображение обрезается на узком экране.
Один призыв к действию
Одна кнопка с глаголом и результатом, окрашенная в единственный яркий цвет на странице. Повторите её ниже для тех, кто дочитывает до конца, но не добавляйте вторую, конкурирующую цель.
Доказательства рядом с решением
Отзывы с именами, оценки с количеством голосов, логотипы клиентов, которые вы вправе использовать, сертификаты. Разместите их рядом с кнопкой, там, где появляются сомнения, а не кучей внизу страницы.
Сначала ответы, потом форма
Как это работает, сколько стоит и что произойдёт после клика. Затем форма: только те поля, которые нужны для следующего шага, и одно предложение о том, что посетитель получит и когда.
Правила дизайна лендинга, которые работают
Каждое из правил можно проверить на готовой странице за минуту-две. Если в правиле есть число, оно взято из названного публичного стандарта.
Уберите выходы
Уберите главное меню, ссылки на блог и значки соцсетей. Каждая лишняя ссылка — путь на выход до целевого действия. Достаточно логотипа, строки с контактами и юридических ссылок в подвале.
Совпадайте с источником
Сохраните формулировки, предложение и визуальный стиль объявления. Google Ads считает опыт использования целевой страницы — то есть то, насколько она релевантна и полезна тем, кто на неё перешёл, — одной из трёх составляющих показателя качества (Quality Score).
Уместите главное на одном экране
На телефоне заголовок, подзаголовок и кнопка должны быть видны без прокрутки. Если изображение сдвигает кнопку вниз, уменьшайте изображение, а не текст.
Назовите на кнопке результат
«Получить расчёт», «Записаться на визит», «Прислать прайс-лист». Подписи вроде «Отправить» или «Подробнее» описывают сам клик, а не то, что получит посетитель.
Просите меньше
Для первого контакта обычно хватает имени и адреса почты или номера телефона. Для каждого следующего поля нужна причина, которую вы смогли бы объяснить; уточняющие вопросы могут подождать до звонка.
Уложитесь в пороги скорости Google
По Core Web Vitals страница считается хорошей, если самый крупный элемент отрисовывается за 2,5 секунды, отклик на ввод приходит в течение 200 мс, а сдвиг макета не превышает 0,1 — по 75-му процентилю визитов.
Выполните базовые требования доступности
WCAG 2.2 на уровне AA требует контраста текста не менее 4,5:1 (3:1 для крупного текста) и областей нажатия не менее 24 на 24 CSS-пикселя. Дайте каждому полю формы видимую подпись, а не только текст-подсказку внутри поля.
Проверяйте по одному изменению
A/B-тест сравнивает две версии, которые отличаются одним элементом, и чтобы исключить случайность, ему нужно достаточно визитов и конверсий на каждую версию. В небольшой кампании часто больше даёт наблюдение за тем, как страницей пользуются несколько человек.
Примеры дизайна лендинга на трёх темах Mobirise
Три скриншота версии для компьютера под заголовком этого руководства — первые экраны демо тем Mobirise: волонтёрская организация (HumanityM5), бренд пищевых добавок (EvolveM5) и медицинская клиника (SpecialtyM5). Это демо, а не рекламные страницы, поэтому ниже сказано, что хорошо делает каждый первый экран и что стоит изменить, прежде чем платить за трафик.
Волонтёрская организация
Всё по центру: один крупный заголовок, одно предложение о деле и одна тёмная кнопка поверх выцветшей фотографии тянущихся рук, которая не мешает читать текст. Для набора волонтёров замените «About Organization» на «Записаться в волонтёры» и назовите ближайшее мероприятие.
Бренд пищевых добавок
Крупный план зелёных листьев на всю ширину экрана задаёт настроение раньше, чем кто-либо прочтёт хоть слово. Название продукта набрано очень крупным белым шрифтом, внизу слева — короткое описание, внизу справа — кнопка «About supplement». Для рекламы вынесите в заголовок пользу, а не категорию, и добавьте рядом с кнопкой рейтинг или сертификат.
Медицинская клиника
Разделённый первый экран: слева заголовок с засечками и три строки об опытных врачах, диагностике и заботе, ориентированной на пациента, справа — фото светлого интерьера клиники. Реальное помещение вызывает больше доверия, чем иллюстрация. Для кампании по записи главная кнопка должна называться «Записаться на приём», а рядом с ней стоит разместить номер телефона.
Что изменили бы во всех трёх
В каждом демо оставлено полное меню (Home, About, Events или Pricing), как и положено обычному сайту. Для кампании его удаляют, оставляют одно действие, а ниже добавляют доказательства и короткую форму. Поскольку страница — это набор блоков, это правка, а не переделка.
Как создать лендинг в Mobirise
Один редактор создаёт и лендинги, и полноценные сайты — в браузере или в скачанном приложении. Четыре шага ведут страницу к рабочему адресу.
Получите первый черновик
Расскажите ИИ в одной-двух строках, что вы предлагаете и кому, на своём языке или дайте ему нарисованный эскиз либо скриншот. ИИ-генератор возвращает четыре варианта дизайна, каждый с текстами и изображениями, обычно меньше чем за минуту; Regenerate предлагает ещё варианты, не расходуя попытку. Или откройте тему и добавляйте блоки вручную.
Сведите всё к одной цели
Перетаскивайте блоки в нужный порядок, удаляйте те, что не работают на действие, и не добавляйте меню. С помощью Clone Block повторите призыв к действию ниже по странице, а для каждого заголовка выберите тег H, чтобы на странице остался один H1. Тексты и изображения правятся прямо на странице; в панели параметров каждого блока настраиваются отступы, фон, колонки и видимые элементы.
Добавьте форму и расширения
Form Builder создаёт форму для сбора заявок, Popup Builder добавляет всплывающее окно, а Chat Button открывает чат в WhatsApp, Telegram, Messenger и других приложениях. Все три входят в KIT, BASE и GROW — платные планы.
Проверьте на телефоне и опубликуйте
Просмотрите страницу в ширине телефона, планшета и компьютера; изображения автоматически преобразуются в WebP. Опубликуйте её на адрес в домене mobirisesite.com с HTTPS или на собственный домен (планы BASE и GROW). На любом плане, включая FREE, приложение для компьютера также может загрузить её по FTP или FTPES, опубликовать на GitHub Pages или записать в локальную папку.
В Mobirise нет встроенного A/B-тестирования. Чтобы сравнить две версии, опубликуйте каждую по отдельному адресу, направьте на каждую половину рекламы и сравните результаты в рекламном кабинете или аналитике. Редактировать можно и без подключения к интернету в офлайн-приложении для компьютера; для публикации и ИИ нужен интернет.
Какой конструктор лендингов подойдёт для вашей задачи
Специализированные платформы для лендингов строятся вокруг тестирования и рекламного трафика. Универсальные конструкторы сайтов стоят дешевле и позволяют одной странице вырасти в сайт. Наш выбор, включая случаи, когда мы сами не выбрали бы Mobirise:
- Много вариантов на платном трафике
- Unbounce или Instapage. В обоих A/B-тестирование есть на средних планах; Instapage тестирует на стороне сервера и добавляет персонализацию.
- A/B-тесты при небольшом бюджете
- Leadpages: тестирование доступно с плана Grow.
- Одна простая страница за небольшие деньги
- Carrd: бесплатный план и платные планы с оплатой за год.
- Бесплатная страница, которая хранится у вас в файлах
- Mobirise: приложение для компьютера бесплатно, экспортирует HTML и публикует на любой хостинг.
- ИИ-дизайн до оплаты
- 8B AI: дизайн создаётся бесплатно, а для публикации нужен план Pro.
- Страница, которая становится полноценным сайтом
- Mobirise или другой конструктор сайтов — последующие страницы живут в том же проекте.
- Где Mobirise уступает
- Нет встроенного A/B-тестирования; формы и всплывающие окна идут в платных расширениях; нет отдельного макета для телефона; на бесплатных сайтах есть брендинг Mobirise.
Сравнение шести конструкторов лендингов
Mobirise проигрывает в строке про A/B-тестирование; специализированные платформы проигрывают в сохранении ваших файлов и в работе офлайн. Обратите внимание, как указана цена в соответствующей строке: за месяц или за год.
| Mobirise | Unbounce | Leadpages | 8B AI | Carrd | Instapage | |
|---|---|---|---|---|---|---|
| Для чего | Лендинги и целые сайты из адаптивных блоков, с файлами, которые остаются у вас | Маркетологи и агентства, ведущие рекламные страницы | Малый бизнес, публикующий лендинги, сайты и блоги | Бесплатно попробовать полный ИИ-дизайн сайта, а публиковать позже | Простые одностраничные сайты и профили | Рекламные кампании в большом масштабе, с персонализацией |
| A/B-тестирование | Нет, не встроено | Да, без ограничений, с плана Experiment | Да, с плана Grow | Не указано | Не указано | Да, на стороне сервера, с плана Optimize |
| Формы | Расширение Form Builder, входит в KIT, BASE и GROW | Формы для сбора заявок на каждом плане; многошаговые формы — с плана Build | Формы и вебхуки на каждом плане | Контактные формы и формы для сбора заявок, на бесплатном плане и в Pro | С плана Pro Standard; расширенные формы — на Pro Plus | Конструктор форм на каждом плане; многошаговые формы — с плана Optimize |
| Помощь ИИ | Четыре варианта дизайна за одну генерацию, исходя из набранного текста, эскиза или скриншота; 3 бесплатные генерации в месяц | ИИ-копирайтинг с плана Build; ИИ-оптимизация трафика на плане Optimize | Создание страниц с помощью ИИ на каждом плане | Создаёт весь дизайн по одному предложению; правки через чат с ИИ на плане Pro | Не указано | ИИ-тексты для заголовков, абзацев и кнопок |
| Бесплатный план | Да: приложение для компьютера и его 200+ блоков, неограниченное число сайтов на любом сервере, плюс 3 бесплатных онлайн-сайта на поддомене Mobirise; на бесплатных сайтах есть брендинг | Нет; 14-дневный пробный период без карты, без собственного домена на это время | Нет; 7-дневный пробный период, нужна карта | Только дизайн; публикации нет | Да, до 3 сайтов с брендингом «Made with Carrd» | Нет; 14-дневный пробный период, нужна карта |
| Самый дешёвый платный план | $149 в год за KIT: приложение для компьютера, все расширения, без брендинга. $199 в год за BASE, в который добавлены собственные домены на хостинге Mobirise | Starter, $22 в месяц при оплате за год ($29 при помесячной): 5 страниц, трафик до 500 | Pro, $29 в месяц; оплата за год экономит 20% | $9 в месяц за Pro при оплате за год, с хостингом и собственным доменом | $9 в год за Pro Lite (только адрес Carrd); $19 в год за Pro Standard, куда добавлены собственные домены и формы | Create, $79 в месяц при оплате за год ($99 при помесячной): 15 000 уникальных посетителей в месяц |
| Экспорт кода | Да: обычные файлы HTML, CSS и JS, бесплатно из приложения для компьютера; экспорт из конструктора в браузере требует BASE или GROW | Нет; страницы скачиваются только как файлы .unbounce для Unbounce | Classic Builder: HTML-файл, который загружает страницу из Leadpages; статическая копия не поддерживается | Полный экспорт HTML на плане Pro | Pro Plus ($49 в год): HTML, CSS и JS в zip-архиве; формы перестают работать | Не указано |
| Работа офлайн | Да, в приложении для компьютера (Windows, macOS, Linux) | Нет, только в браузере | Нет, только в браузере | Нет, только в браузере | Нет, только в браузере | Нет, только в браузере |
Данные сняты 13 октября 2026 года со страниц с ценами и из справочных статей каждого сервиса. Цены в долларах США; «при оплате за год» — это месячный эквивалент одного годового платежа, а Mobirise и Carrd указывают цену за год. Суммы Leadpages взяты из FAQ на его странице с ценами. В старых обзорах часто упоминаются прежние планы, а цены меняются, поэтому перед покупкой проверьте их на сайте каждого сервиса.
Чек-лист перед запуском лендинга
Пройдите по этому списку на телефоне, через мобильный интернет, а не офисный Wi-Fi, до того как придёт первый платный клик, и сами отправьте тестовую заявку через форму.
Исправьте всё, что не прошло проверку, прежде чем тратить деньги на трафик: платные клики на неработающую форму — самая дорогая ошибка здесь. Если у вас одностраничный сайт, а не страница для кампании, пропустите первый пункт и единую цель.
- Совпадение с источником. В заголовке использованы слова из объявления, письма или поста.
- Первый экран. Заголовок, подзаголовок и кнопка видны на телефоне без прокрутки.
- Одна цель. Меню и посторонние ссылки убраны; любая повторяющаяся кнопка ведёт к тому же действию.
- Текст кнопки. В нём названо то, что получит посетитель.
- Доказательства. Они стоят рядом с кнопкой, а у каждой цитаты есть имя.
- Форма. Только поля, нужные для следующего шага, у каждого видимая подпись.
- Тестовая заявка. Она приходит на нужную почту, а в сообщении с благодарностью сказано, что будет дальше.
- Контраст и размер кнопок. Контраст текста не ниже 4,5:1, а на кнопки легко попасть большим пальцем.
- Скорость. Страница проходит Core Web Vitals в PageSpeed Insights.
- Основы поиска. Title и description страницы описывают предложение, а H1 один.
- Подвал. Ссылки на политику конфиденциальности и контакты работают.
- Отслеживание. Конверсия учитывается в вашей аналитике или рекламном кабинете.
Дизайн лендинга: частые вопросы
Что такое дизайн лендинга?
Это проектирование одной страницы вокруг одного действия для посетителей из конкретного источника: рекламы, письма, поста или QR-кода. Оно охватывает заголовок, макет, доказательства, форму и скорость, а результат оценивается одним числом — долей посетителей, которые совершили действие.
Каким должен быть хороший лендинг?
Обещание совпадает с тем, откуда пришёл посетитель, действие одно, доказательства стоят рядом с ним, а форма короткая. Страница также должна быстро загружаться и удобно читаться на телефоне, поскольку трафик кампаний часто приходит именно с него.
Как спроектировать лендинг шаг за шагом?
Запишите единственное действие, которого вы хотите, и откуда придёт трафик. Составьте заголовок из слов самого источника, соберите доказательства, которые можно показать, и набросайте порядок шести частей. Затем соберите страницу из блоков или ИИ-черновика и перед запуском проверьте её на телефоне.
Одностраничный сайт — это то же самое, что лендинг?
Не совсем. Одностраничный сайт умещает весь небольшой сайт на одной прокручиваемой странице, обычно с меню, которое переходит к разделам, и служит нескольким целям. У лендинга одна цель, он обычно делается под одну кампанию и может быть частью большего сайта.
Нужно ли лендингу навигационное меню?
Обычно нет: каждая ссылка в меню — это возможность уйти до целевого действия. Оставьте логотип, строку с контактами и юридические ссылки; на длинной странице меню заменяет кнопка, которая прокручивает к форме.
Какой длины должен быть лендинг?
Столько, сколько нужно для ответов на вопросы посетителя. Для бесплатной загрузки хватит одного-двух экранов; дорогой услуге нужны цены, описание процесса, доказательства и ответы, поэтому страница получается длиннее. Повторяйте одну и ту же кнопку в естественных местах остановки.
Какой конструктор лендингов лучший?
Зависит от задачи. Для постоянных A/B-тестов на платном трафике рассчитаны Unbounce, Instapage и Leadpages. Carrd — недорогой выбор для одной простой страницы. Mobirise подходит для бесплатной страницы, которую можно разместить где угодно и позже вырастить до полноценного сайта, но встроенного A/B-тестирования в нём нет.
Можно ли сделать лендинг бесплатно?
Да. Скачиваемое приложение Mobirise бесплатно, включает 200+ блоков и может загрузить страницу на ваш сервер. Онлайн бесплатный план включает 3 сайта на поддомене mobirisesite.com и 3 ИИ-генерации в месяц, с брендингом Mobirise на каждом сайте. Form Builder и Popup Builder требуют платного плана — от $149 в год.
Может ли ИИ сделать дизайн лендинга?
Да. В Mobirise вы описываете предложение и аудиторию, затем выбираете один из четырёх вариантов дизайна от ИИ и дорабатываете его в чате с ИИ или правите блоки сами. Одна генерация даёт одну страницу или черновой вариант всего сайта. Реальные цены, факты и фотографии по-прежнему даёте вы.
Есть ли в Mobirise A/B-тестирование?
Нет, встроенного A/B-тестирования нет. Вы можете опубликовать две версии по разным адресам, направить на каждую половину рекламного трафика и сравнить результаты в рекламном кабинете или аналитике.
Создайте свой первый лендинг
Начните с ИИ-черновика онлайн или соберите страницу блок за блоком в бесплатном приложении на компьютере с Windows, Mac или Linux, а затем опубликуйте её там, где нужно вашей кампании.