Как создать Landing page

От автора: я приветствую вас. Landing Page то есть одностраничные сайты вошли в моду сравнительно недавно. В этой статье я постараюсь рассказать, почему они вообще появились и как создать лендинг пейдж самостоятельно?

Почему лендинги стали так популярны?

Сегодня каждый опытный веб-мастер видел уже сотни таких одностраничников. Я видел, наверное, тысячи. Они также имеют другие название: посадочная страница, страница приземления, целевая страница, одностраничник и т.д. Среди вебмастеров наиболее часто используется слово “лендинг” или даже “ленд”. И все прекрасно понимают, о чем идет речь.

Основная причина появления лендингов — их невероятная эффективность при заказе платной рекламы. Дело в том, что однажды специалисты по рекламе пришли к простому выводу — цена конверсии, то есть целевого действия, в разы ниже, если направлять покупной трафик непосредственно на одностраничник, а не на сайт-визитку, каталог товаров в интернет-магазине или какие-то другие места.

Причина этого кроется в том, что на лендингах обычно все максимально оптимизировано под один или несколько товар. Там яркий дизайн, раскрываются все преимущества товара, есть отзывы или даже видео-отзывы. Обычно также туда ставят таймер обратного отсчета, ну и конечно форму, через которую можно заказать товар (а также форму заказа обратного звонка).

Таким образом, на лендинге любой товар или услуга смотрятся гораздо привлекательнее, и у потенциального покупателя появляется гораздо большее желание приобрести то, что ему предлагают.

Для чего используют лендинги?

Я говорил о рекламе товаров, то еще одностраничные сайты используют для продажи платных услуг, платных и бесплатных инфо-курсов, подписки (тоже платной и бесплатной) на какой-то продукт и т.д.

По сути, качество лендинга невозможно абсолютно точно оценить до тех пор, пока на него не начнут заходить первые потенциальные клиенты. Чтобы отследить поведенческие факторы (% отказов, время на сайте, посмотреть вебвизор) обычно ставят счетчик Яндекс.Метрика. Ну ладно, об этом можно говорить долго, а я обещал вам рассказать о том, как создать лендинг своими руками.

Способы создания landing page

Собственно, рассмотрим всего 2 способа. И о первом я скажу совсем чуть-чуть. Он более прост и заключается в использовании платных и бесплатных конструкторов. Минус такого создания очевиден — вы собираете дизайн из неуникальных блоков, а чтобы уникализировать их, понадобятся уже навыки работы с html и css. А еще основы веб-дизайна. В платном конструкторе можно создавать по умолчанию качественные одностраничники, но вам едва ли хватит функционала, чтобы изменить в шаблоне что угодно и переделать все на свой вкус. К тому же для этого, как я уже говорил, тоже нужны знания.

Зашел я однажды попробовать сделать лендинг в платном конструкторе сайтов. И что бы вы думали? Конструктор в итоге сгенерировал мне огромный архив со страницей, где подключены все возможные библиотеки, стили и скрипты. Скорость загрузки была не то что медленной, она была катастрофической, так что даже браузер подвисал.

Итак, наилучший способ создания лендинга если мы говорим о профессиональной разработке на заказ (или себе для рекламы ваших товаров, услуг и т.д.) — создание с нуля. Вот об этом я хотел бы рассказать подробнее.

Этапы создания лендинга с нуля

Как определить качество лендинга?

Конечно, тут можно долго говорить о скорости загрузки страницы, кроссбраузерности, адаптивности. Но давайте будем честны – в современных реалиях все это должно быть уже по умолчанию.

Собственно, главный показатель качества одностраничника — конверсия. Это соотношение кол-ва целевых действий (заказ товара/услугу) к общему кол-ву людей, зашедших на сайт. Например, если вы купили платную рекламу и по ней на сайт перешло 120 человек, а получили вы 2 целевых действия, то ваша конверсия составляет примерно 1,66%. То есть 1,66% людей будет заказывать ваш товар. Правда, тут нужно оговориться, что 120 посещений и двух заказов недостаточно, чтобы высчитать средний показатель конверсии на сайте. Для этого нужно гораздо больше трафика.

На конверсию влияет все: структура, дизайн, продающий текст и сама его суть (УТП), качество верстки, скорость загрузки, удобство чтения и т.д. Только оптимизировав все по всем фронтам, можно надеяться на отличный результат.

Ну а что делать, если все базовые шаги оптимизации выполнены? На самом деле любой лендинг можно улучшать бесконечно много раз. Например, вы продаете набор инструментов для домашнего мастера. Вы можете все максимально оптимизировать, но конверсию может повысить банальная смена фоновой картинки на первом блоке.

И вы не узнаете об этом до тех пор, пока не протестируете этот вариант одностраничника. Если он повысит конверсию, то оставляете его и ищете следующие способы поднятия CR.

Итог. Какие перспективы открываются перед теми, кто умеет создавать одностраничные сайты?

Лендинги сегодня невероятно востребованы. Именно сейчас, в 2016 году, популярность одностраничных сайтов стала настолько большой, что в последующие 3-4 года будет огромная потребность в них. И если вы умеете создавать профессиональные одностраничники, то наверняка при желании сможете заработать серьезные деньги, разрабатывая лендинги другим, а также для рекламы своих собственных услуг и товаров.

Поэтому уже сейчас можете задумываться о повышении своего уровня в сайтостроении, чтобы уже завтра получить свою долю в этой популярной сегодня нише.

webformyself.com

Уже много сказано об эффективности такого инструмента интернет-маркетинга как landing page, (или целевая/посадочная страница). При этом, многие заказчики до сих пор верят в мифы об волшебных лэндингах.

Эти мифы, если их своевременно не развеивать, могут свести на нет всю пользу от целевых страниц и вызвать глубокое разочарование у заказчиков. Исполнитель от такого сотрудничества, также может остаться в финансовом и психологическом минусе.

В своей работе мы постоянно сталкиваемся с такими мифами. Лучше всего, в самом начале сотрудничества эти мифы проработать так, чтобы у клиентов было более реалистичное отношение к разработке целевых страниц.

При отработке возражений, уместно будет рассказать о нескольких удачных решениях, которые вы уже применяли, показать живые примеры эффективных лэндингов. На этих примерах кратко пройтись по основным элементам лэндинга, объяснить, как будет вестись работа над проектом. Если переубедить не получается, лучше с такими клиентами не работать.

Миф № 1 «Лэндинг – волшебное средство для повышения продаж»

Целевая страница – не волшебная таблетка, которая чудесным образом может решить все проблемы с продажами. В первую очередь, важна потребительская ценность продукции или услуги. Лэндинг — всего лишь красивая витрина для представления услуги или продукции потребителям.

Также надо понимать, что без этапов тестирования, анализа и последующих доработок сложно сделать эффективную целевую страницу. К тому же landing page — всего лишь один из инструментов интернет-маркетинга. Да, при правильной разработке и последующей рекламе, этот инструмент может показать высокие показатели конверсии, но делать ставку только на него не стоит.

Например, практически невозможно запустить целевую страницу без правильной разработки контекстной или банерной рекламы. Для продвижения некоторых услуг и продукции, больше подходят внутренние страницы сайта или, социальные сети и т. д. Использование нескольких инструментов в комплексе позволит получить дополнительный эффект от продвижения.

Миф №2 «Можно быстро и дешево сделать эффективный лэндинг на сервисах-генераторах целевых страниц»

Генераторы целевых страниц, на мой взгляд, неплохой инструмент, имеющий свои плюсы. Но этим инструментом надо еще уметь пользоваться. Нужно разбираться в интернет-маркетинге, знать основы копирайтинга, быть «на ты» с контекстной рекламой.

