Як створити Лендінгем. Landing Page своїми руками

  1. Що зазвичай мається на увазі під Лендінзі
  2. Як створити Landing Page. Способи створення Лендінзі
  3. Створення Лендінгем Пейдж за допомогою готових шаблонів
  4. Онлайн генератори Лендінгем Пейдж
  5. Створення landing page з нуля самому
  6. Замовити Лендінгем у фрілансера або вебстудії

Вітаю друзі. У недавньому опитуванні, який я влаштовував на своєму блозі, мене кілька разів просили висвітлити теми, пов'язані зі створенням landing page і різними нюансами, пов'язаними з односторінкового продають сайтами.

І дійсно, ця тема дуже популярна нині. Практично кожен перший інфошнік використовує Лендінзі для своїх курсів і продуктів, а слідом за ними цю ідею підхопили і інші бізнесмени, які хочуть продавати свої товари і послуги через інтернет з високою часткою конверсії.

Що зазвичай мається на увазі під Лендінзі

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

  1. Заклики до дії (Підпишись, купи, зареєструйся, оформи), велика, що привертає увагу кнопка продажу \ підписки, часто не одна - на початку і в кінці сторінки.
  2. Відгуки від споживачів, позитивні коментарі про продукт з різних форумів, соц. мереж і т.д. в загальному елементи переконання за допомогою соціальних інструментів, що б викликати довіру у відвідувача.
  3. Різноманітні акції, знижки, бонуси, часто супроводжувані лічильником із зворотним відліком. Те, що підштовхне відвідувача зробити дію тут і зараз, не відкладаючи на майбутнє (адже потім він вже з великою ймовірністю ніколи не повернеться на ваш сайт)
  4. Різні елементи оформлення сайту, створені всі з тією ж метою - змусити купити. Це і всілякі картинки, фотки продукту з вдалих позицій, щасливі люди, що викликають довіру персонажі. Всілякі дизайнерські прийоми, на зразок стрілок, що направляють ваш погляд на кнопку, великі заголовки, високий контраст важливих елементів, рамки, мінливий місцями текст і т.д. Арсенал величезний.
  5. Власне сам текст, що продає, який включає опис продукту, його переваги, способи застосування і в, ідеалі, робота з запереченнями споживача. Взагалі, створення продає тексту, це окрема велика тема.
  6. Нерідко зустрічається вбудоване відео, розраховане на тих, хто більше любить дивитися і слухати, а не читати. Іноді роблять його запускаються при натисканні, іноді автоматично при завантаження сторінки - тут все індивідуально, десь одне краще працює, десь інше, десь взагалі без відео буде відгук більше.

І адже Лендінзі на моє здивування працюють (особисто у мене вони вже викликають зворотну реакцію, але більшість звичайних користувачів мережі до сих пір на них клюють)! Хоча треба зізнатися, все гірше і гірше, народ вже пересичується, пройде зовсім небагато часу, коли конверсія з них не буде перевищувати конверсію з звичайних методів продажів, а може навіть буде ще менше, я впевнений. Але поки ця тема працює, її потрібно використовувати.

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

Ну а тепер, після довгої вступній частині, перейдемо власне до найцікавішого - створення своєї посадкової сторінки

Як створити Landing Page. Способи створення Лендінзі

Є кілька способів змайструвати собі одностранічнік:

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

Для економії часу я використовую перший варіант, на ньому докладніше і зупинимося.

Створення Лендінгем Пейдж за допомогою готових шаблонів

Зовсім недавно мені підкинули відмінну добірку шаблонів для Лендінзі, як на 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] або через контактну форму на сторінці послуги https://ruskweb.ru/uslugi/