Здравствуйте, друзья. В этой статье я дам вам пошаговую инструкцию, как сделать лендинг самому — бесплатно и профессионально. То есть ваш лендинг будет выглядеть действительно красиво, не хуже, чем у конкурентов. Перед началом работы можете, кстати, от руки прописать .
Здесь мы рассмотрим вариант бесплатного создания лендинга из 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 лет =)
Привет, друзья!
Если вы думаете, как выгодно продвинуть товар, услугу, а возможно просто представить публике себя любимого – то вы попали по адресу. Сегодня на повестке дня важный вопрос – как сделать Лендинг пейдж самому. Поговорим про конструкторы, создадим собссна Landing page с пошаговой инструкцией, а в конце вас ждет полезный бонус. Поехали!
О Лендинг пейдж
Для начала давайте разберемся, что такое Лендинг пейдж? Landing page переводится с английского, как «целевая» или «посадочная страница». Это такой одностраничный сайт без подразделов. И это супер! Ведь на многостраничных сайтах посетитель может гулять по страничкам и в итоге забудет, зачем он вообще зашел. С Лендингом такого не случится. Здесь два варианта: совершить покупку или же уйти.
Одностраничники пользуются спросом у бизнесменов, потому что с их помощью можно легко презентовать отдельное предложение – распродажу или новенький товар. Да и целевую страницу создать намного проще и быстрее, чем муторно копаться с сайтом. Сделать Лендинг пейдж можно самому, причем бесплатно.
Как сделать Лендинг пейдж самому
В интернете полно конструкторов, расскажу о популярных, надежных и реально работающих.
1. – царь и бог среди конструкторов одностраничек. Разработчики собссна так и его и презентуют: Профессиональная Lending page платформа для бизнеса. Средний ценник – 559 рублей в месяц. Дается бесплатный тестовый период, который длится 7 дней. Позже на нем и попробуем создать Лендинг пейдж сами.
2. – «все элементарно, Ватсон» именно так хочется сказать об этом конструкторе. Вот правда, все гениальное просто, работать одно удовольствие. Бесплатный тестовый период длится 14 дней. Расценки зависят от сложности Лендинга. Но можно создавать еще и сайты.
3. – суперская платформа, название произносится как Борстч, но в узких кругах именуют проще – Борщ.) Привлекательный дизайн, много шаблонов, адаптивность под Айфоны, Андроиды. Разработчики продумали каждую мелочь, поэтому остается только написать офигенский текст, не отвлекаясь на оформление.
Лендингом можно пользоваться и бесплатно, но на нем будет выскакивать сторонняя реклама. За выключение рекламы придется заплатить.
Делаем Лендинг пейдж: пошаговая инструкция
Конструкторов конечно намного больше, но они аналогичны. Мы попробует сделать Лендинг пейдж вместе на LPgenerator. Приготовились?
Зарегистрируйтесь. После конструктор устроит допрос. Потребует прописать ФИО, какую должность занимаете, для чего на сайте, зачем вообще вам понадобился Лендинг? Разве что паспортные данные и ИНН не потребует… Но после окунетесь в мир творчества, так что крепитесь, это того стоит!
Когда LPG с вами наобщается и пустит к созданию одностраничника, выберете шаблон, который вам подходит. Слева увидите тематический столбик, выбирайте, что нужно. К примеру, портфолио.
Шаблоны разные: для портфолио художника, фотографа, программиста. Платные под «замочком», бесплатные с «плюсиком».
Когда выбор сделан, приступайте к редактированию. Меняйте: картинки, текст, шрифт и его размер и цвет. Создавайте свое неповторимое.
В конце не забудьте про призыв к действию) А то некоторые выкладываются по полной при создании, написании умных текстов, а вот про призыв то ли забывают, то ли сил не остается. Будьте бдительны.
А теперь, как я и обещала, бонус. Расскажу о мифах в создании Лендинг пейдж.
1. Если измените цвет кнопки призыва к действию с зеленого на красный, увеличите конверсию. Это не так, вы ничего не измените, кроме цвета кнопки) Доказано, в ходе исследований. Нет никакого правильного цвета, то что сработает на одном Лендинге, может не сработать на другом.
2. Текст должен быть коротким . Это как в школьном сочинении, которое должно быть на 4 страницы. И бедные ученики растягивают каждое слово, еще повезло тем, у кого подчерк крупный. Ну вы помните? Текст должен раскрывать суть, и это самое главное.
3. На целевой странице нужно размещать как можно больше триггеров и кнопок . Не так, это наоборот отпугнет покупателя. Пусть все будет лаконично и гармонично.
4. Запустили Лендинг и можете о нем забыть , он будет работать сам. Опять же нет, нужно постоянно заботиться, тестировать, одно добавлять, другое убирать.
Вот мы с вами и разобрали тему, как сделать Лендинг пейдж самому бесплатно. Надеюсь пошаговая инструкция оказалась полезна. Впереди много крутяцких тем. Не переключайтесь)
С уважением, Ваша Суть!
Landing Page - это веб-страница, основной задачей которой является захват контактных данных посетителей веб-сайта.
Почему такое специфичное название?
В переводе с английского слово “Landing” переводится как “Посадка”, а “Page” - “Cтраница”.
Почему “посадочная” страница?
Дело в том, что используя Landing Page в работе, мы как бы приземляет пользователя на отдельную страницу. На стандартном сайте клиент изучает несколько страниц попадая на них через систему пересылок (перелинковку).
Если упростить это определение, то можно представить лендинг пейдж, как мышеловку для Ваших клиентов.
Каждая мышеловка состоит из:
Приманки
Механизма захвата
Основы для размещения первых двух элементов
Так и Landing Page имеет такую же структуру.
Основой для размещения приманки и механизма захвата является веб страница. Роль приманки на этой странице играет оффер (уникальное торговое предложение). А механизм захвата - это формы заявки или формы обратных звонков на странице.
Но вернемся главному вопросу, который задает себе каждый предприниматель: “ Landing Page поднимет мои продажи?”
Зачем нужен Landing Page?
Как я и говорил до этого, Landing Page нужен для нескольких целей:
Ознакомить
Получить контакт (лида)
Предлагаю разобрать каждую цель отдельно.
Сбор контактных данных с помощью Landing Page
Как известно любому предпринимателю, контактные данные клиента - это возможность! Чем больше таких возможностей в нашей системе, тем больше денег мы можем заработать предложив свой продукт.
Именно поэтому существуют Landing Page, направленные на сбор контактных данных.
Что мы подразумеваем под контактными данными:
Получив эту информацию мы можем:
Обзвонить и продать
Вот несколько примеров подобных лендингов.
Пример лендинга: кровля
К примеру, в нише кровли человеку нужно узнать цены и сравнить их с конкурентами, чтобы принять решение о сотрудничестве.
Но вместо того, чтобы просто показать цены, мы возьмем контактные данные, чтобы помочь ему принять правильное решение!
В этом примере, за счет преимуществ сервиса, кампания стимулирует посетителей сайта получить прайс. После чего происходит обработка клиента менеджером по продажам.
Пример лендинга: ремонт телефонов
Следующий пример связан с ремонтом телефонов. За счет гарантии и сроков реализации происходит призыв к расчету стоимости ремонта телефона.
В этом случае, аудитория также принимает решение исходя из цен. Но если мы покажем цены, клиент просто пойдет сравнивать нас с другими.
Пример лендинга: банковские гарантии
Данный пример хорош с позиции составления УТП (уникального торгового предложения).
Оставив заявку на сайте компания предлагает получить предложение от 34 банков, взамен на Ваше имя и телефон.
Продажа с помощью Landing Page
Существуют Landing Page, где клиент может произвести покупку прямо на сайте. Для этого подключают сервисы электронной коммерции Ecommtools и Robokassa.
Ecommtools используется как корзина, куда пользователь может добавить товар.
Robokassa нужна для приема платежей любым удобным способом для клиента (Qiwi, Яндекс.Деньги, Webmoney, PayPal и т.д.).
Пример langing page: мероприятие
В этом примере посетителю сайта предлагается заказать билет на ночное мероприятие с известными диджеями. При условии оплаты с сайта человек получает скидку.
Ознакомление с помощью Landing Page
Также одной из целей лендинг пейдж является ознакомление с товаром или услугой.
Подобные подходы используются, когда в бизнесе нужен сайт визитка, либо товар является инновационным и требует предварительного изучения.
Пример лендинг пейдж: клининговая задвижка в монолитном корпусе
В этом примере, демонстрируется инновационная задвижка в трубопроводной арматуре.
Целевая аудитория - инженеры. Для принятия решения о покупке им необходимо изучить плюсы и минусы технических характеристик, поэтому кнопка на лендинге является навигационной и переводит на другую секцию посадочной страницы. В случае заинтересованности клиент производит звонок (телефон его приследует в верхнем плавающем меню).
Пример лендинг пейдж: проектирование электроснабжения
В данном примере компания занимается сложными проектами по электроснабжению.
Основной задачей лендинга является ознакомление с уровнем проектов инженерии. Такое решение было принято по причине того, что целевая аудитория не охотно оставляет контактные данные и предпочитает звонок по телефону в случае, если уровень проектов соответствует их требованиям.
Чем лендинг пейдж отличается от сайта?
В отличие от многостраничного сайта, лендинг:
Имеет одну цель
Имеет одну страницу
Предлагаю разобрать каждый из этих пунктов отдельно.
Landing Page имеет одну цель
Лендинг должен быть посвящен чему-то одному. Мы предлагаем пользователю забронировать билет, получить консультацию или просто подписаться на рассылку. Если задач будет много, то пользователь может легко запутаться.
Выбор - это сложная задача для любого человека.
Людям проще взять что-то одно, нежели выбирать из 2-х или 3-х условий.
Вспомните, как вы выбираете фильмы. Можете часами сравнивать. А на лендинге выбор уже сделан и мы убеждаем человека в его правильности!
Исходя из этого сразу нужно определиться с тем, что Вы хотите получить от клиента.
Возможно, вы хотите его телефон взамен на бесплатный замер или почту взамен на ценную информацию.
Landing Page имеет одну страницу
Вся необходимая информация должна находится на одной странице. Это нужно потому, что:
Каждое действие мышкой отделяет пользователя от целевого действия. Поэтому большое количество страниц может запутать человека и он покинет сайт.
Если мы будем разделять landing page на несколько страниц, то не сможем управляет последовательностью подачи продающей информации. В итоге, человек просто не поймет offer и уйдет.
Эти 2 пункта имеют прямое отношение к эффективному получению лидов.
Что такое лиды?
Во всех случаях использования лендинг пейдж мы так или иначе пытаемся заинтересовать клиента в сотрудничестве с нами.
В терминологии интернет маркетинга, любой способ первичной связи клиента с предпринимателем называется “лид”.
К лидам могут относиться:
Входящий звонок
Заявка с сайта
Письмо от потенциального клиента на почту
Онлайн чат с клиентом (через Jivo Site или Callback Hunter)
Основное назначение любой посадочной страницы - привлечь как можно больше лидов.
Что такое конверсия?
Чтобы Landing Page приносил много лидов необходим высокий КПД (коэффициент полезного действия)!
КПД любой посадочной страницы называют конверсией.
Формула конверсии выглядит так:
Конверсия = (Лиды / Посетители сайта)*100%
Другими словами, чем выше процент посетителей сайта, которые стали лидами, тем лучше это для бизнеса.
Вот простой пример.
Мы привлекаем на 2 лендинга по 100 посетителей за 1000 рублей.
У первого лендинга конверсия сайта 5%. За 1000 рублей, он получит 5 лидов (по 200 рублей).
У второго лендинга конверсия сайта 20%. За 1000 рублей, он получит 20 лидов (по 50 рублей).
Исходя из этого примера, не трудно догадаться, что второй лендинг даст предпринимателю больше возможности продать свой товар/услугу, чем первый.
Когда используются лендинги?
Лендинг лучше всего работает, если его задача точно определена.
Юридический консалтинг (Размыто)
Консультация по арбитражному суду (Точно)
Вам нужно четко понимать свою аудиторию!
Женщина 20-30 лет - слишком неточная характеристика для аудитории.
Но если обрисовать ее интересы (к примеру латинские танцы), понимать с каких устройств она чаще всего находится в интернете (к примеру с телефона IPhone 5) и в каких условиях принимает решение (к примеру сидя в метро мельком просматривает рекламу и оставляет заявку), в таком случае лендинг можно более точно использовать.
Теперь хочу рассмотреть частные случае использования Landing Page.
Продажа товаров или услуг на Landing Page
На лендинге можно продавать любые товары:
Экшн камеры
Важное правило! Нельзя размещать большое количество товаров! Более 10-15 товаров требует создание интернет магазина.
Пример лендинга: кальяны
В данном случае, на лендинге продается кальян с одной ценой и двумя стилями. Описаны все характеристики и размещен триггер доставки.
Лендинг пейдж, когда нет основного сайта
Одним из самых быстрых решений по упаковке Вашего бизнеса в ВЕБ будет создания лендинга. Время реализации многостраничного сайта может занимать несколько месяцев!
Лендинг пейдж, для отдельных целей
Давайте предположим, что Вы занимаетесь обучением. Задача провести отдельный семинар посвященный приглашенному спикеру. Для этих целей лучше создать отдельный landing page и описать все регалии и опыт специалиста.
Лендинг пейдж, когда Вы тестируете направление
Отличным выходом для теста нового направления будет создание лендинга. Пока экономика расходов и доходов не понятна, нам нужно дешево протестировать и понять в какую сторону двигаться. Как правило, в этом случае используют сочитание Landing Page и .
Лендинг пейдж, когда есть основной сайт
Когда многостраничный сайт уже приносит клиентов, то лучшим решением будет использовать Landing Page в виде посадочных страниц с акцией. В таком случае с помощью ретаргетинга мы можем преследовать пользователей (не оставивших заявку) новым коммерческим предложением.
Виды Landing Page
Если подразделять лендинги на виды, то можно выделить несколько:
Длинный лендинг пейдж (лонгрид) – это длинная страница, которая содержит очень много информации о продукте и услуге.
Короткий лендинг пейдж – это короткая страница. Чаще всего ее используют для сбора электронных адресов и увеличение базы подписчиков.
Многошаговый лендинг пейдж - основное назначение подобных страниц заключается в многошаговом воздействии на целевую аудиторию. К примеру: мы подогреваем аудиторию к принятию решения, призывая узнать, что будет дальше. На втором этапе происходит коммерческое взаимодействие.
Лонгриды
Как правило, landing page с содержанием более 10 000 - 12 000 относят к лонгридам. В рамках подобной страницы человек получает максимально подробную информацию о товаре либо услуге.
Чаще всего лонгриды используются в статьях.
Почему лонгриды хороши для статей?
Дело в том, что аудитория, которая ищет подробную информацию в интернете очень вдумчиво изучает текст. Для этой цели лонгриды разбиваются на огромные логические блоки с навигацией по странице, где человек может найти любую информацию.
Это повышает поведенческие показатели лонгрида и он лучше индексируется поисковыми машинами.
Лендинг в один экран
Короткие лендинги хороши для ниш со срочным спросом:Эвакуатор
или для направлений с бесплатным первым шагом:
Бесплатные семинары
Бесплатные вебинары
Почему короткий лендинг в этих случаях лучше работает?
Всё просто! Человек сконцентрирован на решении конкретного вопроса. Чем быстрее он получит ответ на странице, тем раньше сделает заявку.
Пример landing page: Школа вокала
Отличный пример школы вокала. Основная цель этого лендинга: сбор контактных данных на бесплатный урок.
Школа обещает быстрый результат (за 27 дней), поэтому лендинг имеет высокую конверсию!
Многошаговый лендинг
Чаще всего многошаговое воздействие используют в тизерных сетях.
Показ основного оффера через “прокладку” является одним из действенных способов привлечения лидов.
Многошаговое воздействие включает в себя несколько шагов:
Статья посвященная результату от использования товара / услуги
Landing Page с целью сбора контактных данных
Чаще всего, подобную механику можно встретить на сайтах с фильмами онлайн.
Все объявления в такой цепочке имеют заголовок, который сильно побуждает к клику.
После нажатия на баннер мы попадаем на статью, которая рассказывает историю легкого сброса жира. Страница максимально замаскирована под новостной портал.
Для пущего доверия я размещаются отзывы в социальных сетях.
Пройдя такую цепочку подогрева финальная страница получает максимальную конверсию!
Принципы создания Landing Page
Есть 2 основных принципа создания лендинга:
Aida: attention, interest, desire, action
Данный принцип призывает оформить страницу, таким образом, чтобы:
Привлечь внимание
Заинтересовать
Вызвать желание
Добиться действия
Такие лендинги постепенную подачу информации с призывом к действию после каждого информационного блока. Aida - подходит для целевой аудитории, которая долго изучает продукт перед выбором.
PMPHS: pain-more pain-hope solution
Landing Page, выполненный по такому принципу, имеют следующую основу:
Обозначить проблему
Обострить проблему
Показать надежду
Предложить решение
Такие принципы хорошо будут работать в тематиках похудения, здоровья и т.д.
Если мы разбираем классическое поведение человека на Landing Page, то можно отметить 3 основных шага:
Разобрался
Сделал целевое действие.
И это очевидно! Сначала, человек должен узнать о предложении в интернете, затем изучить его, а затем приобрести!
Чтобы реализовать такую модель, необходимы:
Давайте разберем каждый пункт.
Трафик
За трафиком мы понимаем посетителей Landing Page. Привлечь их можно различными путями:
E-mail marketing
Качественный трафик помогает увеличивать конверсию landing page. Условно можно разделить трафик на горячий и холодный.
Горячий трафик
Аудитория, которая ищет услугу здесь и сейчас, относят к горячему трафику. Чаще всего такая аудитория находится в поисковиках. Поэтому контекстная реклама в Яндекс Директ или Google Adwords, будет привлекать самый горячий трафик.
Холодный трафик
К холодному трафику можно отнести баннерную рекламу на площадках.
Когда человек изучает сайт и ему показывается баннер, то он не имеет прямой нужды заказывать услугу здесь и сейчас. Поэтому, landing page под холодный трафик должен быть очень конверсионный.
Call to Action
Призыв к действию - один из важнейших факторов эффективности Landing Page.
Без Call to Action клиент может не понять основную цель страницы. Вот несколько примеров успешных призывов.
Пример Landing Page: курсы по плаванию
Лучшее, что можно предложить тренерам по плаванию - это бесплатное первое занятие.
Добавив гарантию высокого результата (от новичка до мастера спорта за курс занятий), такой Landing Page будет иметь очень высокую конверсию.
Пример Landing Page: бижутерия оптом
Самое выгодное предложением для любого начинающего оптовика - система реализации закупленной продукции.
В данном примере, Call to Action заключается в получении пошагового руководства по созданию прибыльного магазина бижутерии с нуля.
Привлекательная кнопка
Многие A/B тесты посадочных страниц определили существенное влияние кнопки на конверсию сайта.
Какие факторы имеют значение при создании кнопки:
Цвет кнопки
Чем ярче кнопка, тем больше шансов обратить на нее внимание у пользователя.
Самая большая ошибка при создании Landing Page - делать кнопку в цвет сайта.
Смена цвета кнопки часто повышает конверсию сайта!
УТП в кнопке
Уникальное торговое предложение в кнопке, является отличным маркетинговым ходом!
Такие подходы увеличивают шансы заметить форму заявки и само УТП.
В кнопке можно использовать разное УТП:
Получить скидку 30%
Забронировать бесплатное место
Получить тестовый день
Уникальное торговое предложение
УТП - самая важная составляющая лендинга. Основная задача страницы ознакомить пользователя с предложением, от которого глупо отказаться.
Как же составить предложение, которое будет сильным магнитом для лидов?
Принцип 4U
Данный принцип основан на 4 важных моментах:
Полезность
Какую пользу вы предоставите Вашему клиенту?
Например: “Научим плавать”
Специфичность
На сколько это выгоднее (выгоднее, быстрее и тд) (в деньгах, цифрах, процентах и тд)
Например: “с правильной техникой”
Срочность
За какой промежуток времени клиент это получит? (За неделю, месяц, пару дней).
Например: “всего за пару дней”
Уникальность
С помощью чего Вы это сделаете? (Или уникальность данной выгоды по сравнению с аналогами)
Например: “по методики олимпийского чемпиона Майкла Фелпса”
Объединив все 4 принципа мы получаем привлекательное предложение, которое лучше всего разместить на первом экране: “Научим плавать с правильной техникой, всего за пару дней, по методики олимпийского чемпиона Майкла Фелпса!”.
Поняв основные принципы лендинг пейдж, предлагаю разобрать все этапы ее создания!
Этапы создания Landing Page
Условно можно разделить этапы разработки лендинга на:
Анализ конкурентов
Анализ аудитории
Пишем текст
Создаем прототип
Делаем дизайн страницы
Верстаем и программируем страницу
Теперь разберем подробно каждый этап!
Анализ конкурентов
Для того, чтобы отстраниться от конкурентов, необходимо чем они завлекают целевую аудиторию. Каждый из конкурентов преподносит выгоды для клиента по своему!
Наша основная задача: просмотреть рынок со всех сторон, выписать основных игроков и разобрать их подход.
Создаем сводную таблицу по конкурентам
Перед началом анализа советую сформировать таблицу в Excel, куда мы будем фиксировать все данные.
В первый столбец мы вставляем параметры для сравнения, а в шапку помещаем сайты конкурентов.
Для этого достаточно вписывать блоки и элементы, которые использует каждый из конкурентов (у одних эти элементы будут, у других нет).
В итоге Вы получите:
Большую аналитическую таблицу
Выпишите для себя лидеров рынка
Определите лучшие подходы в донесении информации
Сравните, какое предложение на рынке сейчас самое выгодное
Отстранитесь от каждого конкурента, сформировав УТП
Чтобы Вы не запутались в элементах сайта, которые необходимы для анализа, я перечислю обязательные параметры:
Описание страницы (как правило в верху страницы)
Заголовок
Оформление формы захвата (какие кнопки, количество форм для заполнение, торговое предложение в формах)
Есть телефон или нет? (8-800, городской или мобильный)?
Какой Call to Action?
Какая основная выгода? (что пользователь отдает, взамен на контактные данные?)
Какие цены (Как они преподносят их: пакеты услуг, скидки и т.д.)
Количество блоков на лендинге (Можно разобрать каждый)
Какую задачу решает первый экран лендинга
Где же найти сайты конкурентов?
Воспользуйтесь поисковиком
Первое, с чего стоит начать - Яндекс и Google. Самая горячая аудитория находится именно там! Если у человека появляется прямая необходимость в чем-либо, первым делом он полезет в поисковики.
Как известно в России, большая часть трафика находится в Яндексе.
Почему это стоит делать?
Эти части объявления обычно подчеркивают основные выгоды страницы, на которую попадает пользователь после клика. Добавьте эти данные отдельным листом в своей сводной таблице.
Пройдитесь по всему списку конкурентов и изучите предложения, которые они делают в социальных сетях.
Велика вероятность, что Вы заметите новые преимущества и выгоды!
Сравните предложения
Определите стратегию лидера
Отметьте блоки и подходы, которые есть практически у всех конкурентов
Следующим этапом будет анализ аудитории.
Почему многие ремонтные организации сначала делают бесплатный дизайн проект и только потом делают ремонт?
Аудитория, которая осуществляет поиск - это чаще всего женщины, которые принимают решение по картинке
Аудитория, которая принимает решение - это мужчины, которые хотят угодить женщинам
Тоже самое происходит на Landing Page.
На первый взгляд, лендинг должен описывать преимущества продукта, но на деле он должен описывать преимущества для конкретных людей.
Важно точно определить, кто Ваша целевая аудитория и от чего она точно не откажется.
На практике, аудитория делится на:
тех, кто осуществляет поиск
тех, кто покупает
Аудитория осуществляющая поиск
Почему я выделяю отдельно данную аудиторию?
Во многих случаях люди осуществляющие поиск в интернете, не являются людьми принимающими решение о покупке.
Например, Босс на работе дал задание помощнице найти воду для кулера. Сотрудница открыла интернет и начала сравнивать цены и после этого доложила боссу.
Но если бы c каждым заказом дарили коробку конфет, сотрудница могла сделать выбор в сторону другой компании.
Исходя из этого:
Определяем аудиторию, которая будет осуществлять поиск и выбор
Адаптируем предложение под эту целевую аудиторию
Аудитория принимающая решение
Теперь поговорим о аудитории, которая будет платить деньги. Чаще всего условия, которые побуждают к оплате, совершенно расходятся с мнением людей, которые ищут продукт в интернете.
Важно изучить все боли клиента!
Глобально можно разделить боли на 2 основных категории.
Боли сервиса
Боли продукта
Боли сервиса
К болям сервиса можно отнести:
Невозможно дозвониться
Приехали сломали и уехали
Испортили
Боли продукта
Чаще всего клиентам не нравится:
Высокие цены
Низкое качество
Как узнать боли?
Отдел качества
Для того, чтобы узнать все боли достаточно прозвонить клиентов купивших продукт и услугу.
Представившись отделом качества, Вы точно получите максимально подробное описание “дыр” бизнеса.
Поняв данные проблемы должны выписать по 2-3 решения каждого и описать их на лендинге.
Советую заполнить табличку, в которой понятно на сколько часто используется та или иная боль клиента.
Чем чаще возникают недовольства, тем больше акцента должно быть на посадочной странице.
Аудит социальных сетей
Посмотрите, кто состоит в них и определите, что у них общего.
Посмотрите личные странички самых активных из них
Изучите комментарии в беседах или опросах
Сомнения
Что может заинтересовать
После выпишите 10 преимуществ, которые могли бы стимулировать их сотрудничать с Вами и пометьте в другом листе своей таблички.
Определяем цели аудитории на лендинге
Задача каждого предпринимателя - продать свой товар. Но это задача бизнесмена, а пользователи в интернете посещают сайт, чтобы получить информацию об условиях и выгодах. Поэтому задача пользователя будет формулироваться примерно так - сравнить (или скачать прайс, узнать цены и т.д.)
Клиент не будет платить за сайт. Ты дай ему прайс и он подумает…
Исходя из этого мы сами должны определить задачу, которую будет решать клиент на сайте.
Чем больше задач может выполнить лендинг, тем больше шансы того, что у Вас купят товар.
Но главное, чтобы landing page не превратился в “борщ” (всё обо всём).
Мы возвращаемся в таблицу с анализом аудитории и определяем, какие задачи будут решаться на лендинги (и всем ли портретам аудитории это будет полезно).
Ответьте себе на вопросы:
В каких условиях клиент принимает решение (дома перед теликом, где спокойно можно вдуматься или на шоссе, когда нужен эвакуатор, где решение принимаются за пару секунд)?
Сколько задач будет решать лендинг пейдж?
Что должно быть на сайте, чтобы все боли были решены?
Выделите главную и второстепенные задачи.
Цель: Второстепенные задачи должны помогать решить основную!
Проделав такую работу Вы точно создадите предложение от которого глупо отказаться!
Следующим этапом будет написание текста.
Написание текста на лендинг пейдж
Исходя из полученных материалов во время анализа мы составляем текст посадочной страницы.
Все возражения человека, во время чтения, будут решены. Здесь не будет лишних слов, все только по существу и в тему.
Для этого необходимо все смыслы распределить в продающую структуру.
Структура лендинг пейдж
Чтобы клиент мог последовательно получать нужную информацию на лендинге, необходимо подать информацию последовательно.
Нам стоит вернутся к нашим сводным таблицам:
Исходя из анализа аудитории и конкурентов определяем блоки сайта и боли аудитории, которые чаще всего встречались.
Размещаем на странице в порядке убывания частоты (другими словами, чем ниже спускаемся тем менее важные боли закрываем).
Сам текст пишем понятным и логичным.
Вот несколько правил, которые обязательно нужно учитывать:
Ценности
На лендинг пейдж нужны цифры
Почему это так Важно?
Обычно, изучая сайты люди, чаще всего ищут цифры (прайсы, цены и т.д.). По этой причине, любые цифры на сайте будут привлекать посетителей сайта.
Где можно вставить цифры?
В уникальном торговом предложение (если его суть, как-то затрагивает выгоды)
В блоке социального доверия (перечисляя свои достижения и регалии)
В сроках реализации (если это быстрее, чем у других)
В описании товара/ услуги
Пример Landing Page: Франшиза
Франшиза по изготовлению суши и роллов.
На первом экране встречаются цифры 5 раз! Все они запакованы с позиции выгод!
На лендинге нужны выгоды
Каждая потребность выявленная на этапе анализа аудитории должна быть решена с позиции выгод.
Предлагаю более подробно разобрать пример с франшизами.
Основной задачей человека, покупающего франшизу, является получить систему, которая без особых доработок, даст ему деньги в первый месяц.
Исходя из этого, 2-ой заголовок звучит так:
“Зарабатывай стабильно от 110 000 руб. уже с первого месяца!”
Удаляйте “воду” из текста. Откажитесь от необъективных оценок, пишите только о фактах!
Берите задачу, которую клиент ставит перед собой, решайте ее и приводите доказательства!
На лендинге должны быть ценности
Основной задачей дополнительной ценности является усиление “Вау-Эффекта”. Чаще всего ценности лежат в области сервиса:
Если не доставим через 30 минут, пицца бесплатно!
Запуск франшизы с нуля, всего за 2 недели
Когда Вы написали все тексты, Ваша задача сформировать прототип.
Прототип для Landing Page
Прототип нужен для визуального разделения текстовых блоков, чтобы лендинг было удобно изучать.
Прототип можно делать в тетради или на блокноте. Но проще всего выполнять в специальных программах.
Вот несколько примеров подобных программ:
Быстрая прогрузка сайта
Пожалуй один из самых важных пунктов для верстальщиков и программистов!
70% отдачи Вашего сайта зависит от скорости его прогрузки.
Для этого программисты реализуют прогрузку по кэшу, облегчают картинки и верстку.
Если сайт будет медленно грузиться, показатель отказов вырастет и конверсий Вам не видать!
Проверяйте скорость прогрузки сайта в специальном сервисе Google - https://developers.google.com/speed/pagespeed/
Подробную инструкцию об использовании сервиса, можно прочитать в .
Программирование
Последним этапом перед запуском трафика на лендинг является программирование:
Настройка форм захвата (прием и отправка данных)
Установка счетчиков аналитики
Настройка целей
Установка коллтрекинга
Создание мультилендинга
Отправка данных с форм захвата
Затрагивая данный вопрос вспоминаю свой личный опыт.
Мы проделали огромную работу по анализу, выявлению потребностей и разработки продающего прототипа для кампании по дизайну интерьера. Мы были просто в шоке, когда увидели нулевую конверсию в заявку, с такого крутого лендинга!
А проблема была в том, что мы просто не проверили отправку данных с landing page (хорошо, что мы заметили это через ).
Так что не повторяйте наших ошибок и проверяйте отправку каждой формы! Также советую сразу интегрировать сайт с . Это поможет сразу правильно вести учет клиентов и больше продавать!
Установка счетчиков аналитики и настройка целей
Обязательно сразу нужно устанавливать счетчики Яндекс Метрики и Google Analytics:
Это может сэкономить Вам кучу денег на старте (если, что то будет работать не корректно)
Делать A/B тестирование (данный функционал реализован в Google Analytics)
Если Analytics для Вас слишком сложен, то . Программист сделает за пару минут.
Но нет смысла в аналитических счетчиках без . Именно с помощью них появляется возможность отслеживать конверсию лендинга.
Если в Вашей нише звонков больше, чем заявок, их также можно отследить!
Установка коллтрекинга
Коллтрекинг - это система отслеживания и записи входящих звонков. Принцип его работы заключается в авто подмене номера, в зависимости от источника трафика.
К примеру, человек перешел с .
Когда человек позвонит произойдет переадресация на основной номер, но при этом, в системе отметится состоявшийся звонок с .
Создание мультилендинга
Программисты также могут создать для Вас динамический контент на сайте. Это также называется мультиленингом.
Что значит динамический контент?
В зависимости от заданных условий, содержание страницы может быть разным.
Пример мультилендинга: Дизайн интерьера
На этом лендинге в зависимости от параметров ссылки авто подменяются:
Картинка
Заголовок
Текст объявления
И еще несколько элементов в теле лендинга
В первом случае параметр url подстраивает страницу под ЖК на улице Ярцевской,24.
Во втором случае мы видим уже другой лендинг!
Такие приемы позволяют сильно увеличить конверсию сайта, так сайт перестраивается в зависимости от запроса в .
После того, как лендинг готов остается лишь показать его людям!
Как продвинуть Landing Page?
Для того, чтобы продвинуть лендинг можно попробывать:
Механика привлечения клиентов этих случаях будет разница.
Контекстная реклама для лендинг пейдж
На мой взгляд один из самых эффективных способов привлечения горячего трафика на сайт.
Основная задача: определить какие ключевые слова будут привлекать целевых клиентов из поисковиков.
С помощью неё Вы можете настраивать:
Перед этим необходимо сделать :
Разобрать поведение ЦА в соц сетях
Понять время принятия решения
Для этого самое Важное определить критерий эффективности!
Это могут быть:
Онлайн-консультант
Скаченный прайс
Для этого Вам нужно изучить 3 отчета:
Разберем каждый из них!
Очень полезный отчет. Помогает определить самые кликабельные места landing page.
Узнав такие места, Вы можете раскрыть данный элемент подробнее (при этом поставить отдельную форму заявки), значительно увеличив конверсию Вашего сайта.
Карта скроллинга
Данный отчет показывает самые просматриваемые части Вашего сайта.
Если Вы обнаружили места сайта, которые просто пропускают, советую убрать эти блоки (или поменять на более интересные). Тем самым вырастет вовлеченность аудитории в прочтение информации и увеличится конверсия!
Наверно, самый полезный отчет для повышения конверсии сайта. В удобном виде нам предложено поведение клиента от начала посещения до конверсии по каждой отдельной форме.
На примере видно, что конкретную форму увидело 114 человек. Из них 9 человек взаимодействовали с формой и только один успешно ее заполнил.
Но самое Важное, мы можем отслеживать, какие из полей форм являются отказными.
Достаточно просто убрать лишние поля и конверсия сайта возрастет.
Все остальные отчеты больше полезны для управления трафиком. Ведь от качества трафика также зависит конверсия landing page.
Теперь мы плавно подошли к главному вопросу…
Заказать Landing Page или сделать самостоятельно?
Любой специалист, который разбирается в тонкостях создания лендингов, скажет, что стоит заказать у него. Но я хочу, чтобы Вы сами решили для себя, как лучше.
Давайте разберемся, где можно сделать Landing Page самому.
Сделать Landing Page самому
Есть несколько хороших сервисов, где можно сделать лендинг своими руками:
Данные сервисы работают по принципу конструктора. Достаточно просто загрузить нужные картинки (которые советую заказывать на ) и расположить их на сайте в зависимости от прототипа.
Все это делается без программиста вообще!
Чек-лист для проверки подрядчика по созданию Landing Page
Как они будут проводить конкурентный анализ? Учитывают ли Яндекс Директ, Google Adwords, соц сети при поиске конкурентов
Как будет производится анализ аудитории? Как будут определятся потребности целевой аудитории?
По каким принципам будут создаваться торговые предложение? (Теперь вы знаете 4U, Aida, PMPHS и т.д.)
По какому принципу будут написаны текста
Смогут ли они предоставить тестовый вариант дизайна перед стартом?
Входит ли в цену адаптивная - кроссбраузерная верстка?
Проведут ли оптимизацию сайта исходя из трафика? Как они будут это делать?
В результате данного диалога, вы точно поймете стоит ли с ними работать!
Сравните их ответы с этой статьей и сделайте правильное решение.
Желаю удачи в создании Landing Page!
Надеюсь данная статья для Вас оказалась полезной! Репостните её как памятку на свою страницу и подпишитесь на новые статьи по Landing Page!
Лендинг – специальная страница, которая нужна для того, чтобы подтолкнуть посетителя купить товар или услугу или оставить заявку. Для того, чтобы создать качественный лендинг не нужно быть маркетологом. Это под силу обычному человеку. Сегодня мы расскажем как это сделать.
Коротко: что такое лендинг и для чего он нужен
В отличие от многостраничного сайта, лендинг не имеет сложной навигации, больших пластов текста, баннеров и лишних меню для перехода на другие страницы. Навигация по такому сайту осуществляется либо путем прокрутки, либо посредством специального меню, с помощью которого легко попасть на интересующий пункт на странице.
Синонимы: одностраничный сайт, одностраничник, лендинг пейдж, посадочная страница, 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 настройки, как настроить анти-спам фильтр и т.д. На этот случай предусмотрены обучающие видео. Посмотреть их вы можете по ссылке «Обучение» в верхнем правом углу экрана. Если возникнут какие-нибудь вопросы, смело пишите в службу поддержки. Кроме того, можете также написать в комментариях к этой статье. Обязательно отвечу всем.
Заключение
Сегодня мы рассмотрели наиболее оптимальные площадки для создания собственного одностраничного сайта для продвижения товаров и услуг. Помните о том, что эффективность проекта будет зависеть не только от платформы, но и от правильности расположения блоков, а также размещенной информации.
От автора: я приветствую вас. Landing Page то есть одностраничные сайты вошли в моду сравнительно недавно. В этой статье я постараюсь рассказать, почему они вообще появились и как создать лендинг пейдж самостоятельно?
Почему лендинги стали так популярны?
Сегодня каждый опытный веб-мастер видел уже сотни таких одностраничников. Я видел, наверное, тысячи. Они также имеют другие название: посадочная страница, страница приземления, целевая страница, одностраничник и т.д. Среди вебмастеров наиболее часто используется слово “лендинг” или даже “ленд”. И все прекрасно понимают, о чем идет речь.
Основная причина появления лендингов — их невероятная эффективность при заказе платной рекламы. Дело в том, что однажды специалисты по рекламе пришли к простому выводу — цена конверсии, то есть целевого действия, в разы ниже, если направлять покупной трафик непосредственно на одностраничник, а не на сайт-визитку, каталог товаров в интернет-магазине или какие-то другие места.
Причина этого кроется в том, что на лендингах обычно все максимально оптимизировано под один или несколько товар. Там яркий дизайн, раскрываются все преимущества товара, есть отзывы или даже видео-отзывы. Обычно также туда ставят таймер обратного отсчета, ну и конечно форму, через которую можно заказать товар (а также форму заказа обратного звонка).
JavaScript. Быстрый старт
Таким образом, на лендинге любой товар или услуга смотрятся гораздо привлекательнее, и у потенциального покупателя появляется гораздо большее желание приобрести то, что ему предлагают.
Для чего используют лендинги?
По сути, качество лендинга невозможно абсолютно точно оценить до тех пор, пока на него не начнут заходить первые потенциальные клиенты. Чтобы отследить поведенческие факторы (% отказов, время на сайте, посмотреть вебвизор) обычно ставят счетчик Яндекс.Метрика. Ну ладно, об этом можно говорить долго, а я обещал вам рассказать о том, как создать лендинг своими руками.
Способы создания landing page
Собственно, рассмотрим всего 2 способа. И о первом я скажу совсем чуть-чуть. Он более прост и заключается в использовании платных и бесплатных конструкторов. Минус такого создания очевиден — вы собираете дизайн из неуникальных блоков, а чтобы уникализировать их, понадобятся уже навыки работы с html и css. А еще основы веб-дизайна. В платном конструкторе можно создавать по умолчанию качественные одностраничники, но вам едва ли хватит функционала, чтобы изменить в шаблоне что угодно и переделать все на свой вкус. К тому же для этого, как я уже говорил, тоже нужны знания.
Зашел я однажды попробовать сделать лендинг в платном конструкторе сайтов. И что бы вы думали? Конструктор в итоге сгенерировал мне огромный архив со страницей, где подключены все возможные библиотеки, стили и скрипты. Скорость загрузки была не то что медленной, она была катастрофической, так что даже браузер подвисал.
Итак, наилучший способ создания лендинга если мы говорим о профессиональной разработке на заказ (или себе для рекламы ваших товаров, услуг и т.д.) — создание с нуля. Вот об этом я хотел бы рассказать подробнее.
Этапы создания лендинга с нуля
Планирование структуры одностраничника (какие на нем будут блоки, что в них будет и т.д.), составление ТЗ дизайнеру.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Написание продающего текста. Это очень важный этап, потому что от продающего текста во многом зависит, какая в итоге будет конверсия. Самое главное в таком тексте – УТП, что можно расшифровать как уникальное торговое предложение. Если оно составлено привлекательно, это уже полдела.
Заказ дизайна у веб-дизайнера. В среднем это стоит 1-10 тысяч рублей, в зависимости от сложности и исполнителя.
Верстка лендинга в соответствии с готовым утвержденным финальным вариантом дизайна. Для качественной верстке нужно будет соблюсти много важных требований (адаптивность, валидность, кроссбраузерность, оптимизация скорости загрузки и т.д.)
Создание простой админской части, чтобы владелец одностраничника мог заходить на сайт и отслеживать, были ли сделаны заказы, а также номера телефонов, email адреса клиентов (и другая информация, вводимая в форму). Иными словами, реализовать весь необходимый функционал.
Установка в код необходимых счетчиков. Обычно ставят Яндекс.Метрику. Это позволяет устанавливать цели (например, клик по кнопке обратного звонка, клик по кнопке отправки формы), отслеживать поведенческие факторы и в случае необходимости принимать меры по улучшению лендинга.
Как определить качество лендинга?
Конечно, тут можно долго говорить о скорости загрузки страницы, кроссбраузерности, адаптивности. Но давайте будем честны – в современных реалиях все это должно быть уже по умолчанию.
Собственно, главный показатель качества одностраничника — конверсия. Это соотношение кол-ва целевых действий (заказ товара/услугу) к общему кол-ву людей, зашедших на сайт. Например, если вы купили платную рекламу и по ней на сайт перешло 120 человек, а получили вы 2 целевых действия, то ваша конверсия составляет примерно 1,66%. То есть 1,66% людей будет заказывать ваш товар. Правда, тут нужно оговориться, что 120 посещений и двух заказов недостаточно, чтобы высчитать средний показатель конверсии на сайте. Для этого нужно гораздо больше трафика.
На конверсию влияет все: структура, дизайн, продающий текст и сама его суть (УТП), качество верстки, скорость загрузки, удобство чтения и т.д. Только оптимизировав все по всем фронтам, можно надеяться на отличный результат.
Ну а что делать, если все базовые шаги оптимизации выполнены? На самом деле любой лендинг можно улучшать бесконечно много раз. Например, вы продаете набор инструментов для домашнего мастера. Вы можете все максимально оптимизировать, но конверсию может повысить банальная смена фоновой картинки на первом блоке.
И вы не узнаете об этом до тех пор, пока не протестируете этот вариант одностраничника. Если он повысит конверсию, то оставляете его и ищете следующие способы поднятия CR.
Итог. Какие перспективы открываются перед теми, кто умеет создавать одностраничные сайты?
Лендинги сегодня невероятно востребованы. Именно сейчас, в 2016 году, популярность одностраничных сайтов стала настолько большой, что в последующие 3-4 года будет огромная потребность в них. И если вы умеете создавать профессиональные одностраничники, то наверняка при желании сможете заработать серьезные деньги, разрабатывая лендинги другим, а также для рекламы своих собственных услуг и товаров.
Поэтому уже сейчас можете задумываться о повышении своего уровня в сайтостроении, чтобы уже завтра получить свою долю в этой популярной сегодня нише.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