Генераторы могут служить одним из инструментов для специалистов по интернет-маркетингу, чтобы упростить и ускорить процесс разработки и тестирования большого количества целевых страниц.

Многие же хотят быстрых результатов с минимальными затратами. Что получается в итоге? Правильно, низкие показатели конверсии и разочарование.

Миф №3 «Достаточно один раз сделать лэндинг и потом постоянно радоваться высоким продажам»

Пожалуй, самое частое заблуждение. Некоторые клиенты хотят сэкономить и сделать только одну страницу, и при этом ожидают, что заявки и звонки сразу посыплются как из рога изобилия. К сожалению, так бывает редко.

Эффективный вариант целевой страницы чаще получается в результате нескольких тестирований как страниц, так и различных элементов (заголовка, призыва к действию, формы запроса и т. д. ). На практике, с запуском нового лэндинга работа только начинается. Накапливается и анализируется статистка посещений, запросов, заполнение форм обратной связи и т. д.

Поэтому важно, чтобы заказчик знал о возможных потенциальных затратах на анализ, доработку и тестирование целевых страниц.

Миф №4 «Достаточно пройти один тренинг, чтобы самостоятельно делать крутые лэндинги»

Агрессивная реклама подобных тренингов, к сожалению, сделала свое дело. Множество предпринимателей, особенно из малого бизнеса, прошли эти курсы, и стали считать себя экспертами в разработке landing page.

В результате, Интернет массово заполнился шаблонными лэндингами, которые делаются самостоятельно или заказываются у фрилансеров. Эти лэндинги наштампованы, словно под копирку. Часто, такие целевые страницы получаются непродуманными и небрежно выполненными с точки зрения маркетинга, дизайна и верстки. Это очень раздражает пользователей и снижает доверие к целевым страницам.
Как после этого удивляться низким показателям конверсии?

Выводы:

• Целевая страница – эффективный инструмент интернет-маркетинга, но только в умелых и опытных руках.

• Эффект новизны от landing page уже прошел. Быстрых и дешевых решений уже не будет.

• Эффективная целевая страница, как правило, получается в результате работы команды из нескольких хороших специалистов (менеджера проекта, копирайтера, проектировщика, дизайнера, верстальщика, аналитика)

• Целевая страница должна быть частью программы интернет-маркетинга

habr.com

Как сделать страницу захвата для любого бизнеса?

По какой формуле вам действовать, чтобы создать лендинг пейдж?

Обычно продающая страница создается по формуле AIDA:

A – Attention (Внимание)
I – Interest (Интерес)
D – Desire (Желание)
A – Action (Действие)

A – Attention (Внимание). То есть, когда пользователь попадает на вашу страницу, сразу после прочтения он должен понять, куда он попал и что здесь есть. Вам необходимо проработать свой дескприпт страницы/утп.

I – Interest (Интерес). Под интересом подразумевается использование на вашей странице интересных, целевых картинок, видео и другого продающего контента. Отталкиваясь от своей практики, могу сказать, что уникальные картинки – повышают конверсию вашей страницы. Не качайте их бесплатно. Купите или сделайте сами.

D – Desire (Желание). Желание вписаться к вам в рассылку или оформить заказ на ваш продукт усиливается через отзывы, в которых есть хотя бы 1 решенная проблема.

A – Action (Действие). Здесь присутствует двойное значение. Первое – важно, что бы на всех ваших кнопках были понятные призывы к действию. Второе – все ваши формы должны ра-бо-та-ть. Как бы это “удивительно” не звучало, но очень часто бывает, что слив бюджетов происходит лишь потому, что формы не было протестированы на работоспособность. Поэтому проверяйте, что бы ваш обратный звонок – работал, что бы подписные формы – работали, подписчики падали к вам в базу и им действительно приходили письма.

Следуйте формуле и вы так же ответите на популярный вопрос: как сделать эффективную страницу подписчиков для вашего бизнеса или проекта.

Знали ли вы о формуле AIDA ранее? Создана ли ваша страница по этой формуле или вы использовали другие методы? Поделитесь в комментариях!

Как сделать лендинг пейдж: пошаговая инструкция

А вы уже разработали свою целевую страницу?

Если – да, то эта статья для вас будет проверочным чеклистом.
Если – нет, то создание целевой страницы вам еще предстоит.

Наберитесь внимания + концентрации, и … поехали! (постараюсь минимизировать прелюдии :))

Landing Page/Целевая страница/Посадочная страница/Страница захвата/Одностраничный сайт/Продающая страница – это все одно и то же, не путайте себя.

Задача landing page – захватить внимание человека на 100%, при этом исключив вероятность слива его внимания с конкретного оффера (предложения).

Перед созданием своей страницы захвата обязательно глубоко проработайте свою целевую аудиторию, чеклист из 23 шагов я публиковал вот здесь.

Цель страницы захвата – действие/продажа.

Преимущества посадочной страницы:

1. Выше % конверсии (из посетителя в лида)
2. Меньше времени на создание (быстрый запуск)
3. Ниже стоимость (в сравнении с созданием сайта)

4 ключевых принципа дизайна страниц:

• Выделения ключевых элементов
• Использование вспомогательных знаков
• Минимализм
• Цвет, контраст

(Для владельцев сайтов)
При внедрении страницы захвата можно:

1. Эффективно продавать отдельный товар или услугу
2. Быстрый запуск акций и спецпредложений
3. Качественный сбор контактов (имя, email, телефон)

Создание целевых страниц

(Для тех, кто только думает над созданием сайта)
3 мощных аргумента в пользу выбора продающей страницы:

1. Быстрый запуск (практически моментальное получение заявок)
2. Оценка эффективности рекламы при самых минимальных вложениях
3. Минимум в 2 раза выше % конверсии в сравнении с обычным сайтом

Сделать лендинг самому не так уж сложно, если знать обязательные «пункты программы». Landing Page под продажу товара/услуги состоит из следующих блоков:

1. Дескрипт или УТП
2. Уникальное изображение
3. Выгодная акция с понятным заголовком

• Ограничение по времени
• Призыв к действию

4. Форма сбора контактов:

• Заголовок с призывом
• Кнопка с призывом

5. Блок «Для кого предложение»
6. Блок «Популярные проблемы целевой аудитории»
7. Блок «Преимущества» / «Почему стоит выбрать нас»
8. Блок «Схема работы с нами»
9. Блок «Отзывы клиентов»
10. Блок «100% гарантии» (возврат денег/качества/сервиса/результат)

Пример:

Как сделать лендинг под email-рассылку?

Чтобы сделать эффективный лендинг пейдж под рассылку, необходимо включить в него следующие блоки:

1. Понятный заголовок
2. Цепляющий подзаголовок
3. Слева бонусы для усиления подписки на рассылку

• + поставьте ограничение на получение бонусов

4. Справа подписная форма

• + добавьте, что читатели будут защищены от SPAM

5. Блок «Почему стоит подписаться»
6. Блок «Об авторе рассылки»
7. Блок «Как часто будет рассылка»
8. Блок «Что будет в рассылке»
9. Блок «Сможете ли вы отписаться»
10. Блок «Цифры из практики»
11. Кнопка регистрации в конце всех блоков
12. Низ (футер) страницы с лайками

Пример:

kirulanov.com

Как внести изменения в шаблон?

Для того, что бы изменить в данном шаблоне какие-то контактные данные, либо какой-то фрагмент текста вам понадобится программа для редактирования кода.

Конечно, вы можете открыть данную страницу при помощи стандартной программы блокнот, но в этом случае у вас получится вот такой ужасный код, который очень неудобно редактировать.

Поэтому, для работы с подобными шаблонами я рекомендую вам скачать программу Notepad++ или какой-то его аналог и работать через нее.

Перетаскиваем в неё файл index.html и переходим к редактированию.

При редактировании страницы через Notepad++ здесь сразу расставляются переносы строк и есть подсветка кода. То есть, все тексты, которые вы можете править у вас выделены черным цветом.

Первое, что мы здесь видим – это тег title. Данные, которые здесь написаны будут находиться в заголовке страницы, отображаться на вкладке браузера и считываться поисковыми системами. Поэтому, очень желательно вписать здесь какое-то ключевое слово связанное с тематикой вашей лендинг пейдж.

Чтобы не пересматривать код для редактирования или замены определённых частей страницы воспользуемся поиском:

1. 1.В браузере копируем фрагмент текста, который нужно изменить
2. 2.Переходим в Notepad++ и нажимаем сочетание клавиш CTRL+F
3. 3.Вставляем скопированный текст в строку поиска и нажимаем кнопку «Искать далее».

После того как вы нашли нужный фрагмент текста – меняете его на свой.

Например, так:

После внесения всех правок страницу нужно обязательно сохранить.

Как видите, править такую страницу можно, но это не очень удобно.

Как заменить изображения?

Что же касается замены картинок, то здесь будет по-сложнее. Первое что вы можете сделать – это подобрать подходящие картинки, затем загрузить их в папку images, которая находится внутри папки с данным лендингом, а затем, уже в коде смотреть где выводится эта картинка и менять здесь название на свое.

Но можно сделать проще. Например, вам не нравится определённая картинка.

1. 1.Открываете папку images, находите здесь эту картинку.
2. 2.Перетаскиваете ее в фотошоп или любой другой редактор изображений.
3. 3.Здесь меняете ее на что угодно. То есть, вам главное что бы сохранилось название и размер. Например, вставляете другую иконку или меняете цвет.
4. 4.Затем, просто сохраняете картинку.

Либо же, просто отдельно создаете картинку с таким же названием, с таким же размером, а потом копируете ее в эту папку, и когда спросят «Заменить это изображение?» вы выбираете «Да, заменить!». Таким образом, вы заменяете картинки, которые вам не подходят.

Так же, обращаю ваше внимание на то, что обязательным атрибутом лендинга является форма отправки контактных данных вашего потенциального клиента и вам необходимо внести определенные настройки, что бы все сообщения отправлялись на ваш e-mail.

Настройка отправки сообщений

Возвращаемся в папку с лендингом и находим здесь файл sendmail.php, либо в некоторых лендингах он может называться index.php или mailer.php. В общем, файл, который находится в корне вашего лендинга, и имеет расширение php. Вам необходимо будет этот файл, так же открыть либо в каком-то текстовом редакторе, либо в Notepad++ или его аналоге.

И здесь, как вы можете видеть написан комментарий «впишите сюда свою электронную почту». Вписываете вместо указанного e-mail адреса вписываете адрес своей электронной почты, и затем сохраняете этот файл.

После того, как вы внесли все изменения можно смело брать и выгружать данный лендинг к себе на хостинг.

Выгружаем лендинг на хостинг

Для этого вы можете воспользоваться либо файловым менеджером на вашем хостинге. Либо, если у вас файлового менеджера на хостинге нет, то вам нужно будет подключиться к вашему хостингу по FTP при помощи какого-нибудь FTP-клиента.

Для загрузки файлов делаем следующие шаги:

1. 1.Настраиваем FTP подключение и подключаемся к сайту
2. 2.В левой части окна открываем папку с лендинг пейдж, которую вы только что редактировали
3. 3.В правой часть окна FTP клиента открываем папку с доменом
4. 4.Выделяем все файлы в левой части окна и перетаскиваем в правую

После того как все файлы выгрузятся, данный лендинг будет уже доступен в интернете.

Видеоинструкция

Как видите, всё довольно просто, но свои заморочки всё же есть. В одной из следующих статей я покажу как редактировать и настраивать шаблоны лендинг пейдж с встроенным визуальным редактором. Там всё намного проще и интереснее. Так что подписывайтесь на новости блога, а мне пора идти дуть шары и наряжать комнату. Сегодня у моего сына день рождения, ему исполняется 4 года и мы хотим сделать ему сюрприз.

Так что пока он спит пойдём украшательствами заниматься 🙂

Хорошего вам дня!

С уважением Юлия Гусарь

impuls-web.ru

Об одностраничниках

Если вы регулярно читаете наш блог, то наверняка уже знаете, что такое одностраничный сайт и какова его роль в интернет-маркетинге. Но несмотря на всю популярность лендингов, довольно часто еще можно встретить олдскульных маркетологов, предпочитающих работать по-старинке: через рекламные объявления на радио и в газетах, многостраничные сайты и листовки в почтовых ящиках.

В то же время, даже если вы не прочь перебраться в онлайн и использовать для этого все современные техники, вы можете банально не знать, как создать landing page, сколько это стоит и действительно ли такой формат подходит вашей компании.

Именно поэтому для начала мы предлагаем ознакомиться с несколькими определениями одностраничников:

• с точки зрения технической реализации, лендинг — это веб-ресурс, который содержит те же элементы, что и обычный сайт (html, css, видео, текстовый контент, изображения), но состоит из одной страницы;
• со стороны маркетинга, это эффективный инструмент для генерации лидов, или, по-простому, для получения контактов потециальных клиентов;
• с точки зрения посетителя, одностраничник — это сайт, на который он перешел по ссылке в поисковике или рекламном объявлении.

Сделать интересный, качественный продающий одностраничник — задача непростая, но вполне реализуемая. А для того чтобы выжать из него максимум прибыли, соблюдайте следующие правила создания лендинг пейдж.

Заголовок

Заголовок — это один из главных элементов лендинга, поэтому ему следует уделить особое внимание. Помните, что второго шанса исправить первое впечатление не будет. Хороший продающий заголовок должен:

• четко доносить ваше ценностное предложение до пользователя, давая ему понять, что он найдет здесь то, что ему нужно;
• описывать выгоды от приобретения вашего товара, подписки на ваш сервис или сотрудничества с вами;
• выделять ваш бренд среди множества конкурентов.

Иногда заголовок еще называют оффером, так как он лучше всего выражает предложение (англ. offer), адресованное вашему потенциальному клиенту. Однако оффер — это скорее вся совокупность изобразительных, визуальных, информационных средств, которые помогают описать ваш продукт и его ценность.

Для примера, рассмотрим несколько лендингов из нашего магазина целевых страниц LPStore. Каждый одностраничник, представленный в галерее, содержит заголовок, сразу дающий понять, что предлагает компания:

Правильное позиционирование оффера: с точки зрения выгод клиента («Почувствуйте себя пилотом», а не «Купите наш квадрокоптер»). Посмотреть всю страницу.

На некоторых лендингах в дополнению к заголовку также встречаются подзаголовки. Не все одностраничники в обязательном порядке должны содержать данный элемент, однако он уместен в случае, когда необходимо пояснить сложный продукт. Тогда главный заголовок часто делают в вопросительной форме, а в подзаголовке — отвечают на вопрос или же перечисляют преимущества:

Подзаголовок этого лендинга содержит перечисление преимуществ: «В наличии все модели и размеры», «Взимаем минимальный налог»

Назад к содержанию

Одна цель — один лендинг

Ваш одностраничный сайт должен сосредотачивать внимание посетителя только на одном действии, так гласит второе правило. Это ключевая задача при создании лендинга — донести до потенциальных клиентов одну идею, рассказать об одном продукте, не перегружая их разнообразными предложениями.

Вот еще один пример от наших разработчиков:

Весь лендинг сосредоточен на одной цели — покупке земельного участка. И изображения, и кнопка призыва к действию, и заголовки — все подталкивает посетителя оставить свои контакты. Посмотреть всю страницу.

Назад к содержанию

Пояснение выгоды

Выделяйте выгоды, чтобы заинтересовать посетителей еще сильнее. Старайтесь не только убедить пользователя в необходимости заказа услуги или покупки товара, но и побудить его сотрудничать именно с вашей компанией.

Описывайте преимущества простым языком, выделяйте их с помощью списков и буллетов, акцентируйте внимание на отличительных особенностях.

Вот продолжение того же одностраничника для покупки участка:

Назад к содержанию

Персонализация

Персонализируйте свое послание, обращайтесь к посетителю на «Вы», используйте все приемы, чтобы показать — клиент важен для вас:

Назад к содержанию

Правильная структура

Всегда с умом структурируйте информацию на лендинге. Иконки, списки, буллеты — подойдет все, что способствует чанкингу контента. Типичный пользователь не будет читать длинный однообразный текст, у него нет на это времени. Предоставьте четкие и понятные описания, наглядные иллюстрации, информативные видеоролики, которые упростят «жизнь» клиента, а не наоборот.

Многие из тех, кто задаются целью самостоятельно сделать лендинг пейдж, уделяют недостаточно внимания структурированию и иерархии контента. Очень важно соблюдать баланс между текстом и графикой, подбирать соответствующие изображения, не перенасыщать страницу ни тем, ни другим.

Назад к содержанию

Социальные доказательства

На продающем лендинге обязательно должны присутствовать так называемые «социальные доказательства» — отзывы, сертификаты качества, логотипы известных клиентов и любые другие знаки доверия (лучше, если их будет несколько). 

Почему это важно? В своих решениях люди часто ориентируются на опыт других, а с помощью отзывов вы фактически показываете пользователю, что честны с ним, не собираетесь его обокрасть или продать его контактные данные сторонней компании. Реальные отзывы от настоящих клиентов подтвердят и укрепят вашу репутацию.

Призывы к действию

Надеемся, что к этому моменту вы уже приблизились к пониманию того, что же представляет собой landing page, но говоря о том, как правильно его сделать, нельзя опустить важность призывов к действию (call-to-action или CTA).

Призыв к действию — это еще один фундаментальный элемент одностраничника, который обычно содержится в хедере, а также в самом конце страницы. По желанию можно разместить CTA и в других частях лендинга, вместе с лид-формой, например.

Мы чаще всего выбираем вариант с кнопками, которые делаем контрастными.

Не менее важен текст кнопки. Исследования говорят, что нужно составлять надпись таким образом, будто ее произносит пользователь, как бы озвучивая свое желание:

Назад к содержанию

Лид-формы

При самостоятельном создании landing page, обязательно нужно предусмотреть место для лид-формы. Этот элемент желательно делать максимально простым, без лишних полей, которые могут вызвать затруднения или вопросы у посетителей. Помните, что вы расчитываете на долгосрочное сотрудничество, и получение контактных данных — это первый шаг навстречу.

Все лендинги, разработанные командой LPgenerator, как правило, содержат открытые лид-формы:

Несколько слов о размещении этого элемента. Многие разработчики выбирают для этого хедер. Такой вариант имеет право на существование, но мы рекомендуем все-таки остановиться на втором-третьем экране лендинга, а саму форму лучше размещать с правой стороны. Это связано с особенностью восприятия информации — мы читаем слева направо, а значит, лид-форма с призывом воспримется лучше, если будет завершать вашу историю, а не навязываться раньше времени.

Назад к содержанию

Таймеры обратного отсчета

Счетчики — незаменимый элемент одностраничника. Таймеры создают так называемый «эффект срочности», который мотивирует пользователей скорее делать выбор и принимать решение.

И еще несколько советов, как самому сделать landing page:

• делайте «говорящий» дизайн — это поможет пользователю лучше воспринять информацию и ваше предложение;
• ориентируйте один лендинг на одну целевую аудиторию;
• выбирайте правильный сервис для создания Landing Page, о чем мы и поговорим далее.

Назад к содержанию

lpgenerator.ru

На всякий случай или этап 0

И на всякий случай еще раз. Лендинг пейдж — это специальный маркетинговый инструмент, который создан только с одной целью, чтобы потенциальный покупатель совершил необходимое Вам действие на нем.

Если Вам интересно прочитать чем же все таки посадочная страница лучше стандартного большого (корпоративного) сайта, то в этой статье можно изучить этот вопрос подробней — “Отличие лендинга от сайта многостраничника”.

Обычно говорят, что одностраничные сайты создают, чтобы продать или получить контакты человека онлайн, но на самом деле здесь кроется гораздо более широкий круг задач:

1. Получить новые заявки на товары/услуги;
2. Увеличить узнаваемость бренда;
3. Информировать о предоставлении товаров/услуг;
4. Предоставить консультацию по услугам;
5. Получить резюме от кандидатов (Что!? Лендинг для этого??? Вот вам пример — Альфа-банк);
6. Привлечь партнеров, дилеров, представителей;
7. Обеспечить доступ к сервису;
8. И прочее.

Важно! Перед созданием Вам нужно чётко определить цель Вашего лендинга. И запомните — цель должна быть одна.

То есть не нужно на одном сайте пытаться и продать товар, и привлечь дилеров. Это разные задачи, а это значит разные landing page. Пускай это сократит охват потенциальных людей, но увеличит эффективность страницы, которая оправдает в финансовом плане всё.

ЭТАП 1 — Отдать или сделать самому

На этом шаге Вам нужно определить какие из двух вариантов решения выберите Вы.

И выбираться будут они на основании Ваших денежных и временных ресурсов. Рассмотрим каждое из них с плюсами и минусами.

Конструктор

Как-то один клиент нам написал претензию после того как получил сайт. Суть её заключалась в том, что мы не обоснованно много взяли денег. Выглядело это всё очень странно, ведь он до этого со всем ознакомился, подписал договор. Но мы компания не бедная, поэтому нам проще отпустить клиента с миром (не всегда), чем пытаться что-то доказывать. Что мы и сделали.

А всё это произошло потому, что он нашёл в интернете конструктор лендингов и узнал, что всё можно сделать самому, потратив на это буквально 5-6 часов, и заплатив при этом не больше 1 000 рублей в месяц. Но мы то с Вами понимаем, что можно собрать и “машину” самостоятельно, но насколько она далеко поедет, насколько будет индивидуальный дизайн landing page, насколько будет корректное техническое оснащение… Подробно все этапы создания лендинга со сроками мы описывали в статье создание лендинга под ключ.

Плюсы:

• Дешево. Прям очень. 500-1000 рублей в месяц и Вы — счастливый владелец одностраничного сайта;
• Просто. Вам не нужно думать о верстке, адаптации под мобильные устройства, подключении смс-оповещений о новых заявках на Ваш телефон. Все это уже есть и сделано для Вашего удобства;
• Быстро. Сделать и настроить можно реально всё быстро. Причём, внести изменения тоже не составит труда;
• Техническая поддержка. У Вас есть вопрос? Вам ответят на него максимально быстро и подробно. Огромный плюс;
• Бесплатный тестовый период. Сейчас практически у всех конструкторов лендинг пейдж 14 дней бесплатного тестового периода. Регистрируетесь и…

Небольшая жизненная правда. “14 дней халявы! За это время заработаю денег с помощью лендинга на конструкторе и закажу красивый сайт в агентстве”, — думали они. Через 14 дней, еле сумев победить конструктор, сделав все неправильно и не получив ни одного заказа через сайт, они поняли, что одностраничники не работают.

Минусы:

• Знания. Вам нужно знать какие блоки нужно использовать, их последовательность и прочее. Решили подглядеть у конкурентов? Отлично! Только откуда Вы знаете, что у конкурентов эффективный лендинг и показывает хорошие показатели?
• Дизайн. Если Вы работете с конструктором первый раз, то на дизайн landing page по окончании работ “без слез не взглянешь”. Даже если это далеко не первый вариант. Крутого дизайна, такого, чтоб “Вау!”, не ждите.
• Ограниченность. Количество готовых блоков ограниченно, как и их функционал. Дизайнерские решения тоже представлены не в самом широком ассортименте. Поэтому если Вы хотите, чтобы вот тут вылетала птичка, когда человек оставляет заявку (как будто его заявка улетела к Вам с почтовыми голубями), можете забыть о такой идее.

Лично мы можем посоветовать этот landing page конструктор. Обычно мы отправляем к ним клиентов, которые только начинают или тестируют нишу. И всё это не на правах рекламы, просто нам он реально нравится. Идеальное сочетание на наш взгляд цены/качества/функционала.

Фрилансеры

Давайте сразу по делу и из опыта. Найти фрилансера, который в одиночку создаст продающий лендинг с нуля и “под ключ” — НЕВОЗМОЖНО. Ну правда. Возможно найти отдельных специалистов: дизайнера, который создаст дизайн будущего сайта, или программиста, который его сверстает, но монстра, который КАЧЕСТВЕННО сможет сделать сайт от и до, не существует. Под всей работой я подразумеваю ещё таких людей как: интернет-маркетолог, копирайтер, менеджер-проекта. Просто невозможно во всём быть хорошим, физически, как минимум.

Поэтому идеальная схема работы с фрилансером, это когда Вы самостоятельно всё анализируете, собираете, готовите. А дизайнер и верстальщик, найденные на бирже фриланса, просто это реализуют, причём, без самодеятельности.

Плюсы:

• Время. Как плюс, так и минус. Выгода в том, что Вы снимаете с себя основную часть хлопот по реализации внешнего вида и технической составляющей.
• Качество. Главный плюс. Сто процентов они сделают лучше, чем сделаете это Вы своими руками с нуля. Как минимум, потому что у них есть опыт и знания, которых у Вас в их сфере, давайте честно, почти нет.

Минусы:

• Ответственность. Если сайт не будет работать, то никто кроме Вас не виноват. Так как Вы являетесь тем, кто ими управляет и говорит как нужно.
• Поиски. Вам нужны специальные знания где их искать, как ставить им задания и… нужно также заполнять бриф, показывать ТЗ и прочее.
• Время и нервы. Время, чтобы найти фрилансера, время на создание задач, время, чтобы сделать прототип лендинга, время на контроль. Потратите очень много времени и нервов. В большинстве своем фрилансеры-разгильдяи (извиняюсь, но так и есть), поэтому затягивание сроков, периодические потери с радаров связи будут. И это минимум, который можно ожидать, когда хотите сделать лендинг пейдж недорого.
• Деньги. Вам придётся раскошелиться, так как хороший специалист без “связей” стоит не мало. Дизайн среднего качества выйдет в районе 8-10 тысяч, вёрстка тоже в районе этой суммы. Опять же всё зависит от сложности проекта и самих исполнителей.
• Кидалы. Работа строится следующим образом: 50 на 50. Предоплата и потом оставшаяся оплата после завершения проекта. Не хочу никого обижать, но среди фрилансеров очень много людей, которые… не берутся за выполнение проекта после получения предоплаты. Проще говоря, теряются.

Лайфхак. Если Вы решили работать с фрилансером, то рекомендую следующую схему оплаты: 50 процентов предоплаты проводите как безопасную сделку (почти во всех биржах есть), а оставшуюся часть суммы перечисляете уже напрямую фрилансеру. Переплатите 15%, но зато обезопасите себя. Кстати, если фрилансер собрался Вас кинуть, то от безопасной сделки он Вас будет отговаривать. Это будет Вам сигналом.

Этап 2 — кому и что?

Самый скучный (но самый нужный) блок в этой статье.

Неважно каким путем Вы пойдете. Будете делать эффективный лендинг пейдж своими руками или отдадите в специализированное агентство. В любом случае Вам нужно знать 3 вещи:

• Свою целевую аудиторию,
• Лестницу Ханта,
• Внутренности вашей компании.

Отличие лишь в том, что если Вы будете делать в одиночестве посадочную страницу, то придется все расписывать и продумывать самостоятельно. Агентство же даст Вам заполнить подробный бриф, благодаря которому расписывание ЦА и прочее они делают сами. Мы, правда, идём другим путем и заполняем бриф самостоятельно, общаясь с Вами по скайпу. Искренне считаем, что только так возможно получить всю информацию, так как есть возможность задать вытекающие вопросы в ходе беседы. А такие вопросы появляются всегда.

Целевая аудитория

Про определение целевой аудитории, или ещё глубже определение аватара клиента, мы уже писали. Эта проработка даст понимание кто Ваш потенциальный клиент, какие у него есть страхи, возражения, желания, связанные с Вашим товаром/услугой. На что нужно давить в будущем лендинге, какие слова использовать, какие изображения лучше вставить. Упрощённая схема итога выглядит так:

Лестница Ханта

Но что даст знание лестницы Ханта? Также как и аватар клиента, она даст саму структуру будущего лендинга.

Кратко перескажу Вам статью про лестницу Ханта, но уже в применении к одностраничному сайту, потому что очень часто владельцы бизнеса не понимают на каком этапе осознанности находится их потенциальный клиент (если лень читать, то смотрите видео).

Если очень коротко.

До момента принятия решения о покупке человек проходит 5 шагов/уровней осознанности:

1. Этап “Безразличие”. Проблемы не существует.
2. Этап “Осведомленность”. Проблема есть, но нет решения.
3. Этап “Сравнение”. Варианты решения проблемы сравниваются между собой.
4. Этап “Выбор”. Вариант решения выбран. Ищутся продукты.
5. Этап “Покупка”. Выбор между поставщиками продукта.

Как эта сложность может помочь Вам при создании лендинга? Давайте рассмотрим каждый этап и как нужно действовать:

1. Этап “Безразличие”
   Вам нужно сначала создать проблему в голове человека. Показать, что если он этого не сделает/не купит, то все будет плохо.
2. Этап “Осведомленность”
   Вам нужно в первых экранах показать, что существуют разные варианты решения его проблемы.
3. Этап “Сравнение”
   Нужно донести, что Ваше решение лучше других, и для этого можно сделать сравнительную таблицу, предложение обзора продукта, результатов исследования, личную консультацию по подбору и т.д.
4. Этап “Выбор”
   Вам нужно показать какое предложение подойдёт именно ему, точнее в каком в виде/комплектации. Для этого раскрываем больше выгод нашей продукции.
5. Этап “Покупка”
   Вам нужно показать, в первую очередь, выгоду работы именно с Вашей компанией, а уже потом рассказывать о продукте и о том, что он самый лучший.

Вроде бы не надо Вам это, но… К примеру, если человек выбирает между покупкой квартиры и постройкой своего дома, то в лендинге дома должен быть блок, объясняющий, чем дом лучше квартиры.

