Šta je landing stranica i koje su njene karakteristike? Kako brzo napraviti cool landing stranicu sa visokom konverzijom? Koji su graditelji odredišnih stranica trenutno popularni?
Pozdrav dragi čitaoci! Sa vama je Aleksandar Berežnov, jedan od autora poslovnog magazina HiterBober.ru.
I odlučio sam ovako - reći ću vam o odredišnim stranicama, o glavnim tehnikama koje sam koristio da ih kreiram. Navest ću primjere dobrih jednostranih stranica. I svako od vas će izvući zaključke za sebe. Dogovor? Onda počnimo.
Tema kreiranja landing stranice nije laka, ali vrlo relevantna i zanimljiva. Znajući kako to učiniti, možete zaraditi novac na mnogo načina, na primjer, kako. Razumijevajući ovaj smjer, možete započeti svoj mali biznis jednostavnom prodajom robe ili usluga putem odredišne stranice.
1. Šta je landing stranica – pregled za početnike
Napisane su stotine članaka na temu kreiranja landing stranica. Teško je "ugurati" sve savjete, svo iskustvo u jedan materijal. Ali ipak ću pokušati da vam ispričam ono najvažnije u vezi sa odredišnom stranicom.
Slijetanje je stranica na jednoj stranici ili samo stranica, čija je svrha potaknuti korisnike da poduzmu neku akciju: kupe, pretplate se, nazovu, ostave zahtjev.
Odredišna stranica je doslovno prevedena s engleskog: “cilj” ili “odredišna stranica”.
Vjerovatno ste vidjeli takve one-pageers na internetu.
Zašto sletanja:
- Veoma su motivišući posjetitelj da preduzme željenu radnju.
- Brzo se grade. I često koštaju manje od obične stranice. Još jedan plus: možete sami napraviti landing page.
- Landing stranicu je lako redizajnirati- poboljšati, promijeniti, dodati informacije koje nedostaju.
Landing stranice su kreirane za:
- Prodaja proizvoda. Za to se koriste pozivi: “kupi”, “ostavi zahtjev”, “pozovi”.
- Prikupljanje informacija. Ovdje se posjetiteljima nudi: “pretplatite se”, “saznajte više”.
- Distribucija softvera- prodaja softvera.
Slijetanje i prodajni lijevak
Lijevakprodaja je proces prodaje proizvoda/usluge. U svakoj fazi ovog procesa eliminiše se dio ljudi – potencijalnih kupaca komercijalne kompanije. Imamo poseban članak na stranici o.
Proces prodaje odredišne stranice izgleda otprilike ovako:
- 100 ljudi je vidjelo link do odredišne stranice;
- 40 korisnika je pratilo link;
- 10 ljudi je napustilo aplikaciju;
- 2 osobe su kupile proizvod.
Od sto, dvije prodaje. Povrat - 2%. Ovo je dobra opcija. Nije savršeno, ali ni neuspješno.
Prodajni lijevak izgleda kao obrnuti kuhinjski lijevak: široka baza i uski vrat.
Najširi dio je prijelaz na stranicu. U ovoj fazi testiramo rad kontekstualnog oglašavanja, poruka na društvenim mrežama, publikacija na drugim stranicama. Odredite CTR.
CTR- omjer broja klikova i broja pojavljivanja. Mjereno u procentima.
Srednji dio je aplikacija. Analiziramo efikasnost odredišne stranice – njen dizajn, tekstualni dio.
Uži dio je obrada aplikacija i prodaja. Ovdje ocjenjujemo rad živih ljudi - operatera, menadžera.
Prilikom analize odredišne stranice izračunava se još jedan indikator - EPC.
EPC- ovo je prosječan pokazatelj zarade od hiljadu posjeta odredišnoj stranici.
Što je veća stopa povrata, to je veća efikasnost vaše reklamne kampanje.
U kojim slučajevima je potrebno napraviti slijetanje?
U nastavku ćemo razmotriti brojne slučajeve u kojima ćete se možda suočiti s potrebom da kreirate svoj vlastiti one-pager.
Slučaj 1. Niska konverzija (prodaja) glavne web stranice kompanije
Kada stranica pokazuje nisku stopu konverzije - to jest, kupci odlaze bez kupovine. A nema novca za stvaranje nove radne velike stranice.
Primjer izračuna: 300 ljudi posjetilo je stranicu u 24 sata. Prijavljeno na newsletter - 12 korisnika. Konverzija će biti: 12 / 300 * 100% = 4%.
Prosječna konverzija sajtova u zoni.RU je 0,5%. Konverzija odredišne stranice 5–10%. Ovi brojevi kriju cijelu istinu o tome zašto poduzetnici toliko vole prodavati svoje proizvode i usluge putem one-pageera.
Slučaj 2: Lansiranje novog proizvoda
Kada lansirate novi proizvod i želite ga prikazati na najbolji mogući način. Kada trebate fokusirati kontekstualno oglašavanje na novi proizvod.
Slučaj 3. Rješenje konkretnog problema
Kada trebate riješiti određeni marketinški problem. A glavna stranica kompanije nije pogodna za to.
Kreiranje odredišne stranice bez nje u većini slučajeva će pomoći u povećanju prodaje.
Sama odredišna stranica neće odmah privući gomilu kupaca. U stvari, odredišna stranica je samo alat. Čak ni najsofisticiranija bušilica neće izbušiti rupu u zidu dok je ne podignete. Pa evo.
Da bi stranica radila, morate je "omogućiti".
Da biste to učinili, možete poduzeti sljedeće korake:
- Pokrenite kontekstualno oglašavanje na vašu web stranicu na jednoj stranici.
- Započnite e-mail bilten prema prethodno sastavljenoj bazi pretplatnika. Ukratko opišite karakteristike proizvoda u pismu i dodajte link na odredišnu stranicu.
- Reklamirajte proizvod na forumima, partnerskim stranicama, oglasnim pločama. Svugdje dodajte link na stranicu.
Pogrešno je misliti da odredišna stranica može biti jedino mjesto za komunikaciju biznisa i publike. Ako kompanija ne vodi blog, ne razvija svoje prisustvo na društvenim mrežama, ne koristi email marketing, odredišna stranica će biti neefikasna.
Studija slučaja
Mladić se zainteresovao za prijedlog kompanije Kverti. Tip nikada ranije nije čuo za ovu firmu i stoga traži dokaze o njenom postojanju. Posjećuje web stranicu i blog kompanije, pridružuje se grupi na društvenim mrežama.
On se pobrinuo da kompanija radi. Blog se stalno ažurira sadržajem. Na društvenim mrežama administratori brzo odgovaraju na pitanja korisnika. Klijent se vraća na one-pager, vrši rezervaciju.
Sada se zapitajte: šta bi momak uradio da nije pronašao tragove Qvertija na internetu? Kad bi samo cjelokupno postojanje kompanije počelo i završilo na jednoj odredišnoj stranici. Da li bi naručio njihov proizvod?
Izvod iz ovog primjera je korištenje alata za podršku kako biste povećali učinak prodaje putem vašeg one-pager-a.
2. Koliko košta izrada landing stranice i šta određuje cenu sajta na jednoj stranici
Cijena izrade landing stranice ovisi o tome hoćete li red jednu stranicu ili uradi sam.
- Prva opcija je skupa. Freelanceri uzimaju od 100-200 USD. za rad, dizajnerski studiji - od 1.000 c.u. Cool agencije - od 5.000 c.u.
- Druga opcija je "skoro" besplatna. Ako na razvoj povežete programera ili copywritera, ako za osnovu uzmete plaćeni šablon, cijena ove metode će biti od 20 do 1000 USD. pa čak i više. Za bolje razumijevanje cijena za različite vrste web stranica i odredišnih stranica, pročitajte naš članak.
Ako odlučite naručiti odredišnu stranicu, od vas će se tražiti da popunite brief– poseban upitnik: odgovorite na pitanja o tome šta biste željeli vidjeti na stranici.
Prema vašim odgovorima, izvođač će biti odbačen prilikom određivanja cijene za rad.
Što više "čipova" i "zvona i zviždaljki" želite da vidite na svojoj web stranici sa jednom stranicom, skuplja će koštati odredišna stranica.
Cijena će zavisiti od:
- neobična struktura i jedinstveni dizajn koštat će 700 dolara;
- kontekstualno oglašavanje i njegove postavke - od 100 c.u. Mjesečno;
- tekst od dobrog copywritera - 50-100 USD, od odličnog pisca reklama - od 1.000 USD;
- jedinstvene slike i ikone (nisu preuzete sa zaliha) - ovo je još najmanje 100-200 USD.
Osim toga, na cijenu odredišne stranice utiče analiza ciljne publike, odabir ključnih fraza, testiranje strukture stranice, stalno praćenje itd.
Vidio sam odredišne stranice sa stopom konverzije od 50–60% . Odnosno, svaki drugi posjetitelj je ostavio svoje podatke ili poslao zahtjev za kupovinu proizvoda. Tajna tako velikog povrata leži u dva faktora:
- Stranicu je posjećivala uglavnom ciljna publika – odnosno ljudi koji su bili zainteresirani za ovaj proizvod.
- Programeri su slijedili tradicionalna pravila za kreiranje efektivne odredišne stranice.
Reći ću vam o ovim pravilima.
Savjet 1. Postavite jedan proizvod na odredišnu stranicu
Nije uspjelo zakačiti - čitač neće doći do željenog dugmeta "kupi".
Slijedite sljedeća pravila:
- Fokusirajte pažnju kupca na jednu stvar.
- Recite mu o prednostima samo ove verzije programa.
- Ponudite mu popust na jedan artikl.
- Zainteresirajte ga za bilten o određenoj temi.
Ako stavite deset proizvoda na jedan ekran, pažnja posjetitelja će biti raspršena. On skenira cijelu stranicu. Možda će obratiti pažnju na veliki popust ili na neku smiješnu sliku. I onda zatvorite karticu. Za pet sekundi on će već zaboraviti na tvoje postojanje.
Korisnik ulazi na stranicu. Prve misli koje ga posećuju su: gde sam završio, zašto sam ovde? Ako u narednih nekoliko trenutaka ne nađe odgovor, izgubit ćete klijenta.
Prema statistikama, 80% potencijalnih kupaca napusti stranicu u prvih petnaest sekundi. A evo i glavnih razloga:
- Nisu našli šta da rade ovdje. Na sajtu ne postoji poseban poziv na akciju: "pretplatite se", "naručite", "saznajte više" itd. Zapamtite, ako na ekranu nema "velikog crvenog dugmeta" potpisanog jednostavnom rečju "kupi", onda imate loše sletanje.
- Posjetioci ne razumiju šta im se ovdje nudi. Nerviraju ih desetine detalja zalijepljenih jedni na druge, blještavi gifovi i neprekidni Caps Lock. Nespretni elementi se bore za pažnju posjetitelja, obarajući ga od glavne stvari - od kupovine ili pretplate.
Ovi savjeti će vam pomoći da povećate prodaju vašeg proizvoda:
- Naše sve- pravougaono crveno dugme sa velikim glagolom u sredini. Stavite ga ne samo na kraj, već i na početak stranice.
- Izrazite se jasno. Govorite direktno: šta korisnik treba da uradi i šta će mu se desiti za to.
- Uklonite sve što odvlači pažnju od glavne ideje. Nerazumljiva grafika, neutralne slike, glupi naslovi, lijeva dugmad, ogromni baneri koji reklamiraju tuđe proizvode.
- Uvjerite posjetitelja primjerom u ekskluzivnost vašeg proizvoda. U hvaljenju proizvoda koristite više brojeva, poređenja. Stavite crveno dugme pored ubeđivanja.
- Pokažite specifične prednosti koje će klijent dobiti korištenjem vaše ponude.
Ali nemojte biti previše revni u svojoj želji da drogirate klijenta. Prevelik pritisak i preobilje reklamnih uslova samo razboli čitaoce.
Savjet 3. Koristite prodajne naslove
Da li prodajete fluorescentne lampe? Evo naslova za vas: "Uštedite energiju 4 puta efikasnije."
Pozivate li krupne žene u fitnes centar? Pogodak u srce: "Ko još želi figuru TV zvijezde?"
Obavezno koristite oznake h1 i h2 kada kreirate naslove. Ako je moguće, u njih uključite ključne fraze - one riječi i fraze koje će kupci koristiti da vas pronađu putem tražilice.
Savjet 4. Napišite kvalitetan prodajni tekst
Tekst je prvi. Dok ne dobijete potpuno formuliran prijedlog, nemojte ni razmišljati o naručivanju dizajna odredišne stranice.
Da bi tekst bio prvoklasan, potrebno je:
- Prvo- znajte ko je osoba kojoj je potreban vaš proizvod. Formirajte portret "idealnog kupca".
- Sekunda- čitati knjige o marketingu i psihologiji prodaje.
- Treće- biti u stanju uključiti klijenta u razgovor. Čak i ako je ovaj razgovor zapravo monolog. Zamislite kakva se pitanja nameću u glavi sagovornika. Svoje odgovore logički upišite u tekst. Pišite dok ne kažete sve o proizvodu. I nemojte da se zaglavite na broju znakova.
Primijetio sam kako gurui internet marketinga vole da kritikuju velike odredišne stranice. Ako bolje pogledate predmet kritike, postaje jasno da su dosadni i neinformativni tekstovi osuđeni. Iz nekog razloga, kritičari zaobilaze zanimljive i vrijedne duge odredišne stranice.
Nemojte se plašiti velikih tekstova ako:
- Proizvod je složen i nepoznat. Kupac će morati da žvaće svaku prednost proizvoda. Navedite dosta primjera koji dokazuju njegovu korisnost.
- Proizvod je skup. Da biste postigli odgovor, morat ćete iskoristiti sve supermoći odredišne stranice - recenzije, garancije, slučajeve, popuste, postprodajne usluge, poklone.
Statistika
70% posjetitelji neće pročitati odredišnu stranicu koju ste mučili do sredine. Ne krivi sebe. Pokušajte da privučete pažnju ostalih 30% - i to je dobro.
Savjet 5. Izbjegavajte agresivno oglašavanje!!!
Kako vam se sviđaju tri znaka uzvika na kraju rečenice? Možda je trebalo dodati i CAPS LOCK?
Ove stvari su znak agresivnog oglašavanja. Kod normalnog čovjeka pogled na velika slova i tri uzvika izaziva napade panike: “Hoće da mi prodaju neku glupost”, “Opet ova nametljiva reklama!”, “Uvijek sam govorio da je internet smetlište.”
A za dobre copywritere, urednike, content managere, to je i znak lokalnosti, neprofesionalnosti i ponekad, izvinite, idiotizma.
Takođe preporučujem da se iz teksta izuzmu sledeći klišei: „fleksibilan sistem popusta“, „lider u oblasti“, „visok kvalitet i niske cene“, „odlično iskustvo“, „individualni pristup“. Izbrišite bez žaljenja sve neobrađene fraze koje nisu podržane brojevima.
Ova faza je veoma važna za uspješnu promociju i prodaju roba i usluga.
Idemo direktno na pravila:
- Čitljiv font - 16 pt. Preporučeno: Georgia, Open Sans, PT Sans, Arial, PT Serif, Clear Sans, Garamond.
- Do 80 znakova po redu.
- Svakih 3-5 redaka je novi pasus.
- Svaka 2-4 pasusa - novi podnaslov. Podnaslovi treba da budu napisani tako da čitalac, prošavši kroz njih očima, može lako da razume šta se govori.
- Obavezno: liste, citati, tabele.
Razmislite o putanji po kojoj će se kretati oko posjetitelja. Kada su svi elementi na svojim mjestima, osoba lako percipira informaciju. A ako klijent razumije vaš proizvod, postoji šansa da će ga odmah kupiti.
Koristite vizuelnu navigaciju: strelice, ikone, slike. Privucite pažnju kontrastnim nijansama: označite naslove bojom, koristite crveno (žuto, narandžasto, zeleno) dugme.
Relevantan landing je stranica koja ispunjava očekivanja korisnika.
Još jedan primjer
Ukoliko korisnik klikne na baner „Kupi novi iPhone sa 10% popusta“, tada na odredišnoj stranici treba da se nalazi ponuda za kupovinu ovog telefona i sa ovim popustom.
Kreirajte vlastitu odredišnu stranicu ne samo za svaku marketinšku kampanju, već i za svaki izvor prometa. Na primjer, kupci dolaze s društvene mreže na Vkontakte - to bi se trebalo odraziti na web mjestu.
90% kupaca razmišlja prije nego što nešto kupi. Ljudi se boje prevare, boje se za svoju sigurnost. Mnogi ne žele da iko sazna za njihovu kupovinu. Strah izaziva zamjerke: „Bojim se gubitka novca“, „Ne vjerujem da cijena može biti tako niska“.
Budući da ne možete lično uvjeriti klijenta, pobrinite se da unaprijed odgovorite na njegove primjedbe. Formulirajte uvjerljive argumente i ubacite ih u tekst.
dajem savjete:
- Garancija povrata novca u roku od 1-2 sedmice.“Ako vam se proizvod ne sviđa, vratit ćemo sva sredstva uložena u njega.”
- Ponudite besplatno isprobavanje proizvoda."Probni period od 2 sedmice će vam pomoći da odlučite."
Ovakvi marketinški potezi bili su i ostali relevantni prilikom kreiranja landing stranica.
Budite oprezni sa deficitima. Malo ljudi sada vjeruje u tajmere za odbrojavanje. Pogotovo kada se brojač stalno ažurira kada se odredišna stranica ponovo učitava.
Ponašajte se razborito. Unesite broj preostalih proizvoda. Stalno i ručno ažurirajte informacije. Korisnik mora vidjeti da se roba demontira.
Neka kupac tako misli
“Jučer su bile 74 mikrotalasne pećnice sa 50% popusta, jutros 23, a do ručka ih je ostalo samo 7. Moramo to odmah dobiti!"
Savjet 11. Uvjerite korisnika da ste sigurni i sigurni
Postavite elemente povjerenja blizu poziva na akciju.
- Koristite dugmad društvenih medija- tweet feed, lajkovi na Facebooku, lista pretplatnika u grupi u VK.
- Objavljujte recenzije sa osvrtom na ljude ili kompanije koje su ih napustile.
- Prikaz nagrada i sertifikata. Dokumenti treba da se otvaraju u punoj veličini i da budu laki za čitanje.
Savjet 12. Nema komplikovanih formulara za popunjavanje
Sam po sebi, obrazac za unos podataka ne izaziva neugodne emocije kod posjetitelja. Većina ciljne publike spremna je za interakciju s vama. Po potrebi će napisati svoje ime, zanimanje i e-mail.
Poteškoće počinju kada se u fazi registracije od korisnika traži da detaljnije ispričaju o svom životu. Savjetujem vam da odgodite trenutak bližeg upoznavanja za kasnije - kada posjetitelj potvrdi činjenicu registracije.
Drugi problem je složena captcha.
captcha- iskačući obrazac u koji korisnik unosi skup znakova (brojeve i slova na mutnim slikama), potvrđujući da nije robot.
Svi visi nad dešifriranjem simbola, nad rješavanjem zagonetki i zagonetki. Zato ne prolaze svi test - oko 30-40% će zatvoriti karticu i odmah zaboraviti na vašu ponudu. Zaboravite na captcha. Prepustite to svojim konkurentima.
Ovaj savjet kombinuje suštinu svih prethodnih tačaka. Naručite jednostavnu Landing stranicu.
Stranica bi trebala biti:
- Bez nepotrebne grafike i teksta
- Uz ponudu da izvršite samo jednu radnju: kupite jedan proizvod, pretplatite se na jedan newsletter i tako dalje
- Naizgled slobodan, prostran i nenatrpan
Idealna odredišna stranica je logotip, jasan naslov i dugme. Ako vam vaš proizvod omogućava da napravite jednu stranicu u minimalističkom stilu, koristite ga.
4. Što je bolje: naručiti odredišnu stranicu od profesionalaca ili napraviti svoju vlastitu odredišnu stranicu?
Komanda potrebna za kreiranje odredišne stranice od nule:
- Marketer. Razvija strategiju. Formira ponudu. Testiranje rezultata. Kreira prototip web stranice.
- Copywriter. Piše tekstove. Kreira zaglavlja.
- Web dizajner. Na osnovu prototipa izrađuje layout. Implementira specijalne efekte.
- Front end developer. Programiranje i montaža. Testira prikaz odredišne stranice na različitim uređajima. Postavlja obrazac za povratne informacije, dugme za poziv i još mnogo toga.
- Directolog, specijalista za kontekstualno oglašavanje. Analizira semantičko jezgro. Odabire ključne riječi. Postavlja kontekstualno oglašavanje.
- Menadžer. Kontrole rade. Izračunava isplativost projekta. Donosi ključne odluke.
Usluge šest specijalista koštat će vas od 3.000 USD. Ovo je cijena za odredišnu stranicu koja će raditi.
Ako svaku fazu rada pravilno isplanirate i unaprijed pronađete dobre ljude, landing stranica će biti gotova za 2-3 sedmice.
A sada pređimo na drugu - "nezavisna" opcija .
Ako ste “obična” osoba, najvjerovatnije nećete uspjeti u zadacima programiranja, dizajna i rasporeda. Ne preostaje ništa drugo nego preuzeti gotov besplatni predložak ili koristiti plaćeni konstruktor odredišne stranice.
Posao copywritera, menadžera, stručnjaka za kontekstualno oglašavanje i marketinga morat će se nositi s ramenima. Evo približne šeme radnji:
- Smislite ideju. Formulirajte prijedlog – poruku publici kojoj je potreban vaš proizvod ili usluga.
- Razbijte ideju na logičke blokove. Ako postavite pitanje u prvom bloku, drugi ili treći blok bi trebao biti odgovor.
- Dizajnirajte teaser*- Slika ili tekst. Neka bude privlačno i sažeto.
- Radite na glavnom tekstu. Ovdje ćete se ponašati kao copywriter.
- Smislite naslove. Poželjno je da nisu heterogeni i da se razviju u priču.
- Poziv na akciju. Trebali biste imati fraze i riječi “naručite sada”, “pozovite”, “pretplatite se” na vašoj prodajnoj stranici.
- Uđite u dizajn. Odaberite pravi predložak odredišne stranice. Uredite ga prema izmišljenoj strukturi. Potražite fotografije, ilustracije na akcijama. Ili uzmite kameru i sami snimite materijal.
- Počnite sletati. Postavite kontekstualno oglašavanje.
Teško? Ali to je besplatno! Istina, na ovo ćete potrošiti dosta vremena: možda barem 4-5 sedmica.
Pogledajmo tabelu načina da dobijete gotovi jednopager.
5. Popularni graditelji odredišnih stranica - TOP 3 najbolja
Popularnost slijetanja dala je poticaj pojavi brojnih dizajnera. Sada ću vam reći o nekoliko - koji govore ruski i najpopularniji.
Konstruktor 1. Flexbe (flexbe.com)
- vrlo jednostavan i pouzdan kreator odredišne stranice. Besplatna verzija važi 14 dana – dovoljno vremena da shvatite da li je konstruktor zgodan i pogodan za vaš posao.
Najjeftinija tarifa je 750 rubalja mjesečno. Ovaj iznos uključuje: jednu domenu, 10 stranica, 250 SMS obavještenja, tehničku podršku, vaše poštansko sanduče i ostale "dobrote" do besplatnog domena u .RU zoni.
Najskuplja tarifa je 3.000 rubalja mjesečno. Ovo je neograničen broj domena, koliko god stranica želite, 1.000 SMS obavještenja i tako dalje.
Od minusa - stvaranje nečeg nezamislivo cool neće uspjeti. Set alata "Flexby" bez ukrasa.
Prednosti: Nevjerovatna brzina. Za 10 minuta napravio sam prihvatljivu stranicu za jednu stranicu. Dobro je izgledao na ekranima mobilnih uređaja.
Konstruktor 2. LPgenerator (lpgenerator.ru)
Zamislite da ste već preuzeli šablon koji vam se sviđa. Da imate hosting i naziv domene. Šta dalje?
Upute za instalaciju slijetanja
Nekoliko jednostavnih koraka kako instalirati one-pager:
- Idite na web stranicu vašeg hosting provajdera. Idite na kontrolnu tablu svog naloga.
- Pronađite korijenski direktorij stranice (trebao bi biti prazan). Naziv ovog foldera je domena koju ste unaprijed kupili.
- Kliknite na dugme za preuzimanje, u prozoru koji se pojavi odaberite arhivu sa predloškom.
- Kada se arhiva kopira u fasciklu domene, kliknite na dugme "Razpakiraj" pored nje.
- Sačekajte 20 sekundi da se operacija završi. Osvježite stranicu.
- Landing instaliran!
Da uredite odredišnu stranicu, idite u korijenski direktorij svoje domene i potražite potrebnu datoteku. Promijenite tekst, slike, ubacite video. Možete naučiti ovo: pročitajte nekoliko članaka na tu temu - i samo naprijed, zaradite novac.
7. Pravi primjeri radnih odredišnih stranica
Prije otprilike 15-20 godina, odredišne stranice su kreirane za impulzivne kupovine. U stara vremena na ljude su još uvijek utjecale kisele boje, ludi gifovi i ostalo smeće. Sada smo postali selektivniji: prolazimo pored praznih obećanja, vjerujemo mirnom tonu i uvjerljivim dokazima.
„Oni“ dani su prošli, ali još uvijek postoje ljudi koji vjeruju da odredišna stranica treba da bude „blještava“. Napravio sam ovaj odjeljak da ih uvjerim u suprotno. Evo primjera odredišnih stranica. Hajde da analiziramo njihove prednosti i nedostatke, da shvatimo zašto rade.
Primjer 1. Master Climate - kompanija koja ugrađuje i prodaje klimatsku opremu
www.masterclimat.pro - ovu stranicu smo napravili sa prijateljem dok smo još radili.
Lokacija je pregledne strukture, prijatnog dizajna u stilu "ventilacija i klimatizacija". Također, ova odredišna stranica ima prilagodljiv izgled, odnosno stranica se prilagođava bilo kojoj veličini ekrana, uključujući mobilne uređaje.
Primjer 2. Slobodna radna mjesta u Alfa-Bank
www.job.alfabank.ru - skrolujemo kroz stranicu i vidimo kako počinje karijera mladog čovjeka u Alfa-Bank. Nakon nekog vremena, nakon što su pogledali primamljivu vizualizaciju, posjetitelji stranice konačno vide slova. Stranica sadrži dobar tekst - njegov kvalitet nije lošiji od animirane slike.
Opis novih slobodnih radnih mjesta je postavljen direktno na površinu, objavljen je dio mogućnosti. Za podnosioce prijava - mali i vrlo jednostavan obrazac.
Dugme za akciju: na vrhu, malo i neupadljivo dugme „pošalji životopis“ je minus; na samom dnu stranice, svijetli link "pogledajte slobodna radna mjesta" je plus.
Globalno, na odredišnim stranicama možete zaraditi na tri načina:
- Kreiranje prilagođenih slijetanja, odnosno biti web studio, dizajner ili menadžer cijelog projekta, pronaći pravi tim.
- Korištenje jednostranih web lokacija prema namjeri, odnosno da preko njih prodaje robu i usluge.
- Napravite generisanje olova. Leads - kontakti potencijalnih kupaca. To su „tople“ aplikacije koje se mogu prodati ciljanim kompanijama. Na primjer, možete kreirati odredišnu stranicu "Ormari u Samari" kako biste privukli promet na nju i prodali generirane aplikacije kompanijama koje proizvode ove ormare.
Na vama je koji način ćete izabrati. U prvom slučaju dobit ćete novac od kupaca kojima su same stranice potrebne, au drugom slučaju novac koji će od prodaje odredišne stranice dovesti do krajnjih korisnika.
9. Zaključak
Istina, ljudi su umorni od odredišne stranice. Umorni su od istih trikova - tajmera za odbrojavanje, ludih popusta, "jedinstvenih ponuda", statičnih recenzija koje se nisu mijenjale 2-3 godine.
Kako biste spriječili posjetitelja da zatvori vašu odredišnu stranicu, učinite je bez šablona. Ne, možete samo koristiti šablone, ali ih popunite mudro. Ne laži, ne juri za prolaznim dobicima. Razmislite o klijentu, o njegovim potrebama.
Hajde da rezimiramo:
- Slijetanje- ovo je odličan alat za privlačenje novih pretplatnika, kupaca.
- Nemojte licitirati samo na odredišnoj stranici. Da biste komunicirali s publikom, razvijajte druga područja - blog, glavnu stranicu, grupe na društvenim mrežama.
- Uvijek ćete imati vremena da naručite odredišnu stranicu. Stoga prvo pokušajte da ga napravite sami. U tome će vam pomoći gotovi šabloni i konstruktori. Morate samo razviti marketinšku strategiju, napisati tekst, postaviti kontekstualno oglašavanje.
Na kraju članka - video na temu izrade savršene odredišne stranice:
Želim vam puno sreće u poslu, pokretanje landing stranice i povećanje prodaje!
Već smo raspravljali o tome šta je landing stranica, zašto su dobre i na koje se osnovne principe oslanjaju. Ali unatoč činjenici da postoji niz pravila i tehnika koje će osigurati uspjeh vaše stranice, pogrešno je misliti da je razvoj odredišne stranice posao predloška, a stranica koja dobro funkcionira može se napraviti za 5 minuta, samo znajte sami zamjenjujte slike i mijenjajte tekstove. Naravno, ovo je kreativan proces, a fantazija, potkrijepljena razumijevanjem ponašanja vaše ciljne publike, samo se potiče. U nastavku ćemo predstaviti desetak primjera nebanalnih landinga, kao i stranice koje pružaju visoku konverziju.
1. Nest termostat
Vrlo zanimljivo dizajniran podest posvećen prodaji sobnog termostata. Uprkos prisutnosti svih vrsta tehničkih podataka i opisa zgodne funkcionalnosti, landing stranica je fokusirana na vizuelnu komponentu - nekoliko fotografija enterijera, kao i animacija na sredini stranice, briljantne u konceptu i izvedbi, čine osjećate da nakon kupovine ovog uređaja vaša kuća neće biti gora, nego na slikama na internetu. Dakle, podest ne prodaje termostat, već udobnost u kući, što je krajnja potreba klijenta.
2. Boy Coy
Web stranica dizajnerskog studija, nakon koje vjerojatno nećete ni tražiti ponude konkurenata. Slijetanje sa četiri ekrana je u stanju da vas ubijedi da se obratite ovim momcima, čak i ako ne pročitate nijednu recenziju ili listu kompanija s kojima je studio sarađivao. Najvjerovatnije ćete samo skrolovati, diveći se efektu paralakse, a sami ga nećete primijetiti dok počnete unositi svoje podatke u lijep obrazac za povratne informacije. http://boy-coy.com
3. Vodka "Valenki"
Još jedan primjer prekrasne odredišne stranice sa efektom paralakse. Čisto slikovna stranica koja vas ne prisiljava da odmah obavite kupovinu, ali stvara pozitivnu sliku za ciljnu publiku. Imajte na umu da su informacije o kvaliteti proizvoda predstavljene u dovoljnoj količini, ali se mogu propustiti gledajući kako kockice leda lijepo plutaju. Međutim, željeni efekat je već postignut. Ova stranica je previše lijepa da bi ponudila nešto loše kvalitete - takav podsvjesni zaključak će se pojaviti kod svakog posjetitelja bilo kojeg ukusnog sajta. http://www.valenkivodka.com
4. Internet prodavnica medvjedića
Zaista zanimljiva slijetanja mogu privući pažnju čak i ljudi koji su daleko od ciljne publike. Pogledajte primjer trgovine koja prodaje ogromne plišane medvjediće. Sajt je bukvalno pun zanimljivih ideja i čini se da je u dijalogu sa posetiocem, što na kraju, sa velikom verovatnoćom, znači kupovinu. http://medvedy.com
5. Pametan napredak
Prekrasna landing page popularnog servisa za postavljanje i postizanje ciljeva. Prvo, idite i vidite kako funkcionira, a drugo, procijenite dizajn koji utjelovljuje kretanje ka cilju. Zajedno sa vrlo kompetentnim popunjavanjem blokova, to zaista motivira da se uradi sve što je planirano, ali je odloženo na neodređeno vrijeme. https://smartprogress.do
Primjeri prodaje odredišnih stranica s visokom konverzijom
1. Proizvodnja i ugradnja drvene stolarije
Kao što znate, landing stranica ne bi trebala preopteretiti posjetitelja, već mu odmah dati nešto za što se može zakačiti i ispuniti aplikaciju. Nećemo se svađati, ali neki proizvodi zahtijevaju pažljiv odabir i nećete izaći s jednim ili dva bloka. Landing stranica ovog proizvođača prozora maksimalno je prošla po programu i dotakla takve detalje o kojima ni ne razmišljamo pri odabiru prozora. I iako je u nekoliko blokova, kako nam se čini, došlo do preopterećenja informacijama, ova stranica je i dalje dobar primjer velikog landinga. http://goodwin-nnov.ru/
2. KASKO osiguranje
Još jedna odredišna stranica s velikom konverzijom. Ovdje se koristi princip pretvaranja posjetitelja u potencijalnog klijenta slično kao u prethodnom primjeru - kalkulator. Nudimo da procijenimo koliko je parametara moguće napraviti za odabir polise i koliko se to lako radi. Isto se može reći i za ostatak sadržaja landinga - krajnje je jednostavan i jasan, a opisane su sve pogodnosti koje vlasnik automobila želi dobiti osiguranjem svog automobila.
http://prostokasko.rf
3. Automatska franšiza akvarija za zabavu
Dobar primjer prodajne landing stranice koja omogućava visoku konverziju zbog činjenice da jasno objašnjava prednosti potencijalnom klijentu, ali i ostavlja intrigu, želju da se saznaju detalji poslovnog plana koji obećava pasivan prihod. Dizajner je naša posebna pohvala. http://morewishes.ru
4. Popravka laptopa
Dobar primjer odredišne stranice, gdje relativno velika količina teksta (uključujući i prostor koji zauzima na glavnom ekranu) ne stvara nikakve poteškoće za posjetitelja, već naprotiv, izgleda organski i uspješno oslikava sve prednosti organizacija za popravke. Usluge popravke laptopa su hitne, tako da potencijalni kupci ne bi trebali davati informacije preko svake mjere: dovoljno je nekoliko blokova, ali razrađeno što je moguće ljepše i informativnije, što uliva povjerenje.
Pozdrav dragi moji čitaoci. Danas ćemo govoriti o tehničkim točkama s kojima možemo povećati konverzija prodaje njihove robe ili usluge. Jedna od važnih tačaka je dobro dizajnirana landing stranica sa proizvodima. Takozvana odredišna stranica, o čijoj izradi ćemo dalje govoriti i dobiti gotove kodove stranica.
Šta je odredišna stranica? Ovo je stranica na koju ljudi obično stignu nakon što kliknu na oglas. Kreiran je za jednu ponudu: proizvod, uslugu ili pretplatu. Efikasna odredišna stranica je kamen temeljac uspješnog online marketinga. Proizvod je možda najbolji na tržištu, oglasi su dovedeni do savršenstva, ali bez dobre landing stranice trud ne daje 100% rezultate. Posjetiocima govori šta se nudi i zašto bi to trebali poželjeti. Osjećaj hitnosti doprinosi brzom donošenju odluka i prelasku korisnika u kategoriju klijenta.
Kako kreirati Landing? Pogrešno je vjerovati da odgovor leži u sposobnosti kucanja. Dobra landing stranica rezultat je dobro koordinisanog rada na ciljevima, tekstu, dizajnu i kodu. Odredišna stranica, čiji će primjeri biti u nastavku, pomoći će početnicima da nauče osnove rada s izgledom, ali neće zamijeniti tekstove konverzije i razumijevanje ciljne publike. Možete ih kreirati i raznim dizajneri odredišnih stranica.
Dakle, prije nego što kreirate odredišnu stranicu, zapitajte se:
- Šta će osoba učiniti nakon što ode na odredišnu stranicu? Hoće li nešto kupiti? Popuniti formular? Pretplatite se na newsletter? Prije praćenja stope konverzije, postavite jasne ciljeve.
- Ko su moji konkurenti? Zapravo, ovo su tri pitanja: ko, koliko su uspješni i kako se njihova dostignuća mogu primijeniti? Imitacija je najiskreniji oblik laskanja. Ako konkurenti rade ono što radi, ponovite to na svojoj web stranici.
- Ko je moja publika? Što bolje razumete svoju nišu i ciljnu publiku, veća je verovatnoća da će se vaš trud isplatiti.
Morate ponuditi sve potrebne informacije, ali ne toliko da preplavite i otjerate potencijalnog klijenta.
Primjeri kreiranja odredišne stranice + kodiranje za lutke
Prije nego što pređemo na posao, pogledajmo na brzinu HTML i CSS. Razumijevanje načina na koji rade pomoći će u stvaranju slijetanja.
HTML- jezik za označavanje pretraživača za vizualizaciju sajtova. Piše se pomoću oznaka zatvorenih u ugaonim zagradama koje definiraju sadržaj.
Otvara se oznaka (<>) i zatvara () oko nadjeva:
<тег>sadržajaтег>
Za prilagođavanje tačke, atributi se dodaju iza imena:
<тег атрибут="значение">sadržajaтег>
CSS - definiše kako postaviti HTML elemente. Sastoji se od selektora, svojstava i vrijednosti:
#selektor (svojstvo: vrijednost;)
Selektor odgovara imenu određene oznake u html-u. Promjenom vrijednosti i dodavanjem svojstava prilagođava se njegov izgled. Možete kreirati različite stranice primjenom različitih CSS stilova na isti HTML.
5 početnih koraka
Za brzi izgled koristit ćemo predložak minimalnog dizajna baziran na bootstrapu. Ovo je sistem sa sopstvenim selektorima, koji se koristi širom sveta za ubrzanje rasporeda.
Izgleda skromno.
Od ove ribe se u nekoliko faza kreira stranica za svačiji ukus.
Struktura direktorija u folderu:
- index.html: Ovo je glavni fajl koji ćemo uređivati.
- /assets: ovdje su pomoćni fajlovi:
- /css: direktorij sadrži bootstrap i stilove ikona. Fajl koji treba uređivati je main.css.
- /img: folder za slike web stranice.
- /fonts: fontovi ikona.
- /js: pokretanje javascript datoteka.
Korak 1: Korištenje zaglavlja
Naslov i podnaslovi su ključna mjesta koja pomažu da se vrijednost ponude prenese na jasan način.
Promijenite naslov i naziv stranice. Ovdje nije potrebna mogućnost kucanja - vaš tekst je napisan na mjestima označenim žutom bojom na ekranu.
Korak 2. Kratkoća je sestra konverzije. Dodavanje pogodnosti i stopa
Trebat će vam 4 odjeljka:
- Prednosti;
- stope;
- recenzije;
- poziv na akciju.
Dizajnirajmo "glavni" odjeljak glavnog sadržaja, u koji ćemo umetnuti potrebne dijelove:
…..
…..
…..
…..
Napunite nadjevom umjesto tačkicama.
Odjeljak pogodnosti će zahtijevati ovaj kod:
Prednosti
Brzo
Pouzdano
Sed diam nonummy
Profitabilno
Elit, sed diam nonummy
tehnički
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Pouzdano
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Profitabilno
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
tehnički
Lorem ipsum dolor sit amet, consectetuer adipiscing
Pouzdano
Lorem ipsum dolor sit amet, consectetuer adipiscing
Profitabilno
Lorem ipsum dolor sit amet, consectetuer adipiscing
Vizuelni sadržaj:
Za sada izgleda traljavo, ali nema razloga za paniku, nastavljamo.
Zapišite cijene. Sadržaj se mijenja slično kao u prvom koraku. Opšti opis sa klasom “tarife” i tri tarife.
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.
Tarifni planovi
Tarifni broj 1
$10
mjesečno/po osobi
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Tarifa №2
$20
mjesečno/po osobi
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Tarifni broj 3
$30
mjesečno/po osobi
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
Tako izgleda.
Iako nas ne zanima izgled buduće odredišne stranice - u nastavku ćemo razmotriti primjere promjene stilova.
Korak 3: Vjerujte signalima i pozivu na akciju
Upotreba ciljnih signala ukazuje posjetiteljima da je marka vrijedna povjerenja. Signali mogu imati mnogo oblika, ali klasici su recenzije kupaca.
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:
Recenzije kupaca
“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."
Postavite poziv na akciju.
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:
Pogodnost prilikom naručivanja danas
Recenzije pomažu potencijalnim kupcima da odluče kupiti proizvod. Radi jasnoće, potrebni su nam avatari, pa ćemo ih odmah napisati na mjestu - ispod svakog citata.
Ime klijenta.
Korak 4: Mrežna integracija i prilagođenost mobilnim uređajima
Da implementiramo grid, potrebni su nam Bootstrap kontejneri. Važno je zapamtiti da je ukupan broj dozvoljenih segmenata kolone 12. Klasa definira širinu prikaza sadržaja. Prednost ove gotove mreže je što su kontejneri dizajnirani s obzirom na prilagodljivost i odmah primjenjivi na mobilne uređaje. Detaljan opis na službenoj web stranici. Mreža izgleda ovako.
Sadržaj “glavnog” će biti umotan u kontejner. Da biste to učinili, u njegovom gornjem dijelu piše:
Ako želite da blok odgovara cijeloj širini ekrana, onda se kontejner ubacuje unutra. Ovdje će to biti jumbotron i poziv na akciju.
Svi elementi koji se trebaju slagati jedan na drugi bit će omotani separatorima linija.
Sada možemo podesiti širinu kolona, fokusirajući se na bootstrap mrežu. Nakon umotavanja, fil je prestao da se lepi za ivice ekrana, pojavile su se uredne udubine.
Postavite cijene u red koristeći klasu stupaca col-lg-4. Unutar redova redova više nije potrebno pisati zasebne divove za premotavanje, možete ih kombinirati sa postojećim odvojenim razmakom.
Analogno, postavljamo kolone za odjeljak s recenzijama i pogodnostima. Ako želite pomaknuti element u stranu, koristite klasu stupca pomaka col-lg-offset-2. Broj na kraju određuje koliko će osnovnih stupaca biti pomaknuto.
Korak 5. Fontovi i ikone
Implementiramo fontove za naslove Google fontova. Kada je odabrano, otvorite karticu za uvoz i kopirajte podatke iz nje u datoteku main.css. Također dodajemo selektore naslova u datoteku, za koju se primjenjuje novi font.
@import "https://fonts.googleapis.com/css?family=Roboto+Condensed" /* uvozi font za naslove */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
porodica fontova: "Roboto Condensed", sans-serif; /* izlaz Googlefonta */
}
Radi jasnoće, prednosti su klasa sa značajnim imenom text-center i FontAwesome ikone iz skupa za pokretanje.
Ovim je priprema završena.
Odredišna stranica: primjeri koda s ponudom, paralaksom i brojačem
Koristimo tri najpopularnije vrste: sa ponudom, sa formularom i sa brojačem. Kako je izgled završen, predložak će biti dopunjen efektima.
Primjer 1: sa ponudom
Postavite pozadinu glavnog tijela i padding tako da prvi ekran bude pokriven.
Jumbotron (
pozadina: #f5f5f5 url(../img/fon.jpg) gornji centar bez ponavljanja;
maksimalna širina: 100%
padding-top: 250px;
padding-bottom: 200px
text-align: centar;
}
Promijenite veličinu naslova jumbotrona iz h2 u h1. Zatim propisujemo stilove za elemente koje treba promijeniti.
Počnimo sa ikonama.
Prednosti i(
boja: #cac4c4;
}
Boja je navedena iza znaka funte. Možete odabrati vlastitu opciju koristeći html tablice boja ili uređivač slika.
Uvlačenje za naslove sekcija
odjeljak h2 (
padding-top: 30px;
margin-bottom: 25px;
}
Doveli smo u red izgled tarifa. Radi praktičnosti, kreiramo vlastite klase za elemente koje želimo odabrati u tački.
Tarifni broj 1
$ 10
mjesečno/po osobi
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit
- Lorem ipsum dolor
- 10 Lorem ipsum
I puno CSS-a. Za koja su mjesta odgovorne sekcije, piše u komentarima - /* između kosih crta sa zvjezdicom */
/* =========Tarifni stilovi======== */
/* opšti prikaz tarife */
.pricing_item(
pozadina: #f2f2f2;
položaj: relativan;
prikaz: -webkit-flex;
display:flex;
flex-direction: stupac;
align-items: rastezanje;
text-align: centar;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margina: 1em
boja: #262b38;
kursor: default;
overflow: skriveno;
}
/* promijeni pozadinu na klik */
.pricing_item:hover (
boja: #444;
pozadina: #daebef;
}
/* pojedinačna cijena u svakoj tarifi */
.pricing_item:prvo dijete .price (
pozadina: #9ba9b5;
}
.pricing_item:nth-child(2) .price (
pozadina: #1f6098;
}
/* na širokim ekranima, padding i isticanje srednje kolone tarife */
@medijski ekran i (min. širina: 66.250em) (
.pricing_item(
margina: 1.5em0;
}
.featured(
z-indeks: 10;
margina: 0;
veličina fonta: 1.15em
}
}
/* naslov */
.pricing_item h3(
veličina fonta: 2em
margina: 0.5em 0 0;
boja: #1d211f;
}
/* podloga cijene */
.Cijena(
veličina fonta: 2em
font-weight: bold;
boja: #fff;
položaj: relativan;
z-indeks: 100;
visina linije: 95px;
širina: 100px
visina: 100px;
margina: 1.15em auto 1em;
granični radijus: 50%
pozadina: #77a5cc;
-webkit-prijelaz: boja 0.3s, pozadina 0.3s;
prelaz: boja 0,3s, pozadina 0,3s;
}
/* valuta */
.valuta(
veličina fonta: 0.5em
vertikalno poravnanje: super;
}
/* prečišćavanje rečenice */
.rečenica(
font-weight: bold;
margina: 0 0 1em 0;
padding: 0 0 0.5em;
boja: #2a6496;
}
/* lista */
.pricing_item ul (
veličina fonta: 0.95em
margina: 0;
padding: 1.5em 0.5em 2.5em
text-align: lijevo;
}
/* spisak stavki */
.pricing_item li(
padding: 0.15em0;
}
/* dugme za tarifni nalog */
dugme .pricing_item(
font-weight: bold;
margin top: auto;
padding: 1em 2em;
boja: #fff;
radijus granice: 5px
pozadina: #428bca;
-webkit-transition: background-color 0.3s;
prelaz: boja pozadine 0,3s;
}
/* promijenite boju klikom na dugme */
.pricing_item dugme:hover,
.pricing_item dugme:focus(
boja pozadine: #285e8e;
}
/* pozadina tarife*/
.bg-2 (
pozadina: #dddddd;
}
Rezultat
Recenzije kupaca. Dajmo im uredan izgled, odredimo lokaciju.
/* ========= Stilovi izjava======== */
svjedočanstva (
padding: 4em0;
text-align: centar;
}
.testimonials .avatar img (
granični radijus: 50%
float: lijevo;
displej: inline;
margin-right: 1em;
širina: 65px
visina: 65px;
margin-bottom: 30px;
}
.testimonials .avatar p(
text-align: lijevo;
padding-top: 1em;
boja: #5d5d5d;
težina fonta: 900
}
Ostaje ukrasiti posljednji poziv na akciju i podnožje.
/* Akcija */
.akcija(
pozadina: #476177;
min-visina: 180px;
širina: 100%
padding: 4em0;
text-align: centar;
}
.action h2(
boja: #fff;
težina fonta: 300
}
.actionp(
boja: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
veličina fonta: 1.2em
}
.action .container(
margin-top: 3em;
}
/* Podnožje */
podnožje(
pozadina: #333333;
padding: 1em0;
text-align: desno;
}
podnožje p(
boja: #fff;
visina linije: 1;
transformacija teksta: velika slova;
veličina fonta: 0.7em
margin-top: 0.5em;
}
Dugmu podnožja je dodijeljena ugrađena bootstrap klasa btn-default.
Oživljavamo šablon. Implementiraćemo glatko skrolovanje i dugmad za sekcije, kao i animaciju teksta na prvom ekranu.
Da bi prelazi funkcionisali, dio klasa odjeljka zamijenit ćemo id - za beneficije i tarife. I na dugmad ćemo napisati linkove do id-a. Ekran - ono što je priloženo onome što je označeno žutim markerom.
Postavite uvlake za dugmad - jbutton. Pomicanje po kliku radi, ali vrlo naglo.
Glatki prijelazi se kreiraju pomoću javascripta ili jqueryja. Potonji je po defaultu povezan s Bootstrap predlošcima.
Pomicanje je sada glatko.
Dodavanje animacije u tekst pomoću Animate.css ( https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Ovo je gotovi open source, može se koristiti na bilo kojoj stranici. Stavljamo datoteku sa github-a u css folder i upisujemo putanju.
Odaberite efekte ovdje: https://daneden.github.io/animate.css/. Odabrali smo fadeInDown. Napisano u kodu ovako:
Sada, kada se stranica učita ili osvježi, tekst će biti animiran. Spreman.
Primjer 2: sa efektom oblika i paralakse
Što se posjetitelju ponudi više polja obrasca, manja je vjerovatnoća da će ih ispuniti. Tražite samo minimalne potrebne informacije.
sastavljeno po analogiji. Promijenit ćemo pozadinu i boje. I, naravno, dodaćemo obrazac.
Počnimo sa paralaksa .
Promijenite pozadinu jumbotrona u transparentnu:
pozadina: transparentna;
Umetnite skriptu u glavu:
Prvi red u tijelu je paralaksni kontejner:
A u CSS-u njegovo ponašanje je:
bgparallax(
pozadina: url(/../img/fon.jpg) repeat;
pozicija: fiksna;
širina: 100%
visina: 300%;
top:0;
lijevo:0;
z-indeks: -1;
}
Paralaksa je spremna. Ali za promjenu koda i nove pozadine potrebno je ponovno dodijeliti shemu boja.
Zatamnjenje menija:
navbar-default(
boja pozadine: #333;
border-color: #444;
boja: tamno siva;
radijus granice: 0
}
Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
boja: tamno siva;
boja pozadine: rgba(0, 0, 0, 0.5);
}
Rečenicu u jumbotronu zamjenjujemo novom - kodom obrasca:
Landing Page pretvara posjetioce u kupce
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.
I propisati izgled
/* obrazac */
.headform-list(
tip-stil liste: nijedan;
visina linije: 26px;
težina fonta: 400
padding: 0px
margin-bottom: 40px
}
.headform(
overflow: skriveno;
položaj: relativan;
boja pozadine: rgba(0,0,0,.4);
padding: 35px 40px;
radijus granice: 8px
}
unos, dugme, odabir, tekstualno područje (
širina: 100%
margin-bottom: 10px;
}
.headform-list li .fa (
pozicija: apsolutna;
vrh: 0px;
lijevo: 0px;
širina: 42px
veličina fonta: 24px;
text-align: centar;
}
.headform-list li (
položaj: relativan;
min-visina: 38px;
padding-left: 62px;
margin-bottom: 20px
}
.jumbotronp(
boja: #fff;
veličina fonta: 16px;
stil fonta: kurziv;
}
Ovdje je došao i tekst jumbotrona, jer je zahtijevao izmjene.
Mijenjamo cijene.
/* opšti prikaz tarife */
.pricing_item(
boja pozadine: rgba(0,0,0,.4); /* linija promijenjena */
radijus granice: 4px /* linija promijenjena */
položaj: relativan;
prikaz: -webkit-flex;
display:flex;
-webkit-flex-direction: stupac;
flex-direction: stupac;
-webkit-align-items: rastezanje;
align-items: rastezanje;
text-align: centar;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
padding: 2em 3em;
margina: 1em
boja: #f2f2f2; /* linija promijenjena */
kursor: default;
overflow: skriveno;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* promijeni pozadinu na klik */
.pricing_item:hover (
boja: #444;
pozadina: #ddd; /* linija promijenjena */
}
Sada izgledaju ovako - prozirna pozadina i zaobljeni uglovi.
Šablon je spreman.
Primjer 3: sa brojačem za odbrojavanje
Ponovo mijenjamo punjenje jumbotrona i prefarbamo šablon za novu pozadinu po analogiji sa prethodnim šablonom. Povezujemo counter skriptu:
HTML
Vrijeme ne čeka
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 do luprell te auzz.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
-
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
U datoteci stila uklonite donji radijus obrasca, podsjetite na dugme.
Dodatno, meni je prebojen u novu pozadinu i promenjen je stil teksta u jumbotronu - po analogiji sa prethodnim primerom. Rezultat.
Donji dio
Ovim se završavaju primjeri odredišne stranice, ali kodu je potrebno više rada.
Odredišna stranica bi trebala biti brza i dobra kao Ferrari - vrijeme učitavanja stranice ima ogroman utjecaj na stope posete početne stranice. Optimizirajte slike, minimizirajte veličinu gotovih skripti i stilova za maksimalnu efikasnost.
Lekcija daje primjere kreiranja dobrih odredišnih stranica koje će vam pomoći da dovedete prave kupce, a vi ćete naučiti nešto novo. Lajkujmo i repostujemo. Vidimo se uskoro.
Da preuzmete sve izvore predstavljene u lekciji kao gotove stranice, kliknite na jedno od dugmadi društveni dvorac da ga otvorite i dobijete vezu.
S poštovanjem, Galiulin Ruslan.
Na webinaru o greškama na odredišnim stranicama, do 30.10.2014, zamolili su me da navedem primjere idealnih odredišnih stranica. Šalio sam se u venu da nema granica savršenstvu, ali sam shvatio da su ljudi gladni novih uzora, pored onih koje sam već naveo ili.
Naravno, vidim neke greške na ovim odredišnim stranicama. Posebno ja. Ne, volim rad dizajnera, pa dijelim ove primjere s vama. Pa i sami možete pronaći greške ako ste pogledali snimak gornjeg webinara 🙂
Podsjećam vas da je na slike moguće kliknuti – povezuju se na pune snimke ekrana odredišnih stranica. Obim koji nije previše pogodan za mobilne komunikacije - do 5Mb.
Primjer slijetanja: Timberland cipele.
![](https://i2.wp.com/shkondin.ru/wp-content/uploads/2014/11/1-300x172.png)
Zaista mi se sviđa fokus dizajnera na “glavnog lika” odredišne stranice. Kao i treći ekran, koji se fokusira na ključne karakteristike proizvoda. Ozbiljni nedostaci, pored onih o kojima sam govorio na webinaru, su kombinacije na jednoj stranici cipela dizajniranih za različita godišnja doba.
Primjer slijetanja: dječji električni automobili
![](https://i0.wp.com/shkondin.ru/wp-content/uploads/2014/11/2-300x153.png)
Ura! Postoji video snimak automobila u akciji. Bez navijanja - u videu su mali Korejci. Ali mi ih ne prodajemo 🙂
Što je još važnije, zagarantovano zamrzavanje za tate: kako se bijeli auto razlikuje od crnog. I da li ove razlike vrijede 3200 rubalja. Ostali nedostaci će biti naglašeni sljedećim slijetanjem.
Primjer slijetanja: radio-upravljani modeli
![](https://i1.wp.com/shkondin.ru/wp-content/uploads/2014/11/3-300x184.png)
Postoji kategorija robe, koja uključuje nove proizvode sa originalnim, inovativnim karakteristikama. Ako proizvođač nema izložbeni prostor u kojem može prikazati svoj proizvod, već samo online prodavnicu, onda je prilično teško demonstrirati njegove jedinstvene karakteristike izvan fizičkog svijeta, u virtualnom.
Za prodaju takvog proizvoda potrebno je na jednostavan, razumljiv način prenijeti informaciju o složenom proizvodu, uz zadržavanje interesa posjetitelja tijekom cijelog procesa demonstracije.
U ovoj recenziji daćemo primere odredišnih stranica koje u trenu teleportuju posetioca sa stranice sa informacijama o proizvodu u korpu za kupovinu. Pažljivo! Sakrijte svoju platnu karticu dok čitate! Postoji rizik od impulzivne kupovine.
B&O Play
Bežične slušalice s ugrađenim touch panelom - prilično futuristički uređaj, san svakog štrebera! Zamislite hipstera iz 2050. koji nosi B&O slušalice, Google Glass i jaše psa robota Boston Dynamics.
Kako bi potencijalnom kupcu demonstrirala funkcionalnost, stranica proizvoda sadrži video fragmente koji pokazuju osnovni princip kontrole: povucite prema gore - povećajte glasnoću, povucite lijevo - sljedeća pjesma itd. Sve je jednostavno i jasno.
Brickfielder
Ova kompanija proizvodi odeću za golf. Ali Brickfielder proizvodi nemaju nikakve veze s klasičnom polo majicom za djedove. Predstavljen nam je inovativni proizvod i na interaktivan način rečeno o njegovim jedinstvenim svojstvima koja se kriju u složenim proizvodnim tehnologijama. Ovdje ćete pronaći mnoge interaktivne primjere pomicanja i prevlačenja. Ovaj pristup u potpunosti otkriva temu i otklanja nedoumice potrošača. Da li se već vidite na golf terenu u Brickfielder polo?
Converse
Prilagodite! Kreirajte vlastite patike! Brend "Converse" ne samo da je pokupio trend individualizacije, već ga je i kompetentno implementirao na svojoj web stranici. Odredišna stranica je zaista fantastična, jednostavna za korištenje i omogućava vam da prilagodite svaki element cipele. Pogledajte naše čudovište: prilagođene zelene patike sa crvenim vezicama i ljubičastim jezikom - nakon dužeg kontakta očima postoji opasnost od onesvijestiti, epileptičnog napada, probavne smetnje i gubitka kose.
Quechua
Čak i ako ne želite da idete na kampovanje, alat "moj drugi dom", koji vam omogućava da izgradite sopstveni kamp od raznih komponenti, brzo će vas uveriti u suprotno. Već smo smislili kako će naš šatorski grad izgledati u slučaju zombi apokalipse.
Bjorn Borg
Brend, koji proizvodi reflektirajuću odjeću i dodatke za ulične sportiste, koristio je vrlo jednostavnu ideju - kada skrolujete niz stranicu, možete vidjeti kako proizvodi izgledaju danju i noću. Ponekad ne biste trebali preopteretiti svoju odredišnu stranicu kreativom ako efektivno rješenje leži na površini.
Ikea
“Dobar dan počinje ovdje” je interaktivni video koji predstavlja namještaj i kućne dodatke iz IKEA kataloga. Ovaj pristup jasno pokazuje proizvode u stvarnim životnim uslovima.
Klikom na dugme na dnu ekrana možete pogledati detaljne informacije o proizvodu - ovo je odličan način uvjeravanja, posebno ako video sadrži direktne veze do proizvoda u online trgovini.
Bellroy
Možda je ovo naš favorit u ovoj recenziji. Bellroyeva odredišna stranica vizualno prikazuje proizvod, dajući ideju o tome kako njegov "tanki novčanik" može pomoći u smanjenju prostora koji zauzima u vašem džepu.
Geox
Na fizičkom nivou, proizvod je samo kocka za sjedenje. Ali na nivou emocija ispada da proizvod iz Sit on Everything poprima potpuno drugačiju percepciju. Otpremite 6 slika za svaku stranu ovog geometrijskog oblika, a vaša peta tačka će svaki put sletjeti na novu sliku! Mogućnosti za maštu su beskrajne!