Jaký je nejlepší způsob, jak vytvořit vstupní stránku sami? Jak si sami vytvořit vstupní stránku: pokyny krok za krokem

Vytvoření vstupní stránky (vstupní stránky) nebo vstupní stránky, vstupní stránky, maximálně zjednoduší cestu uživatele k požadovanému cíli. Taková stránka je navržena tak, aby ovlivnila základní instinkty člověka, aby ho povzbudila k cíleným akcím: kliknout, zavolat, objednat, koupit „hned teď“.

Vstupní stránky se nejlépe hodí k provádění reklamních kampaní na konkrétní službu nebo nabídku s jedinečnou (nízkou) cenou a také k přilákání cílového publika z kontextových reklamních systémů Google AdWords, Yandex.Direct, sociálních sítí a e-mailových zpravodajů:

Co je vstupní stránka?

Vstupní stránka je samostatná stránka, která se používá pro:

• prodej konkrétního produktu nebo služby;
• vytvoření předplatitelské základny.

Poté, co se rozhodnete vytvořit vstupní stránku, musíte použít nezbytné spouštěče vlivu, které uživatele donutí rychle se rozhodnout (nákup produktu, zadání informací pro získání slevy, absolvování kurzu, webináře atd.).

Z pohledu uživatele je landing page stránka, na kterou se dostane po kliknutí na informátora, banner, reklamní příspěvek apod. Vstupní stránka se zásadně liší od internetového obchodu. Chcete-li prodat jeden produkt a provést jednu reklamní kampaň, vytvořte si vlastní stránku a použijte různé spouštěče vlivu.

Typy vstupní stránky:

• Autonomní. Toto je nejběžnější typ vstupní stránky. Hlavním úkolem je povzbudit uživatele k nákupu nebo provedení konkrétní akce doporučené stránkou;
• Microsite. Malá, často samostatná webová stránka sestávající z maximálně 5 stránek obsahujících informace o produktu nebo službě;
• Hlavní stránka. Pro vstupní stránku používá jednu nebo více zdrojových stránek;
• Web Lando. Zdroj, který se skládá výhradně z nezávislých vstupních stránek:

Typy vstupní stránky

• Reklamní. obsahovat velké množství textových, grafických a video informací o službě;
• Virový. Reklama je maskovaná jako článek nebo hra. Často se jedná o e-mail, sociální sítě, chaty;
• Cílené hlavní stránky. Jsou navrženy tak, aby shromažďovaly informace o cílové skupině, zpravidla obsahují minimum informací.

Dobře navržená vstupní stránka může zvýšit konverzi návštěvníků na skutečné kupující.

Proč potřebujete vstupní stránku?

Hlavním účelem vstupní stránky je prodej. Vstupní stránka obsahuje prodejní text, prezentaci produktu nebo služby a výzvu k akci. Vstupní stránka je vynikající nástroj pro rychlé spuštění služby nebo produktu na internetu. Vstupní stránky umožňují shromažďovat předplatitele a žádosti o služby atd.

Pokud správně prezentujete svůj produkt/službu, uděláte dobrou prezentaci s uvedením silných stránek a také nastavíte tok návštěvnosti (reklama na sociálních sítích, kontextová reklama atd.), stačí sbírat aplikace od svých klientů a prodávat jim inzerovaný produkt/službu.

Výhody používání vstupní stránky

Přistání má ve srovnání s běžnými zdroji nabízejícími služby nebo produkty řadu výhod:

• Cílení na konkrétní publikum. Vstupní stránka nenabízí mnoho rozhodnutí, která vyžadují, aby si uživatel vybral, ale jednu jedinečnou nabídku, které je těžké odolat;
• Vysoká konverze. Podle statistik může použití vstupních stránek pro reklamní účely zvýšit konverzi o 10–15 %;
• Úplné informace o nabízeném produktu/službě, ale bez dalších přechodů a odkazů;
• Schopnost shromažďovat kontakty návštěvníků a doplňovat databázi potenciálních klientů, kterým můžete později zasílat informace o připravovaných akcích/slosováních;
• Nízké náklady na vytvoření vstupní stránky. Dokonce i začínající podnikatelé si mohou dovolit vytvořit vstupní stránku, a tak otestovat mezery v produktech, aby mohli začít prodávat na internetu:

Kde a jak se používají vstupní stránky?

Vstupní stránku můžete nastavit jako interní nebo hlavní stránku podnikového zdroje, jednostránkového webu nebo stránky na sociální síti. V poslední době je stále populárnější (offline stránky) u klíčových produktů, a to v době, kdy firma již má firemní web. Dělají to právní a lékařské společnosti, banky, mobilní operátoři a mnoho dalších.

Kde se používají vstupní stránky?

• V reklamních kampaních využívajících kontextovou reklamu s platbou za kliknutí (PPC) v Yandex.Direct, Google AdWords, Zahájeno. V tomto případě je provoz přesměrován na vstupní stránky optimalizované pro klíčové dotazy;
• V bannerových reklamních kampaních za předpokladu, že grafický materiál je umístěn na tematických zdrojích určených pro cílové publikum. Například bannerová reklama na novinky v oblasti elektroniky je umístěna na zpravodajských portálech v segmentu pro specialisty v oblasti IT technologií;
• Ve zpravodajích informačních a marketingových dopisů obsahujících odkaz na vstupní stránku. Například informační bulletiny pro internetový obchod, které zohledňují předchozí nákupy uživatele;
• Provádění blogových kampaní, ve kterých je uživatel přesměrován na vstupní stránku zdroje, s jehož vlastníkem blogger dříve uzavře partnerskou smlouvu o umístění bannerové reklamy, poštovních a PR článků;
• Kampaně na sociálních sítích (VKontakte, Facebook, Twitter atd.) nebo na populárních webech hostujících média (například YouTube, Flickr atd.). Uživatelé jsou přesměrováni na vstupní stránku inzerenta, který má souhlas s umístěním reklamních materiálů u vybraného mediálního zdroje:

Základní způsoby vytvoření vstupní stránky

• Bezplatné šablony a generátory vstupních stránek. V dnešní době je na internetu mnoho možností pro bezplatné šablony a designéry, které vám umožní vygenerovat vstupní stránku. Nejoblíbenější služba. Je to vynikající volba pro společnosti s omezeným rozpočtem, ale s týmem specialistů zběhlých v marketingu a designu;
• Kontaktování specialistů. Text pro vstupní stránku si můžete objednat u copywritera, vývoj designu od návrháře a integraci s enginem od programátora. Společnost zároveň musí mít zaměstnance marketéra, který bude projekt sledovat ve všech jeho fázích. Mezi výhody této metody patří relativně nízké náklady a poměrně vysoké výsledky, nevýhodou je riziko chyby při výběru specialistů;
• Agenturní outsourcing. Tento způsob vytvoření vstupní stránky zahrnuje kontaktování agentury, která se ujme analýzy konkurence, vybere koncept, vypracuje strategii reklamní kampaně, vyřeší problém integrace s enginem a spustí projekt. Stačí od vás brief pro vytvoření cílové stránky a agentura se ujme vývoje vstupní stránky na klíč. Mezi výhody této metody patří vysoká účinnost a úspora času, nevýhodou jsou vyšší náklady než u předchozích možností;
• Udržujte tým specialistů, kteří se budou zabývat... Toto je nejdražší a nejúčinnější způsob. Váš vlastní tým složený z designéra, copywritera, marketéra a programátora layoutu vám umožní plně propagovat váš produkt/službu na trhu.

Je možné vytvořit vstupní stránku sami?

Vstupní stránku si můžete vytvořit sami, ale budete muset mít určité dovednosti v oblasti vývoje webu, analýzy a designu. Pokud takové zkušenosti nemáte, využijte služeb, které nabízejí hotové šablony, ve kterých stačí pouze vyplnit text a nakonfigurovat doménu a hosting.

Vlastní vytvoření vstupní stránky ušetří peníze a čas. Na internetu lze najít zdroje se šablonami různých předmětů, které jsou dodávány s návodem na rychlou instalaci a softwarem umožňujícím úpravy. Náklady na takové sady mohou být mnohem nižší než cena za vývoj vstupní stránky ve specializované agentuře:

Je možné vytvořit vstupní stránku zdarma?

Vzhledem k tomu, že zájem o vstupní stránky neustále roste, vývojáři nabízejí stále více nástrojů pro vytváření vstupních stránek na základě šablon. Zde je seznam nejoblíbenějších metod a služeb:

• Pokud se zaregistrujete na Wix, můžete si vytvořit bezplatnou vstupní stránku;
• Vstupní stránku můžete vytvořit pomocí aplikace Adobe Photoshop;

Třetí možnost je nejvhodnější pro začátečníky, kteří mají minimum znalostí a nechtějí ztrácet čas učením složitých systémů programování webu.

Optimalizace vstupní stránky

