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

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

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

Как сделать лендинг самому — подготовка контента

Перед тем как писать текст, важно сформулировать цель создания лендинга. Цель может звучать так:

• собрать базу для рассылки;
• протестировать идею;
• сделать сайт-визитку;
• создать страницу для события — акции, тренинга, вебинара;
• собрать заявки или продавать товар.

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

Работа над контентом при создании лендинга проходит в несколько этапов.

Этап 1. Сформулировать гипотезу

Если вы решили сделать лендинг, значит, у вас есть идея или представление о странице. Запишите их коротко по плану:

• Суть предложения (например, деревянные беседки для дачи).
• В чем его уникальность по сравнению с существующими решениями (беседка собирается как конструктор).
• Кому оно адресовано — целевая аудитория (всем, у кого есть дача или дом + владельцам загородных кафе).
• Какие проблемы решает или какие удовлетворяет потребности (можно быстро построить красивую беседку, не разводя стройку на даче).

Этап 2. Изучить конкурентов

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

Как это сделать? Посмотрите, что предлагает Google в ответ на запросы.

Сначала найдите популярные запросы с помощью планировщика ключевых слов Google:

Затем введите в строку поиска подходящие ключевые слова и изучите страницы конкурентов:

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

Сделайте таблицу со списком конкурентов. Запишите в столбцах: названия конкурентов, цены, суть предложения, условия доставки и гарантийного обслуживания. Первой строкой в таблице опишите ваше предложение. Так вы будете наглядно видеть свои преимущества и моменты, в которых вы проигрываете конкурентам.

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

Этап 3. Описать целевую аудиторию и выделить сегменты

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

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

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

Как изучить свою аудиторию и найти сегменты:

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

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

Если эти преимущества вы встретите в отзывах несколько раз, то они значимые. Их стоит упомянуть на лендинге.

Этап 4. Написать текст лендинга

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

В его структуре используются несколько стандартных блоков. Сейчас расскажем об основных из них. Шапка лендинга, УТП или оффер, подзаголовок и призыв к действию — блоки первого экрана. Его видит посетитель, попадая на сайт.

Таблица

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

Этап 5. Подобрать картинки, видео, фотографии

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

Фотографии товара можно попросить у поставщика или сделать самому.

Подобрать фотографии в высоком разрешении можно также на платных и бесплатных фотостоках.

Нельзя просто взять фотографию из поиска — это нарушение авторских прав. В лучшем случае автор фотографии напишет вам и попросит заменить или оплатить фото. А может и подать в суд. Бесплатно можно использовать фотографии с лицензией Creative Commons — мы писали об этом в указанной выше статье.

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

Как сделать лендинг — оформляем текст в конструкторе

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

Сделать лендинг бесплатно можно с помощью конструкторов:

• Wix;
• Weblium;
• Yola;
• Webnode.

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

Шаг 1. Зарегистрируйтесь в SendPulse

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

Шаг 2. Начните работу с конструктором сайтов

Чтобы перейти к конструктору, выберите вкладку «Сайты». Нажмите кнопку «Создать сайт».

Сервис предложит две опции. Если выбрать первый вариант, вы сможете при желании превратить лендинг в полноценный сайт.

Далее можно выбрать один из множества шаблонов для самых разных целей. Есть также опция создать сайт с нуля.

Если вы нашли подходящий шаблон, кликните на него и нажмите «Редактировать».

Откроется окно конструктора.

Шаг 3. Кастомизируйте шаблон

Блоки на лендинге и их содержимое можно изменять, передвигать, добавлять и удалять по своему усмотрению.

Чтобы изменить блок, наведите курсор на нужный элемент и кликните по нему либо нажмите значок редактирования.

Чтобы добавить новый блок или виджет, нажмите знак плюса.

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

Для перемещения блоков используйте кнопки со стрелками.

Чтобы переместить элемент, кликните на него, зажмите соответствующий значок и перетащите в нужную сторону.

На скринкасте показано, как работать с шаблонами сайтов в конструкторе SendPulse.

Добавьте форму оплаты и принимайте платежи прямо с лендинга. Разместите виджеты соцсетей и кнопки чат-ботов, чтобы пользователи могли связаться с вами по удобному каналу, а также форму подписки на email, SMS и Viber рассылки. При желании анимируйте элементы на странице.

Шаг 4. Сохраните и опубликуйте сайт

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

На странице сайта в личном кабинете выберите в действиях «Опубликовать». Здесь также можно снять сайт с публикации или вернуться к редактированию.

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

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

Если вы решили создать мини-лендинг, процесс еще проще. Нужно выбрать подходящий шаблон, добавить недостающие блоки путем перетаскивания и заменить контент.

Подробнее о работе с конструктором читайте в нашей базе знаний. Бесплатная версия позволяет опубликовать один сайт с некоторыми ограничениями — ознакомьтесь с тарифными планами.

Как увеличить конверсию лендинга

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

Второй способ — получить контактные данные посетителя и постепенно подвести его к покупке. Для этого используют рассылки, автоматические серии писем, push уведомления.

Email рассылки

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

Автоматические серии писем

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

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

Чтобы настроить авторассылки, нужно в личном кабинете перейти в раздел Automation 360 и создать цепочку, которая срабатывает по определенному триггеру:

Web push уведомления

Еще один способ повысить конверсию лендинга — настроить web push уведомления. Когда посетитель находится на странице, в браузере появляется предложение подписаться на уведомления:

Если человек нажимает «разрешить уведомления», он в будущем будет получать сообщения в браузере или на рабочем столе компьютера.

Web push уведомления помогают решить несколько задач:

• напомнить о скором окончании акции;
• напомнить о старте вебинара, на который зарегистрировался посетитель;
• анонсировать новинки;
• рассказать о новых публикациях в блоге.

Подробнее о возможностях push уведомлений для увеличения конверсии мы рассказывали в одной из прошлых статей.

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

Регистрируйтесь в SendPulse, чтобы повышать конверсию лендинга с помощью email, SMS и Viber рассылок и push уведомлений и превращать посетителей в покупателей. Используйте чат-боты для построения воронки продаж — они быстро ответят на вопросы клиентов в любое время суток, помогут оформить заказ и примут оплату, а при интеграции с GPT станут полноценными консультантами. Если же вы создаете курс на нашей платформе, лендинг с возможностью настройки будет сгенерирован автоматически.

Все инструменты SendPulse интегрируются друг с другом и с бесплатной CRM. Пользуйтесь и улучшайте показатели продаж!

Разработка лендинга – это важный этап для тех, кто собирается продвигать услуги или товары в интернете. С его помощью можно создать портфолио, запустить продажи или просто собрать заявки. Создать его может каждый – в этом нам помогают специальные конструкторы, в которых веб-дизайн сводится к простому перемещению блоков.

О том, из чего состоит разработка продающего лендинга и как его сделать своими руками за 30 минут, поговорим в сегодняшней статье.

Как сделать лендинг самому: подготовка контента

Прежде чем переходить к созданию лендинга, важно задать себе вопрос: «А зачем мне лендинг?». Ответом на него должна быть четко сформулированная цель. Например, она может выглядеть так:

• Презентация компании и услуг для привлечения новых клиентов.
• Получение заявок из интернета или продажа товаров.
• Реклама курсов, тренинга, вебинара.
• Тестирование гипотез, погружение в сферу веб-разработки.

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

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

Чтобы создать нечто подобное, важно проработать каждый этап, который включен в разработку сайта. Если сразу перейти к дизайну без каких-либо исследований и подготовок, то выйдет «ничего», а вы в итоге будете думать, что разработка сайтов – это не мое.

Давайте проработаем каждый этап и посмотрим, что в итоге у нас получится.

Этап 1: Заполняем бриф

Бриф – это документ, в котором заказчик отвечает на основные вопросы о компании, товаре или услуге, клиентах и так далее. Как правило, разработка любого сайта всегда начинается с заполнения брифа. Заполнение подобного документа позволит нам скомпоновать всю информацию в одном файле и лучше понять, на что делать упор в будущем сайте.

Вот стандартный бриф, заполненный одним из заказчиков:

Взять пустой бриф вы можете на Google Диске – ссылка приведет вас в нужное место. Если по каким-либо причинам доступ будет закрыт, то сообщите об этом в комментариях.

Постарайтесь заполнить каждый пункт подробно. Это неоспоримо поможет в разработке лендинга.

Этап 2: Анализируем конкурентов

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

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

Найти конкурентов вы можете через Google или Яндекс. Если вы давно работает в офлайн-бизнесе, то должны знать своих конкурентов – найдите их сайты и посмотрите, что они собой представляют.

Другой способ – найти конкурентов через ключевые слова. Их можно посмотреть на Яндекс.Wordstat либо через Планировщик ключевых слов от Google. Рассмотрим для примера сервис от Яндекса:

1. Переходим по ссылке и вводим необходимый запрос. Например, представим, что у нас компания, занимающаяся продажей ПВХ-окон в Москве – вводим релевантный запрос и жмем «Подобрать».
2. В результате получаем список ключевых слов. Не сказать, что он как-то расширил наши возможности, но этим можно пользоваться. 

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

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

Этап 3: Анализируем целевую аудиторию

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

• ЦА – это группа людей, которая с наибольшей вероятностью приобретет товар или услугу конкретной компании.
• Анализ ЦА – это ответ на вопрос «Кому мы продаем?». Если продавать все и всем сразу, то такие продажи не смогут приносить достойные плоды.

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

Как может выглядеть анализ:

Важно не просто узнать возраст, пол и географическое положение потенциального клиента, но и понять его боли и страхи.

Где же это все взять? Самый простой вариант – походить по различным форумам и маркетплейсам, где пользователи оставляют отзывы. Узнать уровень дохода вы также можете там. Например, если компьютерный стол был куплен за 20 000 рублей, то это говорит о том, что отзыв оставил покупатель как минимум со средним достатком.

И вот еще один пример:

Посмотрите на все эти столы и ответьте на вопрос: «Все эти 4 варианта будет искать одна и та же группа людей?». Очевидно, что нет – в этом и есть суть анализа целевой аудитории. Если его провести неправильно, то можно не только создать «плохой сайт», но и лишиться потенциальных клиентов.

Этап 4: Подбираем референсы

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

Референсы – это вспомогательные работы, к которым обращается веб-дизайнер. Они помогают определиться с цветовой темой, стилем и другими аспектами.

Вот сервисы, где можно посмотреть различные проекты:

• Behance
• Pinterest
• Awwwards
• Dribbble

Необязательно искать работы по своей тематике, вы можете посмотреть и другие проекты. Главное – найти интересные фишки и использовать их в своем проекте (но без плагиата).

Этап 5: Создание прототипа

Многие на этом этапе предпочитают просто расписывать текстовый контент, но я считаю, что это не совсем правильный метод. Проще создать прототип и спланировать весь контент.

Прототип, как правило, не включает в себя изображения, а содержит лишь правильное расположение блоков и текстовый контент:

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

Вот некоторые рекомендации, которые помогут вам со структурой:

• Шапка лендинга – в ней, как правило, размещается логотип и основное меню сайта, добавляется номер телефона и прикрепляется кнопка действия, например, «Заказать звонок».
• Офферная конструкция – то, что располагается на первом экране. С ее помощью необходимо описать всю суть бизнеса, допустим, «Разработка сайтов за 7 дней». В нее также входит дополнительное описание подобного типа – «Помогу вашему бизнесу увеличить продажи», «Оставьте заявку и получите скидку». Все это прописывается ниже основного слогана, с меньшим размером шрифта. Ниже помещается кнопка действия, которая чаще всего вытекает из описания – если вы предлагаете оставить заявку, то и кнопку желательно назвать так же.
• Далее идут различные блоки, и тут уже все зависит от сферы деятельности и целевой аудитории. Обычно после главного экрана описывается, кому предоставляется услуга.
• Следом идут особенности – почему клиенту стоит выбрать ваш продукт.
• О компании – расскажите, как вы появились и почему стали востребованы.
• Как это работает – отлично подойдет для предоставляемых услуг. Можно описать, как выполняется установка окон.
• Сколько стоит – здесь прописывается ценовая политика компании.
• Отзывы – блок может поднять экспертность.
• Контакты – укажите контактные данные, чтобы клиенты смогли с вами связаться.
• Футер – часто просто дублируется меню из первого экрана, а также прописывается ссылка на политику конфиденциальности и прочие данные.

Это основные блоки, которые чаще всего встречаются на лендингах. В вашем случае все может быть совсем иначе, но главное, чтобы оффер был на первом экране – это чуть ли не самое главное в лендинге.

Для разработки прототипа вы можете воспользоваться следующими программными средствами: Axure, Figma, Mockplus.

Важно полностью проработать прототип – вам же будет потом проще разработать весь сайт.

Собираем лендинг на конструкторе

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

• Craftum
• Lpgenerator
• uKit

В качестве примера возьмем Craftum – недорогой и очень функциональный конструктор. Работа в нем может выполняться как с помощью готовых шаблонов, так и через дизайн-блок, в который можно добавлять свои элементы и располагать их в свободном порядке. Огромное множество шаблонов позволит вам пропустить шаг с созданием прототипа и перейти непосредственно к наполнению сайта.

Сервис платный, но новым клиентам предоставляется бесплатный 10-дневный доступ ко всем функциям.

Первым делом зарегистрируемся:

1. Переходим на главную страницу сервиса и жмем на «Создать сайт бесплатно».
2. Вводим свои данные и жмем «Создать сайт».
3. В результате мы попадаем на главную страницу конструктора:

С главной страницы все и начинается – здесь мы можем выбрать подходящий шаблон либо воспользоваться пустой страницей. Если выбрать последнюю, то сайт будет разрабатываться с нуля. Собрать лендинг мы можем и на основе шаблона, но так будет крайне сложно подобрать правильное решение под созданный ранее прототип.

С другой стороны, Craftum предлагает сотни продающих шаблонов – если порыться в каталоге, то вы наверняка найдете идеальный вариант для вашего прототипа. Можно найти похожий шаблон и отредактировать его под свои нужды, благо функционал позволяет кастомизировать любые готовые блоки.

Переходим к созданию сайта:

1. Создаем пустую страницу – для это кликаем по кнопке «Выбрать шаблон», расположенной под первым блоком.
2. Мы попадаем в окно конструирования сайта. Пока что здесь пусто, так как мы ничего не добавили. Исправим это и создадим первый блок – для этого жмем «Выбрать блок».
3. Теперь мы попадаем в список блоков, с помощью которых можно предоставить ту или иную информацию. Так как у нас обучающая инструкция, давайте полностью углубимся в процесс создания сайта и воспользуемся функцией «Дизайн блок». Ее основная цель – избавиться от шаблонности. Использовав ее, мы сможем сконструировать блок своими руками. Все элементы будут размещены так, как мы захотим.
4. И вот мы попали в редактирование дизайн-блока. В нем мы создадим первый экран, включающий в себя офферную конструкцию, логотип, номер телефона и изображение. Для начала полностью очистим его – для этого выделяем все элементы и жмем на клавишу «DELETE». Также открываем меню слева и в разделе «Изображение» жмем на крестик.
5. Мы подготовили для себя пустой холст:
6. Начнем с офферной конструкции. Возьмем в качестве примера «Установка ПВХ окон в Москве и МО». Чтобы добавить надпись, нажимаем в верхнем левом углу на крестик и жмем «Текст». Перед нами слева выпадет меню, в котором можно отредактировать текст. Установим ему размер шрифта 50px с межстрочным интервалом 55. В качестве шрифта укажем «Rubik» и сделаем его жирным.
7. Аналогичным образом вставляем небольшое описание, а также добавляем кнопку. Она тоже может быть вызвана через плюсик. Дадим название кнопке – «Заказать установку». Эту кнопку можно направить и на другой сайт – для этого необходимо прописать URL в меню слева, через строку «Ссылка».
8. Также добавим в верхнюю часть блока номер телефона и логотип. После вставим картинку – для этого нажмем на плюсик и выберем «Изображение». Затем в соответствующем разделе добавим нужную фотографию.
9. Убрать сетку можно с помощью специальной кнопки, расположенной в верхнем правом углу. Сделав это, получаем следующий экран:
10. Теперь посмотрим, как наш сайт выглядит на мобильных устройствах – для этого в центре верхней части кликаем по последней иконке.
11. Если вас не устраивает расположение каких-то элементов в мобильной версии, то вы можете отредактировать их прямо в этом окне. Удобство редактора Craftum состоит в том, что вы можете отдельно настроить отображение элементов на десктопе и в мобильной версии. После редактирования закроем окно и нажмем на плюсик для добавления нового раздела.
12. Больше не будем затрагивать функцию «Дизайн блок», доработаем сайт на шаблонных вариантах. Например, нам нужно рассказать о каких-то качествах, отличающих компанию от конкурентов. Добавим для этого блок «Преимущества». Как видим, вариантов на выбор очень много!
13. В результате появится новый блок. Отредактировать его под себя не составит никакого труда – достаточно кликнуть по тексту и ввести новый. Изменить характеристики объектов можно через левое меню, которое вызывается кнопкой «Настроить».
14. Добавим разделы «Контакты» и «Футер» с помощью шаблонов.
15. Все шаблонные блоки уже адаптированы, поэтому настраивать контент для других устройств нам не потребуется. После того как разработка будет завершена, нажмем «Опубликовать» и дадим название проекту.
16. Готово! Сайт создан, теперь мы можем его открыть.

Поздравляю! Вы создали свой первый лендинг. Вышел он довольно простым, но это была лишь базовая инструкция для того, чтобы вы поняли, как на конструкторе собирается веб-сайт. Мы поработали как с дизайн-блоком, так и с шаблонами, коих в Craftum хватает с лихвой.

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

На этом все. Удачи вам и вашему бизнесу!

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

В любой промостранице есть обязательные блоки. Все построено на психологии потенциального клиента:

• Шапка — меню сайта. В лендингах обычно ставят «якоря» на блоки, указанные ниже. Кликнув по ним, пользователь переносится вниз по странице.
• Главный блок — суть вашего предложения для будущего покупателя.
• Преимущества/описание товара или услуги — подробности о продукте. Почему человек должен купить именно ваш продукт?
• Рекомендации/отзывы — элемент социального доказательства. Если о продукте хорошие отзывы, доверие к компании повышается.
• Формы захвата — блок, в котором вы собираете персональные данные. Имя пользователя, его телефон или email.
• Подвал — краткая информация о компании, возможно, еще одна кнопка «купить» или повторение меню.

Это общий скелет промостраницы. Для каждого продукта структура модифицируется, можно добавить другие блоки.

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

• почерпнуть интересный подход и трансформировать его для вашего продукта;
• понять, как делать точно не нужно.

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

Найдите на Behance дизайнеров, которые создают лендинги. Подпишитесь на коллекции, в которых пользователи выкладывают понравившиеся им прототипы. Например, арт–директор Wildberries Дмитрий Матвеев собирает промостраницы с необычным стилем — подборка постоянно обновляется.

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

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

Подготовьте бриф. Вам нужны ответы на три главных вопроса:

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

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

Обязательно учитывайте, что о вашем продукте потенциальный клиент может и не знать. Главный вопрос, на который вы должны ответить в блоке описания: зачем нужно это покупать?

Подключайте воображение. Например, вы делаете косметические маски. Подготовьте на странице блок под галерею фотографий и видео с людьми, которые пользуются ими. Возможно, блок «до/после»? Так вы объясните пользователю, что это за маски и зачем они нужны.

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

Да, обычно лендинг — это быстро и недорого. Но в любом правиле есть исключения. Например, компания S7 Airlines сделала необычную презентацию нового самолета — это интерактивная картинка гаража с Airbus A320neo. Дизайнер создал 3D-анимацию снятия покрывала с самолета, взлета и возможность прогулки по салону.

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

Старайтесь удивлять пользователя. Не обязательно использовать технологии, которые стоят тысячи долларов. Съемка 3D-фотографии, пусть без динамики, сейчас стоит не очень дорого (можно найти варианты от 600–700 рублей), но этот эффект заставит пользователей запомнить ваш лендинг.

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

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

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

Учитесь собирать лендинги для тестирования гипотез и продаж и создавать дизайн-решения для крупных проектов на курсе от Skillbox. Во время обучения потренируетесь на практических задачах и сделаете из них убедительное портфолио.

Создание простого одностраничного сайта помогает эффективно продавать товар и продвигать услуги. Расскажем, как это сделать.

Одностраничник (landing page) — это одиночная, длинная или короткая страница для продажи товаров, услуг, привлечению потенциальных клиентов. Такой сайт удобен большим и маленьким компаниям, а также фрилансерам.

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

Разработка лендинга на интернет-сервисах

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

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

Лучший сервис для создания сайта

Сервис Hipolink позволяет быстро разработать одностраничный проект с нуля, затратит это мало времени, не больше 30 минут. Конструктор полностью настраиваемый, предназначен для работы своими руками, пользоваться им просто. На нём вы сможете создать неограниченное количество одностраничных сайтов.

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

Примеры других инструментов:

У всех перечисленных сервисов есть плюсы, но есть и минусы

Заказать сайт «под ключ»

Заказ разработки одностраничного сайта «под ключ» экономит время и усилия, но раздувает бюджет. Можно заказать готовый landing page в веб-студии или у фрилансера.

Прочитайте отзывы о прошлых заказах, посмотрите примеры работ. Убедитесь в профессионализме мастеров. Определитесь с пожеланиями.

Заполните техническое задание, обсудите всё с персональным исполнителем, отправьте несколько ресурсов, дизайн и структура которых Вам нравится.

Оформление и структура

Какие блоки использовать?

Основная цель одностраничника — подтолкнуть посетителя сайта к покупке. Нужно вызвать интерес у потенциального заказчика и побудить к действию, без раскачки и предисловий.

Блок перехода по ссылке

Структура:

Используйте изображения высокого качества, на которые приятно смотреть.

Тело веб-страницы

Предоставьте клиенту возможность выбрать именно Вас. Докажите, почему стоит приобретать данные услуги. Добавьте:

Страница должна быть хорошо оформлена, с красивым и современным дизайном, используйте единый стиль.

Рекомендации по контенту

Универсальная пошаговая инструкция и советы

Шаг 1. Выберите сервис для создания/шаблон.

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

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

Шаг 2. Продумайте структуру.

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

Подходит для большинства ресурсов: шапка, описание оффера (предложения), специальные предложения, раскрытие преимуществ предложения, отзывы, карта.

Шаг 3. Зарегистрируйте домен или субдомен.

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

Шаг 4. Проведите рекламную кампанию.

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

Шаг 5. Оптимизация под поведение трафика.

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

Продвижение

Рассмотрим способы улучшения результатов раскрутки. Для продвижения одностраничника на лидирующие позиции в поисковиках нужно:

Контент, дизайн, реклама, аналитика, полезные ресурсы и примеры сайтов – постарались кратко раскрыть самые важные моменты.

В конце статьи доступна ссылка на PDF версию.

Введение

Вам подоидет эта инструкция, если планируете запустить тест новои услуги, продукта, направления или хотите проверить эффективность рекламных каналов. Материала хватит для запуска, и вы получите какое-то количество конверсии. Не относитесь к документу, как к инструкции по запуску полноценного лендинга. Для этого нужно глубокое погружение и раскрытие фактов, преимуществ и характеристик продукта или услуги.

Чтобы разработать лендинг, вам нужно составить структуру, наполнить блоки информациеи (написать тексты), составить прототип (схематично нарисовать, как и где будет распологаться информация), разработать дизаин, сверстать саит, установить аналитику.

Контент

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

Какая информация поможет создать доверие к компании:

1. Информация о компании:

2. Сертификаты и награды.

3. Отзывы.

4. Ответы на часто задаваемые вопросы.

5. Список клиентов и партнеров.

Эта информация раскроет продукт и предложение:

Мы рекомендуем создать и расположить блоки в такои последовательности:

Добавляите Формы захвата через 2-3 блока.

Стараитесь формулировать заголовки нетривиально, но не ради креатива, а чтобы заинтересовать клиента и за счет заголовка рассказать интересные факты. Например, не «Наши кеисы», а «Разработали 59 логотипов».

Немного подробнее по каждому блоку.

1. Первый экран.

Покажите продукт или услугу с помощью фото, видео или иллюстрации.

2. Задачи

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

3. Преимущества продукта

Формулируите преимущества исходя из характеристик конкурентных продуктов и потребностеи потребителя.

Пишите реальные и конкретные преимущества. «Качественныи продукт» – это не преимущество. Никто в здравом уме не скажет, что их продукт плохои. А исходя из этого преимущества, так оно и есть. Поэтому, когда пишите подобные формулировки, вы ставите свои продукт наравне с конкурентами, что вас совсем не выделяет.

4. Кейсы, ассортимент, результаты

Распишите кеисы, покажите ассортимент или расскажите о результатах, опираясь на ваши преимущества, УТП и потребность потребителя.