Упаковка

Как будет выглядеть Ваш сайт в голове Вы примерно представляете. И хорошо, если у Вас есть фирменный стиль или брендбук (идеально, я бы даже сказал). А что на счет выгод Вашего продукта или компании в целом? И еще несколько десятков вопросов, на которые Вам нужно ответить прежде, чем прейти к созданию прототипа и сайта.

Так как правильные вопросы формируют правильные ответы, которые Вы берёте и упаковываете в свой сайт. Этот этап поможет Вам взять всё самое ценное в Вашей компании и показать это лицом.

Чтобы вы уловили суть, вот Вам пример из 10 вопросов, которые помогут лучше/глубже осмыслить свою компанию и свой продукт, и подать это “под чудесным соусом”:

1. Сформулируйте 3-5 “причины, почему объективно выгоднее покупать у Вас, а не у конкурентов”.
2. Какие особенности производства есть именно в Вашей компании?
3. Проводите ли Вы внутреннее обучение персонала?
4. Сравните продукт с аналогами. Укажите преимущества и недостатки.
5. Кто является лицом или лицами компании?
6. Какие бонусы Вы готовы выдавать клиентам при покупке на большие суммы?;
7. Распишите детально этапы работы с клиентом от первого обращения до выполнения работ.
8. Расскажите про финансовые условия работы (предоплата, рассрочка, отсрочка первых выплат, продуктные кредиты, скидки, продукт на реализацию, выкуп неликвида и т.д.).
9. Какие о компании или от компании существуют публикации? (экспертные комментарии, интервью, жюри в телешоу, авторские колонки, статьи).
10. Ваши клиенты-звёзды.

ЭТАП 3 — Прототип

Наконец-то мы добрались до самого интересного. Сейчас будем создавать Ваш будущий сайт. Вернее, пока как самостоятельно сделать прототип, но это хотя бы интересней, чем просто расписывание целевой аудитории.

Шаг 1. Структура прототипа

Прототип — это структура и последовательность блоков будущего лендинга, которую Вы легко построите из критериев выбора и возражений Вашей целевой аудитории.

Лучше всего сделать это следующим образом: берёте лист бумаги и накидываете последовательность блоков/смыслов. Выглядит это примерно так:

1. Шапка;
2. Выгоды компании;
3. Каталог;
4. Собственное производство;
5. Склад;
6. Команда;
7. и т.д.

Это мы с Вами прописываем блоки, но также должны не забывать про две классические структуры, по которым строится любой рекламный материал и landing page не исключение:

1. AIDA (товары/услуги);
2. PmPHSA (инфобизнес). Расшифровывается как Pain, more Pain, Hope, Solution, Action (боль, усиление боли, надежда, решение, призыв к действию).

Чтобы Вы не ломали голову как донести один из выбранных смыслов и сильно облегчили себе жизнь при самостоятельном создании прототипа, Вам в помощь статья “Правильная структура лендинга”.

Шаг 2. Детали

Далее, когда Вы несколько раз переписали структуру и учли всё, что важно целевой аудитории, мы переходим к деталями, а именно к заголовкам, подзаголовкам, тексту, изображениям. Можно сделать это опять же на листке бумаги, но мы используем специальную программу Balsamiq Mockups, которую Вам и рекомендуем. Вот так выглядит реализация:

И вот так все выглядит в итоге в реальности:

На этом шаге раскрывается весь Ваш концепт. И без общих знаний копирайтинга сюда лучше не соваться. Иначе Ваша фантазия закончится на избитых фразах в стиле “Почему 95 процентов клиентов выбирают нас”, “Как мы работаем”, “О нас”. Чтобы хоть как-то подкачаться в этой области, рекомендую почитать наши статьи:

1. Техника: свойство-преимущество-выгода
2. Бизнес копирайтинг
3. 4U заголовки: схватите вашего клиента за глаза
4. Как писать заголовки: 6 формул как сделать их цепляющими

Шаг 3. Призывы

И вот только здесь мы делаем призывы к действию. Это может показаться странным, но если хорошо подумать, то это правильно. Потому что мы делаем призыв, подходящий по контексту к блоку. А не блок к призыву.

Несколько рекомендаций про призывы к действиям:

• Делайте их разными. Не только купить, но и записаться на тест-драйв, связаться с менеджером, открыть доступ к видео-презентации. Чем они больше отличаются друг от друга, тем больше шанс поймать клиента в свои сети.
• Делайте их простыми. Чем проще шаг, тем больше конверсия сайта, и тем больше шансов убедить человека стать Вашим навсегда. Поэтому стараемся делать не “купить”, а “получить предложение”. Не “записаться на вызов мастера”, а “записаться на бесплатный замер”.

И стоит хорошо подумать какие сделать призывы, так как именно они призывают человека совершить действие. И если они не совпадут с его мыслями, то он просто уйдёт, так как не найдёт нужного предложения для себя. Больше информации на эту тему читайте в нашей статье “Кнопки призыва к действию”.

ЭТАП 4 — Дизайн

Самая приятная часть процесса. При условии, что Вы заказываете оформление у дизайнера. Так как если решите делать это самостоятельно, Вас будет раздражать всё, что Вы делаете на конструкторе. Ведь то, что Вы хотите, не получается, а то, что уже вышло, Вам не нравится.

Хотя с дизайнером тоже не мало мороки может быть. Поэтому перед тем как передать всё в его руки, обязательно нужно написать МАКСИМАЛЬНО ПОДРОБНОЕ техническое задание. С примерами того, что Вам нравится, что не нравится. Какие где фото использовать (хотя бы примерно). На что сделать акцент. Фактически, для программиста и для дизайнера делаются разные технические задания.

Если Вы всё таки решили делать дизайн собственноручно. На что обращать внимание при разработке лендинга под ключ:

• Цветовые пятна. Один экран = один основной цвет. Не нужно использовать несколько разных оттенков и создавать тем самым новогоднюю ёлку.
• Минимализм. Если опыта в дизайне мало, то Ваш выбор — простая и стильная страница без лишних деталей. Чтобы Вам было приятно, называйте его “Как у Apple”.
• Воздух. Между элементами должно быть пространство, которое отделяет между собой смыслы. В идеале запомнить правило: 1 экран = 1 смысл.
• Акценты. У Вас должно всё быть в соподчинении. Что-то должно бросаться в глаза первым, потом взгляд должен перемещаться на второй элемент, а затем на другие.

Если уже сейчас Вы думаете, что лендинг создать самостоятельно — это для Вас слишком, есть мы и банер ниже.

ЭТАП 5 — Вёрстка

Опять же, если конструктор, то проблем будет меньше. Собственно, как и возможностей. Если программист-фрилансер, то ему нужно отдельное ТЗ, где Вы указываете как что должно себя вести и какая анимация будет у каждого элемента. Если Вы её продумали, конечно.

Перед оплатой и запуском сайта проверьте свою страницу на кросс-браузерность и мобильную версию. Обычно именно на этом рушатся все наполеоновские планы. Когда в половине браузеров всё лагает и не работает. Или вообще не приходят заявки на почту, а Вы уже решили, что сам сайт не конверсионный.

Также при вёрстке нужно определить для себя нужна ли Вам админ-панель. Ведь если в Ваш landing планируется постоянно вносить правки, то стоит предусмотреть этот пункт. Но по практике, изменения всегда небольшие и поэтому достаточно обычного HTML-кода, в котором легко разобраться за 5 минут.

ЭТАП 6 — Вечность

