От автора: я приветствую вас. Landing Page то есть одностраничные сайты вошли в моду сравнительно недавно. В этой статье я постараюсь рассказать, почему они вообще появились и как создать лендинг пейдж самостоятельно?
Сегодня каждый опытный веб-мастер видел уже сотни таких одностраничников. Я видел, наверное, тысячи. Они также имеют другие название: посадочная страница, страница приземления, целевая страница, одностраничник и т.д. Среди вебмастеров наиболее часто используется слово “лендинг” или даже “ленд”. И все прекрасно понимают, о чем идет речь.
Основная причина появления лендингов — их невероятная эффективность при заказе платной рекламы. Дело в том, что однажды специалисты по рекламе пришли к простому выводу — цена конверсии, то есть целевого действия, в разы ниже, если направлять покупной трафик непосредственно на одностраничник, а не на сайт-визитку, каталог товаров в интернет-магазине или какие-то другие места.
Причина этого кроется в том, что на лендингах обычно все максимально оптимизировано под один или несколько товар. Там яркий дизайн, раскрываются все преимущества товара, есть отзывы или даже видео-отзывы. Обычно также туда ставят таймер обратного отсчета, ну и конечно форму, через которую можно заказать товар (а также форму заказа обратного звонка).
Таким образом, на лендинге любой товар или услуга смотрятся гораздо привлекательнее, и у потенциального покупателя появляется гораздо большее желание приобрести то, что ему предлагают.
По сути, качество лендинга невозможно абсолютно точно оценить до тех пор, пока на него не начнут заходить первые потенциальные клиенты. Чтобы отследить поведенческие факторы (% отказов, время на сайте, посмотреть вебвизор) обычно ставят счетчик Яндекс.Метрика. Ну ладно, об этом можно говорить долго, а я обещал вам рассказать о том, как создать лендинг своими руками.
Собственно, рассмотрим всего 2 способа. И о первом я скажу совсем чуть-чуть. Он более прост и заключается в использовании платных и бесплатных конструкторов. Минус такого создания очевиден — вы собираете дизайн из неуникальных блоков, а чтобы уникализировать их, понадобятся уже навыки работы с html и css. А еще основы веб-дизайна. В платном конструкторе можно создавать по умолчанию качественные одностраничники, но вам едва ли хватит функционала, чтобы изменить в шаблоне что угодно и переделать все на свой вкус. К тому же для этого, как я уже говорил, тоже нужны знания.
Зашел я однажды попробовать сделать лендинг в платном конструкторе сайтов. И что бы вы думали? Конструктор в итоге сгенерировал мне огромный архив со страницей, где подключены все возможные библиотеки, стили и скрипты. Скорость загрузки была не то что медленной, она была катастрофической, так что даже браузер подвисал.
Итак, наилучший способ создания лендинга если мы говорим о профессиональной разработке на заказ (или себе для рекламы ваших товаров, услуг и т.д.) — создание с нуля. Вот об этом я хотел бы рассказать подробнее.
Планирование структуры одностраничника (какие на нем будут блоки, что в них будет и т.д.), составление ТЗ дизайнеру.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Написание продающего текста. Это очень важный этап, потому что от продающего текста во многом зависит, какая в итоге будет конверсия. Самое главное в таком тексте – УТП, что можно расшифровать как уникальное торговое предложение. Если оно составлено привлекательно, это уже полдела.
Заказ дизайна у веб-дизайнера. В среднем это стоит 1-10 тысяч рублей, в зависимости от сложности и исполнителя.
Верстка лендинга в соответствии с готовым утвержденным финальным вариантом дизайна. Для качественной верстке нужно будет соблюсти много важных требований (адаптивность, валидность, кроссбраузерность, оптимизация скорости загрузки и т.д.)
Создание простой админской части, чтобы владелец одностраничника мог заходить на сайт и отслеживать, были ли сделаны заказы, а также номера телефонов, email адреса клиентов (и другая информация, вводимая в форму). Иными словами, реализовать весь необходимый функционал.
Установка в код необходимых счетчиков. Обычно ставят Яндекс.Метрику. Это позволяет устанавливать цели (например, клик по кнопке обратного звонка, клик по кнопке отправки формы), отслеживать поведенческие факторы и в случае необходимости принимать меры по улучшению лендинга.
Конечно, тут можно долго говорить о скорости загрузки страницы, кроссбраузерности, адаптивности. Но давайте будем честны – в современных реалиях все это должно быть уже по умолчанию.
Собственно, главный показатель качества одностраничника — конверсия. Это соотношение кол-ва целевых действий (заказ товара/услугу) к общему кол-ву людей, зашедших на сайт. Например, если вы купили платную рекламу и по ней на сайт перешло 120 человек, а получили вы 2 целевых действия, то ваша конверсия составляет примерно 1,66%. То есть 1,66% людей будет заказывать ваш товар. Правда, тут нужно оговориться, что 120 посещений и двух заказов недостаточно, чтобы высчитать средний показатель конверсии на сайте. Для этого нужно гораздо больше трафика.
На конверсию влияет все: структура, дизайн, продающий текст и сама его суть (УТП), качество верстки, скорость загрузки, удобство чтения и т.д. Только оптимизировав все по всем фронтам, можно надеяться на отличный результат.
Ну а что делать, если все базовые шаги оптимизации выполнены? На самом деле любой лендинг можно улучшать бесконечно много раз. Например, вы продаете набор инструментов для домашнего мастера. Вы можете все максимально оптимизировать, но конверсию может повысить банальная смена фоновой картинки на первом блоке.
И вы не узнаете об этом до тех пор, пока не протестируете этот вариант одностраничника. Если он повысит конверсию, то оставляете его и ищете следующие способы поднятия CR.
Лендинги сегодня невероятно востребованы. Именно сейчас, в 2016 году, популярность одностраничных сайтов стала настолько большой, что в последующие 3-4 года будет огромная потребность в них. И если вы умеете создавать профессиональные одностраничники, то наверняка при желании сможете заработать серьезные деньги, разрабатывая лендинги другим, а также для рекламы своих собственных услуг и товаров.
Поэтому уже сейчас можете задумываться о повышении своего уровня в сайтостроении, чтобы уже завтра получить свою долю в этой популярной сегодня нише.
Современные тенденции и подходы в веб-разработке
Узнайте алгоритм быстрого роста с нуля в сайтостроении
Лучший сервис для создания первого лендинга. Комплект из пары десятков одностраничных шаблонов подскажет наилучшие варианты оформления и подачи предложения. Редактор позволяет в считанные минуты собрать из готовых адаптивных блоков эффективную страницу. Главное - расположить секции в логическом порядке и красиво преподнести оффер. Изображения, табы, таймер для акций, отзывы, наглядная карта, коммуникации, включая заказ обратного звонка, и многое другое присутствует в полном объёме.
Меню лендинга поддерживает анкорные ссылки для быстрого доступа к секциям. Эффект параллакса, широкоформатные блоки с красивой подачей изображений и видеофоны помогут создать насыщенную и полезную страницу. Всплывающие окна позволят акцентировать внимание посетителей на акциях. Бесплатное подключение SSL укрепит доверие клиентов, отправляющих вам личные данные через форму. Оптимальный рецепт: выбираете наиболее близкий по тематике шаблон, заполняете своим контентом и публикуете, ничего структурно не меняя.
Плюсы:
Минусы:
Специализированный конструктор посадочных страниц. Предназначен для тестирования маркетинговых гипотез, арбитража трафика и заработка на офферах веб-предпринимателями. Подходит и новичкам, и опытным пользователям. Редактор позволяет собирать страницы из готовых секций и виджетов, последовательно добавляя их один за другим. Выбор их достаточный: прайс, отзывы, этапы, таймлайн, таймер, таблица, заголовки, кнопка, галерея, свой код HTML, обратный звонок, живой чат, панели соцсетей и прочие.
Эффективные структуры дизайна для уверенных продаж, сдобренные эффектами переходов, корректно отображаются на всех типах экранов. Изюминка сервиса - отличная подача статистической информации. Конверсия в процентах, точки падения продаж, посещаемость по источникам и прочее - всё понятно для новичков и достаточно детально для опытных веб-мастеров. Подключение SSL бесплатное. Добавление всплывающих окон позволит получить ещё больше лидов. Простой в использовании и эффективный конструктор.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
Wix - конструктор для создания лендингов с богатым, разнообразным дизайном и полным набором маркетинговых уловок. Можно нарисовать запоминающийся, уникальный шаблон либо воспользоваться одним из многочисленных готовых вариантов - заполняете своим контентом, и страница готова к публикации. Богатый набор приложений позволит добавить эффекты, таймеры, всплывающие окна, отзывы, интеграции социальных сетей, анимированные счётчики посетителей, подарочные карты, красивые формы обратной связи, сбора подписок, записи на приём и прочее по смыслу задачи.
Богатый набор виджетов, встроенный графический редактор, анимации, наборы иконок, растровых фигур и эффекты скроллинга позволят создать яркий лендинг, претендующий на высокую конверсию. Для работы с клиентской базой имеется встроенная CRM, возможность настройки маркетинговых и триггерных рассылок, для анализа результатов - Google Analytics. Использование Wix Code позволит настроить расписание вывода данных в зависимости от времени суток, региона и прочих вещей. Структура лендинга реализуется через анкорные ссылки на области макета.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
LPGenerator - один из самых мощных специализированных конструкторов лендингов. В принципе, это идеальный сервис в своей нише. Относительная сложность редактора компенсируется огромными возможностями по кастомизации дизайна и функциональности страниц. Более 250 профессиональных шаблонов из 22 категорий. Продуманный и гибкий процесс прорисовки страницы с нуля, можно править код макетов вручную и загружать собственные. Есть витрина товаров с пагинацией - качественный мини-магазин внутри лендинга.
Полный набор инструментов для анализа конверсии и маркетинга (всесторонняя статистика, A/B-тесты, воронка продаж, источники трафика, цели конверсии, CRM, рассылки и прочее) позволяют выжать максимум эффекта со страниц. Редактор визуальный, виджетов очень много, есть удобный конструктор секций, мониторинг версий страницы с анализом конверсии и т. д. Аудитория системы - веб-студии и опытные разработчики. Для новичков есть «Академия лидогенерации» - мощный курс, который окажется полезным большинству пользователей.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
uCoz - удачный выбор для продвинутых разработчиков. Позволяет работать с кодом, есть конструктор шаблонов, в котором легко выстроить блочную структуру одностраничника. Для новичков наилучший вариант - использование премиум-шаблона, их очень много и там всё есть: красивый дизайн, правильная структура, функциональность (формы, заказ чего-либо, витрина и т. д.). Кроме того, продвинутая система сбора статистики поможет отслеживать эффективность страницы и продвигать, ведь контекстную рекламу можно контролировать прямо из панели управления.
Редактор поддерживает подключение сторонних PHP-скриптов и загрузку собственных шаблонов. При наличии опыта собрать лендинг - дело 1-2 вечеров. Сервис поддерживает синхронизацию с социалками, онлайн-чатами, конструкторами форм, калькулятором услуг и прочими полезными штуками. Кастомизация страниц происходит, в основном, через правку кода, хотя визуальный редактор тоже есть. Это вариант для тех, кто знает, как нужно верстать лендинги либо новичков, желающих опубликовать страницу на основе подарочного премиум-дизайна.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
PlatformaLP - специализированный конструктор посадочных страниц. Около полусотни классных шаблонов, куча стандартных виджетов, а также профильных вроде счётчиков/вкладок/декораций/спойлеров и визуальный редактор, позволяющий гибко отрегулировать структуру, содержимое каждой секции страницы для десктопного и мобильного формата в отдельности. Есть корзина - можно продавать онлайн. Поддерживается вставка HTML-кода, а также интеграция сторонних сервисов - Bitrix24, amoCRM, GetResponse, RoboKassa, MailChimp, Яндекс.Касса, JustClick, Mailer, Unisender, SendPulse и LeadVertex.
Поддерживаются мультилендинги: можно создать несколько вариантов посадочной страницы для демонстрации в различных регионах. Эффективность можно измерять A/B-тестами, аналитические данные получать от Google или Яндекса. Ещё можно добавить реакции лендинга на поведение посетителя - всплывающие окна различного содержания при уходе со страницы, прокрутке до футера, повторном заходе, подачи заявки, заполнении формы и т. д. Основано это на работе с Cookie (сообщение на согласие их использования есть). Можно включить lazy load для изображений (ускоряет загрузку страниц), добавить анимации, использовать Google Fonts.
Плюсы:
Минусы:
Стоимость за месяц:
Пакеты расширения для бизнес-планов:
Сервис, хорошо приспособленный для сборки посадочных страниц. Два десятка профильных шаблонов хорошего качества, удобный визуальный редактор плюс возможность бесплатной публикации лендинга на своём домене. Набор виджетов и готовых блоков достаточен для публикации страниц классической структуры, а в меру гибкая кастомизация поможет украсить дизайн. Можно просто заменить стоковый контент в секциях шаблона своим и публиковать страницу.
Поддерживаются интеграции 16 полезных сервисов (PayPal, Google, MailChimp и др.), стандартные SEO-настройки и приём онлайн-платежей. Значительно изменить стоковый шаблон можно при помощи инструментов дизайнера, идущих в комплекте. Новичкам пригодится шпаргалка прогресса сайта со списком задач и ссылками на области панели управления, в которых они решаются. Также есть эффекты, возможность командной разработки, гибкая настройка шрифтов и языков сайта. Всё это упаковано в приятный и простой интерфейс.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
LPMotor - специализированный сервис, предлагающий создание посадочной страницы с нуля, готовых блоков либо с использованием адаптивных шаблонов (около 100 штук, качество отличное). Визуальный редактор позволяет редактировать каждый элемент в отдельности, регулировать позиции, комбинировать в произвольном порядке блоки, секции и шаблоны секций, детально настраивать их внешний вид, создавать переходы между блоками (скос, закругление, угол), добавлять эффекты, а также скрывать отдельные блоки от показа на ПК или мобильных устройствах. Удобен для новичков.
Есть встроенная CRM хорошего качества, возможность тестирования вариантов одной и той же страницы (A/B-тест) и автоворонка продаж - интерфейс для настройки автоматических действий в случае выполнения пользователем заданного сценария (заполнил форму - получил письмо и т. д.). Поддерживаются всплывающие окна и множество интеграций: Jivosite, VK, Facebook, MailChimp, UniSender, GetResponse, Яндекс.Касса/Деньги, JustClick, amoCRM, PayPal, RoboKassa, Bitrix24, Yagla и прочее. Встроенная система сбора статистики приличная. Можно настроить получение уведомлений о заявках по SMS на почту или в Telegram. Есть анти-спам.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
Стоимость подключения автоворонки продаж (пробный период - 7 дней):
Flexbe - сервис, рассчитанный на сборку посадочных страниц только из готовых блоков. Подходит для новичков. Шаблонов около 20 штук, качество хорошее, блоки адаптивные. Для каждой секции можно выбрать набор отображаемых элементов и немного подкрутить дизайн. Готовых секций достаточно для сборки лендинга классической структуры. Доступно несколько шрифтовых пар для быстрой смены, есть эффекты параллакса и отдаления, настройки градиента и затемнения, поддерживаются якоря в меню. SSL подключается
автоматически при добавлении домена. Можно вставить свой HTML-код на страницу.
Сервис поддерживает интеграцию приложений базовой важности (amoCRM, Bitrix24, CallbackHunter, Jivosite, GetResponse, UniSender), создание мультилендигов/геолендингов и предоставляет доступ к API. Приём онлайн платежей возможен через Яндекс.Касса, RoboKassa и карту Тинькофф. Можно подключить почтовые сервисы Google, Mail.ru и Яндекс. Кроме того, есть встроенная CRM среднего уровня и система сбора статистических данных. Можно настроить формат показа страницы при шаринге в социальных сетях. Присутствует мобильное приложение iOS/Android и настройки появления всплывающих окон.
Плюсы:
Минусы:
Стоимость за месяц при оплате за год:
Mobirise - бесплатная программа (Mac, Windows, Android), позволяющая собирать посадочные страницы из готовых блоков. Шаблоны представлены расширениями - платными наборами ($20-40) блоков, заточенных под конкретную задачу (бизнес, магазин, юрист, портфолио, ресторан и т. д.). Из коробки даётся 4 бесплатных шаблона. Также есть расширения для добавления интеграции социальных сетей и средств комментирования, перводчик, Soundcloud, Google Analytics, SEO-инструменты, а из платных - пакет иконок, корзина с оплатой через PayPal, редактор кода страниц и слайдер изображений.
Набор блоков (количество, структура, назначение) зависит от выбранного шаблона. Каждую секцию можно настроить, выбрав отображаемые элементы, цвета, эффекты, размеры и прочее. В целом, даже на бесплатном шаблоне блоков множество - их хватит с лихвой для сборки нормального лендинга со всеми фишками (отзывы, преимущества, колонки, табы, таймлайны, таймер, мультимедиа, прайс, карта, социалки и всё остальное). Страницы получаются адаптивные по умолчанию. Базовые SEO-настройки присутствуют. Для публикации страниц нужно купить хостинг и домен. Рекомендуем обратить внимание на пак со всеми платными расширениями.
Плюсы:
Минусы:
Стоимость:
Цель посадочной страницы - заинтересовать посетителя и подтолкнуть к совершению запланированного вами действия. Исходя из этого тезиса нужно выстраивать блоки в порядке, ведущем к максимальному эффекту в вашем конкретном случае. Любой из вышеописанных конструкторов лендингов способен реализовать эту формулу. Иногда можно просто заменить демо-контент шаблона своими данными, получив хорошую страницу, - структура этих дизайнов не с потолка берётся, их собирают со знанием дела.
Тем не менее, существуют общепринятые направляющие, по которым собирают лендинги. Уже всё выверено давно - что работает, а что нет. Хотя для каждого конкретного случая нужно тестировать индивидуально, шлифуя нюансы до блеска (поменяли местами кнопки/блоки, цвет акцента, основной шрифт, формулировку оффера, количество полей в форме, расположение блока социалок - всё это может играть роль, нужно искать удачное сочетание). В целом, схема создания лендинга во всех конструкторах примерно одинакова:
Характер и порядок секций имеет огромное значение. Суть в том, что по мере листания страницы посетитель должен заразиться желанием последовать вашему предложению. И сделать это. А какие же блоки использовать для достижения цели? В каком порядке? 100% рецепта успеха любой страницы из любой ниши не существует, но кое-что можно обозначить:
В зависимости от характера вашего предложения можно использовать расписания мероприятий, меню блюд, ответы на популярные вопросы, фото команды, корзину с витриной и прочее. Важно соблюдать анатомию страницы. Например, меню кафе - это часть оффера, должна идти в чуть выше середины страницы, фото команды - ближе к футеру, как и FAQ. Всё по логике, но суть одна.
Благодаря конструкторам, любой человек может быстро опубликовать лендинг, способный приносить доходы. Дело не только удобстве формата, но и в других нюансах: правильные шаблоны, подогнанная под решение задачи функциональность, удобство сбора статистики, наличие техподдержки, FAQ и прочего.
Оптимальными для большинства новичков будут uKit, uLanding и Wix - в них получаются хорошие лендинги. Недорого, быстро и красиво. Самый мощный профильный сервис - LPGenerator. Идущие следом PlatformaLP и LPMotor несколько уступают ему. uCoz может всё хорошо, и лендинги в том числе. Ucraft - неплохой вариант, Flexbe приятен и простоват, Mobirise - на любителя.
Не стоит рассчитывать на бесплатную публикацию полноценного лендинга. Какой бы вы сервис не выбрали, оплатите подходящий тариф - это даст кучу преимуществ, избавит от проблем и увеличит конверсию, в итоге. Универсального рецепта идеальной страницы не существует, но вы можете ориентироваться на средневзвешенную структуру и получать хорошую прибыль.
Настоящая Политика конфиденциальности персональной информации (далее - Политика) действует в отношении всей информации, которую ООО "Сайтмаркет" (далее – Поставщик) может получить о пользователе во время использования им любого из сайтов Поставщика (далее - Сайты). Использование Сайтов означает безоговорочное согласие пользователя с настоящей Политикой и указанными в ней условиями обработки его персональной информации. В случае несогласия с этими условиями пользователь должен воздержаться от использования Сайтов.
1. В рамках настоящей Политики под «персональной информацией пользователя» понимается персональная информация, которую пользователь предоставляет о себе самостоятельно при регистрации (создании учётной записи) или в процессе использования Сайта, включая персональные данные пользователя.
2. Поставщик собирает и хранит только те персональные данные, которые необходимы для оказания услуг (исполнения соглашений и договоров с пользователем).
3. Персональную информацию пользователя Поставщик может использовать в целях: идентификации стороны в рамках соглашений и договоров, предоставления пользователю персонализированных услуг, а также связи с пользователем, в том числе направление электронных писем, SMS и других уведомлений, запросов и информации, касающейся оказания услуг.
4. В отношении персональной информации пользователя сохраняется ее конфиденциальность. Поставщик вправе передать персональную информацию пользователя третьим лицам только для улучшения оказания услуг пользователю.
5. При обработке персональных данных пользователей Поставщик руководствуется Федеральным законом РФ «О персональных данных».
6. Пользователь может в любой момент удалить предоставленную им в рамках определенной учетной записи персональную информацию. При этом удаление аккаунта может повлечь невозможность использования некоторых возможностей Сайтов.
7. Для удаления своего аккаунта пользователь может воспользоваться функцией «Отписаться от рассылки», содержащейся в каждом электронном письме, направляемом Поставщиком пользователю, либо отправить запрос на электронную почту Поставщика support@сайт . Также пользователь должен очистить cookie и кэш браузера.
8. Поставщик принимает необходимые и достаточные организационные меры для защиты персональной информации пользователя от неправомерного или случайного доступа, уничтожения, изменения, блокирования, копирования, распространения, а также от иных неправомерных действий с ней третьих лиц.
9. Поставщик имеет право вносить изменения в настоящую Политику. При внесении изменений в актуальной редакции указывается дата последнего обновления. Новая редакция Политики вступает в силу с момента ее размещения..
Создание landing page упрощает путь человека к цели и одновременно приносит прибыль компании, продающей нужный пользователю товар или оказывающей необходимую услугу. Так происходит, потому что одностраничник воздействует на инстинктивном уровне, мотивируя человека позвонить, купить, кликнуть. Посадочную страницу можно разработать самостоятельно, сэкономив при этом время и деньги. Потому владельцы бизнеса задаются вопросом: как сделать лендинг пейдж?
Имеется четыре пути создания landing page:
Landing page рассматривается с трёх точек зрения:
Чтобы разработать посадочную страницу правильно самому надо придерживаться правил.
Часто заголовок называется оффер, так как он включает предложение, адресованное потенциальному клиенту. От заголовка зависит первое впечатление от страницы, потому ему следует уделить особое внимание. Второго шанса произвести первое впечатление на посетителя не будет.
Если нужно пояснить заголовок или указать преимущества – используют подзаголовок.
Это важный момент, так как landing page доносит до посетителей только одну цель. В противном случае он не эффективен.
Выделенные выгоды заинтересуют посетителя. Предложение покажется ему более заманчивым. Подобный приём призван убедить заказать услугу компании и начать сотрудничество. Выгодность предложения должна преподноситься просто и на доступном языке.
Необходимо продемонстрировать посетителю, что именно он важен. Для этого надо писать «Вы» или использовать другие способы персонализации.
Сведения нужно структурировать. Пришедший на посадочную страницу человек не заинтересуется длинными списками, необходимо представить чёткий и доступный текст, который посетитель легко воспримет.
Нельзя перенасыщать дизайн landing page графикой или текстом: между ними должен быть оптимальный баланс.
Продающая страница обязательно должна включать отзывы клиентов, сертификаты. Оптимальные вариант – если их будет несколько. Социальные доказательства укрепляют репутацию компании и увеличивают лимит доверия к ней.
Правильно сделанный landing page включает СТА или мотивирует к действию. Подобный призыв должен быть в хедере и в конце лэндинга. Иногда размещается с лид-формой.
Текст СТА-кнопки должен звучать так, как будто посетитель лэндинга произносит его в голове или озвучивать пожелание пользователя.
Самостоятельно разработанный landing page содержит лид-форму. Она делается простой и не вызывающей вопросов, так как важно сотрудничество с потенциальным клиентом или его контакты.
Незаменимая составляющая лэндинга – счётчик, который привносит срочность и побуждает сделать выбор быстро.
Дизайн landing page рассказывает о предоставляемой услуге. Лэндинг ориентируется на целевую аудиторию.
Для тех, кого интересует, как создать лендинг пейдж с нуля существуют шесть программ, позволяющих это сделать самостоятельно и нет необходимости приходить обучение.
Работать с этими программами и создавать уникальный дизайн просто: надо взять изображение, перетянуть в нужное место, добавить кнопки и посадочная страница практически готова.
Часто продающая страница делается на WordPress. Особенности плагина для подобной CMS:
Посадочная страница на WordPress позволяет быстро и недорого обеспечить поток клиентов. Существует девять модулей для разработки страниц захвата на движке WordPress:
С помощью этого плагина написать одностраничник под силу человеку не знакомому с главными html-тегами. Редактор работает без кодирования, нужно только перетянуть элементы куда требуется, создав при этом неповторимый дизайн.
В каталоге есть более 122 шаблонов с высокой конверсией, необходимо лишь выбрать подходящий. Инструмент позволяет писать лендинги, у которых будет уникальный дизайн благодаря имеющейся функции перетаскивания элементов. Адаптированный лендинг генерируется автоматически и одинаково хорошо функционирует на различных типах устройств.
Гарантированно высокая конверсия, так как все шестьдесят шаблонов уже опробованы. Основное здесь – правильно оформить лэндинг. Настройка оформления производится своими руками. Возможность самостоятельной настройки делает одностраничник пригодным для длительного использования.
Отличный выход из положения для компаний с небольшим бюджетом, так как платить за его использование не надо. Любое изменение продающей страницы можно проверить с помощью статистики, что позволяет создать одностраничник с максимально высокой конверсией.
Позволяет быстро написать одностраничный сайт, у которого будет адаптированный под компьютеры и мобильные устройства дизайн.
Посредством этого инструмента можно в считаные минуты сделать одностраничник в WordPress автоматически настроенный под поисковик. При внесении изменений на странице результаты видны сразу.
Плагин позволяет создать продающую страницу с нуля или с использованием шаблона. Предоставленные шаблоны бесплатные, их можно редактировать.
Слабее, чем предыдущие, но с его помощью можно создать посадочную страницу с ключевыми составляющими.
Плагины на WordPress позволяют создать одностраничник за 1 вечер с нуля, но не все из них распространяются бесплатно.
Платные инструменты имеют большее количество функций, поэтому их целесообразно применять, если необходимо реализовывать продукт. Для тестирования спроса на услугу или товар подойдут бесплатные сервисы: WordPress Landing Pages или Ultimate Landing Page.
Программы Adobe Muse, Microsoft Expression Studio, Serif WebPlus, WebSite X5, WYSIWYG Web Builder, Axure RP Pro позволяют самостоятельно создать лэндинг, писать при этом коды и знать язык программирования не надо.
Здравствуйте, друзья. В этой статье я дам вам пошаговую инструкцию, как сделать лендинг самому — бесплатно и профессионально. То есть ваш лендинг будет выглядеть действительно красиво, не хуже, чем у конкурентов. Перед началом работы можете, кстати, от руки прописать .
Здесь мы рассмотрим вариант бесплатного создания лендинга из html шаблона. Кстати, ваш лендинг будет на 100% адаптивным подо все мобильные устройства. А это сегодня важно.
Итак, вот пошаговый план самостоятельного создания лендинга:
И прежде всего давайте скачаем основу для нашего будущего лендинга — готовый профессиональный html шаблон.
Вообще, лендинги — это не такая уж и таинственная штука. Это просто отдельная страница в интернете, на которой вся информация «заточена» под конкретное целевое действие посетителя. В отличие от обычных сайтов, у одностраничников, как правило, нет меню и ссылок на другие разделы сайта (хотя бывают и исключения).
То есть все, что вам надо сделать — это найти подходящий html шаблон, и отредактировать его под свои нужды. Что делать с этой страницей потом, мы разберемся ниже. А сейчас — скачайте например . С ним мы и будем работать.
Когда скачаете — откройте папку «blue» и внутри вы найдете несколько файлов с расширением html. Кликните два раза на тот, который называется index.html.
В вашем браузере откроется шаблон, как он выглядит сейчас. Согласитесь, неплохо?
Теперь нам надо его отредактировать. И удобнее всего это делать с помощью программы Notepad++ . Скачайте её и установите себе на компьютер.
Первое, что мы сделаем — это поставим нормальную картинку на главный экран нашего лендинга. Вам надо найти большое изображение, которое подходило бы под вашу тематику. Для этого зайдите, например, на Яндекс-Картинки, и введите свой запрос.
Укажите размер файла «Большой». Пока для тренировки можете скачать . Мы как будто делаем лендинг для профессиональных юридических услуг.
Теперь копируйте это изображение в папку «images». Поменяйте его название на «banner.jpg». То изображение, которое уже называется «banner.jpg» в этой папке, переименуйте во что-нибудь другое.
Обновите страницу с лендингом в вашем браузере. У вас теперь должно выглядеть, как на скриншоте ниже.
Если выглядит что-то не так, то проверьте, правильно ли вы написали называние изображения, и точно ли вы скопировали картинку туда, куда надо.
Если все ОК, то переходим к редактированию текста.
Кликайте правой кнопкой мыши по файлу «index.html» и выбирайте «Открыть с помощью — Notepad++».
Перед вами откроется исходный код нашего шаблона, во всей его красе. Если вы раньше не имели дела с html, то вас этот вид может немного напугать — много циферок, буковок и непонятных значков. Но ничего страшного тут на самом деле нет. Нам надо просто заменять текст, который написан черным цветом.
И давайте сразу отредактируем главный экран нашего лендинга. Он самый важный, и конверсия в заказы будет на 80% зависеть именно от него.
Сначала поменяем заголовок. Вместо «Alpha» напишем что-нибудь по нашей теме. Напоминаю, что тут мы продаем юридические услуги. Значит можно сформулировать это примерно так: «Срочная подготовка и сдача налоговой декларации для вашего бизнеса». Вставляем этот текст вот сюда, между тегами
:После этого сохраняем документ, и обновляем лендинг в браузере. Получаем следующее:
Получилось не очень симпатично, потому что заголовок большой, и растянулся на весь экран. Попробуйте после слова «налоговой» вставить тег
. Он сработает как разрыв в предложении, и часть текста перенесется на новую строку. Мне кажется, что так получится лучше.
Далее меняем подзаголовок. Чтобы посетитель сразу получил тот минимум информации, который необходим для заказа — прописываем наши конкретные предложения. Например: «Подготовка и сдача отчетности за 4 рабочих дня. Отчет УСН — от 5400р. ЕНВД без сотрудников — от 2100р.» Вставляем этот текст вот сюда:
Теперь меняем текст кнопок таким же образом. Пишем на белой «Заказать», на прозрачной — «Подробнее».
В итоге у нас получается вот такой главный экран лендинга:
Все вроде бы неплохо, но мне, например, кажется, что фон у нас слишком светлый, и белые буквы на нем теряются. Предлагаю наложить более темный фильтр на картинку. Для этого переходим в папку «assets -> css ->images» и меняем названия у двух файлов, которые там расположены.
Более светлый называем, например «overlay2.png», а более темный — просто «overlay».
После этого опять сохраняем наш html шаблон и обновляем страницу в браузере. На мой взгляд, так выглядит уже намного лучше:
Единственное, с чем у вас могут возникнуть сложности — это с формой подпиской в самом низу лендинга. Это надо регистрироваться в каком-нибудь сервисе рассылок, генерировать форму, вставлять её в лендинг и прочее.
Предлагаю решить эту проблему просто — вместо формы подписки укажите ваш телефон. Так вы получите больше конверсий/заказов.
То есть просто удаляйте всю форму и пишите в заголовке ваш номер телефона:
Не забудьте скачать мою книгу . Там я показываю вам самый быстрый путь с нуля до первого миллиона в интернете (выжимка из личного опыта за 10 лет =)