Перейти к основному контенту

Как создать лендинг в REG.Site

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

Создайте сайт в пару кликов

REG.Site – это новый подход к созданию сайта. Сразу после заказа можно приступать к настройке внешнего вида страницы. Удобный интерфейс позволит реализовать самые необычные идеи без знания кода.

Заказать REG.Site

Для начала рассмотрим, что такое лендинг, для чего он нужен и по каким правилам его нужно создавать.

Что такое лендинг

Лендинг (англ. Landing Page) — это страница на сайте, которая предназначена для продвижения конкретного товара, услуги или предложения. Landing Page переводится как целевая или посадочная страница. Поскольку для создания лендинга нередко используют одностраничные сайты, лендинги также называют одностраничниками.

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

При создании одностраничника учитывайте несколько основных правил.

Правила хорошей лендинг пейдж

Мы подготовили чек-лист базовых правил, по которым строится посадочная:

  1. Одна посадочная — один продукт. Этим Landing Page отличается от других страниц сайта, на которых можно встретить сразу несколько предложений.
  2. Конкретная целевая аудитория. При создании посадочной ориентируйтесь на конкретный сегмент аудитории, а не на всех пользователей сайта.
  3. Последовательная история. Идеальный формат для лендинга — последовательное повествование. Начните с конкретного предложения и развивайте тему: расскажите важные подробности, обозначьте выгоды, покажите, что вам можно доверять, а затем подведите к целевому действию.
  4. Одно простое действие. Действие, которое вы ждёте от клиента, должно быть понятным и простым. Идеально, если оно поместится на одной кнопке: скачать/оставить заявку/подписаться/заказать.
  5. Минимум переходов. Чем реже пользователь переходит по ссылкам на другие страницы, тем вероятнее он дойдет до целевого действия.
  6. Наглядность. При подготовке контента руководствуйтесь принципом наглядности. Если текст можно заменить картинкой или видео — сделайте это. Чем понятнее предложение, тем выше шанс заинтересовать пользователя.
  7. Сначала продукт — потом оформление. Текст, картинки, дизайн — это то, что помогает рассказать о ценности продукта. Если по факту ваш продукт невыгоден и не полезен, лендинг не заставит клиента купить его.

Теперь узнаем, как создать одностраничный сайт с нуля.

Как создать лендинг самому

Определите цель

Перед началом работы определите, какую цели вы хотите достичь с помощью целевой страницы. Существует несколько основных вариантов:

  • продать продукт или услугу (онлайн-курс, сеанс массажа, наручные часы);
  • собрать контакты (телефоны или email) в обмен на полезный контент;
  • собрать заявки (на участие в бесплатном вебинаре, конференции, мастер-классе);
  • собрать предзаказы (как правило, на конкретный товар — книгу, игру или предмет гардероба).

От цели будет зависеть всё: структура страницы, форма подачи и оформление.

Проанализируйте целевую аудиторию

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

Если вы запускаете новый продукт, подумайте об основных болях и опасениях потенциальных клиентов. Подумайте, какие вопросы могут возникнуть на этапе знакомства с услугой. Эта информация поможет вам продумать оптимальную структуру и наполнение страницы.

Узнайте, как у конкурентов

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

Для удобства можно записывать всё в табличку или создать папку со скриншотами.

Продумайте структуру

Лендинг — это логичное повествование, которое имеет четкую структуру. Структура устроена иерархически. Условно можно выделить три уровня иерархии: тематические блоки, разделы и структурные элементы разделов.

Тематические блоки

Чтобы выстроить логичную структуру, начните с самых крупных элементов — тематических блоков. Например, можно выделить следующие структурные блоки:

  • Вступление:

как создать лендинг 7

  • О продукте/предложении:

как создать лендинг 8

  • Польза и выгоды:

как создать лендинг 9

  • Почему вам можно доверять:

как создать лендинг 10

  • Что делать:

как создать лендинг 11

В зависимости от продукта и конкретной ситуации вы можете убрать один из блоков или добавить дополнительные. Также при построении структуры можно опираться на формулы продающих текстов:

  • AIDA (A — внимание, I — интерес, D — желание, A — действие),
  • ACCA (A — внимание, C — понимание, C — убеждение, A — действие),
  • PMPHS (PM — озвучиваем проблему, P — говорим что будет, если ничего не сделать, H — даем надежду, S — предлагаем решение).

Затем переходите к следующему уровню в иерархии — разделам.

Разделы

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

Структура разделов

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

Структуру можно оформить в виде таблицы:

Название блока Название раздела Структура раздела
1. Вступление 1.1 Конкретное предложение 1.1 Заголовок, подзаголовок, иллюстрация
2. О продукте/предложении 2.1 О школе 2.1 Заголовок, текст, таблица
  2.2 Кому подойдет 2.2 …
  2.3 Тарифы и цены  
3. Польза и выгоды 3.1 Методика работы 3.1 …
  3.2 Как проходят тренировки  
4. Почему вам можно доверять 4.1 О тренерах 4.1 …
  4.2 Победы в конкурсах  
  4.3 Отзывы  
5. Что делать 5.1 Призыв к действию 5.1 …
  5.2 Контактная форма  

Напишите текст и подберите иллюстрации

Если структура готова, переходите к написанию текста и выбору иллюстраций.