Помните про целостныи образ. К примеру, в результатах вы пишите, что сделали 10 вариантов логотипа, а в преимуществах пишите, что срок разработки занимает до 2 недель. Логичнее указать в первую очередь срок разработки, а потом упомянуть о количестве вариантов.

5. Призыв к действию

Сделаите релевантное для потребителя предложение и расскажите, что произоидет дальше. «Оставьте заявку» — ок, но можно лучше. «Оставьте заявку и мы посчитаем стоимость логотипа» — более конкретно и понятно.

Составьте форму захвата так, чтобы там была только нужная для вас информация. Не просите e-mail, если не будете отправлять письма.

Чем меньше полеи и чем они проще, тем выше конверсия в заявку.

Попробуите добавить кнопку «Написать в What’s App» (или Telegram) вместо обычнои формы или используите их вместе. Это может повысить конверсию саита.

6. Клиенты и партнеры

По возможности, размещаите не только логотипы компании, но и рассказываите, что для них сделали.

7. Как работает продукт, процесс, этапы, алгоритм

Постараитесь сделать это иллюстративно и понятно. Большие куски текста читать не будут. Но процесс работы интересует многих.

Банальное – оставили заявку, оплатили заказ, пришла посылка – лучше не писать, если это очевидно. Если не очевидно – делаите.

8. Цена, решения, тарифы

Опишите решения задач, о которых указывали в начале лендинга, или подробно и понятно распишите тарифы.

Есть исследование, как число тарифов влияетна конверсию. В конце документа будет ссылка, сможете подробно ознакомится и узнаете о фишках в ценообразовании. Если кратко – лучше делать три варианта и выделять среднии столбец.

9. Сертификаты и награды

Делаите подписи, раскрываите, что означает тот или нои сертификат, за что получили награды.

10. Отзывы

Они до сих пор работают. Размещаите реальные отзывы без редактуры. Дополните текст фотографиеи автора, разместите ссылку на саит и сделаите так, чтобы ссылка открывалась в новои вкладке, а не в тои же. Используите максимум возможностеи, чтобы доказать, что отзыв настоящии.

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

11. FAQ или вопросы и ответы

Раскроите вопросы, которые могут возникнуть. Если есть статистика о том, какие вопросы часто задают при общении с менеджером, используите ее. Исходите из позиции потребителя и постараитесь понять, что он еще бы хотел узнать.

Когда начнете получать заявки и общаться с клиентам, дополните этот блок.

12. Форма захвата

Часто, после того, как человек пролистал до конца лендинга, он возвращается наверх, чтобы посмотреть еще раз важные для него блоки. Но вполне реальны ситуации, когда все понятно с первого раза и он готов оставить заявку. Поэтому сделаите релевантное и возможно даже общее предложение. К примеру, «Оставьте заявку, чтобы обсудить задачу».

Добавьте фотографию менеджера сбоку, чтобы прибавить доверия к компании. Фотографии людеи делают это лучше всего.

13. Футер

Это подвал саита. Продублируите сюда логотип и дескриптор. Добавьте реквизиты юридического лица или ИП, чтобы рекламные системы не заблокировали рекламу.

Не добавляите ссылки на соц сети. Если ведете рекламныи трафик на лендинг, последнее, что вам нужно — это чтобы человек ушел с лендинга и пропал. А так и произоидет.

Таким образом, мы можем схематично представить лендинг в таком виде:

Дизайн

Задача дизаина — прибавить удобства и функциональности.

Если можете — закажите фотосессию, или используите фотографии в высоком разрешении, с правильным светом, акцентами, горизонтом и т.д.

Не используите стандартные картинки и типичные иллюстрации. Вы будете выглядеть как тысячи других саитов и испортите впечатление. Если нет возможности сделать фотосессию, заказать 3d или иллюстрации,

то подберите что-то уникальное. Вам придется постараться, но оно того стоит.

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

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

Инфографика — еще один инструмент дизаина и донесения информации. Используите ее, чтобы рассказать о цифрах и заинтересовать потребителя.

Делаите графические акценты на нужнои информации. Не делаите акцентов (палочки, кружочки, что угодно), ради того, чтобы были. У каждого элемента есть функция. Если нет — элемент можно удалить.

Используите максимум 2 вида шрифтов. Один для заголовков и цитат, второи для основного текста.

Используите одинаковыи размер шрифтов для информации. У заголовков – один, у подзаголовков – второи, у основного текста – третии, у кнопок – четвертыи.

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

Используите изображения в формате JPEG или JPEG2000, а не в PNG. Так лендинг будет загружаться быстрее.

Текст должен хорошо читаться. Проверьте, соблюдается ли это правило везде.

Уделите внимание мобильнои версии саита. Проверьте, насколько еи удобно пользоваться.

Аналитика

Это не последняя версия вашего лендинга.

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

Изучаите сеансы пользователеи в вебвизоре, анализируите карту скроллинга и кликов, оцениваите качество трафика с помощью ютм меток и промежуточных конверсии.

Обращаите внимание на процент отказов. Он показывает, какое количество посетителеи пробыли на саите менее 15 секунд. Это поможет оптимизировать рекламу и оценить ее релевантность аудитории.

Это общие советы, детальные инструкции посмотрите в интернете.