Хотелось данному этапу дать более конкретное название, например, “Запуск и получение заявок”, но “Вечность” звучит более подходяще. После того как Вы сделали лендинг своими силами, начинается самое интересное:

• “Сайт плохо работает”;
• “Мне перенравился этот блок”;
• “Люди хотят видеть на сайте калькулятор”;
• “Ссылка должна открываться в новом окне”.

Всё это подводит к постоянной работе над сайтом и это нормально. Мы не стесняемся озвучивать руководителям, спустя 2-3 года после того как сделали сайт, что дайте нам доступ, мы изменим бесплатно несколько блоков. И это обусловлено новыми знаниями, наработками, опытом. Именно поэтому будьте готовы к а/б тестам и изменениям длинною в вечность.

Коротко о главном

Вот, пожалуй, и вся пошаговая инструкция. Вы узнали как сделать лендинг самому, как создать его таким, чтобы он не просто был, а продавал, и сколько стоит это все. Как Вы могли заметить, это совсем не легко, если подходить к созданию с головой. И большая часть успеха это не дизайн и программирование, а структура, смысл и призывы. И это подтверждалось на наших глазах не раз. Мы видели как безумно страшные посадочные страницы давали конверсию, о которой можно только мечтать во сне.

Являясь агентством, которое создаёт лендинг пейдж под ключ, хочется сказать, что лучше отдайте это дело профессионалам. Но Вы же не поверите и скажете, что нам выгодно так говорить. Но я сейчас говорю не про нас, а вообще про людей, которые специализируются на этом.

Так как один хороший лендинг окупит себя максимум за месяц, а может и с первой сделки. Когда Ваш самостоятельно созданный будет больше сливать бюджет и не давать развиваться. И не потому что Вы плохо его сделали, а потому что его можно сделать лучше. Ведь всё относительно.

in-scale.ru

Что обычно подразумевается под лендингом

Landing Page, их еще называют посадочными страницами, это как правило, одностраничный сайт, единственной целью которого является заставить пользователя совершить определенное действие, в большинстве случаев это конечно же потратить свои денежки на ваш товар или услугу. И помогают в этом специальные элементы, которые уже принято считать стандартными на лендингах:

1. Призывы к действию (Подпишись, купи, зарегистрируйся, оформи), большая, привлекающая внимание кнопка продажиподписки, зачастую не одна — в начале и в конце страницы.
2. Отзывы от потребителей, положительные комментарии о продукте из различных форумов, соц. сетей и т.д. в общем элементы убеждения при помощи социальных инструментов, что бы вызвать доверие у посетителя.
3. Всевозможные акции, скидки, бонусы, зачастую сопровождаемые счетчиком с обратным отсчетом. То, что подтолкнет посетителя совершить действие здесь и сейчас, не откладывая на будущее (ведь потом он уже с большой вероятностью никогда не вернется на ваш сайт)
4. Различные элементы оформления сайта, созданные все с той же целью — заставить купить. Это и всевозможные картинки, фотки продукта с удачных позиций, счастливые люди, вызывающие доверие персонажи. Всевозможные дизайнерские приемы, вроде стрелок, направляющих ваш взгляд на кнопку, крупные заголовки, высокий контраст важных элементов, рамки, меняющийся местами текст и т.д. Арсенал огромен.
5. Собственно сам продающий текст, который включает описание продукта, его преимущества, способы применения и в, идеале, работа с отрицаниями потребителя. Вообще, создание продающего текста, это отдельная большая тема.
6. Нередко встречается встроенное видео, рассчитанное на тех, кто больше любит смотреть и слушать, а не читать. Иногда делают его запускаемым по клику, иногда автоматически при загрузки страницы — тут все индивидуально, где-то одно лучше работает, где-то другое, где-то вообще без видео будет отклик больше.

И ведь лендинги на мое удивление работают (лично у меня они уже вызывают обратную реакцию, но большинство обычных пользователей сети до сих пор на них клюют)! Хотя надо признаться, всё хуже и хуже, народ уже пресыщается, пройдет совсем немного времени, когда конверсия с них не будет превышать конверсию с обычных методов продаж, а может даже будет еще меньше, я уверен. Но пока эта тема работает, ее нужно использовать.

Тем более что продающие одностраничники создаются в основном под контекстную рекламу или другие виды привлечения трафика, кроме SEO, а следовательно особой ценности сам по себе такой лендинг не представляет, если его не подпитывать трафиком извне. Поэтому когда он перестанет работать можно будет без лишних сожалений отправить его на виртуальную свалку.

Ну а теперь, после длинной вводной части, перейдем собственно к самому интересному — созданию своей посадочной страницы

Как создать Landing Page. Способы создания лендинга

Есть несколько способов смастерить себе одностраничник:

1. Использовать различные шаблоны, позволяющие создавать посадочные страницы (как для популярных CMS так и с собственной админкой или на чистом html)
2. Онлайн генераторы посадочных страниц
3. Сделать самому лендинг с нуля
4. Заказать у профессионалов и не тратить время и нервы.

Для экономии времени я использую первый вариант, на нем подробнее и остановимся.

Создание лендинг пейдж при помощи готовых шаблонов

Совсем недавно мне подкинули отличную подборку шаблонов для лендингов, как на html так и с собственной админкой.

Как вы понимаете, этот метод сильно экономит время, поскольку основная структура, скрипты, html тело, верстка и т.д. уже все готово. Нужно будет лишь поменять тексты, закачать нужные картинки и, при необходимости, добавить свой функционал и настроить стили.

По времени это займет немногим больше, чем скажем работа с онлайн генератором, но по деньгам обойдется в разы дешевле. Из минусов можно лишь отметить, что понадобятся хотя бы базовые навыки работы с html и css, ну и конечно свой домен с хостингом.

Так например на днях я создавал лендинг по продаже елок в Тюмени, и удачно заскринил весь процесс =)

Никакой установки — просто закачивается архив на хостинг в корневую папку и вперед, работать. Вот так выглядел выбранный мной шаблон по умолчанию:

Стандартная посадочная страница, с счетчиком, кнопками, и т.д. Не хватает только отзывов, но это не проблема — заказчику отзывы оказались не нужны, при желании добавить их не составит никаких проблем. Данный лендинг идет с собственным функционалом — миниадминкой если так можно назвать.

После авторизации админ может изменять элементы страницы прямо в окне браузера. Достаточно кликнуть по нужному месту мышкой и выскакивает вот такая менюшка:

Тексты меняются на живую прямо печатая на клавиатуре. Из данной менюшки настраивается форматирование, цвета, фон, добавляются ссылки, картинки, видео, флэш и даже фреймы и т.д. Однако некоторую базовую инфу, вроде емейла, настроек скрипта заказа и т.д. придется настраивать вручную через правку файлов (инструкция к шаблону прилагается)

1. Первым делом зашел на сайт www.iconfinder.com и подобрал себе бесплатные приличные иконки в виде елок. Они пойдут как на создание элементов оформления или логотипа, так и для создания faviconа.

2. Заменил коробки на елки, поменял тексты, цвета формы и шапки на зеленый оттенок, убрал лишние блоки и т.д. на все про все ушло около часа, большая часть времени на поиск картинок и их адаптацию под шаблон. В итоге верхняя часть лендинга стала выглядть так

Цвета конечно больше напоминают какой-то милитари, ну да ладно, на вкус и цвет заказчики разные, я уже давно не лезу к ним со своим эстетизмом) Пришлось и в коде поковыряться и в css залезть — обойтись одной админкой увы не получится если хотите подогнать шаблон под себя.

