Здравствуйте, друзья. В этой статье я дам вам пошаговую инструкцию, как сделать лендинг самому — бесплатно и профессионально. То есть ваш лендинг будет выглядеть действительно красиво, не хуже, чем у конкурентов. Перед началом работы можете, кстати, от руки прописать .
Здесь мы рассмотрим вариант бесплатного создания лендинга из 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 лет =)
Представляет собой сайт, чаще всего состоящий из одной страницы, позиционирующийся как высоко конвертируемый или хорошо продающий. Лендинг может состоять из нескольких страниц, но в классическом понимании это одностраничный ресурс. Именно в этом заключается особенность продвижения лендинга. Одностраничный сайт призван оказывать влияние на основные человеческие инстинкты, подталкивать пользователя к совершению мотивированных действий: набрать номер, кликнуть, оформить заказ, приобрести товар в данный момент.
Лендинги являются составной частью рекламных кампаний определённого товара или предложения с «горячей» ценой, а также используются для привлечения целевой аудитории из источников контекстной рекламы "Гугл Эдвордс", "Яндекс. Директ", социальных сетей и почтовых рассылок.
Landing Page - это независимая страничка, способствующая:
При формировании лендинг-пейдж следует применять различные триггеры воздействия, которые будут «подогревать» пользователя к стремительному принятию решения (совершение покупки, внесение информации для получения бонуса, изучение курса, просмотр вебинара и прочее).
Со стороны пользователя Landing Page - это страничка, на которую он попадает после нажатия на изображение, информер, рекламное объявление и прочее. Лендинговая страница совершенно непохожа на интернет-магазин, поскольку для реализации конкретного продукта или проведения рекламной акции оформляется собственная страничка с использованием различных триггеров воздействия.
Лендинг можно сделать несколькими способами:
Создать своими силами посадочную страницу вполне возможно, для этого нужно иметь некоторые знания в области веб-разработки, аналитики и дизайна. Впрочем, если таковых умений нет, то можно прибегнуть к помощи специальных сервисов (о них говорилось выше), предлагающих уже готовые шаблоны, где только остаётся вписать текстовку и настроить хостинг и домен.
Создавая лендинг-пейдж своими силами, можно сберечь время и средства. В Интернете можно найти источники с шаблонами разных тематик, с комплектом руководств по быстрой установке и программным обеспечением, позволяющим вносить исправления.
Поскольку заинтересованность в лендинг-пейдж изо дня в день растёт, создатели тоже не стоят на месте, предлагая пользователям свежие идеи и инструменты на основе шаблонов. Перечень бесплатных ресурсов:
Последний вариант лучше всего подходит тем, у кого имеются лишь минимальные навыки в этой области, и они не хотят терять время на освоение непростых систем программирования. Кроме того, можно воспользоваться бесплатным пробным периодом популярных конструкторов lpgenerator.ru и wPPage.
Разработка лендинга - это лишь часть успеха, важно правильно его оптимизировать. У одностраничных ресурсов есть один, но довольно весомый недочёт - их очень непросто обнаружить поисковым системам. Полноценные сайты обладают уникальными заголовками, целостной структурой с информацией об объёме страниц, грамотной перелинковкой и прочим.
Структура одностраничника не позволяет выполнить качественную внутреннюю оптимизацию в привычном понимании, то есть «заточить» интернет-ресурс под запросы поисковиков. Решить эту проблему позволила вёрстка от Google с применением JavaScript и способа PushState.
Для оптимизации лендинга необходимо выполнить следующее:
Другими словами, блоки должны обладать теми же свойствами, которые есть у любой отдельной страницы полноценного портала. В этом случае робот будет расценивать посадочную страницу как несколько уникальных. Посетители этот момент вряд ли уловят, только наиболее бдительные заметят, что в процессе скроллинга в строке меняется URL и title. Но тут следует понимать, что для осуществления этих действий потребуются определённые познания в сфере SEO и вёрстки с JavaScript.
Как сделать популярной созданную страницу? Продвижение лендинга в поисковых системах или SEO своими силами - вполне выполнимая задача, несмотря на то, что зачастую случается слышать, что поисковые системы плохо относятся к одностраничным сайтам. На самом деле всё не совсем так. Если страница соответствует определённым условиям и будет содержать максимальное количество информации о реализуемом продукте/услуге, то можно добиться отличных результатов СЕО-продвижения лендинга.
Конечно, как и в любой области, здесь существует несколько "но". В первую очередь, многое будет обуславливаться конкурентоспособностью выбранной тематики. Если для торговли с помощью лендинга был подобран раскрученный товар, для которого уже существует большое количество интернет-магазинов и сайтов, то в этом случае продвижению лендинга не смогут помочь даже огромные бюджеты.
Но это всё особенности, а если перейти к стратегии продвижения посадочной страницы, то здесь всё можно расписать по пунктам. Итак, рассмотрим пошаговую инструкцию продвижения лендинга самостоятельно:
Когда лендинг, в который вложено немало ресурсов, не приносит заявок, это как минимум обидно. Чтобы предупредить такую ситуацию в условиях ограниченного бюджета Вячеслав Сергеев, автор проекта «Школа лендингов» представляет вашему вниманию пошаговую инструкцию по созданию лендингов.
Если предприниматель задался вопросом «как сделать лендинг самому», то он обычно открывает конструктор и набрасывает примерный макет, используя блоки конструктора. В том, что получилось, нет никакой структуры, никакого копирайтинга. И значит, нет никакой конверсии. А тратиться на агентства и студии не хочется.
Но я вас «обрадую»: большинство студий делают точно так же. Только не на конструкторе, а вкладываются в дизайн, вёрстку, решают задачу эстетично, функционально и качественно. Конверсия будет выше, но незначительно. Тогда какой смысл?
Одна из важнейших основ лендинга - качество контента. В чём суть? Вы хорошо знаете свой продукт, гораздо лучше любого агентства, которое не будет заморачиваться должным образом. (Конечно, есть исключения.)
Сегодня я хочу предложить вам чёткую пошаговую инструкцию, как сделать качественный копирайтинг лендинга , дающий в результате высокую конверсию.
Кто приходит покупать ваш продукт? Типичные общие характеристики покупателя: люди от 18 до 50, которые живут в России. Но что это за люди? Например, вы продаёте картины. Кто обычно покупает картины? Женщины - домой, рестораторы - в свои заведения, бизнесмены - в офис. И вот уже вырисовываются некие характеры представителей целевой аудитории.
Пропишите каждый портрет в подробностях, по одному на лист.
Предлагаю несколько вопросов, которые помогут составить эти описания.
Помните об одной важной маркетинговой формулировке: люди покупают не дрель, они покупают дырку в стене.
У каждого представителя ЦА ваш продукт может вызывать разные эмоции. Рассмотрим те же картины. Кто-то хочет украсить свой дом и ищет способ, как это сделать. Эта важная информационная деталь потом пригодится в создании сильного торгового предложения, которое и приведёт к высокой конверсии.
А если взять другую сферу? Люди не ищут юристов для физических лиц, они ищут способы списания долгов.
Таким образом, люди не ищут конкретный продукт (портреты, живых бабочек, печать на кружках), они ищут эмоцию, которую можно получить от продукта, ценность, которую он им несёт.
Самое банальное возражение - «Почему так дорого?». Найдите ещё возражения для своего продукта.
Все эти вопросы помогают найти боли клиента, понять, чего он боится.
Это сердцевина хорошего лендинга, это боль человека. Это дырка в стене, а не дрель.
У клиента есть проблема - вы предлагаете решение. Есть возражение на ваше решение - закрываете сразу, отвечаете на вопросы, объясняете.
На каждое его предложение, на каждое его возражение, на каждое его желание расписывайте, что может предложить ваш продукт. Как вы можете закрыть эту потребность? Так образуется список преимуществ. На основе этого списка создайте уникальное торговое предложение для каждого портрета ЦА. Преимущества могут повторяться. Выпишите ключевые. Это будет костяк вашего уникального торгового предложения.
Оффер - это краткая формулировка преимуществ того, чем вы занимаетесь, в понятной клиенту форме. Оффер должен чётко ответить на вопрос, что вы продаёте. Почему именно вы это делаете? Почему именно вы лучше закрываете потребности клиента? Зачем ему вообще нужен ваш продукт?
Что должен включать в себя оффер?
Если человек ищет дрель, вы говорите, что у вас есть такая-то дрель.
Опишите главную боль и преимущества вашего продукта перед другими, закрывающие эту боль. Чем хороша эта дрель? Почему она лучше других?
Рассмотрим GPS-часы для детей. Представитель нашей ЦА - мама. У мамы есть боль: она боится, что с ребёнком может что-то случиться, он может потеряться.
Используем эти боли и говорим: «Если вы боитесь потерять своего ребёнка, наденьте ему на руку GPS-часы, которые в любой момент укажут его местоположение». В этой части оффера мы давим на боль и предлагаем продукт.
Можно описать эту боль по-другому. Например, так: «По статистике, каждый день пропадает столько-то детей. Если вы не хотите, чтобы ваш ребёнок попал в этот список, наденьте на него GPS-часы».
Можно описать боль по-разному, надавить на неё, вскрыть проблему и предложить продукт в качестве решения. В 80 % ниш можно найти такую боль.
Если вы продаёте цветы, у вашей ЦА будет как минимум два портрета: тех, кто захочет цветов, и тех, кто покупает цветы в подарок. Это два разных УТП. Первым важно знать, как ухаживать за цветами, вторым - чтобы было, может, подешевле.
Если вы хотите от лендинга конверсии, расписывайте продукт через боль.
Оффер состоит из проблемы и предложенного решения. Из списка преимуществ выпишите ключевые для каждого портрета ЦА. Их можно разделить на два типа: те, которые вы вытянули из боли, и те, которые изначально есть у продукта.
Вернёмся к картинам. У них как у продукта есть чёткие продуктовые преимущества: качество холста, красок, техника выполнения. И есть преимущества, сформированные из болей: лёгкий способ украсить квартиру, удивить девушку и так далее.
Оффер, соединённый с преимуществами продукта, рождает уникальное торговое предложение.
Ориентируйтесь на то, какую пользу продукт принесёт клиенту. Это называется ВЫ-ориентированность.
Никаких «качественно и недорого»! Напишите, сколько стоит продукт, за какое время вы его изготовите или кто производитель, какая на него гарантия.
Укажите узкую географию, если вы работаете только в Иркутске или только в Сочи. Или, наоборот, скажите о том, что работаете со всем миром.
Бывает так, что оффер расписан хорошо, пользователь читает, соглашается с тем, что продукт классный и закрывает страницу. Но оффер не будет работать без призыва к действию. А целевое действие не будет работать без оффера.
Не требуйте от пользователя заказать прямо сейчас, дайте ему что-то лёгкое, ценное, что принесёт ему пользу. Запрашивайте минимум данных. В 90 % случаев достаточно попросить только телефон или электронную почту, не нужно даже спрашивать имя. Это всего одно поле, а значит - одно действие. Для удобства клиента в поле, куда нужно вписать телефонный номер, добавьте маску телефона и автоматический подгон цифр по шаблону. Это задача для программиста.
Сформируйте полезность, которую пользователь получит сразу же, совершив это действие: это может быть подробное коммерческое предложение, бесплатная консультация, макет и так далее.
Я не советую сразу идти в конструктор. Возьмите альбомный лист и схематично изобразите, как вы видите будущий лендинг.
Какие элементы будет включать в себя лендинг и где они будут располагаться? В какой последовательности? Как между собой будут переключаться эти элементы, чтобы пользователь не уходил со страницы и в результате пришёл к целевому действию?
Старайтесь ставить формы, а не кнопки. Результаты АB-теста говорят, что формы дают более высокую конверсию, чем кнопки. То есть, если вы возьмете кнопку, на которой откроется форма, то это будет конвертировать посетителей в покупателей хуже, чем если вы сразу поставите на сайте форму, которую можно заполнить и отправить.
Первый экран в лендинге самый важный. На нём укажите, чем вы занимаетесь, и пропишете ключевое преимущество. Сделайте фотографию своего продукта и распишите результаты его действия, если это действительно имеет смысл.
Обязательно поместите форму на первом экране. Иногда пользователь совершает лёгкое импульсивное действие, к тому же на первом экране клиенты сидят дольше всего, а иногда даже не двигаются дальше.
Сделайте цвет кнопки целевого действия уникальным. Мне нравится формулировка «кнопка формы лендинга должна быть как прыщ на носу подростка». Она должна быть видна отовсюду, иметь уникальный цвет, быть самым ярким и самым заметным элементом на лендинге.
На кнопке напишите, что именно произойдёт после завершения целевого действия . Например, «Получить коммерческое предложение», «Заказать звонок», «Получить бесплатную консультацию».
Ниже под кнопкой советую оставить такие ремарки: «Это вас ни к чему не обязывает», «Мы не спамим», «Мы не передаём данные третьим лицам» и так далее.
Фон лучше делать цветным с белыми полями.
Итак, вы придумали макет первого экрана, на нём есть заголовок, преимущества, основная картинка, форма и меню. Далее структура может варьироваться.
Предлагаю следующее наполнение.
Основная ценность
Честно опишите ценность для клиента своего продукта. Я пишу свои тексты от души, в них чётко прописаны боли клиентов. Когда я делал лендинг для корпоратива, я честно поставил фото танцующих на столе людей и написал, что пьянки в кафе уже всем надоели. Это попадало в боль, это всем было понятно. Клиенту должно быть приятно читать тексты, конструкции должны быть короткими, без лишних союзов, знаков препинания, не нужно длинных предложений.
Дополнительные преимущества
Преимущества недостаточно разместить на первом экране. Могут быть дополнительные, которые требуют большего описания и подробного объяснения. Но не переборщите: тридцать экранов лендингу тоже ни к чему.
В заголовках с преимуществами максимально ёмко пропишите ключевую мысль, добавьте картинки или иконки - но только тогда, когда они действительно нужны и будут нести смысл.
Социальные доказательства и портфолио
Расскажите о производстве продукта, покажите свой офис. Добавьте примеры работ, расскажите про себя, если вы основной производитель. Добавьте факты, цифры, картинки. Но также соблюдайте меру.
Social proof и сразу - форма для целевого действия
За последние годы, спрос на лендинг пейджи (одностраничные сайты) сильно вырос. Используют их практически везде, начиная от начинающих веб-мастеров и заканчивая крупными корпорациями. Электронную коммерцию лендинги тоже не обошли стороной. Их часто используют для разного рода акций и распродаж, а также они популярны среди начинающих интернет-предпринимателей, которые продают небольшой ассортимент, например, это может быть очень узкая ниша. В сегодняшней статье, я поделюсь тремя способами, как сделать одностраничный сайт самостоятельно, при этом, максимально быстро и бесплатно.
Это самый простой способ сделать лэндинг бесплатно и быстро. Достаточно большой ряд конструкторов на просторах интернета – это конструкторы сайтов, т.е. позволяющие делать не только лендинги, но и классические сайты-визитки и более того, даже магазины. Особенно это справедливо для крупных игроков этого рынка.
Тут требуется минимальный набор знаний для того чтобы сделать себе одностраничный сайт. Как правило, все делается через простой интерфейс, в котором вы задаете расположение блоков страницы, их типы (слайдер, отзывы, форма заказа), цвета и размеры шрифтов, и т.д. При этом есть возможность выбирать из множества уже готовых шаблонов (дизайнов) свой будущий лендинг.
Однако, несмотря на свою простоту, конструкторы имеют и ряд подводных камней, которые не всем очевидны на первый взгляд. И связано это как раз с бесплатностью. Разработчикам, естественно интересно, чтобы вы платили им деньги за возможность создания лэндинга и поэтому часть разработчиков ограничивает возможности конструктора на бесплатных тарифах, либо предоставляют полный функционал, но ограниченный по времени (trial-версия). Поэтому красивая кнопка «попробовать бесплатно», пусть не вводит вас в заблуждение. Платные тарифы есть практически у любого конструктора.
Тут нужно взвешенно подходить к выбору конструктора, и изучать его возможности и бесплатный функционал до того, как начнете создавать свой лендинг. «Сюрпризы» могут ждать в самом конце, когда вы уже потратили свое время и силы на конструирование. У всех запросы разные к одностраничным сайтам, поэтому изучайте хватит ли вам базового бесплатного функционала того или иного конструктора.
Кстати, не лишним сразу будет посмотреть возможность интеграции / синхронизации с сервисами рассылки, CRM-системами и т.д., в случае, если вы планируете ими пользоваться или уже используете.
Помимо распространенных онлайн-конструкторов, есть и специальные программы, при помощи которых можно конструировать сайты, например, Adobe Muse. Правда эта программа считается скорее профессиональным инструментом, нежели предназначена для новичков, поэтому может уйти немало времени на ее изучение. И процесс создания лендинга уже не будет быстрым…
Второй, достаточно простой способ сделать свой landing page бесплатно – это найти на просторах интернета уже готовые HTML шаблоны. Тут естественно уже потребуются некоторые знания HTML и CSS, чтобы быстро разобраться что к чему и иметь возможность делать нужную модификацию готовых шаблонов.
И тут стоит помнить, что реализация нестандартного для этого шаблона функционала, может вылиться в достаточно большую проблему для человека, плохо разбирающегося в сайтостроении. Но как простой лендинг, в котором вы поменяете демо-информацию и картинки на свои – это достаточно простой, быстрый и конечно бесплатный вариант.
При выборе шаблона, не забывайте, что просматривать его будут пользователи не всегда на компьютере, поэтому стоит выбирать шаблон с адаптивным дизайном, чтобы им было удобно пользоваться как на большом экране компьютера или планшета, так и на маленьком вытянутом экране сматрфона.
К этому, второму способу, я бы отнес еще и самостоятельное создание лендинга в HTML-редакторе. Т.к. суть примерно одинакова, за исключением того, что вы не используете готовый шаблон, а делаете его с нуля. Как правило, шаблон одностраничного сайта состоит из горизонтальных блоков с информацией внутри них – иными словами, структура не очень сложная. Если вам позволяют знания и навыки, то это тоже один из вариантов. По крайней мере, простой лендинг, без наворотов, можно сделать достаточно быстро.
Третьим, завершающим способом сделать лендинг бесплатно – это использование CMS WordPress. Почему именно Вордпресс, спросите вы?! На самом деле, это не обязательно должен быть именно этот движок, можно использовать и совершенно иной, например — Joomla, OpenCart т.д. Если грубо, то суть в том, что вы на CMS прикручиваете шаблон лендинга, который всего лишь отличается представлением (дизайном / структурой) от классического шаблона. Движок WordPress используется достаточно часто при создании лендинга, поэтому пример приведу именно на нем. К тому же, я сам использую периодически этот вариант.
Этот способ по сравнению с предыдущим, позволяет делать лэндинги более профессиональными и функциональными (если так можно выразится). Конечно, хотя бы начальные знания HTML и CSS тут будут тоже не лишними. Также потребуются знания установки CMS на хостинг. Как правило в этом нет большой сложности.
Для тех, кто уже пользовался Вордпрессом, знают, что функционал сайта очень просто расширяется при помощи плагинов, которые в большинстве своем бесплатные. Я кратко опишу один из вариантов, как при помощи WordPress сделать достаточно красивый и функциональный лендинг.
Для того, чтобы получить некое подобие конструктора лендингов, потребуется плагин «Page Builder от SiteOrigin », который даст возможность делать макет страницы лендинга и других страниц.
С его помощью вы сможете создать основную разметку – т.е. те самые горизонтальные блоки, в которых и будет размещен контент вашего лендинга. Там же можно задать цвет фона, картинку фона, размер блока, отступы и прочие атрибуты.
Следующим этапом – нужно в этих блоках создать контент. Для этого нам потребуются готовые плагины к Page Builder’у, в частности «SiteOrigin Сборник Виджетов », который расширит функционал и добавит специальные виджеты, которые можно использовать в этом конструкторе.
Например — заголовки, кнопки, слайдеры изображений, добавление иконок, видео, гугл-карты и т.д. В общем, необходимый минимум который может понадобится при создании своего лендинга. Плюс ко всему, никто не мешает добавлять любые другие плагины и виджеты, которые можно использовать на одностраничнике – таймеры обратного отсчета, интеграция с социальными сетями, формы для приема заявок с сайта и множество других.
В общем и целом, все достаточно просто, особенно для пользователя, который уже знаком с Вордпрессом. Для тех, кто ни разу не пользовался этой CMS, придется немного изучить ее базовый функционал, прежде чем приступать к созданию лендинга. Благо информации в интернете более чем предостаточно, для самостоятельного и бесплатного обучения.
Также этот способ позволяет делать интеграцию с рядом сервисов, например, с CRM-системами, сервисами для email-рассылок и пр. Правда, это может быть не всегда бесплатно (разработчики плагинов могут включать этот функционал только в платные версии плагинов).
Подводя итог всего выше описанного, можно сказать, что в самостоятельном создании лендинг пейджа нет ничего сложного. Особенно, если у вас есть хотя бы небольшие познания в HTML и CSS. В зависимости от того, насколько сложный и функциональный лендинг вам нужен, можно выбрать тот или иной способ его создания. Однако, стоит понимать, что ограничения в функционале все же есть – реализовать нестандартный функционал или дизайн без специалистов может не получиться… Благо он нужен далеко не всегда и в большинстве случаев сделать собственный лендинг бесплатно и достаточно быстро вполне по силам каждому.
Не каждый посетитель, попавший на ваш сайт, совершает целевое действие, потому что ему не хватило аргументов, стимулов или не привлек сайт. Толчком для нужных действий пользователя может стать правильный лендинг. Расскажем, какой лендинг будет работать на вас, а также дадим готовый to-do list для создания удачного лендинга.
Лендинг - это посадочная страница с призывом что-то сделать: подписаться на рассылку, купить товар или оставить заявку на услуги. Обычный сайт перегружен информацией. Лендинг работает с конкретной целью и ведет посетителя за руку до момента, когда он совершит целевое действие. На лендинг направляют рекламный трафик.
Хорошим показателем конверсии для сайта считается 2-3 % от всех посетителей. Для лендинга эта цифра - 14-15 %. Такого результата помогают добиться кнопки с призывом к действию.
Есть несколько приемов, которые помогают привлечь и удержать внимание посетителя.
Принцип первого экрана или Above The Fold . Газеты продают сложенными вдвое, поэтому титульная страница делится на видимую и невидимую часть. Если заголовок или фотография на видимой части привлекают внимание, хочется купить газету и дочитать до конца.
С лендингом та же ситуация: читатель должен с первого экрана заинтересоваться и понять, нужно ли ему скроллить дальше. Поэтому особое внимание уделите первому экрану. Он не должен быть перегружен информацией, но в то же время должен содержать самую суть. Самая главная кнопка для целевого действия как правило размещается на первом экране и повторяется ближе к концу лендинга.
Scannability и структура . Люди хотят быстро получить информацию, поэтому лендинг должен быть четко структурированным и понятным. Для этого информацию делят на смысловые блоки, используют подзаголовки, списки, иллюстрации и цитаты.
Учет тепловой карты страницы . Важные смысловые блоки расставляют на виду так, чтобы пользователь находил нужные элементы на привычном месте. Есть несколько моделей поведения на сайте, актуальные из которых: Z-Pattern и Guttenberg Pattern
Z-Pattern на примере Фейсбука. Пользователи подсознательно знают, что кнопка действия находится в правом нижнем углу.
Диаграмма Гутенберга делит экран на четыре части. В левой верхней читатель ищет самую важную информацию и смотрит на нее в первую очередь. В правой нижней принимает решение, здесь ставят кнопку заказа или призыв к действию.
Доступная навигация . Лендинг - это длинная страница. Чтобы пользователю было удобно сориентироваться и найти нужное, в шапке размещают ссылки на важные блоки.
Call-to-action элементы . Призыв к действию - логическое завершение длинного пути, который переводит читателя на новый этап воронки продаж. На лендинге размещают кнопки подписки или покупки, ссылки на товар и формы для электронной почты. На принятие решения влияют форма и цвет кнопки, ограниченное предложение («Осталось три места на вебинаре») и место размещения.
Контакты на видном месте . Некоторые пользователи не хотят читать, им нужно задавать вопросы, поэтому форма обратной связи, почта и телефон должны быть всегда под рукой.
Принцип A/B тестирования. Иногда оказывается, что если поменять текст на странице или переместить кнопку заказа на два сантиметра выше, то пользователи охотнее совершают целевое действие. Поэтому на лендингах используют разные гипотезы и тестируют их на отдельных группах посетителей. Нет универсального рецепта, нужно пробовать и менять структуру в зависимости от результатов.
Хорошо, если в компании уже работают копирайтер, дизайнер и верстальщик, которые понимают задачи лендинга и могут разработать идеальную страницу. Если нет, самым эффективным решением будет заказать лендинг у фрилансеров. Выбрать исполнителя можно в том числе и на Kwork .
Выбирая исполнителя на Kwork, обратите внимание на основные параметры предложений фрилансеров: какая работа и в каком объеме входит в кворк, за какую цену и срок будет сделана. Предложения продавцов отсортированы по рейтингу, который основан на реальных отзывах, ответственности, качестве и других внутренних алгоритмов системы. Рейтинги, отзывы, портфолио значительно упрощают выбор исполнителя.
В фильтре можно отметить дополнительные услуги, например, размещение лендинга на хостинг, адаптивный дизайн, установка формы связи, чтобы заказать их у одного продавца.
Достаточно выбрать нужную услугу, оплатить, при необходимости скорректировать задачу прямо в заказе и получить качественный результат в срок.
Создание лендинга делится на следующие этапы:
Все эти услуги можно заказать на Kwork не только через магазин услуг, но и через Биржу . На бирже вы создаете заявку на услугу — описываете, что нужно сделать и какой у вас бюджет, и компетентные исполнители сами откликаются на вашу заявку. Вы выбираете наиболее подходящего для вас исполнителя и работаете с ним через безопасную сделку на Kwork.
При работе с дизайнером и верстальщиком нужно учесть следующие моменты:
