Не каждый посетитель, попавший на ваш сайт, совершает целевое действие, потому что ему не хватило аргументов, стимулов или не привлек сайт. Толчком для нужных действий пользователя может стать правильный лендинг. Расскажем, какой лендинг будет работать на вас, а также дадим готовый to-do list для создания удачного лендинга.
Чем лендинг отличается от сайта?
Лендинг - это посадочная страница с призывом что-то сделать: подписаться на рассылку, купить товар или оставить заявку на услуги. Обычный сайт перегружен информацией. Лендинг работает с конкретной целью и ведет посетителя за руку до момента, когда он совершит целевое действие. На лендинг направляют рекламный трафик.
Хорошим показателем конверсии для сайта считается 2-3 % от всех посетителей. Для лендинга эта цифра - 14-15 %. Такого результата помогают добиться кнопки с призывом к действию.
Принципы успешного лендинга
Есть несколько приемов, которые помогают привлечь и удержать внимание посетителя.
Принцип первого экрана или Above The Fold . Газеты продают сложенными вдвое, поэтому титульная страница делится на видимую и невидимую часть. Если заголовок или фотография на видимой части привлекают внимание, хочется купить газету и дочитать до конца.
С лендингом та же ситуация: читатель должен с первого экрана заинтересоваться и понять, нужно ли ему скроллить дальше. Поэтому особое внимание уделите первому экрану. Он не должен быть перегружен информацией, но в то же время должен содержать самую суть. Самая главная кнопка для целевого действия как правило размещается на первом экране и повторяется ближе к концу лендинга.
Scannability и структура . Люди хотят быстро получить информацию, поэтому лендинг должен быть четко структурированным и понятным. Для этого информацию делят на смысловые блоки, используют подзаголовки, списки, иллюстрации и цитаты.
Учет тепловой карты страницы . Важные смысловые блоки расставляют на виду так, чтобы пользователь находил нужные элементы на привычном месте. Есть несколько моделей поведения на сайте, актуальные из которых: Z-Pattern и Guttenberg Pattern
Z-Pattern на примере Фейсбука. Пользователи подсознательно знают, что кнопка действия находится в правом нижнем углу.
Диаграмма Гутенберга делит экран на четыре части. В левой верхней читатель ищет самую важную информацию и смотрит на нее в первую очередь. В правой нижней принимает решение, здесь ставят кнопку заказа или призыв к действию.
Доступная навигация . Лендинг - это длинная страница. Чтобы пользователю было удобно сориентироваться и найти нужное, в шапке размещают ссылки на важные блоки.
Call-to-action элементы . Призыв к действию - логическое завершение длинного пути, который переводит читателя на новый этап воронки продаж. На лендинге размещают кнопки подписки или покупки, ссылки на товар и формы для электронной почты. На принятие решения влияют форма и цвет кнопки, ограниченное предложение («Осталось три места на вебинаре») и место размещения.
Контакты на видном месте . Некоторые пользователи не хотят читать, им нужно задавать вопросы, поэтому форма обратной связи, почта и телефон должны быть всегда под рукой.
Принцип A/B тестирования. Иногда оказывается, что если поменять текст на странице или переместить кнопку заказа на два сантиметра выше, то пользователи охотнее совершают целевое действие. Поэтому на лендингах используют разные гипотезы и тестируют их на отдельных группах посетителей. Нет универсального рецепта, нужно пробовать и менять структуру в зависимости от результатов.
Как создать лендинг?
Хорошо, если в компании уже работают копирайтер, дизайнер и верстальщик, которые понимают задачи лендинга и могут разработать идеальную страницу. Если нет, самым эффективным решением будет заказать лендинг у фрилансеров. Выбрать исполнителя можно в том числе и на Kwork .
Выбирая исполнителя на Kwork, обратите внимание на основные параметры предложений фрилансеров: какая работа и в каком объеме входит в кворк, за какую цену и срок будет сделана. Предложения продавцов отсортированы по рейтингу, который основан на реальных отзывах, ответственности, качестве и других внутренних алгоритмов системы. Рейтинги, отзывы, портфолио значительно упрощают выбор исполнителя.
В фильтре можно отметить дополнительные услуги, например, размещение лендинга на хостинг, адаптивный дизайн, установка формы связи, чтобы заказать их у одного продавца.
Достаточно выбрать нужную услугу, оплатить, при необходимости скорректировать задачу прямо в заказе и получить качественный результат в срок.
To-do list для заказчика по созданию лендинга
Создание лендинга делится на следующие этапы:
- продумывание структуры лендинга
— создание примерного плана, который станет основой ТЗ для дизайнера и копирайтера;
- Закажите сбор и анализ конкурентов. Сравните себя с конкурентами и международными лидерами в вашей нише. Выпишите ваши конкурентные преимущества, а также “фишки”, которые можно позаимствовать у конкурентов.
- Ответьте для себя на вопрос, что должен совершить пользователь после прочтения посещения лендинга? Это будет целью лендинга. Эту цель обязательно нужно обозначить перед исполнителями
- написание контента - текст, который будет «продавать» продукт. Основная рабочая схема написания текста “Боль клиента — Усиление боли — Идиллия — Решение — Предложение сделки”;
- дизайн - создание полного макета. Подробнее про дизайн мы написали чуть ниже;
- верстка - оформление сайта в соответствие с его функционалом и макетом дизайнера;
- программирование - реализация необходимого функционала сайта;
- настройка рекламы - запуск контекстной рекламы для генерации трафика на ваш лендинг.
Все эти услуги можно заказать на Kwork не только через магазин услуг, но и через Биржу . На бирже вы создаете заявку на услугу — описываете, что нужно сделать и какой у вас бюджет, и компетентные исполнители сами откликаются на вашу заявку. Вы выбираете наиболее подходящего для вас исполнителя и работаете с ним через безопасную сделку на Kwork.
При работе с дизайнером и верстальщиком нужно учесть следующие моменты:
- Макет и прототип страницы - согласуйте основные блоки, структуру и путь читателя от элемента к элементу.
- Логотип - если у компании еще нет логотипа, самое время добавить его на лендинге, чтобы сделать бренд узнаваемым.
- Шапка для сайта - с информацией о продукте, логотипом и навигацией.
- Иллюстрации - хороший дизайнер не будет наполнять страницу фотографиями с фотостока. Он отрисует иллюстрации самостоятельно или запросит у вас качественные изображения технологического процесса или продукта.
- Кнопки с призывом к действию - дизайнер поможет определиться, какие CTA-элементы нужны на странице и где их расставить.
- Форма обратной связи - это может быть номер телефона, кнопка «Перезвоните мне» или значок онлайн-чата в углу страницы.
- Иконки - помогают читателю разделить блоки и визуально выделить важное.
Представляет собой сайт, чаще всего состоящий из одной страницы, позиционирующийся как высоко конвертируемый или хорошо продающий. Лендинг может состоять из нескольких страниц, но в классическом понимании это одностраничный ресурс. Именно в этом заключается особенность продвижения лендинга. Одностраничный сайт призван оказывать влияние на основные человеческие инстинкты, подталкивать пользователя к совершению мотивированных действий: набрать номер, кликнуть, оформить заказ, приобрести товар в данный момент.
Лендинги являются составной частью рекламных кампаний определённого товара или предложения с «горячей» ценой, а также используются для привлечения целевой аудитории из источников контекстной рекламы "Гугл Эдвордс", "Яндекс. Директ", социальных сетей и почтовых рассылок.
Что это такое?
Landing Page - это независимая страничка, способствующая:
- распространению отдельной услуги или продукта;
- формированию подписной базы.
При формировании лендинг-пейдж следует применять различные триггеры воздействия, которые будут «подогревать» пользователя к стремительному принятию решения (совершение покупки, внесение информации для получения бонуса, изучение курса, просмотр вебинара и прочее).
Со стороны пользователя Landing Page - это страничка, на которую он попадает после нажатия на изображение, информер, рекламное объявление и прочее. Лендинговая страница совершенно непохожа на интернет-магазин, поскольку для реализации конкретного продукта или проведения рекламной акции оформляется собственная страничка с использованием различных триггеров воздействия.
Разновидности лендинг-пейдж
- Самостоятельный. Это наиболее распространённый вид одностраничного сайта. Его ключевой задачей является подзадоривание пользователя к приобретению продукта/услуги либо совершению любого другого шага, рекомендуемого ресурсом.
- Микросайт. Это сайт (чаще всего отдельно от основного) максимум на 5 листов, включающий в себя сведения о товаре либо услуге.
- Основной портал. В качестве посадочной применяется одна и больше страниц ресурса.
- Лендо-сайт. Он представляет собой портал, целиком состоящий из самостоятельных целевых страничек.
Способы создания Landing Page
Лендинг можно сделать несколькими способами:
- Бесплатные генераторы и шаблоны. На сегодняшний день в Интернете представлено огромное количество различных конструкторов и шаблонов, с помощью которых можно с лёгкостью сформировать любой лендинг-пейдж. Наиболее прославленным сервисом создания и продвижения лендинга является LPgenerator. Такой способ идеально подходит для организаций, которые ограничены в бюджете, но в штате есть эксперты, понимающие в дизайне и маркетинге.
- Помощь профессионалов. Задачу по созданию и SEO-продвижению лендинг-пейдж можно делегировать. К примеру, контент заказать у копирайтера, оформление - у дизайнера, а интеграцию с движком - у разработчика программного обеспечения. При этом на предприятии должен быть маркетолог, способный осуществлять контроль проекта на всех его стадиях. К плюсам такого способа относится в первую очередь низкая стоимость и отличный результат, поскольку каждый этап будет выполнять профессионал. К минусам можно причислить то, что высок риск неправильного подбора экспертов.
- Специализированные агентства. Этот метод создания лендинг-пейдж предполагает обращение в организацию, которая все задачи возьмёт на себя: изучение конкурентов, подбор концепции, составление рекламной кампании, уладит все задачи по интеграции и реализует проект. От заказчика лишь потребуется заполнить бриф на разработку, а созданием и продвижением лендинга под ключ займётся организация. К плюсам сотрудничества с агентством относятся результативность и экономия времени, из минусов - сравнительно высокая стоимость.
- Штатные сотрудники, которые будут отвечать за оформление и продвижение лендинга. Это очень затратный, но в то же время действенный способ. Своя команда, состоящая из копирайтера, дизайнера, разработчика программного обеспечения и маркетолога, сможет в полной мере воплотить и продвинуть проект.
Можно ли самостоятельно оформить Landing Page
Создать своими силами посадочную страницу вполне возможно, для этого нужно иметь некоторые знания в области веб-разработки, аналитики и дизайна. Впрочем, если таковых умений нет, то можно прибегнуть к помощи специальных сервисов (о них говорилось выше), предлагающих уже готовые шаблоны, где только остаётся вписать текстовку и настроить хостинг и домен.
Создавая лендинг-пейдж своими силами, можно сберечь время и средства. В Интернете можно найти источники с шаблонами разных тематик, с комплектом руководств по быстрой установке и программным обеспечением, позволяющим вносить исправления.
Можно ли сделать лендинг бесплатно
Поскольку заинтересованность в лендинг-пейдж изо дня в день растёт, создатели тоже не стоят на месте, предлагая пользователям свежие идеи и инструменты на основе шаблонов. Перечень бесплатных ресурсов:
- Создать лендинг-пейдж можно на сайте setup.ru после простого процесса регистрации.
- С помощью программного продукта Adobe Photoshop.
- Воспользоваться конструктором KompoZer.
Последний вариант лучше всего подходит тем, у кого имеются лишь минимальные навыки в этой области, и они не хотят терять время на освоение непростых систем программирования. Кроме того, можно воспользоваться бесплатным пробным периодом популярных конструкторов lpgenerator.ru и wPPage.
Оптимизация лендингов
Разработка лендинга - это лишь часть успеха, важно правильно его оптимизировать. У одностраничных ресурсов есть один, но довольно весомый недочёт - их очень непросто обнаружить поисковым системам. Полноценные сайты обладают уникальными заголовками, целостной структурой с информацией об объёме страниц, грамотной перелинковкой и прочим.
Структура одностраничника не позволяет выполнить качественную внутреннюю оптимизацию в привычном понимании, то есть «заточить» интернет-ресурс под запросы поисковиков. Решить эту проблему позволила вёрстка от Google с применением JavaScript и способа PushState.
Что для этого нужно?
Для оптимизации лендинга необходимо выполнить следующее:
- Лендинг разбить на несколько блоков.
- Каждый из них должен иметь собственный оригинальный индикатор, текстовку, наименование, заголовок и URL.
Другими словами, блоки должны обладать теми же свойствами, которые есть у любой отдельной страницы полноценного портала. В этом случае робот будет расценивать посадочную страницу как несколько уникальных. Посетители этот момент вряд ли уловят, только наиболее бдительные заметят, что в процессе скроллинга в строке меняется URL и title. Но тут следует понимать, что для осуществления этих действий потребуются определённые познания в сфере SEO и вёрстки с JavaScript.
Как сделать популярной созданную страницу? Продвижение лендинга в поисковых системах или SEO своими силами - вполне выполнимая задача, несмотря на то, что зачастую случается слышать, что поисковые системы плохо относятся к одностраничным сайтам. На самом деле всё не совсем так. Если страница соответствует определённым условиям и будет содержать максимальное количество информации о реализуемом продукте/услуге, то можно добиться отличных результатов СЕО-продвижения лендинга.
Конечно, как и в любой области, здесь существует несколько "но". В первую очередь, многое будет обуславливаться конкурентоспособностью выбранной тематики. Если для торговли с помощью лендинга был подобран раскрученный товар, для которого уже существует большое количество интернет-магазинов и сайтов, то в этом случае продвижению лендинга не смогут помочь даже огромные бюджеты.
Что нужно делать?
Но это всё особенности, а если перейти к стратегии продвижения посадочной страницы, то здесь всё можно расписать по пунктам. Итак, рассмотрим пошаговую инструкцию продвижения лендинга самостоятельно:
- Основа успешной Landing Page - содержимое. То есть описание продукта должно содержать определённую информацию для пользователя: детали, фотографии, видеообзор, отзывы и прочее.
- Продвижение лендинг-пейдж с помощью ссылочной массы. Для прокачки одностраничного сайта потребуется ссылочная масса, которую можно приобрести на других ресурсах. Численность ссылок будет зависеть от конкурентоспособности реализуемого продукта, а также от региона, количества соперников на рынке и прочего. Отличный способ заявить о себе, а также получить ссылочную массу с других ресурсов - это поместить на них обзор вашего товара. Для этого существуют специальные инструменты и сервисы. Другой вариант (более трудоёмкий, но в то же время интересный) - самостоятельно искать веб-сайты похожей тематики и обращаться непосредственно к администраторам с пожеланием разместить у них вашу информацию. Безусловно, делается это за вознаграждение. В обзор необходимо вставить несколько ссылок на сайт. Если подобранные ресурсы пользуются популярностью, то с них легко можно получить поток посетителей, которые в последующем могут стать клиентами. Этот способ раскрутки является самым удачным и естественным. Вы приобретаете так называемые вечные ссылки, за которые платите единожды, обеспечивая при этом Landing Page целевым трафиком.
Друзья, я снова Вас приветствую! Сейчас расскажу как сделать лендинг самому. В этой статье будет пошаговая инструкция по которой вы легко самостоятельно справитесь с этим делом.
И так, вы должны иметь свой домен с установленным движком wordpress. Если кто-то сейчас не понял о чем тут говорится, то в конце статьи скачаете видео курс и легко сможете приобрести домен и установить туда wordpress.
Теперь заходим в админку wordpress и устанавливаете туда плагин, при помощи которого можно сделать лендинг самому бесплатно и быстро. На создание одностраничного сайта у вас уйдет максимум 10 минут.
Наводите курсор на него и в появившемся меню нажимаете на «добавить страницу». Перед вами откроется страница, где вы и сделаете одностраничный сайт прямо сейчас.
Первым делом записываете заголовок. Это нужно лично для вас, чтобы понимать какой лендинг у вас о чем, это когда будет много одностраничников.
Сразу же делаете красивую и легкую на взгляд ссылку. Для этого нажимаете изменить, стираете что там появилось и пишите свою. При этом у вас будет постоянными ВАШ-ДОМЕН/wppage/ , а дальше вы можете написать свое слово.
После того, как написали заголовок и сделали ссылку, можно приступить к созданию лендинга. Писать текст можно в пустом поле, а вот над этим полем есть много различных инструментов, которые необходимы для страницы продажи или подписной.
Расскажу по порядку какие есть функции для создания лендингов. Сначала идет длинная кнопка для добавления картинок. Тут все просто, нажимаете на нее и ищите картинку либо в медиахранилище, либо на своем компьютере.
Следующая кнопка у нас для добавления аудио записи. Дальше идет добавление видео. При чем видео ролики можно добавлять с любых видео хостингов, таких как ютуб или ему подобных и еще есть возможность поставить ваш ролик в рамку.
Тут большой выбор рамок, это сделает ролик более привлекательным. И хочу еще заметить, что нажав на любую кнопку, вверху есть возможность посмотреть видео инструкцию по установке данной функции на лендинг.
Вот например, я нажал на следующий значок «гугл форма» и включил видео, чтобы посмотреть что это такое и как эту форму установить на страницу.
После того, как установите код формы подписки на страницу, прокручиваем вниз, чтобы вставить сам код, который вы создали на своем сервисе.
На картинке я показываю куда вставляется ваш код. К стати, как вы видите, там же можно вставить и код статистики для отслеживания этого сайта, зайдя в «скрипты».
Нажимаем на следующую иконку со знаком доллара и тут мы получаем многочисленные кнопки «купить», «заказать», «получить доступ».
Следующие у нас идут разнообразные ленты, на которых можно писать тексты. Я всегда ставлю ленту в самом верху и пишу название. Как вы видите, сделать лендинг самому совсем не трудно при помощи этого плагина.
Следующая иконка у нас содержит огромный набор стрелок, которые отлично смотрятся на сайте. Обязательно не забывайте их использовать.
Следующая функция- это готовые красочные заголовки. Посмотрите сами, как они сильно привлекают к себе внимание клиентов.
И конечно же не обойтись на странице продажи без таймера. Огромную коллекцию таймеров, которые настраиваются по вашему усмотрению, находятся на следующей кнопке.
После всех перечисленных функций у нас идет две строчки настройки текста. Тут можно делать очень красивые и красочные тексты. Разобраться сможете легко самостоятельно, это очень просто.
Чтобы качественно сделать лендинг самому, нужно уметь хорошо оформить страницу. Для этого мы уходим вниз, под нашу страницу и нажимаем на кнопку «дизайн».
Тут вы либо выбираете цвет фона, либо устанавливаете свой фон, поставив ссылку на него в поле справа.
Дальше настраивается тело страницы. Тут нужно выбрать цвет, который заполнит страницу, рамку и тень. Когда выберите цвет рамки или тени, не забывайте поставить количество пикселей, а то их не будет видно. Дальше, при необходимости можно создать шапку и подвал.
Что самое интересное, что тут же можно настроить даже SEO продвижение вашего лендинга. Для этого нажимаете на SEO и прописываете заголовок, описание и ключевые слова. Это нужно для роботов поисковых систем, чтобы показывать ваш сайт в поиске.
Друзья, теперь вы знаете как с нуля сделать лендинг самому, сейчас переходите по этой ссылке и совершенно бесплатно скачивайте пошаговые видео уроки со всеми необходимыми ссылками. Тут вы и плагин скачаете и если надо, зарегистрируете домен и установите вордпресс.
Пишите в комментариях, как вам понравилось быстро самостоятельно создавать страницы продажи и подписные, буду ждать. До встречи в следующих статьях.
Всем привет! Сегодня хочу продолжить ряд статей, посвященных созданию и и на этой странице я максимально подробно опишу процесс создания Landing Page своими руками. Но позвольте мне начать свой рассказ с небольшой предыстории.
В сентября 2015 года мне понадобилось сделать лэндинг для своего первого ифопродукта, ну, и естественно я воспользовался поиском гугл, чтобы найти хоть какую-то инструкцию. Но так уж вышло, что реальной информации, которую бы смог осилить любой новичок не нашлось. Куда ни зайду, везде реклама каких-либо дорогостоящих сервисов и услуг. Уверен, многие из нас ещё не готовы отваливать каждый месяц кучу денег за абонентскую плату, также уверен, что многим хотелось бы просто поэкспериментировать, попробовать свои силы в инфорбизнесе, за что, опять же, не хотелось бы лишний раз платить. «Нужно как-то исправлять эту ситуацию» - подумал я, и решил во всём разобраться сам.
Думаю процесс моего обучения будет не столь интересен, поэтому мы сразу перейдём к сути и наконец узнаем, как же сделать страничку захвата своими руками. А начнём с основ:
LandingPage (страница захвата) - это маркетинговый инструмент, предназначенный для конвертации посетителей в клиенты. Чем убедительней, четче и лаконичней будет Ваше предложение, тем меньше шансов получить отказ. Лендинг - должен призывать клиента совершить действие, например, купить что-либо, подписаться на рассылку, установить какой-либо софт и прочее.
Лендинги, как маркетинговый инструмент, приобрели большую популярность за счет того, что они создаются под определённую категорию людей, а значит, дают большой процент конверсии в своей нише. Такие значения, как 10-20% являются очень хорошими и правильно сделанные лэндинги легко собирают подписную базу.
1. Как создать ленинг пейдж самому
Во-первых, важно понимать, что лендинг это не только красивое оформление, но и правильная расстановка элементов, нужные слова, правильные призывы и десятки других правил маркетинга. Даже не опытный человек может заметить структурное сходства многих подписных страниц и это не случайность. Поговорка: «Зачем придумывать новый велосипед?», как нельзя лучше описывает нашу ситуацию. Поэтому перед конструированием нужно разобраться хотя бы в принципе работы нашего велика.
1.1. Основные принципы составления лендинга:
- Каждый элемент лэндинга должен выполнить одну, самую главную цель: получить действие посетителя. Поэтому не стоит добавлять кучу мелочей, которые могут Вам показаться просто «миленькими», «красивенькими» и тому подобное.
- Используйте маркетинговые фишки. В основном это срочность и дефицит. Практически на всех лэндингах есть таймер обратного отсчета или упоминание о том, что осталось столько-то копий до повышения цены. Это работает, проверено на личном опыте, причем работает так эффективно, что результат иногда поражает.
- Свобода глазам! - Никто не ограничивает нас в размерах, не стоит громоздить элементы друг на друга. Решил упомянуть это, так как не раз видел примеры, где авторы видимо не знает, что такое «отступы».
- Яркий и современный дизайн. Во время создания откройте 3-4 примера лэндингов, которые Вам очень нравятся. Смотрите, как сделали они и повторяйте до тех пор, пока идеи в голове не начнут генерироваться сами. У меня, например, было именно так.
- После завершения работы, попросите своих близких посмотреть на результат. Любой вопрос, который у них может возникнуть, должен заставить Вас задуматься о том, что лэндинг не совершенен, так как хорошая работа в итоге должна оставить посетителя без вопросов.
1.2. Элементы, которые должны быть у каждого лендинга
- Начнём с самого верха, где у нас обычно находится заголовок. Естественно, что должен он быть привлкательным, интересным и максимально интригующим, в общем его цель с первых секунд захватить внимание и в тоже время из его содержания должно быть понятно Ваше предложение.
- Торговое предложение. Его стоит описать таким образом, чтобы донести суть, самый сок при этом не стоит злоупотреблять повторениями. Также не стоит думать, что если Вы вместо двух-трёх раз повторите Ваше переложение, то от этого увеличится конверсия, наоборот, действовать нужно постепенно по ходу всей страницы. Я предпочитаю в этой части лендинга, просто рассказать о том, что именно даст продукт и перечислить несколько плюсов, которые важны именно для моей аудитории.
- Если лендинг пейдж небольшой, то сразу рядом размещайте кнопку призыва к действию, типа: «Получить», «Забрать», «Купить» и тому подобное. Здесь я использую яркие красные или контрастные фону цвета. Всё таки наша основанная задача заставить клиента нажать именно сюда.
- Расскажите о преимуществах вашего товара над другими подобными, чем Вы лучше других?
- Разместите карту действий, в которой подробно опишите процесс решения проблемы, указав каждый шаг с момента покупки.
- Далее следует разместить несколько отзывов. Желательно не придумывать их, а узнать у тех людей, кто уже приобрёл товар. Ну, а если таких нет, то тогда уж придётся накалякать самому, причем не давать десять баллов из десяти, пишите отзывы на семёрочку-восьмёрочку. Можно дать попробовать продукт известным в вашей области людям, чтобы они дали свой отзыв, желательно в видео формате.
- Обязательно укажите, гарантии безопасности платежа, анонимности, условия возврата товара и денег и так далее.
- Ну и в самом конце, в футере - укажите свои реквизиты, ссылку на партнёрскую программу, можно поставить социальные кнопки рассказать о себе, как об авторе, указать контакты и так далее.
2. Делаем лендинг своими руками
После прочтения советов предоставленных выше, мы можем приступать непосредственно к самому созданию страницы на которой у нас будет лендинг. Использовать мы будем программу вебкоснтркутор: WYSIWYG Web Builder 9-ой версии. Хотя сейчас уже есть 10-ая, но там проблемы с русификацией, поэтому если Вы не опытный вебмастер, то рекомендую использовать 9-ую версию. Также нам понадобится:
- Редактор изображений фотошоп;
- Клиент для работы с хостингом FileZilla;
- Сам хостинг;
- Ну, и доменное имя.
У Вас может возникнуть вопрос о том, где брать эти программы бесплатно? Могу только посоветовать хорошо погуглить, давать же ссылки сайты с пиратским содержанием - это против моих собственных убеждений.
Здравствуйте, друзья. В этой статье я дам вам пошаговую инструкцию, как сделать лендинг самому — бесплатно и профессионально. То есть ваш лендинг будет выглядеть действительно красиво, не хуже, чем у конкурентов. Перед началом работы можете, кстати, от руки прописать .
Здесь мы рассмотрим вариант бесплатного создания лендинга из 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 лет =)
