В статье мы расскажем, как сделать лендинг без навыков в программировании, верстке и дизайне. Наша пошаговая инструкция поможет вам в подготовке и создании эффективного лендинга.
Для начала рассмотрим, что такое лендинг, для чего он нужен и по каким правилам его нужно создавать.
Что такое лендинг
Лендинг (англ. Landing Page) — это страница на сайте, которая предназначена для продвижения конкретного товара, услуги или предложения. Landing Page переводится как целевая или посадочная страница. Поскольку для создания лендинга нередко используют одностраничные сайты, лендинги также называют одностраничниками.
Лендинг устроен так, чтобы побудить читателя к конкретному действию. Например: записаться на курс, скачать презентацию, оставить номер или купить смартфон.
При создании одностраничника учитывайте несколько основных правил.
Правила хорошей лендинг пейдж
Мы подготовили чек-лист базовых правил, по которым строится посадочная:
- 1. Одна посадочная — один продукт. Этим Landing Page отличается от других страниц сайта, на которых можно встретить сразу несколько предложений.
- 2. Конкретная целевая аудитория. При создании посадочной ориентируйтесь на конкретный сегмент аудитории, а не на всех пользователей сайта.
- 3. Последовательная история. Идеальный формат для лендинга — последовательное повествование. Начните с конкретного предложения и развивайте тему: расскажите важные подробности, обозначьте выгоды, покажите, что вам можно доверять, а затем подведите к целевому действию.
- 4. Одно простое действие. Действие, которое вы ждёте от клиента, должно быть понятным и простым. Идеально, если оно поместится на одной кнопке: скачать/оставить заявку/подписаться/заказать.
- 5. Минимум переходов. Чем реже пользователь переходит по ссылкам на другие страницы, тем вероятнее он дойдет до целевого действия.
- 6. Наглядность. При подготовке контента руководствуйтесь принципом наглядности. Если текст можно заменить картинкой или видео — сделайте это. Чем понятнее предложение, тем выше шанс заинтересовать пользователя.
- 7. Сначала продукт — потом оформление. Текст, картинки, дизайн — это то, что помогает рассказать о ценности продукта. Если по факту ваш продукт невыгоден и не полезен, лендинг не заставит клиента купить его.
Теперь узнаем, как создать одностраничный сайт с нуля.
Как создать лендинг самому
Определите цель
Перед началом работы определите, какую цели вы хотите достичь с помощью целевой страницы. Существует несколько основных вариантов:
- продать продукт или услугу (онлайн-курс, сеанс массажа, наручные часы);
- собрать контакты (телефоны или email) в обмен на полезный контент;
- собрать заявки (на участие в бесплатном вебинаре, конференции, мастер-классе);
- собрать предзаказы (как правило, на конкретный товар — книгу, игру или предмет гардероба).
От цели будет зависеть всё: структура страницы, форма подачи и оформление.
Проанализируйте целевую аудиторию
После определения цели переходите к анализу целевой аудитории. Если у вас уже есть клиенты, соберите информацию об их опыте и поведении. Для анализа подойдёт любая информация: исследования, статистические данные, отзывы. Узнайте, какие сомнения возникали у покупателей при взаимодействии с продуктом. Выясните, почему некоторые пользователи выбрали другие варианты.
Если вы запускаете новый продукт, подумайте об основных болях и опасениях потенциальных клиентов. Подумайте, какие вопросы могут возникнуть на этапе знакомства с услугой. Эта информация поможет вам продумать оптимальную структуру и наполнение страницы.
Узнайте, как у конкурентов
Когда вы определитесь с целью и аудиторией, переходите к анализу конкурентов. Если вы ещё не знаете, кто ваши конкуренты — поищите в интернете похожие предложения. Обращайте внимание на подачу и оформление. Выписывайте интересные решения, идеи дизайна и текстов. Позже вы сможете адаптировать их под свой проект или вдохновиться на что-то новое. Также отмечайте то, что получилось неудачно. Это поможет избежать ошибок в вашей работе.
Для удобства можно записывать всё в табличку или создать папку со скриншотами.
Продумайте структуру
Лендинг — это логичное повествование, которое имеет четкую структуру. Структура устроена иерархически. Условно можно выделить три уровня иерархии: тематические блоки, разделы и структурные элементы разделов.
Тематические блоки
Чтобы выстроить логичную структуру, начните с самых крупных элементов — тематических блоков. Например, можно выделить следующие структурные блоки:
Вступление:
О продукте/предложении:
Польза и выгоды:
Почему вам можно доверять:
Что делать:
В зависимости от продукта и конкретной ситуации вы можете убрать один из блоков или добавить дополнительные. Также при построении структуры можно опираться на формулы продающих текстов:
- AIDA (A — внимание, I — интерес, D — желание, A — действие),
- ACCA (A — внимание, C — понимание, C — убеждение, A — действие),
- PMPHS (PM — озвучиваем проблему, P — говорим что будет, если ничего не сделать, H — даем надежду, S — предлагаем решение).
Затем переходите к следующему уровню в иерархии — разделам.
Разделы
Продумайте, о чем конкретно вы хотите рассказать в рамках предложения. Например: о компании, о методике работы, о цене, о клиентах. После этого определите, к какому блоку ближе всего каждый из вопросов по тематике и соотнесите их. В блоке может быть как один, так и несколько разделов. На посадочной каждому разделу будет отведена отдельная секция.
Структура разделов
Теперь переходите к структурным элементам разделов. Как правило, в каждом разделе обязательно есть заголовок. Остальные элементы подбираются в зависимости от контекста: подзаголовки, текст, иллюстрации, таблицы, формы, кнопки и другое. Подумайте, какие из этих элементов и в каком сочетании помогут лучше передать основной посыл раздела.
Структуру можно оформить в виде таблицы:
Напишите текст и подберите иллюстрации
Если структура готова, переходите к написанию текста и выбору иллюстраций.
Текст
Чтобы писать безупречные тексты, нужен опыт и практика. Вам будет достаточно хорошего текста. Несколько основных правил помогут улучшить текст любой посадочной:
- Вынесите основную мысль в начало: найдите оффер (основную ценность предложения) и разместите на первом экране. Подумайте, что выгодно отличает ваш вариант от конкурентов. Найдите свою изюминку или преимущество. Лучше всего, если оффер будет попадать в одну из болей клиента.
- Пишите проще: не используйте сложные конструкции и сложносочиненные предложения. Заменяйте или убирайте канцеляризмы — «данный», «указанный», «произведите», «в виду». Избегайте сложных терминов, которые понятны только узкому сообществу.
- Опирайтесь на факты: исключите оценочные формулировки «быстро», «самый эффективный», «высококвалифицированный». Пишите конкретно — «сделаем за 2 дня», «справляется с задачей в 93-х случаях из 100», «опыт работы 15 лет».
Иллюстрации
Теперь подберите конкретные иллюстрирующие материалы. В качестве иллюстраций можно использовать видео, картинки, скриншоты, рисунки, графики, отсканированные грамоты и дипломы.
Визуализация — лучший помощник текста. Однако стоит использовать ее с умом. Важно, чтобы иллюстрации не противоречили тексту, а скорее подкрепляли его. Хорошо подобранная картинка поможет усилить мысль, которую вы хотите донести до клиента.
Также не стоит добавлять иллюстрации там, где достаточно описания. Избыток элементов на экране будет отвлекать и сбивать с основной мысли. И наоборот — если выходит портянка текста, лучше заменить ее на видео или картинку.
Теперь создайте прототип сайта-лендинга. Это можно сделать в специальных сервисах (Moqups, Wireframe, Ninjamock) или от руки.
Посмотрите, что у вас получилось. Убедитесь, что страница не перегружена текстом и на ней достаточно визуальных материалов. Если первый вариант вас не устроит, скорректируйте его. Также можно создать несколько прототипов, а затем сравнить их и выбрать лучший.
Продумайте дизайн
Как и другие элементы страницы, дизайн влияет на восприятие продукта. Продуманный дизайн дополняет содержание и помогает быстрее и легче воспринимать информацию.
При планировании дизайна опирайтесь на базовые правила:
- 1. Добавляйте отступы или разделители. Они нужны для того, чтобы секции визуально не склеивались друг между другом. Отступы помогают воспринимать секцию как единое целое.
- 2. Цветовая гамма. В структуре любой страницы уже заложены ахроматические цвета — белый и черный. Ваша задача подобрать хроматические цвета (т.е. те, которые имеют оттенки). Лучше использовать не больше трех цветов. Чем цветов больше — тем сложнее создать гармоничную страницу. Выбирайте цвета в соответствии с тематикой лендинга. Например, если вы предлагаете юридические услуги, используйте нейтральные, приглушенные оттенки — серый, темно-синий, темно-зеленый.
- 3. Ритм. Ритм лендинга — это чередование цветов. Допустим, розовый — белый — розовый — белый — розовый. Такой подход позволяет улучшить навигацию по сайту. Страница с ритмом выглядит структурировано и аккуратно.
- 4. Размер заголовков и подзаголовков. В каждой секции посадочной есть заголовок. Заголовки помогают отделить одну мысль от другой. Также они помогают структурировать страницу. Чтобы соблюсти структуру, выставляйте одинаковый размер для всех заголовков. Например, только 53рх или 62рх. Это правило относится и к подзаголовкам.
- 5. Соблюдайте общий стиль. Цвет фона, размер заголовков, цветовая гамма картинок и кнопок, шрифты — в совокупности эти элементы должны смотреться гармонично.
Выберите шаблон
Шаблон сайта — это уже свёрстанная HTML-страница с готовым дизайном. Шаблоны упрощают настройку внешнего вида лендинга. При создании посадочной, шаблон можно взять за основу и адаптировать его под задачу — поменять расположение блоков и элементов, изменить цвет и шрифты.
Шаблон удобно выбирать сразу при заказе услуги Рег.сайт. После заказа вы можете изменить шаблон, если посчитаете, что больше подходит другой.
В Рег.сайте есть десятки шаблонов на разные темы: портфолио, прачечная, автосервис, кулинария, клининг, юридическая фирма, спа-салон и другие.
Отредактируйте шаблон
По умолчанию каждый шаблон Рег.сайта содержит только одну страницу. Страница состоит из уже готовых разделов — секций. Чтобы сделать лендинг в соответствии с вашей структурой, удалите, добавьте или отредактируйте каждую секцию с помощью визуального редактора. В статье мы подробно рассказали, как создавать и редактировать секции в Рег.сайте.
Наполните шаблон дизайном и контентом
Внутри каждого раздела Рег.сайта есть строки и модули. Их можно редактировать и настраивать — как в конструкторе.
Десятки модулей и элементов (тени, отступы, рамки, градиент) помогут оформить дизайн и контент в соответствии с вашей задумкой. Как с ними работать мы показали в инструкции.
Также в админке можно настроить дополнительные плагины. С их помощью можно добавить на лендинг форму обратной связи, шорткод, дополнительные шрифты и многое другое. На Рег.сайт можно установить тысячи различных плагинов.
Как создать лендинг на Wordpress
SEO-оптимизируйте лендинг
При создании посадочной страницы важно уделить внимание привлекательности сайта не только для потенциальных покупателей, но и для поисковых систем. В статье [Как настроить SEO-продвижение сайта, созданного в Рег.сайте(/support/konstruktor-i-cms/reg-site/sozdaniye-sayta-s-pomoshchyu-reg-site/kak-nastroit-seo-prodvizheniye-sayta-sozdannogo-v-reg-site) мы рассказали об основах SEO-оптимизации и базовых SEO-настройках.
Заключение
Теперь вы знаете, как создать одностраничный сайт самостоятельно. Мы рассказали, из каких этапов состоит создание целевой страницы, какие правила стоит соблюдать на каждом из этапов, какие трудности могут возникнуть в процессе работы и как их решить. Это позволит вам сделать лендинг практически бесплатно, достаточно только заказать услугу Рег.сайт.
Помогла ли вам статья?
Спасибо за оценку. Рады помочь 😊