3. С нижней частью вообще проблем никаких — карту удалил, схему работы позднее тоже, по просьбе заказчика. Поменял немного градиенты под нужные мне цвета. Поменял тексты у преимуществ. Они пока предварительные, допиливаться будут позднее я думаю.

4. Далее я подключил бесплатный набор шикарных шрифтовых иконок Font Awesome http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ С их помощью за 5-10 минут запросто можно накидать простенькие графические элементы оформления сайта. Преимущество векторных иконок в том, что они отлично масштабируются без потери качества, и внешний вид вы можете настраивать прямо через css, не пользуясь графическими редакторами.

Для того что бы установить их у себя на сайте, достаточно скачать архив, распаковать его в корневой каталог на хостинге и в секции <head> вашего сайта прописать путь к css файлу <link rel=»stylesheet» href=»font-awesome/css/font-awesome.min.css»>. Если вы используете Bootstrap то там еще проще. Подробнее о методах установки можете почитать тут http://fortawesome.github.io/Font-Awesome/3.2.1/get-started/ как ими пользоваться тут http://fortawesome.github.io/Font-Awesome/3.2.1/examples/

В итоге получится что-то вроде этого

Что бы у нас вылез такой вот красивый грузовичок достаточно будет вставить в нужное место код <i class="icon-truck"></i>. Что бы задать ему нужные нам стили оформления можно добавить дополнительные классы, я например добавил 2 класса <i class="icon-truck elkico grn"></i>. В elkico задал размер для всех иконок этого ряда, в grn соответственно цвет для всех зеленых иконок и дальше для оформления мне всего лишь нужно было дописать 2 слова при вставке кода.

При желании вы можете сделать из таких иконок ссылки, кнопки, сможете вращать их как вам угодно и даже добавлять анимацию, и все это посредством только CSS.

Вот так это нижняя часть лендинга стала выглядеть после добавления иконок

По хорошему в пункте Живые елки нужно бы иконку елочки вставить, но в наборе нет такой, а делать вручную мне было лениво) Попозже сделаю. Таким образом при должной сноровке вы сможете создавать довольно симпатичные лендинги за 2-3 часа (а если пользоваться базовыми шаблонами то вообще за пол часа можно управиться). Ну а в целом сайт выглядит теперь так:

Плюсы: быстро, дешево, вы сам себе хозяин и господин 🙂

Минусы: нужно разбираться в html и css, уметь работать с изображениями, иначе пункт быстро можно смело вычеркнуть. Так же данный набор шаблонов имеет устаревшую верстку — она не адаптивная, т.е. на небольших мониторах и мобильных приложениях дизайн сайта будет смотреться коряво.

Для WordPress могу подсказать несколько шаблонов, заточенных специально под создание лендингов:

• JustLanded вполне неплохой шаблон, использовал его как-то для создания лендинга на вордпрессе. Из плюсов — недорогой (10$) и простой по сравнению со многими премиум шаблонами. Адаптивный, с набором предустановленных стилей оформлений, шорткодами и даже WooCommerce поддерживается. Для создания лендингов используется встроенный в тему конструктор. Из минусов — английский язык. Впрочем он там не сложный и моих базовых знаний вполне хватило что бы понять все нужные функции и настройки.
• Есть и более выпндрежные, наподобие этого Bridge со всякими паралаксами, анимацией и т.д.
• А вообще их полно, под разные нужды и с разным функционалом, тэг one page на themeforest в помощь http://themeforest.net/tags/one%20page

Онлайн генераторы лендинг пейдж

Тут я не буду так подробно разжевывать — при желании вы сами сможете ознакомиться с онлайн инструментами, позволяющими создавать продающие одностраничники. Просто перечислю наиболее популярные сервисы

1. Lpgenerator пожалуй самый популярный в рунете, найти можно по ссылке http://lpgenerator.ru/. И вместе с тем один из самых дорогих.

Из преимуществ — есть бесплатный 14-дневный тестовый период. Однако тарифы от 2000 до 15000 рублей в месяц. Единственный вариант выгодного использования я вижу, если только вам нужно создать лендинг на короткий срок 1-2 месяца. Шаблонов там не так уж много, по моим прикидкам чуть больше сотни.

Плюсы: не нужно отдельно покупать хостинг и домен, все в одном сервисе и входит в общую цену оплаты тарифа. Тех. поддержка, дополнительные плюшки и всякие акции от сервисов.

Минусы: дорого, зависимость от стороннего сервиса.

2. Onepagemany находится по ссылке http://onepagemany.ru/ Этот конструктор лендингов недавно появился в сети, однако привлек мое внимание несколькими интересными особенностями.

Во первых это возможность использовать сервис без регистрации. Во вторых — созданный шаблон вы скачиваете и устанавливаете себе на хостинг, т.е. нет зависимости от стороннего сервиса, что приятно. Ну и в третьих вроде как он бесплатный, по крайней мере пока я не нашел на нем ценников и платных тарифов. Единственный момент что я увидел — сервис предлагает создать вам уникальный дизайн по вашим запросам, видимо этим и монетизируют.

Из минусов могу отметить что сервис слишком уж сырой, его еще пилить и пилить по хорошему. Ну и всего 4 возможных шаблона на данный момент, это очень скудно.

Подобных генераторов на самом деле много, но большая часть из них мягко говоря не внушает доверия и обладает весьма посредственным функционалом и парой десятков однотипных шаблонов.

Создание landing page с нуля самому

Данный способ не для всех, однозначно. Если вы сами хотите сделать свою собственную продающую страницу с чистого листа то для этого необходимо хорошее знание html, css, умение использовать java скрипты, знание всех необходимых программ и нужных сервисов, хороший дизайнерский вкус, владение фотошопом, умение писать качественные продающие тексты и т.д.

Плюсы: Вы полноценный творец своего интернет-шедевра 🙂 Будете знать каждую запятую, каждую строчку кода вашего продающего сайта, сможете создать уникальный, ни на что непохожий дизайн или функционал. Кроме того это совершенно бесплатно.

Минусы: Долго и сложно, по крайней мере относительно других способов. Такой вариант подходит наверное только для профи или фанатиков.

Заказать лендинг у фрилансера или вебстудии

Довольно распространенный способ. Многие нормальные компании не станут заморачиваться и создавать собственноручно лендинги на генераторах или шаблонах, зная что в итоге просто потратят время или в лучшем случае получат плохо работающий landing page. Им куда проще обратиться к спецам, заплатить примерно 10-20 тысяч рублей (если без выпендрежного дизайна) и получить готовый сайт под свои запросы и нужды.

Конечно, если обращаться к каким-нибудь крупным понтовым веб-студиям то там и 100 тысяч могут запросто содрать) Если же обращаться к малоизвестным фрилансерам на дешевых биржах, то можно и за 2-3 тысячи найти исполнителя, но качество такой работы скорей всего будет сомнительным (или будут использоваться готовые шаблоны в чистом виде без особой адаптации под индивидуального заказчика, разве что текст поменяют и пару фоток) а возможно и на деньги кинут, что тоже случается.Так что тут тоже как повезет.

Плюсы: Вы заказываете сайт, вы получаете сайт, таким какой хотите. Не тратя на это времени и сил.

Минусы: Вы тратите на это деньги)

Кстати, если вам нужен лендинг, то вы можете заказать его у меня за сравнительно небольшую цену (от 7 до 15 тысяч рублей в зависимости от сложности) и получите полноценный продажник, с текстами, картинками, счетчиками, отзывами и всем необходимым. Опыт в создании сайтов более 3-х лет.

Пишите на почту [email protected] или через контактную форму на странице услуги http://ruskweb.ru/uslugi/

ruskweb.ru