Vytvoření cílové stránky je polovina úspěchu, je důležité ji správně optimalizovat. Jednostránkové weby mají jednu, ale poměrně podstatnou nevýhodu – pro vyhledávače je poměrně těžké najít. Vícestránkové zdroje mají jedinečné nadpisy, správné propojení a složitou strukturu udávající váhu stránek atd.

Architektura jednostránkového webu neumožňuje provést kvalitní interní optimalizaci v klasickém slova smyslu, „ušít“ web na míru požadavkům vyhledávačů. Řešení od Googlu nám umožnilo se tohoto problému zbavit – rozložení pomocí JavaScriptu a metody PushState.

Chcete-li optimalizovat svou vstupní stránku, měli byste provést následující:

• rozdělit vstupní stránku na bloky;
• Každý blok musí dostat svůj jedinečný indikátor, název, popis a název, URL.

To znamená, že každý blok musí mít stejné vlastnosti jako každá jednotlivá stránka na webu, zatímco vyhledávací robot bude váš web vnímat jako několik jedinečných stránek. Návštěvníci vstupní stránky si tohoto rozhodnutí nemusí všimnout; pouze ti nejpozornější si všimnou, že při rolování po stránce se mění adresa URL a název. K realizaci takového projektu budete potřebovat určité znalosti v oblasti SEO a layoutu s JavaScriptem.

Pokud potřebujete pouze informace o službách, pomocí kterých můžete vytvořit vstupní stránku, přejděte rovnou ke kroku 5 – výběr nástroje pro rozvržení. Pokud chcete porozumět algoritmu pro vytvoření vstupní stránky od A do Z, přečtěte si celý článek.

Jak vytvořit vstupní stránku – pokyny krok za krokem v 9 fázích Fáze 1. PřípravaÚčel cílové stránky

V první řadě si určíme účel cílové stránky, co chceme od návštěvníků stránky získat. Obvykle je to jedna ze tří věcí:

1. Prodej zboží/služeb (příklad: prodej medu, prodej služeb designu loga, prodej online kurzu);
2. Přijměte kontakt (příklad: přihlášení k odběru newsletteru, žádost o měření);
3. Informace (příklad: pozvánka na bezplatnou offline událost, promo stránka obchodu s akcemi).

Určujeme cílové publikum a to, co je pro něj důležité

V tomto kroku je pro nás důležité pochopit, kdo je cílovou skupinou pro naši nabídku, jaké mají bolesti, jaké touhy, jaké obavy a co chtějí tito lidé získat. Je důležité tomu všemu porozumět, aby se prvky webu, jako je text a design, zaměřily na cílové publikum (cílovou skupinu).

Jak určit cílové publikum?

• Analyzujte klienty, se kterými jste již pracovali nebo v současné době spolupracujete;
• Zeptejte se klientů, co je pro ně důležité. Ano, je to tak, stačí zavolat nebo napsat, připravit si předem seznam otázek;
• Pamatujte, nebo ještě lépe, zapište si otázky, které se vás v souvislosti s vaším produktem nejčastěji ptají;
• Přečtěte si tématické stránky/fóra, podívejte se, co trápí vaše zákazníky.

Pohled na konkurenty (benchmarking)

Když si zapíšete všechny své myšlenky a nápady týkající se budoucí vstupní stránky, je čas začít analyzovat konkurenty (benchmarking). Pokud již znáte své konkurenty, skvělé, pokud ještě ne, prohledejte vyhledávače pomocí klíčových slov vaší specializace.

Účelem analýzy je najít a vidět, co konkurenti dělají špatně a neopakují své chyby a co dělají dobře, podívat se na nápady, chybějící bloky, zajímavá konstrukční řešení. To neznamená, že je stačí zkopírovat, to samozřejmě nemusíte, uložte si je pro sebe a ve fázi psaní textu a vývoje návrhu je přizpůsobte svému projektu.

Jak to dělám: Vytvořím samostatnou složku s názvem „Nápady“ a pořídím snímky obrazovky zajímavých bloků.

Fáze 2. Psaní textu pro vstupní stránku

Pro mnohé (včetně mě) je psaní textu nejobtížnější fází vývoje, proto se osobně vždy snažím tuto fázi delegovat na copywritera.

Dejte ten chaos ve své hlavě na papír

Jednoduše, bez přemýšlení o pořadí, přeneste všechny myšlenky a nápady pro budoucí přistání na papír. Napište si vše, o čem chcete mluvit. Když napíšete takový seznam myšlenek a navíc jsme se podívali na nápady od konkurentů, dalším krokem je to všechno zkombinovat a vytvořit bloky a strukturu vstupní stránky.

Výroba přistávacích bloků

Vstupní stránka se skládá z určitých bloků; nemůžete jen napsat pevný text jako článek a jen ho publikovat. Tohle se bude číst strašně trapně.

Zde je hlavní seznam bloků, které lze nalézt na 90 % vstupních stránek:

První obrazovka s USP (jedinečný prodejní návrh)

Zveřejnění produktu (popis služby nebo produktu)

Informace o autorovi/firmě

Recenze

Případy (příběhy o úspěchu)

Formulář/výzva k akci

FAQ (odpovědi na často kladené otázky)

Kontakty / zápatí webu

Jaké další bloky mohou být na webu:

• Fakta v číslech
• Výhody (výhody)
• Video
• Portfolio
• Pro koho
• Fáze spolupráce (aneb Jak zadat objednávku, Jak zanechat poptávku)
• Tarify a ceny
• Partneři
• Galerie
• Plán
• tým
• Certifikáty, diplomy, děkovné dopisy
• Dokumentace
• Časovač

Když je rámec vstupní stránky připraven, začneme psát text. Můžete to udělat sami nebo to zadat copywriterovi.

To hlavní jsme dali na začátek. Na začátku webu není třeba psát o sobě, nejprve ukažte svůj produkt.

Nahraďte obecná slova fakty. Návštěvníky není třeba o ničem přesvědčovat, toto právo nechte na nich. (Příklad: nepište, že jste lídři na trhu, kterým lze věřit, ukažte recenze firem, kterým jste poskytli služby a byli spokojeni, navíc přiložte původní hodnocení, aby nebylo neopodstatněné).

Funguje obzvláště dobře na první obrazovce a USP. Poté, co se návštěvník dostane na vaši vstupní stránku, máte tři sekundy na to, abyste upoutali jeho pozornost. Pokud jste neměli čas, daná osoba stránku zavře a bude pokračovat v surfování. První obrazovka by měla být co nejvíce relevantní k dotazu, přes který se návštěvník na stránky dostal. (Příklad: pokud osoba hledá „Účetnictví pro jednotlivého podnikatele“, není nutné zobrazovat vstupní stránku s nadpisem „Účetnictví pro LLC“).

USP (Unique Selling Proposition). Jednoduše řečeno hlavní nadpis a popis, který by měl stručně napovědět, o čem tato vstupní stránka je. USP můžete vytvořit pomocí technologie 4U.

Čím kratší, tím lepší. Snažte se psát bloky textu co nejkratší. Nikdo nečte dlouhé obtékání textu, dnes mají lidé vždy nedostatek času a s tím je třeba počítat. Pokud stále potřebujete poskytnout mnoho informací, rozdělte je do odstavců a bloků.

Více titulů. Odstavce textu by se neměly psát jen tak, bez nadpisu. Většina návštěvníků při návštěvě webové stránky nejprve prochází webem a snaží se vyhodnotit, zda se na něj dostali nebo ne. A zde právě nadpisy hrají důležitou roli, protože podle nich stránky prolistuje a stránky přesně vyhodnotí.

Nechcete si text skládat sami? Najděte si copywritera, který to udělá za vás.

Kde hledat copywritera

Výměna copywritingu ContentMonster.ru

Copywriting exchange Etxt.biz

Soukromé firmy nebo specialisté. Můžete je hledat pomocí vyhledávání nebo na sociálních sítích (VK, Facebook, Instagram).

Na copywritera se můžete obrátit nejen kvůli vývoji textu od začátku. Můžete nás kontaktovat například s hotovým seznamem bloků, s počátečními náčrty nebo dokonce s již sestaveným textem, který copywriter „oživí“, udělá zajímavější a opraví chyby.

Fáze 3. Výroba prototypu

Před fází návrhu je důležité vytvořit prototyp, řeknu vám proč. Důvodů je několik:

Bez prototypu strávíte více času, kupodivu :) Na začátku své kariéry jsem po napsání textu hned dělal design. Myslel jsem si, že tím ušetřím čas, ale ve skutečnosti se ukázalo, že vše trvalo ještě déle, protože není vhodné hned vymýšlet designové prvky bez rámu.

Problémy se zákazníkem, pokud uděláte vstupní stránku na objednávku. Tuto situaci měl každý. Schválili jste text a okamžitě jste začali dělat návrh, strávili jste spoustu času, poslali to klientovi a on říká, že je všechno špatně a je třeba to předělat, text zaměnit atd. To je mnohem obtížnější, když návrh je již hotový, než když máte pouze prototyp z textu a kruhů.