Таргетированная реклама

Мы не рекомендуем настраивать рекламу самостоятельно, если вы этого не делали раньше. С большои вероятностью вы сольете рекламныи бюджет и разочаруетесь в эффективности рекламного канала.

Чтобы избежать основных ошибок, мы составили чек- лист по запуску таргетированнои рекламы.

1. Заполнить бриф.

Расскажите подрядчику, чем занимается компания, какие товары и услуги предлагаете, какие у вас конкурентные преимущества, кто целевая аудитория.

2. Предоставить доступ к рекламному аккаунту на Facebook.Если нет рекламного аккаунта, его нужно будет создать.

3. Добавить платежную информацию в рекламном аккаунте Facebook.

4. Предоставить доступ к странице компании на Facebook.

5. Предоставить контакты клиентскои базы для ретаргетинга.Работа по существующеи базе, а также Look-alike аудиториям, может повысить эффективность рекламы, поэтому не пренебрегаите этим этапом.

6. Создать интеграцию с CRM для формата Генерация лидов.Если будете работать с форматом Facebook Lead Ads, то для оперативнои реакции на заявки, нужно создать интеграцию.

7. Предоставить доступ к системам аналитики – Яндекс.Метрика и Google Analytics, с настроенными целями.

8. Установить на саит Facebook Pixel.

Ваша задача установить код пикселя на саит, а отслеживание целевых событии, как правило, подрядчик настраивает самостоятельно.

9. Согласовать изображения и тексты для рекламных кампании.Проверьте, есть ли орфографические и грамматические ошибки, все ли в порядке с изображениями и УТП.

10. Утвердить составленные сегменты целевои аудитории.

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

11. Согласовать рекламныи бюджет.

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

Также, вы можете связаться с нами, мы с удовольствием разработаем стратегию и запустим рекламу – deepsight.ru.

Полезные ресурсы

Gopractice — материал о том, как мы воспринимаем цены.

Tilda — простои, понятныи и удобныи конструктор саитов.

Главред — здесь можете проверить тексты на чистоту и читаемость. А также купить книгу «Пиши, сокращаи» (дико рекомендуем). Еще там есть биржа, на которои вы наидете редактора, корректора или копираитера.

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

Unsplash — качественные фотографии в бесплатном доступе.

Iconoteka — бесплатные минималистичные иконки. Undraw — много бесплатных иллюстрации. Можете

Google Fonts — конструкторы саитов поддерживают шрифты из Google Fonts. Бесплатно используите красивые и качественные шрифты.

Google Speed Page — проверяите саит на скорость загрузки. Сервис показывает способы оптимизации.

UI8 – здесь продаются недорогие и отличные иллюстрации.

Когда вам необходим лендинг пейдж?

Когда основные отличия понятны, давайте выясним в каком именно случае вам нужен именно Landing page, а не сайт.

Мы выделяем 10 задач, которые лучше всего решает именно Landing page:

1. Тестирование нового продукта, когда еще нет понимания “выстрелит” или “не выстрелит», то есть  Landing page позволит понять, как ваш продукт будет воспринят аудиторией;
2. Сегментация целевой аудитории. Чем персонализированнее будет ваше предложение, тем выше будет у него отклик.Поэтому будет лучше если вы разделите ваших потенциальных клиентов на группы по разным параметрам, например: по возрасту, полу, географии и другим факторам, которые могут повлиять на покупку, и под каждую из этих групп сделаете отдельный лендинг, на котором покажете преимущества продукта, актуальные для конкретного сегмента аудитории.
3. Акцент на определенном товаре. Вы крупная компания и у вас есть услуга/продукт, которую хотите выделить отдельно (вынести на отдельный сайт с отдельным потоком клиентов);
4. Быстрый старт бизнеса в онлайне. Вы только начинаете свое дело, нужно быстро запуститься и получить заявки уже «завтра»;
5. Сбор контактов аудитории. Вы компания, которой нужен сайт как визитная карточка компании с дополнительной функцией «захват контакта»;
6. Формирование первичного интереса к бренду или продукту. Вы хотите сайт, который вызывает любопытство, интригует и «заставляет» клиента оставить свои контактные данные, чтобы знать, что будет дальше.  
7. Разовая маркетинговая активность. Это может быть акция (ограниченная по сроку) или реализация остатков партии товара;
8. Событие (концерт, семинар);
9. Сбор пожертвований. Например на сайте-визитке благотворительного фонда можно разместить краткую информацию о специфике работы фонда и формы приема материальной помощи;
10. Публикация контактных данных и/или реквизитов компании в интернете. По требованию законодательства, для заполнения поля «адрес сайта» в профилях соц сетей или в других сервисах и т.п. 

Пример оформления лендинг пейдж

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

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

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

Как правило, создание лендинга «с нуля» необходимо крупным компаниям и брендам, которым важна уникальность и эксклюзивность. Над созданием такого сайта будет трудиться целая команда специалистов, которая сначала проведет подробный анализ рынка, конкурентов, аудитории и только после этого начнется разработка прототипа сайта, заточенного под бизнес-процессы компании. Все это потребует длительного времени и больших затрат.

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

Плюсы-минусы разработки лендинга на конструкторе и заказа индивидуального решения

Какую информацию размещать на лендинг пейдж

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

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

1. Цель посещения данной страницы?
2. Цель покупки?
3. Ключевые факторы принятия решения?
4. Дополнительные факторы принятия решения?
5. Какие могут возникнуть возражения?

Ответив на эти вопросы, вы сформируете мотивы вашей целевой аудитории и поймете что ей движет и на какие «боли» нужно давить, чтобы подтолкнуть их к покупке. Это уже 50% успеха при создании лендинга. Осталось его собрать. 

Структура «продающего» лендинг пейдж

1. Шапка сайта

Это самая верхняя часть страницы. В ней размещается логотип компании/бренда и контактные данные — обязательно телефон для связи, дополнительно можно указать режим работы, email, ссылки на социальные сети.

Пример шапки сайта лендинга

2. Навигационное меню

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

Пример оформления навигационного меню

3. Блок уникального торгового предложения (УТП)

Первый экран (без прокрутки страницы) должен мгновенно отвечать пользователю на вопросы — о чем этот сайт, какая услуга/товар предлагается покупателю, в чем ее уникальность, для чего/кого она подходит, какие проблемы/вопросы она может решить?

Как правило, для этого используется блок «слайдер» или большой баннер. На нем размещают изображение товара/услуги, визуализируя его предназначение, и в 1-2 предложениях описывают уникальность этого товара или услуги. Также на баннере может присутствовать таймер, который будет показывать, на какой временной период действует данное предложение для покупателя. И, конечно же, кнопка, призывающая совершить целевое действие «купить товар», «заказать услугу».

Пример оформления УТП

4. Блок преимуществ продукта

Далее нужно показать реальную ценность нашего предложения. Раскрываем все преимущества данного продукта/услуги. 

Пример оформления преимуществ

5. Блок с ценами

Здесь мы показываем варианты товара или тарифы на услугу с ценами и кнопкой действия («купить», «заказать», «оставить заявку» и т.п.).

Пример оформления карточек товара

6. Блок «Как купить»

Отвечаем на вопрос «как купить товар», «как заказать услугу». Используем блок с «шагами» или текстом и описываем в нем условия покупки, доставки товара или пошаговую схему предоставления услуги.

Пример оформления информации о доставке, оплате, гарантиях

7. Блок «Видео» (если есть материал)

Блок, в котором будет показан принцип действия или использования товара или услуги.

Пример видео «О продукте»

8. Блок «О компании» 

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

Пример оформления блока «О нас»

Дополнительным плюсом в «копилку доверия»  пользователя к компании будут блоки:

• «Отзывы»
• «Видеоотзывы»
• «Фото наших покупателей»
• «Благодарственные письма от клиентов».

Пример оформления отзывов

9. Форма обратной связи

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

Пример оформления формы обратной связи

10. Подвал сайта

Здесь вы можете еще раз указать ваши контактные данные для связи.

Пример оформления подвала сайта 

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

Рассмотрим создание лендинга на примере бесплатного конструктора сайтов Битрикс. Мы сами им пользуемся и считаем его одним из наиболее оптимальных решений для создания одностраничных сайтов.

1. Переходим по

ссылке

 и нажимаем «Создать сайт бесплатно».

Кнопка «Создать сайт» находится здесь

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

Регистрация в Битрикс24

3. После этого автоматически создастся портал Битрикс 24. О его возможностях поговорим чуть позже, сейчас нас интересует создание сайта. В созданном портале переходим во вкладку «Сайты» и в ней на большой прямоугольный блок «+ новый сайт».

Вкладка «Сайты в Битрикс24»

После чего перед нами появится набор готовых бесплатных шаблонов лендинга под разные сферы бизнеса. Можно выбрать наиболее похожий на сферу деятельности или выбрать вариант «Пустой шаблон».

Шаблоны лендингов

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

Конструктор предусматривает несколько вариаций цветовых решений сайта, размещение неограниченного количества блоков на странице, возможность перемещения их в любой последовательности и настройку самих блоков «под себя». Разобраться с работой конструктора совсем несложно, все интуитивно понятно.

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

Сайт готов.

Теперь немного расскажу о других преимуществах конструктора сайта в Битриксе.

1. На сайте уже есть онлайн-чат, обратный звонок, форма заявки. Не нужно устанавливать дополнительный сервис. Клиенты смогут написать с сайта в онлайн-чат, в Facebook*, ВКонтакте, Viber — общаться с вами там, где им удобно. 
2. Не нужен хостинг. А это значит, что вы избавлены от дополнительных денежных затрат.
3. При отправке заявки с сайта все контакты клиентов сразу заносятся в CRM.  В сможете дальше вести сделки и взаимодействовать с вашими клиентами в рамках единой системы.

Вообще «плюшек» бесплатной версии Битрикс24 гораздо больше, но мы перечислили те, которые работают в «связке» с сайтом и позволят вам эффективно обрабатывать заявки клиентов, повышать продажи и развивать свой бизнес.

О чем важно помнить после прочтения статьи

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

Удачи вам и вашему бизнесу!