Текст

Чтобы писать безупречные тексты, нужен опыт и практика. Вам будет достаточно хорошего текста. Несколько основных правил помогут улучшить текст любой посадочной:

  • Вынесите основную мысль в начало: найдите оффер (основную ценность предложения) и разместите на первом экране. Подумайте, что выгодно отличает ваш вариант от конкурентов. Найдите свою изюминку или преимущество. Лучше всего, если оффер будет попадать в одну из болей клиента.
  • Пишите проще: не используйте сложные конструкции и сложносочиненные предложения. Заменяйте или убирайте канцеляризмы — «данный», «указанный», «произведите», «в виду». Избегайте сложных терминов, которые понятны только узкому сообществу.
  • Опирайтесь на факты: исключите оценочные формулировки «быстро», «самый эффективный», «высококвалифицированный». Пишите конкретно — «сделаем за 2 дня», «справляется с задачей в 93-х случаях из 100», «опыт работы 15 лет».

Иллюстрации

Теперь подберите конкретные иллюстрирующие материалы. В качестве иллюстраций можно использовать видео, картинки, скриншоты, рисунки, графики, отсканированные грамоты и дипломы.

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

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

Теперь создайте прототип сайта-лендинга. Это можно сделать в специальных сервисах (Moqups, Wireframe, Ninjamock) или от руки.

Посмотрите, что у вас получилось. Убедитесь, что страница не перегружена текстом и на ней достаточно визуальных материалов. Если первый вариант вас не устроит, скорректируйте его. Также можно создать несколько прототипов, а затем сравнить их и выбрать лучший.

Продумайте дизайн

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

При планировании дизайна опирайтесь на базовые правила:

  1. Добавляйте отступы или разделители. Они нужны для того, чтобы секции визуально не склеивались друг между другом. Отступы помогают воспринимать секцию как единое целое.
  2. Цветовая гамма. В структуре любой страницы уже заложены ахроматические цвета — белый и черный. Ваша задача подобрать хроматические цвета (т.е. те, которые имеют оттенки). Лучше использовать не больше трёх цветов. Чем цветов больше — тем сложнее создать гармоничную страницу. Выбирайте цвета в соответствии с тематикой лендинга. Например, если вы предлагаете юридические услуги, используйте нейтральные, приглушенные оттенки — серый, темно-синий, темно-зеленый.
  3. Ритм. Ритм лендинга — это чередование цветов. Допустим, розовый — белый — розовый — белый — розовый. Такой подход позволяет улучшить навигацию по сайту. Страница с ритмом выглядит структурировано и аккуратно.
  4. Размер заголовков и подзаголовков. В каждой секции посадочной есть заголовок. Заголовки помогают отделить одну мысль от другой. Также они помогают структурировать страницу. Чтобы соблюсти структуру, выставляйте одинаковый размер для всех заголовков. Например, только 53рх или 62рх. Это правило относится и к подзаголовкам.
  5. Соблюдайте общий стиль. Цвет фона, размер заголовков, цветовая гамма картинок и кнопок, шрифты — в совокупности эти элементы должны смотреться гармонично.

Выберите шаблон

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

Шаблон удобно выбирать сразу при заказе услуги REG.Site. После заказа вы можете изменить шаблон, если посчитаете, что больше подходит другой.

В REG.Site есть десятки шаблонов на разные темы: портфолио, прачечная, автосервис, кулинария, клининг, юридическая фирма, спа-салон и другие.

как создать лендинг 2

Отредактируйте шаблон

По умолчанию каждый шаблон REG.Site содержит только одну страницу. Страница состоит из уже готовых разделов — секций. Чтобы сделать лендинг в соответствии с вашей структурой, удалите, добавьте или отредактируйте каждую секцию с помощью визуального редактора. В статье мы подробно рассказали, как создавать и редактировать секции в REG.Site.

как создать лендинг 3

Наполните шаблон дизайном и контентом

Внутри каждого раздела REG.Site есть строки и модули. Их можно редактировать и настраивать — как в конструкторе.

как создать лендинг 4

Десятки модулей и элементов (тени, отступы, рамки, градиент) помогут оформить дизайн и контент в соответствии с вашей задумкой. Как с ними работать мы показали в инструкции.

как создать лендинг 5

Также в админке можно настроить дополнительные плагины. С их помощью можно добавить на лендинг форму обратной связи, шорткод, дополнительные шрифты и многое другое. На REG.Site можно установить тысячи различных плагинов.

как создать лендинг 6 Как создать лендинг на Wordpress

SEO-оптимизируйте лендинг

При создании посадочной страницы важно уделить внимание привлекательности сайта не только для потенциальных покупателей, но и для поисковых систем. В статье Как настроить SEO-продвижение сайта, созданного в REG.Site мы рассказали об основах SEO-оптимизации и базовых SEO-настройках.

Заключение

Теперь вы знаете, как создать одностраничный сайт самостоятельно. Мы рассказали, из каких этапов состоит создание целевой страницы, какие правила стоит соблюдать на каждом из этапов, какие трудности могут возникнуть в процессе работы и как их решить. Это позволит вам сделать лендинг практически бесплатно, достаточно только заказать услугу REG.Site.

Была ли эта статья полезной?
Пользователи, считающие этот материал полезным: 2 из 2