Prototyp lze porovnat s náčrtem, který uděláte před malováním. Málokdo umí vzít barvy a hned malovat obraz. Zde tedy nejprve uděláme náčrt, uvidíme, jak to přibližně dopadne, které bloky lze přesunout, změnit, přidat nebo odebrat text atd.

Příklad z mého případu prototypu a návrh vytvořený pomocí tohoto prototypu.

Příklad prototypu

Příklad návrhu prototypu

Na prototypu uvádíme:

• Umístění textu, zvýraznění nadpisů;
• Kde bude grafika (obrázky, ikony) umístěna?
• Kde budou tlačítka?
• Na kterém bloku bude pozadí světlé a na kterém bude tmavé.

Prototypové služby:

• Photoshop. Dělám to ve Photoshopu. Poté, co prototyp odsouhlasíme se zákazníkem, je vhodné zde vytvořit návrh na základě prototypu.
• Služba Moqups. Speciální služba s hotovými prvky, stačí přetáhnout a přidat svůj text.
• Na papíře. Pokud vstupní stránka není složitá a nechcete se příliš obtěžovat, můžete prototyp načrtnout ručně.

Vždy začínám prototyp na papíře, je to pro mě pohodlnější. Pak to přenesu do Photoshopu.

Použijte Bootstrap Grid

Doporučuji také navrhovat na mřížce, aby se později dal snadno přizpůsobit různým zařízením. Pokud si pro layout zvolíte designový nástroj, kde se samotný design přizpůsobí různým obrazovkám (více o layoutových nástrojích později), a nevyužívá samostatnou mobilní verzi webu, pak musí být design vyvíjen na mřížce.

Šablonu mřížky Photoshopu, kterou používám ve své práci, můžete.

Fáze 4. Tvorba návrhu

Všechny prvky návrhu vstupní stránky lze rozdělit do tří částí, toto je výběr:

Písmo

Barvy

Grafy (fotografie, ikony, obrázky)

Každý prvek navozuje určitou náladu, je pro nás důležité zvolit takovou kombinaci všech prvků, aby si návštěvník vytvořil správný, důvěryhodný vztah k naší firmě a produktu.

Příklad: Na webu poskytující pohřební služby nebudou pravděpodobně vhodné světlé barvy a dívka se zářivým úsměvem s nápisem velkým písmem PROMOTION!. Nebo stránky o pořádání prázdnin v šedých, vybledlých barvách, s černými knoflíky a plochým patkovým písmem, po jejichž zhlédnutí chcete upadnout do deprese a neobjednávat dovolenou pro své dítě. Příklady jsou samozřejmě přehnané, je nepravděpodobné, že je v životě uvidíte (i když je to možné), ale myslím, že podstatu chápete.

Pojďme diskutovat o každém prvku podrobněji.

Písmo

Text je základem každé webové stránky, takže písmo není o nic méně důležité než barva nebo grafika. Písmo může také navodit náladu; může být lehké nebo brutální, evokovat pocit nákladnosti nebo jednoduchosti atd.

Na základě vašeho tématu a emocí, které chcete v návštěvnících vyvolat.

Pokud se nechcete obtěžovat vymýšlením kombinací, vezměte si připravené neutrální varianty, které jsem pro vás připravil. Budou se hodit ke každému tématu. Tento:

• Roboto
• Otevřené sans
• Pt sans

Vyberte jeden nebo dva z nich a promíchejte.

Například:

Název – Roboto (tučně)
Text – Roboto (Light)

Název – Otevřené bez (tučné)
Text – Roboto (Light)

Záhlaví – Pt sans (běžné)
Text – Open sans (Light)

Kde mohu získat písma?

Existují bezplatná a placená písma. V prvních fázích vám doporučuji používat bezplatná písma od Google Fonts. Jsou tam dobré možnosti a jsou tam i ty, které jsem popsal výše.

Proč doporučuji písma Google?

Protože jejich licence vám umožňuje používat písma jak pro sebe, tak pro komerční účely. Pokud se rozhodnete koupit písmo, které se vám líbí, od vývojářů nebo ve speciálních internetových obchodech, pak ok, nejsou žádné problémy, ale pokud plánujete stahovat písma zdarma ze stránek třetích stran, pak je důležité zkontrolovat licenci, protože můžete porušit autorská práva, pokud používáte písmo, které je placené, ale nekoupili jste si ho.

Pokud vytváříte webové stránky pro sebe, nahraďte se, pokud je děláte pro zákazníka, nahraďte zákazníka.

BarvaJak vybrat správné barevné schéma pro web?

Bílé, šedé a černé barvy jsou již součástí sady, jsou vždy použity, např. písmo je bílé, šedé nebo černé, pozadí stránek je bílé, šedé nebo černé. Ať řeknete cokoli, tyto barvy již budou použity na vstupní stránce. Říká se jim achromatické (neobsahují barevné odstíny). Zbývá pouze vybrat chromatické barvy (barevné odstíny).

Webová stránka obvykle používá jednu, dvě nebo tři chromatické barvy. Doporučuji vám vybrat si jeden nebo maximálně dva, jinak existuje šance, že je nebudete moci harmonicky kombinovat a web bude vypadat ošklivě a neharmonicky.

Podívejte se na zajímavé video na toto téma

Musíte je také vybrat na základě vašeho tématu.

Příklady toho, jakou náladu jednotlivé barvy evokují:

Materiál o barvách je převzat odtud.

Grafika (fotografie, ikony, obrázky)

Trendem poslední doby je, že je lepší použít co nejvíce svých fotografií, než používat obrázky z stock fotografií nebo bezplatných z internetu. Stalo se tak proto, že stock fotografie už nudí, identické usměvavé ženy z call centra nebo veselé utahané stěhováky v modrých kombinézách vyvolávají minimálně pocit nedůvěry.

Abych byl upřímný, dříve jsem tím také hřešil, ale nyní prosím (prosím) zákazníky, aby posílali co nejvíce svých „živých“ fotografií produktů, personálu, prostor atd.

Pravda, je lepší fotit telefonem, i když je méně kvalitní, ale klient pochopí, že se neschováváte za masku obrázku z internetu, ukazujete svůj obličej, další bod za důvěřovat své osobě.

Samozřejmě existují témata, kde není nic zvláštního k zobrazení, pak se již můžete uchýlit k fotografiím. Stále radím nakupovat fotografie spíše tam, než hledat ve vyhledávání volné, protože jsou častěji používány na jiných stránkách.

Někdo řekne: "Ilyo, fotografie vypadají jako letadlo!" - existuje taková věc :) Existuje způsob, jak si za dolar stáhnout obrázky o službě. No, pokud děláte projekt pro velkou komerční společnost, pak je lepší si tuto částku rozpočítat a koupit obrázky z oficiálního fotoskladu, opět abyste se ochránili.

• Service ShopDiz.pro - stahování obrázků ze skladu za 0,5-1 dolar.
• Služba ShutterStock je nejoblíbenější akcií s velkým množstvím fotografií, vektorů a videí.

Při výběru obrázků se zaměřte také na své téma a na to, jaké emoce chcete v zákaznících vyvolat. Důvěra, radost, spolehlivost, štěstí atd.

Jak přijít s nápady na design bloků? Neexistuje zde žádné univerzální pravidlo. Hlavní je odstranit vše, co se vám zdá zbytečné, zkrátit text, používat grafiku s mírou a nepřetěžovat. Podívejte se na příklady dobrých vstupních stránek, dělejte si poznámky, udělejte si screenshoty bloků, které se vám líbí, abyste pak mohli něco podobného dělat ve svých projektech.

Fáze 5. Vyberte nástroj rozvržení

Dnes je k dispozici spousta nástrojů pro rozložení, budu mluvit pouze o těch, které jsem sám používal a které jsou pro mě i pro zákazníky nejpohodlnější.

1. CMS WordPress + WPBakery nebo Elementor builder

Nainstalujete WordPress CMS, nainstalujete šablonu, WPBackery builder je placený, ale je zdarma s 99 % šablon, které já . Existuje druhý pohodlný návrhář, to je Elementor, je zdarma, ale pro rozšíření jeho funkčnosti si kupte Pro verzi Elementor. Pro mě jsou oba návrháři pohodlní, nemohu doporučit jednoho, každý má své výhody. Podívejte se na popisy a možnosti stránek s oběma konstruktory a vyberte si ten vhodný.

Tuto možnost využívám hlavně v případě, že kromě cílové stránky potřebujeme další stránky, to znamená, že děláme vícestránkový web. Nebo, abyste nebyli vázáni na žádnou platformu, měla by být stránka umístěna na vašem osobním hostingu.

Například na tomto blogu používám šablonu The7, která je součástí pluginu WPBakery.

Ve službě si můžete vybrat doménu:

• Reg.ru - registrace domény
• Timeweb.com - pokud si koupíte doménu okamžitě s hostingem, pak je výhodnější koupit zde

Registrace domény je pro všechny služby stejná:

Zaregistrujte si účet ve službě;

Vyberte možnost domény, název musí být volný;

Vyberte zónu (ru, com, рф atd.);

Zadejte údaje o svém pasu, pokud se registrujete jako právnická osoba, pak údaje o společnosti;

Zaplaťte za doménu na rok (nebo několik let najednou);

Připraveno!

Chcete-li přidružit doménu k vybranému návrháři nebo hostingu, musíte v nastavení domény zaregistrovat ns servery. Podpora vám pomůže vyrovnat se s tímto úkolem, pokud na to nemůžete přijít sami.

Fáze 7. Rozvržení vstupní stránky

Když je návrh hotový a vy jste se rozhodli pro způsob rozvržení. Dalším krokem je dokončit celou věc.

Bylo by nemožné mluvit o všech nástrojích pro rozložení v jednom článku, budete si je muset prostudovat sami. Možnosti, jak to udělat:

- toto je můj kurz, který jsem zaznamenal pomocí šablony The7 a konstruktoru WPBakery;

Tilda.Education - lekce a webináře o návrháři Tilda;

Kanál WPlovers- ten chlap nahrává lekce na Elementoru;

Znalostní báze LPGenerator – odpovědi na často kladené otázky o platformě LPGenerator.

Fáze 8. Připojte další nástrojeOnline chat

Online chat zvyšuje konverzi, osvědčeno! Pokud je něco, čemu člověk nerozumí a potřebuje poradit. Ne každý zavolá nebo pošle e-mail na podporu, pohodlnější je zeptat se a okamžitě dostat odpověď v online chatu. Můžete připojit např. Jivosite, sám ho používám, „přináší“ mi nové klienty. Můžete mi napsat do chatu "Ahoj!"

CallbackMetrica

Je důležité sledovat ukazatele webu, bez čísel budete jako slepé kotě. Je důležité pochopit, kolik lidí navštívilo web, kolik zanechalo požadavek, jaké obecné ukazatele web má, můžete se dokonce podívat na chování návštěvníků, jak si web prohlížejí. Můžete si nainstalovat Yandex Metrics a/nebo Google Analytics.

Retargeting

Pokud plánujete provozovat reklamu na sociálních sítích, nainstalujte si na svůj web kód požadované sociální sítě. Tento kód bude shromažďovat seznam návštěvníků, kteří navštívili vaši vstupní stránku (to znamená, že se o nabídku zajímali) a kteří mají profil na sociálních sítích. Poté jim můžete svou reklamu zobrazovat na vybrané sociální síti.

CRM

CRM je odpovědné za to, že z webu nezmizí ani jedna aplikace, takže u každé aplikace rozumíte, jaké kroky je třeba provést (zavolat zpět, poslat žádost, setkat se, připomenout se za 14 dní atd.). To platí, pokud máte tok klientů, ale pokud máte 2-3 za měsíc, pak si myslím, že CRM nepotřebujete.

Nejoblíbenější CRM jsou:

• AmoCRM (cena 499 - 1499 rublů/měsíc)
• Bitrix24 (cena, od bezplatného plánu po 11 990 rublů/měsíc)
• Tabulka Google, Excel nebo pero a papír (pokud to potřebujete s omezeným rozpočtem)

Kalkulačka

Pro některé výklenky je důležité použít kalkulačku pro výpočet služby nebo produktu. To je nejen pohodlné, ale také zvyšuje konverzi aplikací. Protože je vždy zajímavé mačkat tlačítka, pohybovat páčkami a sledovat, jaká bude konečná cena. A také zvyšuje ukazatele chování pro vyhledávače.

Kalkulačka se dá buď objednat u vývojářů, což je drahé, nebo můžete využít hotovou službu. Existuje služba uCalc, kterou lze upravit pro oblíbené CMS, designéry nebo vlastní web. Sestavte si kalkulačku pomocí pohodlného konstruktoru a přidejte ji na web.

Sbírání předplatitelské základny

Pokud se rozhodnete shromažďovat kontakty zákazníků do databáze odběratelů, abyste mohli později odesílat e-maily nebo SMS zprávy, musíte použít speciální službu. Možná budete chtít zvážit SendPulse, nedávno jsem tuto službu zkontroloval, což můžete. SendPulse má bezplatný plán, se kterým můžete službu vyzkoušet. Pokud ne jeho, tak jsou na trhu další nabídky, například MailerLite, UniSender, JustClick, GetResponse atd.

Fáze 9. Ověřování

Tak! Vše je nastaveno, připojeno, stránky jsou již na internetu, hurá, dobře. Nyní je čas to zkontrolovat. Co přesně bych měl zkontrolovat?

Kontrola textu

Ujistěte se, že provedete korekturu textu nebo se obraťte na korektora/copywritera, aby to provedl. Kontrolujeme chyby v textu, omylem zkopírované bloky při layoutu apod. Nic nezkazí dojem seriózní firmy víc než chyby v textu.

Kontrola adaptability

Nezapomeňte zkontrolovat rozvržení vstupní stránky na tabletu a telefonu. Adaptuje se vše dobře? Ano, občas se stane, že není možné vše zařídit dokonale, ale mělo by to být alespoň čitelné a víceméně přehledné. Pokud nelze blok správně přizpůsobit, musíte vytvořit dva stejné bloky, jeden skrýt v počítačové verzi a druhý skrýt na mobilních zařízeních. A každý blok je vhodné nakonfigurovat pro zvolené rozlišení.

Testování tlačítek

Zkontrolujte, zda mají všechna tlačítka přiřazenou požadovanou hodnotu: ukotvení na požadované místo, otevření modálního okna, přechod na jinou stránku atd.

Kontrola formulářů žádostí

Odešlete žádost o testování a zkontrolujte doručitelnost e-mailu. Pokud jste provedli integraci s CRM, zkontrolujte, zda je aplikace součástí CRM.

Příklady vstupních stránek

Můžete vidět příklady vstupních stránek, které jsem vytvořil

Pokud potřebujete vytvořit vstupní stránku na objednávku, napište do komentářů nebo zanechte požadavek

VÝSLEDEK

Pokud jste dokončili všechny kroky, gratulujeme, vaše vstupní stránka je připravena! Nyní potřebujete, aby vám vaše vstupní stránka přiváděla zákazníky, k tomu je potřeba nastavit reklamu, ale to je příběh na jiný článek. Doufám, že pro vás byl tento článek užitečný a mohli jste pochopit celý proces vývoje kvalitní vstupní stránky na klíč. Případné dotazy můžete psát do komentářů pod tento příspěvek. Můžete si také zapisovat své postupy a triky při tvorbě webu, bude zajímavé číst a učit se vaše úspěchy :)

Písma Google

Napište své myšlenky do komentářů. Uvidíme se v dalších článcích!

Landing, landing, landing, landing page, jednostránkový web, langing page, one-page, prodejní web, landing page.

Tolik jmen, dokonce zcela zvrácených, stejné věci. Jde o to, že téměř bez ohledu na to, co děláte, takový web potřebujete.

No, protože je to potřeba, vyřešme problém s jeho vytvořením. Vytvořit vstupní stránku sami? Po tomto článku – žádná otázka!

Navíc je to správné, smysluplné a zasáhne cíl. Jak se říká, svou oblíbenou prodejní vstupní stránku si můžete vytvořit sami.

Jen pro případ nebo fázi 0

Obvykle se říká, že jednostránkové weby jsou vytvořeny za účelem prodeje nebo získání kontaktů člověka online, ale ve skutečnosti je zde mnohem širší rozsah úkolů:

Přijímat nové požadavky na zboží/služby;

Zvyšte povědomí o značce;

Informovat o poskytování zboží/služeb;

Poskytování poradenství v oblasti služeb;

Získejte životopisy od kandidátů;

Přilákat partnery, prodejce, zástupce;

Poskytnout přístup ke službě;

A tak dále.

Než začnete tvořit, musíte si uvědomit, že se nemůžete snažit prodat produkt a přilákat prodejce na jednom webu. A to vše proto, že se jedná o různé úkoly, a to znamená různé vstupní stránky.

Důležité. Před vytvořením musíte jasně definovat účel vaší vstupní stránky. A pamatujte – měl by existovat jeden cíl.

Nechť tím sníží dosah potenciálních lidí, ale zvýší efektivitu stránky, která vše finančně odůvodní.

KROK 1 – Darujte nebo vyrobte sami

V tomto kroku se musíte rozhodnout, kterou ze dvou možností řešení zvolíte.

Co dělat... Co dělat

A budou vybráni na základě vašich finančních a časových zdrojů. Podívejme se na každý z nich s jeho klady a zápory.

Konstruktér

Jednou nám jeden klient po obdržení stránek napsal stížnost. Jeho podstatou bylo, že jsme nebrali mnoho peněz oprávněně.

Všechno to vypadalo velmi zvláštně, protože se už se vším seznámil a podepsal smlouvu. Ale nejsme chudá firma, takže je pro nás jednodušší nechat klienta v klidu odejít (ne vždy), než se snažit něco dokazovat. To jsme udělali.

A to vše se stalo, protože na internetu našel návrháře vstupní stránky a zjistil, že může dělat všechno sám, strávit na tom doslova 5-6 hodin a platit ne více než 1 000 rublů měsíčně.

Ale vy i já chápeme, že si „auto“ můžete sestavit sami, ale jak daleko to dojede, jak to bude individuální, jak moc bude mít správné technické vybavení...

Všechny fáze tvorby cílové stránky s termíny jsme podrobně popsali v článku.

Klady :

• Levný. Velmi. 500-1000 rublů měsíčně a jste šťastným majitelem jednostránkového webu;
• Prostě. Nemusíte myslet na rozvržení, přizpůsobení pro mobilní zařízení nebo připojení SMS upozornění na nové aplikace do vašeho telefonu. To vše již existuje a je provedeno pro vaše pohodlí;
• Rychle. Vše zvládnete a nakonfigurujete opravdu rychle. Kromě toho nebude obtížné ani provést změny;
• Technická podpora. Máš otázku? Odpoví vám co nejrychleji a nejdůkladněji. Obrovské plus;
• Bezplatné zkušební období. Nyní mají téměř všichni návrháři vstupních stránek 14denní bezplatnou zkušební dobu. Zaregistrujte se a...

Trochu pravdy ze života. „14 dní zdarma! Během této doby si vydělám peníze pomocí vstupní stránky na tvůrci webu a objednám si krásný web od agentury,“ mysleli si.

Po 14 dnech, kdy se jim sotva podařilo porazit návrháře, udělali všechno špatně a neobdrželi přes web jedinou objednávku, zjistili, že jednostránkové nefungují.

mínusy:

• Znalost. Musíte vědět, které bloky použít, jejich pořadí atd.

  Rozhodli jste se podívat na své konkurenty? Skvělý! Jak ale víte, že vaši konkurenti mají efektivní vstupní stránku a vykazují dobrý výkon?

• Design. Pokud pracujete s designérem poprvé, pak se na konci práce nebudete moci podívat na design vstupní stránky bez slz.

  I když to není první možnost. Nečekejte skvělý design, který bude „Wow!“

• Omezení. Počet hotových bloků je omezený, stejně jako jejich funkčnost. Designová řešení také nejsou prezentována v nejširším rozsahu.

  Pokud tedy chcete, aby zde vyletěl ptáček, když člověk opustí aplikaci (jako by vám jeho aplikace uletěla s poštovními holuby), můžete na takový nápad zapomenout.

Osobně můžeme tento tvůrce vstupní stránky doporučit. Obvykle na ně odkazujeme klienty, kteří právě začínají nebo testují výklenek.

Na volné noze

Pojďme rovnou k věci a ze zkušenosti. Najít freelancera, který samostatně vytvoří prodejní vstupní stránku od nuly a na klíč, je NEMOŽNÉ. No, je to pravda.

Je možné najít jednotlivé specialisty: designéra, který vytvoří design budoucího webu, nebo programátora, který to dá dohromady, ale neexistuje monstrum, které by KVALITNĚ udělalo web zvenku i zevnitř.

Veškerou prací mám na mysli i takové lidi jako: internetový marketér, textař, projektový manažer. Je prostě nemožné být dobrý ve všem, alespoň fyzicky.

Ideální způsob práce s freelancerem je proto, když si vše analyzujete, sbíráte a připravujete sami.

A designér a designér rozložení nalezený na burze na volné noze to jednoduše implementuje a bez jakékoli iniciativy.

Klady :

• Čas. Jak plus, tak mínus. Výhodou je, že se zbavíte většiny starostí s implementací vzhledové a technické komponenty.
• Kvalitní. Hlavní plus. Udělají to o sto procent lépe než vy sami od nuly.

  Minimálně proto, že mají zkušenosti a znalosti, které máte ve svém oboru vy, buďme upřímní, téměř žádné.

mínusy:

• Odpovědnost. Pokud web nefunguje, pak za to nemůže nikdo jiný než vy. Protože vy jste ten, kdo je ovládá a mluví podle potřeby.

  Vyhledávání. Potřebujete speciální znalosti o tom, kde je hledat, jak jim zadávat úkoly a... také musíte vyplnit brief, ukázat technické specifikace atd.

• Čas a nervy. Čas na hledání freelancera, čas na vytváření úkolů, čas na výrobu prototypu vstupní stránky, čas na ovládání. Ztratíte spoustu času a nervů.

  Většina freelancerů jsou bafuňáři (omlouvám se, ale je to tak), takže dojde ke zpožděním v termínech a periodickým ztrátám z komunikačních radarů.

  A to je minimum, které můžete očekávat, když chcete vytvořit vstupní stránku levně.

• Peníze. Budete muset vydělat peníze, protože dobrý specialista bez „spojení“ stojí docela dost.

  Průměrně kvalitní provedení bude stát kolem 8-10 tisíc, rozložení bude stát také kolem této částky. Opět vše záleží na náročnosti projektu a samotných účinkujících.

• Podvodníci. Práce je strukturována následovně: 50/50 Záloha a poté zbývající platba po dokončení projektu.

  Nechci nikoho urazit, ale mezi freelancery je spousta lidí, kteří... se projektu po obdržení zálohy nevezmou. Jednoduše řečeno, ztratí se.

Nyní něco málo k platbě: pokud se rozhodnete spolupracovat s freelancerem, doporučuji následující platební schéma: jako bezpečnou transakci proveďte 50procentní zálohu (mají ji téměř všechny burzy).

A zbytek částky převeďte přímo freelancerovi. V tomto případě přeplatíte 15 %, ale ochráníte se.

Lifehack. Pokud vás nezávislý pracovník podvede, odradí vás od bezpečné transakce. Toto bude váš signál.

Fáze 2 – komu a čemu?

Nejnudnější (ale nejnutnější) blok v tomto článku. Nezáleží na tom, kterým směrem se vydáte. Efektivní landing page si uděláte sami nebo ji zašlete specializované agentuře. V každém případě musíte vědět 3 věci:

Vaše cílové publikum;

Huntův žebřík;

Vnitřek vaší společnosti.

Jediný rozdíl je v tom, že pokud si vytvoříte vstupní stránku sami, budete si muset vše napsat a promyslet sami.

Agentura vám dá k vyplnění podrobného briefu, díky kterému si rozvrhy cílové skupiny a podobně udělají sami. My však jdeme jinou cestou a vyplňujeme brief sami, komunikujeme s vámi přes Skype.

Upřímně věříme, že je to jediný způsob, jak získat všechny informace, protože během rozhovoru je možné položit následující otázky. A takové otázky se vždy objevují.

cílové publikum

O definování cílového publika, nebo ještě hlubšího definování klienta jsme již psali.

Tato studie vám umožní porozumět tomu, kdo je váš potenciální klient, jaké má obavy, námitky a přání související s vaším produktem/službou.

Na co byste měli tlačit na budoucí vstupní stránce, jaká slova použít, jaké obrázky je nejlepší vložit. Zjednodušený souhrnný diagram vypadá takto:

Hunt's Ladder pro cílové publikum

Co ale dá znalost Huntova žebříku? Stejně jako avatar klienta poskytne samotnou strukturu budoucí vstupní stránky.

Řeknu vám to stručně, ale v aplikaci na jednostránkový web, protože majitelé firem velmi často nechápou, v jaké fázi povědomí je jejich potenciální klient (pokud jste příliš líní číst, podívejte se na video).

Stručně řečeno, před rozhodnutím o nákupu člověk projde 5 kroky/úrovněmi povědomí:

Fáze „Lhostejnost“. Žádný problém.

Fáze „Povědomí“. Existuje problém, ale řešení neexistuje.

Fáze „Srovnání“. Možnosti řešení problému se vzájemně porovnávají.

Fáze „Výběr“. Byla vybrána možnost řešení. Hledání produktů.

Fáze „Nákup“. Výběr mezi dodavateli produktů.

Jak vám tato složitost může pomoci při vytváření vstupní stránky? Podívejme se na jednotlivé fáze a jak postupovat:

Fáze „Lhostejnost“. Nejprve musíte vytvořit problém v hlavě toho člověka. Ukažte, že když si to nekoupí/nekoupí, tak bude všechno špatně.

Fáze „Povědomí“. Na prvních obrazovkách musíte ukázat, že existují různé možnosti, jak jeho problém vyřešit.

Fáze „Srovnání“. Potřebujete sdělit, že vaše řešení je lepší než ostatní, a k tomu můžete vytvořit srovnávací tabulku, nabídnout recenzi produktu, výsledky výzkumu, osobní konzultaci při výběru atd.

Fáze „Výběr“. Musíte ukázat, jaká nabídka je pro něj vhodná, respektive v jaké formě/balení. Abychom toho dosáhli, odhalujeme další výhody našich produktů.

Fáze „Nákup“. Musíte nejprve ukázat výhody spolupráce s vaší firmou a teprve potom mluvit o produktu a o tom, že je nejlepší.

Zdá se, že to nepotřebujete, ale... Pokud se například člověk rozhoduje mezi koupí bytu a stavbou vlastního domu, pak by na vstupní stránce domu měl být blok vysvětlující, proč je dům lepší než byt.

Balík

Jak bude váš web vypadat, si dokážete zhruba představit ve vaší hlavě. A je dobré, když máte firemní identitu nebo knihu značek (ideální, dokonce bych řekl).

A co výhody vašeho produktu nebo společnosti jako celku? A několik desítek dalších otázek, které musíte zodpovědět, než přejdete k vytvoření prototypu a webu.

Protože správné otázky tvoří správné odpovědi, které si vezmete a zabalíte na svůj web. Tato fáze vám pomůže vzít všechny nejcennější věci ve vaší společnosti a ukázat to.

Abyste pochopili podstatu, zde je příklad 10 otázek, které vám pomohou lépe/hlouběji porozumět vaší společnosti a vašemu produktu a podávat je „s úžasnou omáčkou“:

Formulujte 3–5 „důvodů, proč je objektivně výhodnější nakupovat u vás než od konkurence“.

Jaké výrobní funkce má vaše společnost?

Poskytujete interní školení zaměstnanců?

Porovnejte produkt s podobnými produkty. Uveďte výhody a nevýhody.

Kdo je osobou nebo osobami společnosti?

Jaké bonusy jste ochotni poskytnout klientům při nákupu většího množství?;

Podrobně popište fáze práce s klientem od prvního kontaktu až po dokončení práce.

Řekněte nám o finančních podmínkách práce (předplacení, splátky, odklad prvních splátek, úvěry na produkty, slevy, prodej produktu, odkup nelikvidních aktiv atd.).

Jaké publikace o společnosti nebo od společnosti existují? (odborné komentáře, rozhovory, porotci TV pořadů, sloupky, články).

Vaši klienti jsou hvězdy.

FÁZE 3 – Prototyp

Konečně jsme se dostali k nejzajímavější části. Nyní vytvoříme váš budoucí web.

Nebo spíš zatím, jak si vyrobit prototyp sami, ale tohle je přinejmenším zajímavější než jen popisovat cílové publikum.

Krok 1. Struktura prototypu

Prototyp je struktura a sekvence bloků budoucí vstupní stránky, kterou můžete snadno sestavit z výběrových kritérií a námitek vaší cílové skupiny.

Nejlepší způsob, jak to udělat, je následující: vezměte list papíru a zapište si sekvenci bloků/významů. Vypadá to nějak takto:

Čepice;

Firemní výhody;

Katalog;

Vlastní výroba;

Skladem;

Tým;

atd.

Bloky předepisujete vy a já, ale také nesmíme zapomenout na dvě klasické stavby, na kterých je postaven jakýkoli reklamní materiál a výjimkou není ani landing page:

(produkty a služby);

PmPHSA(). Znamená bolest, více bolesti, naděje, řešení, akce (bolest, zvýšená bolest, naděje, řešení, výzva k akci).

Abyste si nelámali hlavu nad tím, jak zprostředkovat jeden z vybraných významů a výrazně si usnadnili život při vlastní tvorbě prototypu, pomůže vám tento článek.

Omlouvám se za mou upřímnost, ale je pro mě zatraceně hezké vidět lidi, kteří také pracují v noci (jen to udělejte bez ohrožení svého zdraví). Začal jsem si myslet, že workoholici vymřeli. Co se týče výsledků spolupráce, zmíním jen tuto skutečnost: ve špičkách jsme dostávali 140 žádostí denně a museli jsme najmout celé obchodní oddělení pro internetový marketingový kanál. Děkuji!

otevřít recenzi Dmitry Novozhilov, D-color

Víte, co je to email marketing? Například před setkáním s kluky z Convert Monster jsem to nevěděl. Naivně jsem věřil, že je to jen krásné slovo. Věřil jsem a zároveň slyšel, že pomáhá efektivněji pracovat se zákaznickou základnou. Před šesti měsíci jsme získali zákaznickou základnu. Byl sestaven z denních žádostí o franšízy mateřských škol. Aplikací bylo hodně, ale konverze zůstala na velmi nízké úrovni. S tímto fenoménem jsem se potýkal – sám jsem zkoušel posílat dopisy do databáze. Času bylo vždy málo – dobře sestavit další newsletter zabralo půl pracovního dne. S každou strávenou minutou vyvstávala stále více potřeba vytvořit kompetentní řetězec. Ale zatím byly dopisy odesílány jednou týdně nebo jednou za 2 měsíce. V práci nebyla důslednost. Něco chybělo. Dlouho jsme nemohli pochopit, co přesně. Kluci z Convert Monster se rychle pustili do práce. První výsledky na sebe nenechaly dlouho čekat. Po povolení počátečního e-mailového řetězce jsme provedli několik transakcí pomocí staré databáze. Pokryli náklady na spuštění e-mail marketingu. Po několika měsících zaznamenáme trojnásobný nárůst konverzí. A to je jen začátek. V současné době pracujeme na dalším zvýšení aktuálního konverzního poměru. Třeba ještě třikrát. Spočítejte si sami: - kolik peněz přinese 2násobné zvýšení konverzního poměru? Je to minimum! - kolik získáte, když uzavřete minimální procento klientů ze své stávající základny? Stále si nejste jisti, zda kontaktovat Convert Monster?

otevřít recenzi Sergey Degtyarev

Internetový provoz využíváme k přilákání zákazníků již delší dobu. Asi rok a půl. Během této doby jsme změnili 2 poskytovatele, dokud nám nebyl doporučen Convert Monster. Podmínky spolupráce pro většinu společností, které poskytují podobné služby, jsou podobné: rozpočet na měsíc, sestavení reklamní kampaně a jedeme. Poté kampaň zastará, začne úpadek a v důsledku toho nedostatek klientů. Pak požádáte manažery, aby změnili taktiku, strategii, titulky, sémantické jádro – apelujete na všechny svaté. A oni (manažeři, ne svatí) nic nedělají. Nebo možná ano, ale výsledek není žádný. Jednoho dne vám to naseká zuby, odejdete z této kanceláře do jiné a pak začnete hledat další. Důležité! Než začnete hledat úplně první, vyzkoušejte si to sami. Vaše výsledky jsou samozřejmě v tuto chvíli nejlepší možné, jsou prostě NULA! Přišli jsme do Convert Monster v zoufalství. To byl moment, kdy Yandex nastavil setup – odstranili záruku, na které jsme tak dobře seděli, a vydojili toho, jak jen to bylo možné a NEMOŽNÉ. Pochopili jsme, že štěstí nepřijde okamžitě, ale čekali jsme na to. A vskutku! Začalo nám to pomalu klepat na dveře – přihlášky a prodeje se začaly hrnout. Pak neúspěch - léto, mimo sezónu, práce v mínusu. Ale kluci se nevzdali a my jsme nesnížili rozpočty, protože víme, CO to ohrožuje. Nikdy nesnižujte svůj rozpočet ani neopouštějte web, který vám přináší příjem! Konečný výsledek: více než 6 milionů příjmů prostřednictvím Yandex.Direct. S naší spoluprací jsme více než spokojeni! Pokud máte nějaké pochybnosti, zda pracovat s Convert Monster nebo ne, kontaktujte nás! Řekneme vám, kde začít. Pak bude vaše cesta k nim delší a konečný výstup do Convert Monster bude vaším „výdechem“ a světlem na konci tunelu. Všechny cesty k nim stále povedou. Pokud je hledáte, samozřejmě. Je to otázka času. Prostě se postavte jako společnost, která je připravena se rozvíjet a škálovat. Jinak o vás prostě nebudou mít zájem.

otevřít recenzi Isabella Ritz, Ritz Group LLC

Než jsem vás kontaktoval, objednal jsem si vstupní stránku od jedné společnosti a nastavení Yandex Direct od jiné. Obě společnosti jsou na trhu známé, ale každá z našich kombinací stránky + reklamní kampaně se nesnažila pomoci, ale pouze kritizovala druhého účinkujícího: programátory – direktology, direktology – programátory. V důsledku toho jsme vás na základě vašeho doporučení kontaktovali a za pouhé 4 měsíce jsme zvýšili počet žádostí 4krát (až 120 za měsíc) a obrat z online prodeje na několik milionů rublů.

otevřít recenzi Vladislav Shupenya, společnost Kimberlit

Zdravím vás, moji milí čtenáři. Dnes si povíme o technických aspektech, pomocí kterých můžeme zvýšit prodejní konverzi našeho zboží nebo služeb. Jedním z důležitých bodů je dobře navržená vstupní stránka s produkty. Takzvaná landing page, o jejímž vytvoření si povíme později a získáme hotové kódy stránek.

Co je to vstupní stránka? Toto je stránka, na kterou se lidé obvykle dostanou po kliknutí na reklamu. Vytvořeno pro jednu nabídku: produkt, službu nebo předplatné. Efektivní vstupní stránka je základním kamenem úspěšného online marketingu. Produkt může být nejlepší na trhu, reklamy jsou dokonalé, ale bez dobré vstupní stránky úsilí nepřináší 100% výsledky. Návštěvníkům říká, co je v nabídce a proč by to měli chtít. Pocit naléhavosti přispívá k rychlému rozhodování a přechodu uživatele do kategorie klienta.

Jak vytvořit vstupní stránku? Je mylné věřit, že odpověď spočívá ve schopnosti sázet. Dobrá vstupní stránka je výsledkem koordinované práce na cílech, textu, designu a kódu. Vstupní stránky, jejichž příklady budou uvedeny níže, pomohou začátečníkům naučit se základy práce s rozložením, ale nenahradí konverzní texty a porozumění cílové skupině. Můžete je také vytvořit pomocí různých návrhářů vstupní stránky.

Než tedy vytvoříte vstupní stránku, zeptejte se sami sebe:

• Co udělá člověk po přistání na vstupní stránce? Koupí něco? Vyplníte formulář? Přihlásit se k odběru newsletteru? Než budete měřit konverzní poměr, stanovte si jasné cíle.
• Kdo jsou moji konkurenti? Ve skutečnosti jsou to tři otázky: kdo, jak úspěšní jsou a jak lze jejich úspěchy uplatnit? Napodobování je nejupřímnější forma lichotky. Pokud vaši konkurenti dělají něco, co funguje, replikujte to na svůj web.
• Kdo je moje publikum? Čím lépe porozumíte své specializaci a cílové skupině, tím větší je šance, že se vaše úsilí vyplatí.

Potřebujete nabídnout všechny potřebné informace, ale ne tolik, abyste svého potenciálního klienta zahltili a odehnali.

Příklady vytvoření vstupní stránky + kódování pro figuríny

Než začneme, pojďme se krátce podívat na HTML a CSS. Pochopení toho, jak fungují, vám pomůže vytvořit přistání.

HTML je značkovací jazyk prohlížeče pro vizualizaci webových stránek. Psáno pomocí značek uzavřených v lomených závorkách, které definují obsah.

Štítek se otevírá () a zavírá () kolem náplně:

obsah

Pro jemné doladění jsou za název přidány atributy:

obsah

CSS – definuje způsob uspořádání prvků HTML. Skládá se ze selektorů, vlastností a hodnot:

#selector (vlastnost: hodnota;)

Selektor odpovídá názvu konkrétní značky v html. Změnou hodnot a přidáním vlastností se upraví jeho vzhled. Můžete vytvořit stránky, které vypadají navzájem odlišně, použitím různých stylů CSS na stejný HTML.

5 úvodních kroků

Pro rychlé rozložení použijeme šablonu s minimálním designem založeným na bootstrapu. Jedná se o systém s vlastními voliči, který se používá po celém světě pro urychlení rozložení.

Vypadá to skromně.

Z této ryby se v několika fázích vytvoří webová stránka pro každý vkus.

Struktura adresáře ve složce:

• index.html: Toto je hlavní soubor, který budeme upravovat.
• /assets: pomocné soubory jsou umístěny zde:
• /css: Adresář obsahuje styly bootstrap a ikon. Soubor, který budeme upravovat, je main.css.
• /img: složka pro obrázky webu.
• /fonts: ikonová písma.
• /js: bootstrap soubory javascriptu.

Krok 1: Použití záhlaví

Nadpis a podnadpisy jsou klíčová místa, která pomáhají sdělit hodnotu nabídky jasným způsobem.

Změňme název a název webu. Zde nemusíte umět psát – píšete svůj vlastní text na místa zvýrazněná žlutě na obrazovce.

Krok 2. Stručnost je sestrou obrácení. Přidání výhod a sazeb

Budete potřebovat 4 sekce:

• výhody;
• sazby;
• recenze;
• výzva k akci.

Vytvořme sekci hlavního obsahu „hlavní“, do které vložíme potřebné sekce:

…..
…..
…..
…..

Místo teček vyplňte náplní.

Pro sekci výhod budete potřebovat tento kód:

Výhody
Rychle

Spolehlivý

Sed diam nonummy

Ziskové

Elit, sed diam nonummy

Technicky

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Spolehlivý

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Ziskové

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy

Technicky

Lorem ipsum dolor sit amet, consectetuer adipiscing

Spolehlivý

Lorem ipsum dolor sit amet, consectetuer adipiscing

Ziskové

Lorem ipsum dolor sit amet, consectetuer adipiscing

Obsah pro přehlednost:

Stále to vypadá nedbale, ale není důvod k panice, pokračujme.

Ceny zapisujeme. Obsah se mění stejným způsobem jako v prvním kroku. Obecný popis s třídou „tarify“ a třemi tarify.

Tarifní plány

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

Tarif č. 1
$10

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Objednat
Tarif č. 2
$20

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Objednat
Tarif č. 3
$30

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Objednat

Vypadá to tak.

Vzhled budoucí vstupní stránky nás prozatím nezajímá – níže se podíváme na příklady změny stylů.

Krok 3: Důvěřujte signálům a výzvě k akci

Použití cílených signálů naznačuje návštěvníkům, že značka je důvěryhodná. Signály mohou mít mnoho podob, ale tou klasickou je zpětná vazba od zákazníků.

Hodnocení zákazníků

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud cvičení ullamco laboris nisi ut aliquip ex ea commodo:

„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."
„Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo."

Pojďme nastavit výzvu k akci.

Výhoda při dnešní objednávce

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Objednat teď!

Recenze pomohou potenciálním zákazníkům při rozhodování o koupi produktu. Pro přehlednost potřebujeme avatary, takže je okamžitě umístíme – pod každou nabídku.

Jméno klienta.

Krok 4: Grid and Mobile Friendly Integration

K implementaci mřížky potřebujeme kontejnery Bootstrap. Důležité je zapamatovat si celkový počet platných segmentů sloupců – 12. Třída určuje šířku zobrazení obsahu. Dobrá věc na této předem připravené mřížce je, že kontejnery jsou navrženy s ohledem na odezvu a jsou okamžitě použitelné na mobilních zařízeních. Podrobný popis na oficiálních stránkách. Mřížka vypadá takto.

Obsah „hlavního“ bude zabalen do kontejneru. K tomu je nahoře napsáno:

… .

Pokud potřebujete, aby se blok vešel na celou šířku obrazovky, kontejner se vloží dovnitř. Tady to bude jumbotron a výzva k akci.

Všechny prvky, které vyžadují umístění na sebe obalíme oddělovači čar.

Nyní můžeme upravit šířku sloupců se zaměřením na bootstrap mřížku. Po zabalení se výplň přestala lepit na okraje obrazovky a objevily se úhledné prohlubně.

Ceny nastavujeme v řádku pomocí třídy sloupců col-lg-4. Uvnitř řádků již není nutné psát samostatné divy pro obtékání, lze je kombinovat se stávajícími oddělenými mezerou.

Analogicky jsme nastavili sloupce pro sekci recenzí a výhod. Pokud potřebujete přesunout prvek na stranu, použijte třídu sloupce odsazení col-lg-offset-2. Číslo na konci určuje, o kolik základních sloupců dojde k posunu.

Krok 5. Písma a ikony

Implementujeme hlavičkové fonty Google Font. Po výběru otevřete kartu importu a zkopírujte z ní data do souboru main.css. Do souboru, pro který je použit nový font, přidáváme také selektory titulků.

@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* import písma pro nadpisy */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
font-family: "Roboto Condensed", bezpatkové; /* výstup Googlefont */
}

Pro názornost jsou výhody popsány třídou se samovysvětlujícím názvem text-center a ikonami FontAwesome ze sady bootstrap.

V tomto okamžiku je příprava zcela dokončena.

Vstupní stránka: příklady kódů s nabídkou, paralaxou a počítadlem

Používáme tři nejoblíbenější typy: s větou, formou a s odpočítávacím počítadlem. S postupem rozvržení bude šablona doplňována o efekty.

Příklad 1: s větou

Nastavíme pozadí hlavní části a výplně tak, aby byla první obrazovka zakrytá.

Jumbotron (
pozadí: #f5f5f5 url(../img/fon.jpg) nahoře uprostřed bez opakování;
max-šířka: 100 %;
padding-top: 250px;
padding-bottom: 200px;
text-align: center;
}

Změňme velikost hlavičky jumbotronu z h2 na h1. Dále napíšeme styly pro prvky, které je třeba změnit.

Začněme ikonami.

Výhody i(
barva: #cac4c4;
}

Za znakem hash je určena barva. Můžete si vybrat vlastní volbu pomocí html barevných tabulek nebo editoru obrázků.

Odsazení pro nadpisy oddílů

sekce h2 (
padding-top: 30px;
margin-bottom: 25px;
}

Děláme pořádek ve vzhledu tarifů. Pro usnadnění vytváříme vlastní třídy pro prvky, které chceme konkrétně zvýraznit.

Tarif č. 1
$10

za měsíc/na osobu

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Objednat

A hodně CSS. Za jaká místa sekce zodpovídají, je uvedeno v komentářích - /* mezi lomítky s hvězdičkou */

/* =========Tarif styly======== */
/* celkový pohled na tarif */
.pricing_item(
pozadí: #f2f2f2;
poloha: relativní;
displej: -webkit-flex;
displej: flex;

směr ohybu: sloupec;

align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
polstrování: 2em 3em;
okraj: 1 em;
barva: #262b38;
kurzor: výchozí;
přepad: skrytý;

}
/* změnit pozadí po kliknutí */
.pricing_item:hover (
barva: #444;
pozadí: #daebef;
}
/* pozadí individuální cenovky v každém tarifu */
.pricing_item:first-child .price (
pozadí: #9ba9b5;
}
.pricing_item:nth-child(2).price (
pozadí: #1f6098;
}
/* na širokoúhlých obrazovkách je prostřední sloupec tarifu odsazen a zvýrazněn */
@media obrazovka a (min. šířka: 66,250 em) (
.pricing_item(
marže: 1,5em 0;
}
.featured(
z-index: 10;
okraj: 0;
velikost písma: 1,15 em;
}
}
/* název */
.pricing_item h3 (
velikost písma: 2em;
marže: 0,5em 0 0;
barva: #1d211f;
}
/* pozadí cenovky */
.cena(
velikost písma: 2em;
váha písma: tučné;
barva: #fff;
poloha: relativní;
z-index: 100;
line-height: 95px;
šířka: 100px;
výška: 100px;
marže: 1,15 em auto 1 em;
hraniční rádius: 50 %;
pozadí: #77a5cc;
-webkit-transition: barva 0,3s, pozadí 0,3s;
přechod: barva 0,3s, pozadí 0,3s;
}
/* měna */
.měna(
velikost písma: 0,5 em;
vertikální zarovnat: super;
}
/* upřesnění návrhu */
.věta (
váha písma: tučné;
okraj: 0 0 1em 0;
polstrování: 0 0 0,5em;
barva: #2a6496;
}
/* seznam */
.pricing_item ul (
velikost písma: 0,95 em;
okraj: 0;
polstrování: 1,5em 0,5em 2,5em;
text-align: left;
}
/* seznam položek */
.pricing_item li (
polstrování: 0,15em 0;
}
/* tlačítko ohodnotit objednávku */
tlačítko .pricing_item(
váha písma: tučné;
margin-top: auto;
polstrování: 1em 2em;
barva: #fff;
border-radius: 5px;
pozadí: #428bca;
-webkit-transition: background-color 0,3s;
přechod: barva pozadí 0,3s;
}
/* změnit barvu po stisknutí tlačítka */
.pricing_item button:hover,
.pricing_item button:focus (
barva pozadí: #285e8e;
}
/* pozadí tarifu*/
.bg-2 (
pozadí: #dddddd;
}

Výsledek

Hodnocení zákazníků. Pojďme se na ně úhledně podívat a označit jejich umístění.

/* =========Styly posudků======== */
posudky (
polstrování: 4em 0;
text-align: center;
}
.testimonials .avatar img (
hraniční rádius: 50 %;
plavat vlevo;
zobrazení: inline;
pravý okraj: 1 em;
šířka: 65px;
výška: 65px;
margin-bottom: 30px;
}
.posudky .avatar p (
text-align: left;
polstrování-top: 1m;
barva: #5d5d5d;
váha písma: 900;
}

Zbývá už jen ozdobit poslední výzvu k akci a zápatí.

/* Akce */
.akce(
pozadí: #476177;
min-výška: 180px;
šířka: 100 %;
polstrování: 4em 0;
text-align: center;
}
.action h2 (
barva: #fff;
váha písma: 300;

}
.akce p(
barva: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0,2);
velikost písma: 1,2 em;
}
.action .container (
margin-top: 3em;
}
/* Zápatí */
zápatí (
pozadí: #333333;
polstrování: 1em 0;
zarovnání textu: vpravo;
}
zápatí p(
barva: #fff;
výška řádku: 1;
text-transform: velká písmena;
velikost písma: 0,7 em;
margin-top: 0,5em;
}

Tlačítku zápatí je přiřazena vestavěná bootstrap třída btn-default.

Oživte šablonu. Zavedeme plynulé rolování a tlačítka pro sekce a také animaci textu na první obrazovce.

Pro přechody do práce nahradíme některé oddílové třídy id - pro výhody a tarify. A do tlačítek přidáme odkazy na id. Snímek obrazovky – co je k čemu připojeno, zvýrazněno žlutou fixou.

Nastavujeme odsazení pro tlačítka - jbutton. Posouvání při stisku funguje, ale velmi prudce.

Hladké přechody jsou vytvářeny pomocí javascriptu nebo jquery. Ten je ve výchozím nastavení připojen k šablonám Bootstrap.

Posouvání je nyní plynulé.

Přidání animace do textu pomocí Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Jedná se o hotový open source kód, lze jej použít na jakémkoli webu. Umístěte soubor z Github do složky css a zadejte cestu.

Efekty vybíráme zde: https://daneden.github.io/animate.css/. Vybrali jsme fadeInDown. V kódu je to napsáno takto:

Nyní, když je stránka načtena nebo obnovena, text bude animován. Připraven.

Příklad 2: s tvarem a paralaxovým efektem

Čím více polí formuláře se návštěvníkovi zobrazí, tím menší je pravděpodobnost, že je vyplní. Žádejte jen minimum nezbytných informací.

Sestavuje se analogicky. Změníme pozadí a barvy. A samozřejmě přidáme tvar.

Začněme paralaxou.

Změňme pozadí jumbotronu na průhledné:

pozadí: průhledné;

Do hlavy vložíme skript:

$(okno).scroll(funkce(e)(
paralaxa();
});
funkční paralaxa())(
var scrolled = $(okno).scrollTop();
$(".bgparallax").css("top",-(scrolled*0.2)+"px");
}

První řádek v těle je kontejner pro paralaxu:

A v CSS je jeho chování:

Bgparalaxa (
pozadí: url(/../img/fon.jpg) opakovat;
poloha: pevná;
šířka: 100 %;
výška: 300 %;
nahoře:0;
vlevo:0;
z-index: -1;
}

Paralaxa je připravena. Provedení změn v kódu a nové pozadí však vyžaduje nové přiřazení barevného schématu.

Ztmavení nabídky:

Navbar-výchozí (
barva pozadí: #333;
barva ohraničení: #444;
barva: tmavě šedá;
border-radius: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
barva: tmavě šedá;
barva pozadí: rgba(0, 0, 0, 0,5);
}

Větu v jumbotronu nahradíme novou - s kódem tvaru:

Vstupní stránka promění návštěvníky v zákazníky
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula tortor rhoncus vulputate massa.

• 
  
  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

A předepisujeme vzhled

/* formulář */
.headform-list (
list-style-type: none;
line-height: 26px;
váha písma: 400;
výplň: 0px;
margin-bottom: 40px;
}
.forma hlavy(
přepad: skrytý;
poloha: relativní;
barva pozadí: rgba(0,0,0,.4);
odsazení: 35px 40px;
border-radius: 8px;
}
vstup, tlačítko, výběr, textová oblast (
šířka: 100 %;
margin-bottom: 10px;
}
.headform-list li .fa (
pozice: absolutní;
nahoře: 0px;
vlevo: 0px;
šířka: 42px;
velikost písma: 24px;
text-align: center;
}
.headform-list li(
poloha: relativní;
min-výška: 38px;
padding-left: 62px;
margin-bottom: 20px;
}
.jumbotron p (
barva: #fff;
velikost písma: 16px;
styl písma: kurzíva;
}

Zde skončil i text jumbotronu, který si vyžádal změny.

Měníme tarify.

/* celkový pohled na tarif */
.pricing_item(
barva pozadí: rgba(0,0,0,.4); /* řádek změněn */
border-radius: 4px; /* řádek změněn */
poloha: relativní;
displej: -webkit-flex;
displej: flex;
-webkit-flex-direction: sloupec;
směr ohybu: sloupec;
-webkit-align-items: stretch;
align-items: stretch;
text-align: center;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
polstrování: 2em 3em;
okraj: 1 em;
barva: #f2f2f2; /* řádek změněn */
kurzor: výchozí;
přepad: skrytý;
box-shadow: 0 0 15px rgba(0, 0, 0, 0,05);
}
/* změnit pozadí po kliknutí */
.pricing_item:hover (
barva: #444;
pozadí: #ddd; /* řádek změněn */
}

Nyní vypadají takto - průhledné pozadí a zaoblené rohy.

Šablona je připravena.

Příklad 3: s odpočítávacím počítadlem

Opět změníme náplň jumbotronu a šablonu přebarvíme tak, aby odpovídala novému pozadí, podobně jako u předchozí šablony. Připojte skript čítače:

HTML





Čas nečeká
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum auguelo dule dodeleunit

• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  


• 
  

  Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.

  
  

var myCountdown1 = new Countdown((
čas: 86400 * 3, // 86400 sekund = 1 den
šířka: 300
, výška: 60
, rangeHi: "day"
, styl: "převrátit" //