ruSKweb.ru

"Самая хорошая работа – это высокооплачиваемое хобби"

Генри Форд

Как самому сделать Landing Page, он же лендинг пейдж

landing

Приветствую друзья.  В недавнем опросе, который я устраивал на своем блоге (можете глянуть его тут http://ruskweb.ru/limesurvey/index.php/115338/lang-ru), меня несколько раз просили осветить темы, связанные с созданием landing page и различными нюансами, связанными с одностраничными продающими сайтами.

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

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

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. Заменил коробки на елки, поменял тексты, цвета формы и шапки на зеленый оттенок, убрал лишние блоки и т.д. на все про все ушло около часа, большая часть времени на поиск картинок и их адаптацию под шаблон. В итоге верхняя часть лендинга стала выглядть так

делаем landing page своими руками

Цвета конечно больше напоминают какой-то милитари, ну да ладно, на вкус и цвет заказчики разные, я уже давно не лезу к ним со своим эстетизмом) Пришлось и в коде поковыряться и в 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-х лет.

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

Понравилась статья? Жми лайк:

23 комментариев

  1. Артем пишет:

    Привет! Все пилишь шаблон))) Слушай, а почему ты фонтавесом версии 3.2. используешь? Сейчас новая версия 4.2 http://fortawesome.github.io/Font-Awesome/icons/, зачем старая версия?

    Кстати, есть еще сервис http://www.flaticon.com/ просто с кучей иконок на любую тематику – та просто можно собственные наборы иконок делать. Набираешь нужные иконки, а потом скачиваешь готовый набор для подключения по типу фонтавесом

    [Ответить]

    Сергей Кобзарь отвечает:

    Привет. Не, шаблон уже месяц как не трогал, видимо у тебя в кэше просто старая версия долго сидела)

    Фонтавсом мне и третий вполне подошел, какая разница если и там и там есть нужные мне иконки, а те что новые добавили – не нужны =)

    Да знаю про этот сервис – я первым делом в него как раз зашел, но там мне не понравились елки))

    [Ответить]

    Артем отвечает:

    Странно, неделю назад заходил к тебе и таких заголовков не видел…
    С авесомом может быть ты и прав)))

    [Ответить]

    Денис Нихаев отвечает:

    А что бы вы сами посоветовали? Хочу подобное сам сделать, но надо учиться…

    [Ответить]

  2. Артем пишет:

    Есть еще способ создания ледингов – покупаешь на темфорест шаблон в хтмл баксов за 10 и так же его подредактировал и закинул на хостинг

    [Ответить]

  3. Дмитрий пишет:

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

    [Ответить]

    Артем отвечает:

    Ничего подобного, если поддержка шаблона прекращается, то шаблон снимается с продаж.

    [Ответить]

    Сергей Кобзарь отвечает:

    Спасибо, хотя по мне так маловато на нем инфы.

    Да такое может случится с шаблонами, но маловероятно, Артем вон объяснил, там свои правила.

    [Ответить]

  4. Pasagir пишет:

    Хорошая статья! И подборка шаблонов хорошая!
    Я как-то делал лэндинг, так только час на поиски нормального шаблона потратил. В итоге херня получилась =))

    А оформление статьи у тебя прям крутое теперь, читать приятно.

    [Ответить]

    Сергей Кобзарь отвечает:

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

    [Ответить]

  5. Очень круто! иконки раньше искал на iconsearch , что-то последнее время мне там разонравилось, надо попробовать iconfinder. Статья действительно зачетная.

    [Ответить]

    Сергей Кобзарь отвечает:

    Денис, рад что понравилось

    [Ответить]

  6. seoonly.ru пишет:

    Спасибо, весьма подробно

    [Ответить]

  7. Достаточно подробная инструкция, со всеми тонкостями и пояснениями технологии процесса создания лэндинга на своем сайте. Спасибо! Благодаря таким авторам жизнь начинающих «чайников» -владельцев сайтов и блогов становится проще! Удачи Вам во всех Ваших начинаниях! И с наступающим Новым годом!

    [Ответить]

    Сергей Кобзарь отвечает:

    Наталья, благодарю за столь лестный отзыв. Вас тоже с наступающим!

    [Ответить]

  8. ВИКТОРИЯ пишет:

    приятный сайт хорошо!!

    [Ответить]

  9. Денис пишет:

    К лендингу еще бы хорошего маркетолога)

    [Ответить]

  10. Ceon пишет:

    куда пропал

    [Ответить]

    Сергей Кобзарь отвечает:

    В данный момент приболел малость

    [Ответить]

    Ceon отвечает:

    Чет вообще не пишешь статей.

    [Ответить]

    Сергей Кобзарь отвечает:

    Пишу, но очень редко =) В черновиках уже висит, все руки не дойдут отредактировать и опубликовать, на этой неделе думаю появится статейка про уникализацию

    [Ответить]

  11. seoonly.ru пишет:

    Проще слить готовый БМовский с вареза)

    [Ответить]

  12. Александр пишет:

    Прикольно, – интересно было узнать. Оказывается это лэндинг называется.

    [Ответить]

Оставить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: