Як стварыць лендинг. 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/