Здравствуйте, друзья. В этой статье я дам вам пошаговую инструкцию, как сделать лендинг самому — бесплатно и профессионально. То есть ваш лендинг будет выглядеть действительно красиво, не хуже, чем у конкурентов. Перед началом работы можете, кстати, от руки прописать .
Здесь мы рассмотрим вариант бесплатного создания лендинга из html шаблона. Кстати, ваш лендинг будет на 100% адаптивным подо все мобильные устройства. А это сегодня важно.
Итак, вот пошаговый план самостоятельного создания лендинга:
И прежде всего давайте скачаем основу для нашего будущего лендинга — готовый профессиональный html шаблон.
#1 — Скачиваем бесплатный html шаблон лендинга
Вообще, лендинги — это не такая уж и таинственная штука. Это просто отдельная страница в интернете, на которой вся информация «заточена» под конкретное целевое действие посетителя. В отличие от обычных сайтов, у одностраничников, как правило, нет меню и ссылок на другие разделы сайта (хотя бывают и исключения).
То есть все, что вам надо сделать — это найти подходящий html шаблон, и отредактировать его под свои нужды. Что делать с этой страницей потом, мы разберемся ниже. А сейчас — скачайте например . С ним мы и будем работать.
#2 — Заменяем картинку на главном экране
Когда скачаете — откройте папку «blue» и внутри вы найдете несколько файлов с расширением html. Кликните два раза на тот, который называется index.html.
В вашем браузере откроется шаблон, как он выглядит сейчас. Согласитесь, неплохо?
Теперь нам надо его отредактировать. И удобнее всего это делать с помощью программы Notepad++ . Скачайте её и установите себе на компьютер.
Первое, что мы сделаем — это поставим нормальную картинку на главный экран нашего лендинга. Вам надо найти большое изображение, которое подходило бы под вашу тематику. Для этого зайдите, например, на Яндекс-Картинки, и введите свой запрос.
Укажите размер файла «Большой». Пока для тренировки можете скачать . Мы как будто делаем лендинг для профессиональных юридических услуг.
Теперь копируйте это изображение в папку «images». Поменяйте его название на «banner.jpg». То изображение, которое уже называется «banner.jpg» в этой папке, переименуйте во что-нибудь другое.
Обновите страницу с лендингом в вашем браузере. У вас теперь должно выглядеть, как на скриншоте ниже.
Если выглядит что-то не так, то проверьте, правильно ли вы написали называние изображения, и точно ли вы скопировали картинку туда, куда надо.
Если все ОК, то переходим к редактированию текста.
#3 — Редактируем текст на главном экране
Кликайте правой кнопкой мыши по файлу «index.html» и выбирайте «Открыть с помощью — Notepad++».
Перед вами откроется исходный код нашего шаблона, во всей его красе. Если вы раньше не имели дела с html, то вас этот вид может немного напугать — много циферок, буковок и непонятных значков. Но ничего страшного тут на самом деле нет. Нам надо просто заменять текст, который написан черным цветом.
И давайте сразу отредактируем главный экран нашего лендинга. Он самый важный, и конверсия в заказы будет на 80% зависеть именно от него.
Сначала поменяем заголовок. Вместо «Alpha» напишем что-нибудь по нашей теме. Напоминаю, что тут мы продаем юридические услуги. Значит можно сформулировать это примерно так: «Срочная подготовка и сдача налоговой декларации для вашего бизнеса». Вставляем этот текст вот сюда, между тегами
:После этого сохраняем документ, и обновляем лендинг в браузере. Получаем следующее:
Получилось не очень симпатично, потому что заголовок большой, и растянулся на весь экран. Попробуйте после слова «налоговой» вставить тег
. Он сработает как разрыв в предложении, и часть текста перенесется на новую строку. Мне кажется, что так получится лучше.
Далее меняем подзаголовок. Чтобы посетитель сразу получил тот минимум информации, который необходим для заказа — прописываем наши конкретные предложения. Например: «Подготовка и сдача отчетности за 4 рабочих дня. Отчет УСН — от 5400р. ЕНВД без сотрудников — от 2100р.» Вставляем этот текст вот сюда:
Теперь меняем текст кнопок таким же образом. Пишем на белой «Заказать», на прозрачной — «Подробнее».
В итоге у нас получается вот такой главный экран лендинга:
#4 — Затемняем фоновую картинку
Все вроде бы неплохо, но мне, например, кажется, что фон у нас слишком светлый, и белые буквы на нем теряются. Предлагаю наложить более темный фильтр на картинку. Для этого переходим в папку «assets -> css ->images» и меняем названия у двух файлов, которые там расположены.
Более светлый называем, например «overlay2.png», а более темный — просто «overlay».
После этого опять сохраняем наш html шаблон и обновляем страницу в браузере. На мой взгляд, так выглядит уже намного лучше:
#5 — Заменяем форму подписки
Единственное, с чем у вас могут возникнуть сложности — это с формой подпиской в самом низу лендинга. Это надо регистрироваться в каком-нибудь сервисе рассылок, генерировать форму, вставлять её в лендинг и прочее.
Предлагаю решить эту проблему просто — вместо формы подписки укажите ваш телефон. Так вы получите больше конверсий/заказов.
То есть просто удаляйте всю форму и пишите в заголовке ваш номер телефона:
Не забудьте скачать мою книгу . Там я показываю вам самый быстрый путь с нуля до первого миллиона в интернете (выжимка из личного опыта за 10 лет =)
Когда лендинг, в который вложено немало ресурсов, не приносит заявок, это как минимум обидно. Чтобы предупредить такую ситуацию в условиях ограниченного бюджета Вячеслав Сергеев, автор проекта «Школа лендингов» представляет вашему вниманию пошаговую инструкцию по созданию лендингов.
Если предприниматель задался вопросом «как сделать лендинг самому», то он обычно открывает конструктор и набрасывает примерный макет, используя блоки конструктора. В том, что получилось, нет никакой структуры, никакого копирайтинга. И значит, нет никакой конверсии. А тратиться на агентства и студии не хочется.
Но я вас «обрадую»: большинство студий делают точно так же. Только не на конструкторе, а вкладываются в дизайн, вёрстку, решают задачу эстетично, функционально и качественно. Конверсия будет выше, но незначительно. Тогда какой смысл?
Одна из важнейших основ лендинга - качество контента. В чём суть? Вы хорошо знаете свой продукт, гораздо лучше любого агентства, которое не будет заморачиваться должным образом. (Конечно, есть исключения.)
Сегодня я хочу предложить вам чёткую пошаговую инструкцию, как сделать качественный копирайтинг лендинга , дающий в результате высокую конверсию.
Шаг 1. Исследуйте целевую аудиторию
Кто приходит покупать ваш продукт? Типичные общие характеристики покупателя: люди от 18 до 50, которые живут в России. Но что это за люди? Например, вы продаёте картины. Кто обычно покупает картины? Женщины - домой, рестораторы - в свои заведения, бизнесмены - в офис. И вот уже вырисовываются некие характеры представителей целевой аудитории.
Пропишите каждый портрет в подробностях, по одному на лист.
Предлагаю несколько вопросов, которые помогут составить эти описания.
- Где живёт типичный представитель вашей ЦА из каждого сегмента? Какого он возраста, пола, есть ли у него супруг, дети?
- Этот человек ищет ваш продукт как что? Что он хочет найти?
Помните об одной важной маркетинговой формулировке: люди покупают не дрель, они покупают дырку в стене.
У каждого представителя ЦА ваш продукт может вызывать разные эмоции. Рассмотрим те же картины. Кто-то хочет украсить свой дом и ищет способ, как это сделать. Эта важная информационная деталь потом пригодится в создании сильного торгового предложения, которое и приведёт к высокой конверсии.
А если взять другую сферу? Люди не ищут юристов для физических лиц, они ищут способы списания долгов.
Таким образом, люди не ищут конкретный продукт (портреты, живых бабочек, печать на кружках), они ищут эмоцию, которую можно получить от продукта, ценность, которую он им несёт.
- Какова цель покупки? Зачем это клиенту? Что подтолкнуло его к покупке?
- Чего он боится при покупке этого продукта? Какие могут быть возражения? Почему он может возразить?
Самое банальное возражение - «Почему так дорого?». Найдите ещё возражения для своего продукта.
- К каким конкурентам он может пойти?
- Кто будет влиять на решение о покупке?
Все эти вопросы помогают найти боли клиента, понять, чего он боится.
Это сердцевина хорошего лендинга, это боль человека. Это дырка в стене, а не дрель.
Шаг 2. Сформируйте преимущества
У клиента есть проблема - вы предлагаете решение. Есть возражение на ваше решение - закрываете сразу, отвечаете на вопросы, объясняете.
На каждое его предложение, на каждое его возражение, на каждое его желание расписывайте, что может предложить ваш продукт. Как вы можете закрыть эту потребность? Так образуется список преимуществ. На основе этого списка создайте уникальное торговое предложение для каждого портрета ЦА. Преимущества могут повторяться. Выпишите ключевые. Это будет костяк вашего уникального торгового предложения.
Шаг 3. Сформируйте оффер
Оффер - это краткая формулировка преимуществ того, чем вы занимаетесь, в понятной клиенту форме. Оффер должен чётко ответить на вопрос, что вы продаёте. Почему именно вы это делаете? Почему именно вы лучше закрываете потребности клиента? Зачем ему вообще нужен ваш продукт?
Что должен включать в себя оффер?
- Название продукта
Если человек ищет дрель, вы говорите, что у вас есть такая-то дрель.
- Ключевые преимущества
Опишите главную боль и преимущества вашего продукта перед другими, закрывающие эту боль. Чем хороша эта дрель? Почему она лучше других?
Рассмотрим GPS-часы для детей. Представитель нашей ЦА - мама. У мамы есть боль: она боится, что с ребёнком может что-то случиться, он может потеряться.
Используем эти боли и говорим: «Если вы боитесь потерять своего ребёнка, наденьте ему на руку GPS-часы, которые в любой момент укажут его местоположение». В этой части оффера мы давим на боль и предлагаем продукт.
Можно описать эту боль по-другому. Например, так: «По статистике, каждый день пропадает столько-то детей. Если вы не хотите, чтобы ваш ребёнок попал в этот список, наденьте на него GPS-часы».
Можно описать боль по-разному, надавить на неё, вскрыть проблему и предложить продукт в качестве решения. В 80 % ниш можно найти такую боль.
Если вы продаёте цветы, у вашей ЦА будет как минимум два портрета: тех, кто захочет цветов, и тех, кто покупает цветы в подарок. Это два разных УТП. Первым важно знать, как ухаживать за цветами, вторым - чтобы было, может, подешевле.
Если вы хотите от лендинга конверсии, расписывайте продукт через боль.
Оффер состоит из проблемы и предложенного решения. Из списка преимуществ выпишите ключевые для каждого портрета ЦА. Их можно разделить на два типа: те, которые вы вытянули из боли, и те, которые изначально есть у продукта.
Вернёмся к картинам. У них как у продукта есть чёткие продуктовые преимущества: качество холста, красок, техника выполнения. И есть преимущества, сформированные из болей: лёгкий способ украсить квартиру, удивить девушку и так далее.
Оффер, соединённый с преимуществами продукта, рождает уникальное торговое предложение.
Ориентируйтесь на то, какую пользу продукт принесёт клиенту. Это называется ВЫ-ориентированность.
- Цифры и факты
Никаких «качественно и недорого»! Напишите, сколько стоит продукт, за какое время вы его изготовите или кто производитель, какая на него гарантия.
- Сегментация
Укажите узкую географию, если вы работаете только в Иркутске или только в Сочи. Или, наоборот, скажите о том, что работаете со всем миром.
Шаг 4. Целевое действие
Бывает так, что оффер расписан хорошо, пользователь читает, соглашается с тем, что продукт классный и закрывает страницу. Но оффер не будет работать без призыва к действию. А целевое действие не будет работать без оффера.
Не требуйте от пользователя заказать прямо сейчас, дайте ему что-то лёгкое, ценное, что принесёт ему пользу. Запрашивайте минимум данных. В 90 % случаев достаточно попросить только телефон или электронную почту, не нужно даже спрашивать имя. Это всего одно поле, а значит - одно действие. Для удобства клиента в поле, куда нужно вписать телефонный номер, добавьте маску телефона и автоматический подгон цифр по шаблону. Это задача для программиста.
Сформируйте полезность, которую пользователь получит сразу же, совершив это действие: это может быть подробное коммерческое предложение, бесплатная консультация, макет и так далее.
Шаг 5. Создайте прототип лендинга
Я не советую сразу идти в конструктор. Возьмите альбомный лист и схематично изобразите, как вы видите будущий лендинг.
Какие элементы будет включать в себя лендинг и где они будут располагаться? В какой последовательности? Как между собой будут переключаться эти элементы, чтобы пользователь не уходил со страницы и в результате пришёл к целевому действию?
Старайтесь ставить формы, а не кнопки. Результаты АB-теста говорят, что формы дают более высокую конверсию, чем кнопки. То есть, если вы возьмете кнопку, на которой откроется форма, то это будет конвертировать посетителей в покупателей хуже, чем если вы сразу поставите на сайте форму, которую можно заполнить и отправить.
Первый экран в лендинге самый важный. На нём укажите, чем вы занимаетесь, и пропишете ключевое преимущество. Сделайте фотографию своего продукта и распишите результаты его действия, если это действительно имеет смысл.
Обязательно поместите форму на первом экране. Иногда пользователь совершает лёгкое импульсивное действие, к тому же на первом экране клиенты сидят дольше всего, а иногда даже не двигаются дальше.
Сделайте цвет кнопки целевого действия уникальным. Мне нравится формулировка «кнопка формы лендинга должна быть как прыщ на носу подростка». Она должна быть видна отовсюду, иметь уникальный цвет, быть самым ярким и самым заметным элементом на лендинге.
На кнопке напишите, что именно произойдёт после завершения целевого действия . Например, «Получить коммерческое предложение», «Заказать звонок», «Получить бесплатную консультацию».
Ниже под кнопкой советую оставить такие ремарки: «Это вас ни к чему не обязывает», «Мы не спамим», «Мы не передаём данные третьим лицам» и так далее.
Фон лучше делать цветным с белыми полями.
Итак, вы придумали макет первого экрана, на нём есть заголовок, преимущества, основная картинка, форма и меню. Далее структура может варьироваться.
- Основные блоки лендинга
Предлагаю следующее наполнение.
Основная ценность
Честно опишите ценность для клиента своего продукта. Я пишу свои тексты от души, в них чётко прописаны боли клиентов. Когда я делал лендинг для корпоратива, я честно поставил фото танцующих на столе людей и написал, что пьянки в кафе уже всем надоели. Это попадало в боль, это всем было понятно. Клиенту должно быть приятно читать тексты, конструкции должны быть короткими, без лишних союзов, знаков препинания, не нужно длинных предложений.
Дополнительные преимущества
Преимущества недостаточно разместить на первом экране. Могут быть дополнительные, которые требуют большего описания и подробного объяснения. Но не переборщите: тридцать экранов лендингу тоже ни к чему.
В заголовках с преимуществами максимально ёмко пропишите ключевую мысль, добавьте картинки или иконки - но только тогда, когда они действительно нужны и будут нести смысл.
Социальные доказательства и портфолио
Расскажите о производстве продукта, покажите свой офис. Добавьте примеры работ, расскажите про себя, если вы основной производитель. Добавьте факты, цифры, картинки. Но также соблюдайте меру.
Social proof и сразу - форма для целевого действия
Создание landing page упрощает путь человека к цели и одновременно приносит прибыль компании, продающей нужный пользователю товар или оказывающей необходимую услугу. Так происходит, потому что одностраничник воздействует на инстинктивном уровне, мотивируя человека позвонить, купить, кликнуть. Посадочную страницу можно разработать самостоятельно, сэкономив при этом время и деньги. Потому владельцы бизнеса задаются вопросом: как сделать лендинг пейдж?
Имеется четыре пути создания landing page:
- Воспользоваться бесплатным шаблоном и генератором. Вариант для компаний с небольшим бюджетом, где работают сотрудники, которым знаком дизайн и маркетинг.
- Обратиться к профессионалам: текст напишет копирайтер, дизайн страницы разработает дизайнер, интеграцию сделает программист, работу контролирует маркетолог.
- Аутсорсинг агентства.
- Для создания лэндинга взять на работу в компанию специалистов.
Landing page рассматривается с трёх точек зрения:
- Техническая сторона. Одностраничник включает в себя такие же составляющие, что и обыкновенная страница (html, видео, текст, изображения).
- Маркетинговый момент. Продающая страница – эффективный веб-ресурс лидогенерации.
- Точка зрения посетителя. Это лэндинг, на который человек попал по ссылке с другой страницы.
Чтобы разработать посадочную страницу правильно самому надо придерживаться правил.
Заголовок
Часто заголовок называется оффер, так как он включает предложение, адресованное потенциальному клиенту. От заголовка зависит первое впечатление от страницы, потому ему следует уделить особое внимание. Второго шанса произвести первое впечатление на посетителя не будет.
Если нужно пояснить заголовок или указать преимущества – используют подзаголовок.
Один лэндинг преследует только одну цель
Это важный момент, так как landing page доносит до посетителей только одну цель. В противном случае он не эффективен.
Выгодность предложения для потребителя
Выделенные выгоды заинтересуют посетителя. Предложение покажется ему более заманчивым. Подобный приём призван убедить заказать услугу компании и начать сотрудничество. Выгодность предложения должна преподноситься просто и на доступном языке.
Персонализация
Необходимо продемонстрировать посетителю, что именно он важен. Для этого надо писать «Вы» или использовать другие способы персонализации.
Верная структура лэндинга
Сведения нужно структурировать. Пришедший на посадочную страницу человек не заинтересуется длинными списками, необходимо представить чёткий и доступный текст, который посетитель легко воспримет.
Нельзя перенасыщать дизайн landing page графикой или текстом: между ними должен быть оптимальный баланс.
Социальные доказательства
Продающая страница обязательно должна включать отзывы клиентов, сертификаты. Оптимальные вариант – если их будет несколько. Социальные доказательства укрепляют репутацию компании и увеличивают лимит доверия к ней.
Призыв к действию
Правильно сделанный landing page включает СТА или мотивирует к действию. Подобный призыв должен быть в хедере и в конце лэндинга. Иногда размещается с лид-формой.
Текст СТА-кнопки должен звучать так, как будто посетитель лэндинга произносит его в голове или озвучивать пожелание пользователя.
Лид-формы
Самостоятельно разработанный landing page содержит лид-форму. Она делается простой и не вызывающей вопросов, так как важно сотрудничество с потенциальным клиентом или его контакты.
Счётчики
Незаменимая составляющая лэндинга – счётчик, который привносит срочность и побуждает сделать выбор быстро.
Дизайн landing page рассказывает о предоставляемой услуге. Лэндинг ориентируется на целевую аудиторию.
Программы, с помощью которых делаются одностраничники
Для тех, кого интересует, как создать лендинг пейдж с нуля существуют шесть программ, позволяющих это сделать самостоятельно и нет необходимости приходить обучение.
- Adobe Muse. Используется чаще всего. Можно делать или редактировать веб-ресурсы в визуальном режиме, писать коды нет необходимости. Программа делает всё сама, надо лишь верно разместить составляющие на странице.
- Microsoft Expression Studio. Программа используется нечасто, включает в себя пакет из нескольких программ для разработки веб-сайтов и веб-графики.
- Serif WebPlus. Чтобы создавать и редактировать одностраничники, не надо владеть языками программирования, писать коды не придётся.
- WebSite X5. Посредством этой программы можно разработать даже сложный сайт. Она поможет даже не разбирающемуся в сайтостроении человеку.
- WYSIWYG Web Builder. Программа выдаёт нужный код автоматически, так что тут его писать тоже нет нужды.
- Axure RP Pro. Работать с программой удобно, так как действия наглядны, проходить специальное обучение не требуется.
Работать с этими программами и создавать уникальный дизайн просто: надо взять изображение, перетянуть в нужное место, добавить кнопки и посадочная страница практически готова.
Сервис WordPress для создания страницы захвата своими руками
Часто продающая страница делается на WordPress. Особенности плагина для подобной CMS:
- Настройки на русском языке.
- В интернете есть курсы видео, в которых содержится пошаговая инструкция. Такие курсы помогут быстро пройти обучение.
- Много готовых кнопок (соцсети, отзывы, разделители, вставки контента, «Заказать», «Купить»).
- Можно производить сплит-тестирования.
- Доступный интерфейс.
Посадочная страница на WordPress позволяет быстро и недорого обеспечить поток клиентов. Существует девять модулей для разработки страниц захвата на движке WordPress:
С помощью этого плагина написать одностраничник под силу человеку не знакомому с главными html-тегами. Редактор работает без кодирования, нужно только перетянуть элементы куда требуется, создав при этом неповторимый дизайн.
- Thrive Landing Page WordPress.
В каталоге есть более 122 шаблонов с высокой конверсией, необходимо лишь выбрать подходящий. Инструмент позволяет писать лендинги, у которых будет уникальный дизайн благодаря имеющейся функции перетаскивания элементов. Адаптированный лендинг генерируется автоматически и одинаково хорошо функционирует на различных типах устройств.
- WP Profit Builder.
Гарантированно высокая конверсия, так как все шестьдесят шаблонов уже опробованы. Основное здесь – правильно оформить лэндинг. Настройка оформления производится своими руками. Возможность самостоятельной настройки делает одностраничник пригодным для длительного использования.
- WordPress Landing Pages.
Отличный выход из положения для компаний с небольшим бюджетом, так как платить за его использование не надо. Любое изменение продающей страницы можно проверить с помощью статистики, что позволяет создать одностраничник с максимально высокой конверсией.
- InstaBuilder.
Позволяет быстро написать одностраничный сайт, у которого будет адаптированный под компьютеры и мобильные устройства дизайн.
- OptimizePress.
Посредством этого инструмента можно в считаные минуты сделать одностраничник в WordPress автоматически настроенный под поисковик. При внесении изменений на странице результаты видны сразу.
- LeadPages.
- Ultimate Landing Page.
Плагин позволяет создать продающую страницу с нуля или с использованием шаблона. Предоставленные шаблоны бесплатные, их можно редактировать.
- Parallax Gravity.
Слабее, чем предыдущие, но с его помощью можно создать посадочную страницу с ключевыми составляющими.
Плагины на WordPress позволяют создать одностраничник за 1 вечер с нуля, но не все из них распространяются бесплатно.
Платные инструменты имеют большее количество функций, поэтому их целесообразно применять, если необходимо реализовывать продукт. Для тестирования спроса на услугу или товар подойдут бесплатные сервисы: WordPress Landing Pages или Ultimate Landing Page.
Программы Adobe Muse, Microsoft Expression Studio, Serif WebPlus, WebSite X5, WYSIWYG Web Builder, Axure RP Pro позволяют самостоятельно создать лэндинг, писать при этом коды и знать язык программирования не надо.
Актуальность темы создания посадочных страниц для бизнеса в качестве мощного инструмента увеличения продаж подтверждается статистикой Яндекс.Вордстат, согласно которой, счет запросов по ключевикам «лендинг», «лендинг пейдж» идет на тысячи, десятки тысяч только по России, не учитывая страны СНГ. Смотрите сами — ТОП-10 запросов по статистике Wordstat:
Хотя наверняка вам давно известно определение landing page, коротко говоря, это страница, созданная для продвижения одного продукта.Основной задачей лендинга является сбор контактов (лидогенерация) путем побуждения посетителей к целевому действию — заполнению лид-формы, скачиванию файла, заказу, покупке или чему-то еще.
Сегодня мы разберем особенности функционала, а также плюсы и минусы бесплатных конструкторов лендинг пейдж с хостингом и без него. Будут рассмотрены два решения, параллельно предлагающих услуги бесплатного и условно бесплатного сервиса для Mac, Windows и других операционных систем, после чего мы проанализируем функционал LPgenerator и попытаемся ответить на вопрос, возможно ли создание лендинга без инвестиций?
1. Bloxy
Ранее существовавший под названием Spagece, Bloxy — это условно бесплатный конструктор одностраничных сайтов, относительно недавно пришедший на рынок, о чем говорит число сайтов, созданных на платформе — 62832, если верить главному окну (для сравнения, в конструкторе LPgenerator ежедневно появляется 930-1350 новых страниц). Главная особенность сервиса, которая используется для позиционирования бренда: отсутствие шаблонов, но при этом «классная технология», позволяющая создать лендинг самостоятельно за 5 минут.
Внешний вид ресурса, все страницы которого выполнены в классическом стиле flat, опрятный и лаконичный. Разделы меню — главная, преимущства, сайты, отзывы — позволяют достаточно детально ознакомиться с особенностями сервиса, а также убедиться в его надежности.
На главной странице, под центральным заголовком и gif-анимацией, демонстрирующей интерфейс продукта, перечислены возможности (300+ готовых секций, быстрый и удобный редактор, автоматическая анимация, онлайн прием платежей и т.д.) конструктора, а голубая кнопка с призывом «Создать Landing page бесплатно» не оставит никаких сомнений у пользователя, твердо решившего попробовать свои силы в лендостроении, что он обратился по адресу. Ниже — скрин главного окна (декабрь 2016 года):
Сразу отмечаем, что ролик на первом, самом важном развороте главной страницы сервиса демонстрирует еще старое название Spagece
Другим пунктом меню дополнительно вынесены преимущества, разделенные на 4 категории: удобно, красиво, технологии, гарантия результата. По сути, это более подробное описание того, что мы уже видели на главной — при этом, стоит сказать, по каждому из преимуществ дано минимум информации: неискушенному посетителю из нескольных слов будет сложно увидеть ценность предложения.
Ситуацию отчасти спасают иллюстрации к каждому пункту, но пунктов так много (понадобилось аж 4 вкладки), а текста — так мало, что вкупе с минималистичным дизайном воспринять и удержать весь объем информации в памяти — довольно проблематично.
Но предположим, вы ознакомились с функционалом платформы, и он вас устроил, вы почитали отзывы довольных клиентов на сайте компании, посмотрели примеры, «сделанные в конструкторе обычными людьми», и решились-таки попробовать.
Первый вопрос, который у вас возникает: где тарифы?
Сколько раз мы уже писали в нашем блоге (хотя бы вот здесь: ), что сокрытие стоимости услуг, только если вы не работаете на сложном рынке, — это палка в колесе вашей конверсии. Но, тем не менее, все еще встречаются компании, которые усердно прячут от потенциальных клиентов цены как нечто непотребное. Безусловно, главное в продажах — донести ценность, а уже потом говорить о деньгах, но кому нужен кот в мешке? У пользователя должна быть возможность взвезить все за и против до того, как он примет решение связаться с вами. Особенно, если ваш бизнес работает через подписку.
Однако стоит отметить, что Bloxy хоть и спрятал свои тарифы в самое неприметное место — подвал сайта, так или иначе они все-таки присутствуют, поэтому отдельно остановимся на них.
Собственно, заголовок прайса иллюстрирует описанное выше
Ресурс поддерживает интеграцию c популярными сервисами, такими как Google Analytics, amoCRM, Яндекс Метрика, рядом других инструментов. К слову, у LPgenerator данный список существенно шире.
Скриншот ниже демонстрирует доступные пользователям системы виджеты. Это социальные сети, различные СТА-кнопки, изображения, лид-формы, a также прочие стандартные для продающих площадок блоки.
Но оставим теорию — настало время переходить к делу. Следующий скриншот показывает внутреннее меню рассматриваемого инструмента на этапе создания landing page. Предлагаемые секции-шаблоны разбиты по 11 категориям, названия которых можете прочесть ниже.
Это нельзя назвать полноценными шаблонами одностраничников — скорее, речь идет о конструкторе. К большому сожалению, полноценных одностраничников «под ключ», которые пользователь может настроить по своему усмотрению, наподобие LPstore (наш магазин шаблонов), мы здесь не нашли.
А вот так выглядит функционал запуска сайта с доменом от Spagece.
«Прокликав» пару функций, a также секций-шаблонов, мы за несколько минут сверстали вот такой смешной, нелепый «landing page». Прямо говоря, функционал редактора довольно скуден, откровенно неинтуитивен — как минимум, если речь идет о free-аккаунте.
Теперь рассмотрим действительно бесплатный конструктор одностраничников — инструмент, не требующий денег за основной функционал, однако продвигающий платные дополнительные услуги.
Сервис откровенно слабый, уступающий большинству конкурентов по всем фронтам. В качестве примера, покажем внутренний интерфейс редактора от Hello-site.
Как видите, все очень плохо. Пробный тариф дает только такой функционал, без возможности выбрать шаблон. Можете менять расположение полей, ставить свои фоновые изображения, загружать видео — но слишком далеко за эти узкие рамки выбраться не выйдет.
Вот такие блоки предлагает нам ресурс.
Теперь покажем примеры работ от портала Hello-site.
Минусы дизайна — точнее, полное отсутствие такового — легко заметить даже неискушенному посетителю.
Второй пример, из Украины.
Redmond — крупный международный бренд. Странно: распространители этих чудесных мультиварок выбрали столь странный вариант продвижения — через простейший landing page. Здесь дизайн чуть лучше, чем в предыдущем случае, правда тоже не выдерживает критики.
Вывод: Hello-site — довольно специфический выбор для маркетолога. Если дела настолько плохи, что нельзя позволить себе тариф за несколько тысяч рублей/месяц, тогда, возможно, целевая страница этой платформы удовлетворит вас — правда, только первое время.
Однако, тут стоит задуматься — если вы не готовы инвестировать несколько десятков евро ежемесячно в качественную интернет-площадку, то бизнесом ли вы вообще занимаетесь?
Настало время рассмотреть нашу платформу на фоне предыдущих, пытаясь все-таки ответить — возможно ли создать эффективный, высококонверсионный сайт-одностраничник с помощью конструктора без вложений средств, или же это утопия?
Ниже несложная таблица показывает основные функции нашего ресурса — это поможет провести аналогии c предыдущими сайтами.
Вот так выглядит начало работы у нас. Сперва необходимо выбрать нужный шаблон, или же начать создание одностраничника c чистого листа. LPgenerator позволяет создавать:
После выбора шаблона открывается окно редактора landing page. Функционал крайне широкий, инструментов, различных настроек весьма много здесь. Согласно первому взгляду, дизайн страницы редактирования, обширный инструментарий — все это может показаться перегруженным, но поверьте — вы быстро поймете во всем разберетесь, ведь стоит только начать.
Например, вот так выглядит окно добавления логотипа
Здесь можно загрузить свою картинку, а кроме того выбрать готовую из галереи LPgenerator.
После добавления нескольких одностраничников вы можете управлять ими из личного кабинета. Например, настраивать рекламу, привязать домен, оптимизировать конверсию.
Примерно так будет выглядеть ваша воронка конверсии, где указана вся необходимая информация.
Так выглядит функционал добавления, покупки домена. Существующий доменный адрес можно добавить даже используя тестовый аккаунт (7 дней), при необходимости есть возможность покупки другого домена в таких зонах, как: ru, su, org, com, net, biz, info, рф.
Кроме free-trial, у нас доступно три тарифа: продвинутый, безлимитный, white label. Вы наверняка заметили «продвинутый» тариф, наиболее демократичный по цене.
Вместо заключения
Сделаем выводы сегодняшнего разговора. Мы разобрали два популярных решения и подвели итоги какой бесплатный конструктор лендинг пейдж лучше, из которых только Hello-site действительно бесплатный конструктор landing page — откровенно говоря, найти приемлемый ресурс данной ниши, не требующий денег, довольно сложно.
Но тут снова возникает вопрос — стоит ли экономить на своем интернет-маркетинге, «лице бренда», если специализированные платформы, такие как LPgenerator, обходятся дешевле 2000 рублей/месяц по самым экономным тарифам? Действительно ли эта сумма настолько огромна, и вы готовы пожертвовать качеством продвижения ради такой незначительной экономии?
Ведь, кроме всего прочего, работа на нашей платформе убирает необходимость обращаться ко множеству сторонних инструментов — мы предоставляем клиентам интеграции c различными ресурсами, управление контекстной рекламой из личного кабинета, центр аналитики, возможность проводить сплит-тесты, многое другое — ведь список ваших возможностей постоянно растет. И все же, окончательное решение остается исключительно за вами.
Ознакомиться с готовыми шаблонами лендингов и зарегистрироваться >>>
Лендинг – специальная страница, которая нужна для того, чтобы подтолкнуть посетителя купить товар или услугу или оставить заявку. Для того, чтобы создать качественный лендинг не нужно быть маркетологом. Это под силу обычному человеку. Сегодня мы расскажем как это сделать.
Коротко: что такое лендинг и для чего он нужен
В отличие от многостраничного сайта, лендинг не имеет сложной навигации, больших пластов текста, баннеров и лишних меню для перехода на другие страницы. Навигация по такому сайту осуществляется либо путем прокрутки, либо посредством специального меню, с помощью которого легко попасть на интересующий пункт на странице.
Синонимы: одностраничный сайт, одностраничник, лендинг пейдж, посадочная страница, landing page, целевая страница.
Посадочная страница используется для продвижения товара или услуги, она призвана «направить» посетителя на совершение определенного действия:
- обращение за бесплатной консультацией;
- заявка на покупку товара;
- бронирование мест;
- подписка на рассылку;
Делать самостоятельно или заказать работу «под ключ»?
Итак, мы разобрались с основами. Следующий вопрос, который обязательно возникнет у вас: стоит ли сделать лендинг самостоятельно или заказать у фрилансера или в студии веб/дизайна.
Распространенный миф: разработать качественный, высококонверсионный лендинг очень сложно, этим занимаются только профессионалы, и это недоступно для обычного человека.
Реальность: сделать хороший, рабочий лендинг не сложнее чем создать страничку в социальной сети.
Разумеется, лендинг, разработанный профессиональным маркетологом, скорее всего, будет показывать большую конверсию. Однако разница в конверсии существенно скажется на доходе только при больших оборотах.
Как лучше поступить, если вы:
- вы новичок в бизнесе;
- хотите протестировать новую нишу;
- у вас небольшой стартовый капитал.
Если вы попали в одну из трех категорий , то вам следует подумать о том, чтобы запустить лендинг самостоятельно. Это будет значительно быстрее и дешевле.
В дальнейшем, когда дела пойдут в гору, вы получите первые заказы, оборотный капитал и, самое главное, статистику. Тогда можно задуматься о том, чтобы «дожать» конверсию на всех этапах воронки продаж, в том числе и на лендинге. Вы можете обратиться к профессионалам и сделать еще одни лендинг (или даже несколько) и протестировать их конверсию по сравнению с первым, чтобы выбрать лучший.
Единственное, что вам действительно необходимо — это знание своего продукта: его достоинств, недостатков и целевой аудитории.
С другой стороны, если у вас есть хороший капитал для старта и нет желания тратить лишнее время на создание посадочных страниц, вы всегда можете обратиться к специалистам. Со своей стороны могу порекомендовать веб-студию Divly . У них довольно демократичные цены и хорошие отзывы.
Помните, что если вы решили заказать лендинг «под ключ», вам нужно составить как можно более точное ТЗ и согласовать все детали с разработчиками.
Итак, если вы решились делать все самостоятельно, то ваш следующий наш шаг это выбор качественной платформы. Я подобрал 4 самых и удобных и функциональных сервиса для создания landing page, и сделал короткие обзоры, которые помогут вам выбрать.
LPMotor — самый лучший конструктор одностраничников
Отличная платформа, как для начинающих пользователей, так и продвинутых веб-мастеров. Выделяется простым и интуитивно понятным интерфейсом, доступными расценками на услуги, набором необходимых функций для создания одностраничного сайта, выбором уже готовых шаблонов.
Что касается шаблонов, то сайт предлагает пользователям 90 готовых вариантов оформления. Для удобства поиска все шаблоны разбиты по категориям (фотограф, красота и здоровье, мероприятия, инфобизнес, праздники). Кроме того, можно сделать страничку с нуля из готовых блоков и секций.
Для каждого шаблона можно дополнительно подключить мобильную версию, которую можно редактировать отдельно.
Еще одна отличительная черта — наличие качественный обучающих материалов. По каждому этапу работы (создание и запуск сайта, работа с дизайном, подключение домена, оптимизация и продвижение, управление продажами, повышение конверсии) есть пошаговые обучающие видео ролики.
На сайте отсутствует бесплатный тариф. Есть возможность подключить четыре платных тарифа (цены при оплате за год):
При оплате за год вы получите скидку 40%.
Оплатить услуги и тарифы платформы можно с помощью банковской карты, через Сбербанк Онлайн, Альфа-клик, посредством перевода через Связной, Евросеть, МТС, Теле2 и Билайн. Поддерживаются электронные кошельки: Яндекс.Деньги, QIWI, Webmoney.
Достоинства
- Доступные цены на услуги
- Огромный выбор готовых шаблонов в разных категориях
- Есть все необходимые функции для создания одностраничного сайта
- Возможность интегрировать готовый проект с другими сервисами
Недостатки
- Отсутствие бесплатного тарифа
Bloxy — стильный и современный
Bloxy – конструктор для создания одностраничных сайтов, который не так давно пришел на рынок, однако уже успел заслужить популярность среди веб-мастеров.
Главная особенность сервиса – отсутствие готовых шаблонов, вместо этого пользователю предлагается специальный конструктор, который дает возможность создать собственный одностраничный сайт из различных секций (шапка, основной контент, подвал). Для каждой секции предлагается сотни вариантов, из которых вы можете выбрать то, что наиболее подходит для вашей тематики.
Пользователю предлагается три тарифных плана:
Кроме того, каждому пользователю дается бесплатный тестовый период 7 дней.
Сервис позволяет интегрировать ваш одностраничник с популярными сервисами: amoCRM, Битрикс 24, Робокасса, Яндекс Касса, Google Analytics, Яндекс Метрика, Mail Chimp и др.
Достоинства
- Понятный интерфейс
- Интеграции со всеми необходимыми ресурсами для ведение бизнеса в интернете
- Удобный конструктор для создания собственного одностраничника
Недостатки
- Нет готовых шаблонов
- Стоит дороже конкурентов
LPgenerator — самый функциональный конструктор
LPgenerator имеет все необходимые инструменты для создания одностраничного сайта. В основном данный ресурс рассчитан на профессионалов, которые имеют опыт работы с подобными платформами. Наверно, это самый «мощный» и многофукнциональный конструктор из всех представленных на рынке.
На сайте представлено более 300 шаблонов (все адаптированы под мобильные платформы), из которых всегда можно выбрать что-то под свои потребности. При необходимости можно воспользоваться встроенным конструктором, который позволяет создавать свой сайт из различных блоков абсолютно с нуля. Компания также предлагает пользователям уже готовые одностраничники за дополнительную плату.
На сайте собраны необходимые инструменты для создания и управления лендингом: управление каналами трафика, подробная аналитика и статистика, удобное сплит-тестирование, построение воронки продаж, собственная CRM и LP Телефония и т.д.
Кроме того, вы можете интегрировать lpgenerator с различными онлайн-сервисами: Robokassa, Битрикс 24, AmoCRM, Мегаплан, Dropbox, SmartResponder и др.
Для начинающих пользователей разработана специальная система обучения – собраны материалы, которые помогут разобраться в сложных терминах и организовать процесс создания одностраничника от выбора дизайна до привлечения целевой аудитории и завершения сделки.
Бесплатный тариф отсутствует, оценить все преимущества и недостатки сервиса можно с помощью семидневного бесплатного пробного периода. Далее подключается один из платных тарифов (цены в месяц): «Базовый» (799 рублей), «Продвинутый» (2375 рублей), «Безлимитный» (3999 рублей), «Корпоративный» (15730 рублей).
При оплате за год, вы получаете 30% скидку:
Оплатить тарифы можно следующими способами: безналичный расчет, Web Money, карты Visa, Maestro и MasterCard, Сбербанк Онлайн, «Мир», «Альфа-Банк», «Яндекс.Деньги», Qiwi Wallet, Tele2, Beeline, «Мегафон», МТС, «Евросеть».
Достоинства
- Огромный выбор готовых шаблонов, которые адаптированы под мобильные платформы
- Есть инструменты для создания собственного одностраничника с нуля
- Детальная аналитика сайта
- Доступная телефония для связи клиентов
Недостатки
- Высокие расценки на услуги
- Нет бесплатного тарифа (бесплатный пробный период в течение 7 дней)
- Начинающему пользователю интерфейс может показаться сложным
Ucraft — бесплатный конструктор посадочных страниц
Сервис подойдет и для начинающих пользователей, и для профессиональных веб-мастеров. С помощью платформы можно не только создать одностраничный сайт, но и визитку, а также интернет-магазин. Пользователю доступно 19 готовых шаблонов, все они адаптированы под мобильные устройства.
Каждый шаблон строится на основе блоков, которые простым перетаскиванием мышки можно менять местами и убирать в случае ненадобности.
К готовому лендингу можно подключить следующие сервисы: Google Analytics, Mail Chimp, Google Maps, Twitter, Instagram, You Tube, Disqus.
Отличается от конкурентов тем, что здесь есть полноценный бесплатный тариф:
Платные тарифы можно оплатить с помощью Visa, Mastercard, Pay Pal.
Достоинства
- Удобный редактор для создания собственного одностраничного сайта
- Бесплатный тариф с хостингом и доменом 3-го уровня
- Есть инструменты для совместной работы над проектом
- Возможность интегрировать одностраничник с популярными сервисами
Недостатки
- Мало готовых шаблонов
Примерная структура одностраничного сайта
Теперь, когда мы выбрали платформу для нашей целевой страницы, самое время ненадолго окунуться в теорию. Давайте немного поговорим о структуре лендинга.
1. Заголовок
В заголовке должна отображаться информация, обозначающая уникальные характеристики предлагаемого товара или услуги. Желательно очертить все характеристики, которые выделяют ваш продукт среди конкурентов.
Допускается использование подзаголовка для того, чтобы разъяснить пользователям информацию, предоставленную в заголовке.
2. Логотип, название фирмы и контактная информация
Логотип позволяет пользователям идентифицировать вашу компанию и повысить уровень доверия.
Второй немаловажный элемент одностраничного сайта – наличие контактов. Желательно разместить не только рабочий телефон, но и адрес компании. Именно контакты являются главным инструментом доверия, пользователь подсознательно понимает, что если у проекта есть физический адрес, значит над ним работают профессионалы.
3. Данные о предоставляемом продукте или услуге
Для того, чтобы у пользователя создалось впечатление, что он лично тестирует продукт, на целевой странице желательно разместить:
- Реальные фотографии продукта;
- Видеозапись (данному контенту потенциальные потребители доверяют больше всего).
4. Преимущества бренда
Преимущества бренда желательно разместить в блоке, который будет выделяться цепляющим и захватывающим заголовком. Далее составляем подробный список выгоды для клиентов от сотрудничества с вашей компанией. Все преимущества должны отвечать на вопрос посетителя «Зачем мне это нужно».
5. Описание услуг
В данном блоке до пользователя доносится реальная ценность сотрудничества в виде перечня услуг.
6. Обратная связь с клиентами
Форма для обратной связи с помощью которой клиент сможет связаться с вами и оставить заявку.
Пример создания лендинга своими руками помощью сервиса LPmotor
Давайте попробуем для примера создать простую целевую страницу в конструкторе LPmotor.
Первое, что нам нужно сделать это зарегистрироваться в LPmotor .
В личном кабинете кликаем на зеленую кнопку «Создать сайт».
Теперь вам предложат 3 варианта на выбор: создать сайт из готовых блоков, из шаблона или с нуля. Самый простой и быстрый вариант — создать сайт на основе готового шаблона, поэтому мы выбираем именно этот вариант.
Теперь нам нужно выбрать шаблон, который лучшей всего подойдет для вашей ниши. Для удобства все шаблоны разбиты на категории: товары, услуги, инфобизнес, красота и здоровье и т.д.
Для примера я выбрал лэндинг, который подойдет для свадебного фотографа. Сразу после того, как вы выберете подходящий шаблон система попросит оставить номер телефона на который будут приходить уведомления о заявках.
Если вы не нашли подходящего шаблона, не расстраивайтесь. Просто вернитесь на шаг назад и попробуйте создать сайт из готовых блоков или с нуля. Возможно вам придется потратить больше времени, но зато вы получите качественную и уникальную посадочную страницу, которая на 100% подойдет к вашему товару или услуге.
Теперь вы можете отредактировать шаблон под себя: поменять фотографии, написать подходящий текст, контактную информацию, перечень услуг, преимущества и т.д. Для того, чтобы отредактировать элемент, нужно просто щелкнуть на нем мышкой. Здесь все достаточно просто и понятно, поэтому вопросов возникнуть не должно.
В нижнем левом углу есть кнопка «Добавить элемент». Ей можно воспользоваться чтобы добавить в шаблон дополнительный блок, секцию или корзину.
В верхнем правом углу вы увидите зеленую кнопку «Посмотреть сайт». По ней вы можете посмотреть как будет выглядеть ваша посадочная страница.
Слева вверху вы можете выбрать вариант отображения лендинга: компьютеры, мобильные устройства, и отредактировать каждый вариант в отдельности.
В правом верхнем углу есть пиктограмма с шестеренкой. Если вы щелкните по ней, появиться выпадающее меню. Здесь можно выбрать «Управление» и вы попадете в административную часть вашего сайта.
Отсюда вы сможете управлять всеми функциями лендинг пейдж.
Самое первое, что нужно сделать, это изменить домен.
Вы можете выбрать любой домен третьего уровня (sitename.lpmotortest.com) или купить домен второго уровня (sitename.com). Если у вас уже есть доменное имя, зарегистрированное у стороннего регистратора, вы можете подключить этот домен к вашему сайту.
Следующий шаг — подключение счетчиков посещаемости Яндекс Метрика или Google Analytics.
Для этого нужно в иметь аккаунты в Яндекс и Google. Счетчики создаются в один клик и не требуют никаких специальных знаний.
В разделе оповещения вы можете настроить оповещения о поступивших заявках по SMS, электронной почте, в Телеграм или ВК.
В разделе «Аналитика» вы можете посмотреть посещаемость сайта по разным каналам трафика и воронку конверсии.
В разделе «Расширения» вы сможете подключить к сайту необходимы дополнительные сервисы и виджеты: корзину товаров, геотаргетинг, CRM, Яндекс касса и т.д.
Самый последний шаг — публикация сайта.
Для этого нужно перейти на вкладку «Рабочий стол» и нажать кнопку «Опубликовать». С этого момента ваш сайт будет доступен пользователям по всему миру.
Я рассказал только о самых важных функциях конструктора. Наверняка, у вас еще возникнут вопросы: что такое A/B тесты, для чего нужны SEO настройки, как настроить анти-спам фильтр и т.д. На этот случай предусмотрены обучающие видео. Посмотреть их вы можете по ссылке «Обучение» в верхнем правом углу экрана. Если возникнут какие-нибудь вопросы, смело пишите в службу поддержки. Кроме того, можете также написать в комментариях к этой статье. Обязательно отвечу всем.
Заключение
Сегодня мы рассмотрели наиболее оптимальные площадки для создания собственного одностраничного сайта для продвижения товаров и услуг. Помните о том, что эффективность проекта будет зависеть не только от платформы, но и от правильности расположения блоков, а также размещенной информации.
