Salutări, dragii mei cititori. Astăzi vom vorbi despre puncte tehnice, cu care putem crește conversia vânzărilor bunurile sau serviciile lor. Unul dintre Puncte importante este bine gândit pagina de destinație cu bunuri. Așa-numita pagină de destinație despre crearea căreia vom vorbi mai departe și vom obține coduri gata pagini.

Ce este o pagină de destinație? Aceasta este pagina pe care oamenii ajung de obicei după ce fac clic pe un anunț. Creat pentru o singură ofertă: produs, serviciu sau abonament. O pagină de destinație eficientă este piatra de temelie a marketingului online de succes. Produsul poate fi cel mai bun de pe piață, reclamele sunt perfecționate, dar fără o pagină de destinație bună, eforturile nu produc rezultate 100%. Le spune vizitatorilor ce este oferit și de ce ar trebui să o dorească. Un sentiment de urgență contribuie la luarea rapidă a deciziilor și la trecerea utilizatorului la categoria de client.

Cum se creează o pagină de destinație? Este greșit să credem că răspunsul constă în capacitatea de a tipografi. O pagină de destinație bună este rezultatul muncii coordonate privind obiectivele, textul, designul și codul. Paginile de destinație, dintre care exemple vor fi mai jos, îi vor ajuta pe începători să învețe elementele de bază ale lucrului cu aspectul, dar nu vor înlocui textele de conversie și înțelegerea publicului țintă. De asemenea, le puteți crea folosind diverse designeri de pagini de destinație.

Prin urmare, înainte de a crea pagina de destinație, intreaba-te pe tine insuti:

• Ce va face o persoană după ce ajunge pe pagina de destinație? Va cumpăra ceva? Vei completa formularul? Vă abonați la newsletter? Înainte de a urmări rata de conversie, setați obiective clare.
• Cine sunt concurenții mei? În realitate, acestea sunt trei întrebări: cine, cât de reușite au și cum pot fi aplicate realizările lor? Imitația este cea mai sinceră formă de flatare. Dacă concurenții tăi fac ceva care funcționează, replica-l pe site-ul tău.
• Cine este publicul meu? Cu cât vă înțelegeți mai bine nișa și publicul țintă, cu atât sunt mai mari șansele ca eforturile dvs. să dau roade.

Trebuie să oferim totul informatie necesara, dar nu atât pentru a suprima și a alunga un potențial client.

Înainte de a începe, să aruncăm o privire rapidă la HTML și CSS. Înțelegerea modului în care funcționează vă va ajuta să creați o aterizare.

HTML este un limbaj de markup al browserului pentru vizualizarea site-urilor web. Scris folosind etichete incluse între paranteze unghiulare care definesc conținutul.

Eticheta se deschide () și se închide () în jurul umpluturii:

conţinut

Pentru reglaj fin, atributele sunt adăugate după nume:

conţinut

CSS - definește modul de poziționare elemente HTML. Constă din selectori, proprietăți și valori:

#selector (proprietate: valoare;)

Selectorul se potrivește cu numele unei anumite etichete în html. Schimbarea valorilor și adăugarea de proprietăți îi reglează aspect. Puteți crea pagini care arată diferit unele de altele, aplicând diferite stiluri CSS la același HTML.

Pentru layout rapid Vom folosi un șablon cu design minimal bazat pe bootstrap. Acesta este un sistem cu selectoare proprii, care este folosit în întreaga lume pentru a accelera aspectul.

Pare modest.

Din acest pește se creează un site web pentru fiecare gust în mai multe etape.

Structura directorului din folder:

• index.html: Aceasta fisierul principal, pe care o vom edita.
• /assets: fișierele auxiliare se află aici:
• /css: directorul conține stiluri bootstrap și pictograme. Fișierul pe care îl vom edita este main.css.
• /img: folder pentru imaginile site-ului.
• /fonts: fonturi pentru pictograme.
• /js: fișiere javascript bootstrap.

Pasul 1: Utilizarea unui antet

Titlul și subtitlurile sunt locuri cheie care ajută la transmiterea într-o manieră clară a valorii ofertei.

Să schimbăm titlul și numele site-ului. Aici nu trebuie să aveți abilități de tastare - vă scrieți propriul text în locurile evidențiate cu galben pe ecran.

Pasul 2. Concizia este sora convertirii. Adăugarea de beneficii și tarife

Veți avea nevoie de 4 secțiuni:

• avantaje;
• tarife;
• recenzii;
• apel la acțiune.

Să creăm o secțiune a conținutului principal „principal”, în care vom insera secțiunile necesare:

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

Umpleți cu umplutură în loc de puncte.

Pentru secțiunea de beneficii veți avea nevoie de acest cod:

Avantaje
Rapid

De încredere

Sed diam nonummy

Elit, sed diam nonummy

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

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

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

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

Lorem ipsum dolor sit amet, consectetuer adipiscing

Conținut pentru claritate:

Încă pare neglijent, dar nu există niciun motiv de panică, să continuăm.

Notam preturile. Conținutul se modifică în același mod ca în primul pas. descriere generala cu clasa „tarife” și trei tarife.

Planuri tarifare

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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

pe lună/per persoană

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

pe lună/per persoană

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

pe lună/per persoană

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Așa arată.

Deocamdată, nu ne interesează aspectul viitoarei pagini de destinație - vom analiza mai jos exemple de schimbare a stilurilor.

Pasul 3: Semnale de încredere și apel la acțiune

Utilizarea semnalelor direcționate indică vizitatorilor că marca este de încredere. Semnalele pot fi primite tipuri diferite, dar clasicele sunt recenziile clienților.

Recenziile clienților

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:

Să stabilim un îndemn.

Beneficiați când comandați astăzi

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 exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat:

Recenziile vor ajuta potențiali clienți ia decizia de a cumpăra un produs. Pentru claritate, avem nevoie de avatare, așa că le vom pune imediat la locul lor - sub fiecare citat.

Numele clientului.

Pasul 4: Integrare cu Grid și Mobile Friendly

Pentru a implementa grila, avem nevoie de containere Bootstrap. Este important să ne amintim numărul total de segmente de coloane valide - 12. Clasa determină lățimea afișajului conținutului. Avantajul acestei grile gata făcute este că containerele sunt proiectate având în vedere adaptabilitate și sunt imediat utilizabile pentru dispozitive mobile. Descriere detaliata pe site-ul oficial. Grila arată așa.

Conținutul „principal” va fi ambalat într-un recipient. Pentru a face acest lucru, în partea de sus este scris următoarele:

… .

Dacă aveți nevoie ca blocul să se potrivească pe întreaga lățime a ecranului, atunci containerul este introdus în interior. Aici va fi un jumbotron și un apel la acțiune.

Vom împacheta toate elementele care necesită plasare una peste alta cu separatoare de linii.

Acum putem ajusta lățimea coloanelor, concentrându-ne pe grila bootstrap. După împachetare, umplutura a încetat să se lipească de marginile ecranului și au apărut niște indentări îngrijite.

Setăm prețurile pe rând folosind clasa col-lg-4. În interiorul liniilor de rând, nu mai este necesar să scrieți div-uri separate pentru împachetare, acestea pot fi combinate cu cele existente separate printr-un spațiu.

Prin analogie, am creat coloane pentru secțiunea recenzii și beneficii. Dacă trebuie să mutați un element în lateral, utilizați clasa coloanei offset col-lg-offset-2. Numărul de la sfârșit determină câte coloane de bază va avea loc schimbarea.

Pasul 5. Fonturi și pictograme

Implementăm fonturi de antet Google Font. Când este selectat, deschideți fila de import și copiați datele din aceasta în fișierul main.css. Adăugăm, de asemenea, selectoare de titlu la fișierul pentru care este folosit noul font.

@import „https://fonts.googleapis.com/css?family=Roboto+Condensed” /* import font pentru titluri */
.navbar-brand,
h1,
h2,
h3,
h4,
h5,
h6 (
familie de fonturi: „Roboto Condensed”, sans-serif; /* Ieșire Googlefont */
}

Pentru claritate, avantajele sunt descrise de o clasă cu numele auto-explicativ text-center și pictograme FontAwesome din setul de bootstrap.

În acest moment, pregătirea este complet finalizată.

Folosim cele mai populare trei tipuri: cu o propoziție, o formă și cu numărătoare inversă. Pe măsură ce aspectul progresează, șablonul va fi completat cu efecte.

Să setăm fundalul părții principale și al căptușelii astfel încât primul ecran să fie acoperit.

Jumbotron (
fundal: #f5f5f5 url(../img/fon.jpg) centru sus, fără repetare;
latime maxima: 100%;
padding-top: 250px;
umplutură-partea inferioară: 200px;
text-align: centru;
}

Să schimbăm dimensiunea antetului jumbotron de la h2 la h1. În continuare, scriem stiluri pentru elementele care trebuie schimbate.

Să începem cu pictogramele.

Beneficii i(
culoare: #cac4c4;
}

După semnul hash, este specificată o culoare. Puteți alege propria opțiune folosind tabele de culori html sau un editor de imagini.

Indentație pentru titlurile de secțiuni

secțiunea h2 (
padding-top: 30px;
margine-jos: 25px;
}

Curățăm aspectul tarifelor. Pentru comoditate, creăm propriile noastre clase pentru elementele pe care dorim să le evidențiem în mod specific.

Tariful nr. 1
$10

pe lună/per persoană

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit


• Lorem ipsum dolor


• 10 Lorem ipsum

Și o mulțime de CSS. Locurile pentru care sunt responsabile secțiunile sunt menționate în comentarii - /* între bare oblice cu un asterisc */

/* =========Stiluri tarifare======== */
/* forma generala tarif */
.price_articol(
fundal: #f2f2f2;
poziție: relativă;
display: -webkit-flex;
display: flex;

flex-direcție: coloană;

align-items: stretch;
text-align: centru;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
umplutura: 2em 3em;
marja: 1em;
culoare: #262b38;
cursor: implicit;
preaplin: ascuns;

}
/* schimba fundalul la clic */
.pricing_item:hover (
culoare: #444;
fundal: #daebef;
}
/* fundalul etichetei de preț individuale în fiecare tarif */
.pricing_item:first-child .price (
fundal: #9ba9b5;
}
.pricing_item:nth-child(2).price (
fundal: #1f6098;
}
/* pe ecranele late coloana de tarif din mijloc este indentată și evidențiată */
Ecran @media și (lățime minimă: 66.250 em) (
.price_articol(
marja: 1,5em 0;
}
.Recomandate(
indicele z: 10;
marja: 0;
dimensiunea fontului: 1,15 em;
}
}
/* titlu */
.pricing_item h3 (
dimensiunea fontului: 2em;
marja: 0,5em 0 0;
culoare: #1d211f;
}
/* fundalul etichetei de preț */
.Preț(
dimensiunea fontului: 2em;
greutatea fontului: bold;
culoare: #fff;
poziție: relativă;
indicele z: 100;
înălțimea liniei: 95px;
lățime: 100px;
înălțime: 100px;
marja: 1.15em auto 1em;
raza-limită: 50%;
fundal: #77a5cc;
-webkit-tranziție: culoare 0.3s, fundal 0.3s;
tranziție: culoare 0,3s, fundal 0,3s;
}
/* valuta */
.valută(
dimensiunea fontului: 0.5em;
vertical-align: super;
}
/* clarificarea propunerii */
.propoziție(
greutatea fontului: bold;
marja: 0 0 1em 0;
umplutura: 0 0 0.5em;
culoare: #2a6496;
}
/* lista */
.pricing_item ul (
dimensiunea fontului: 0,95 em;
marja: 0;
umplutură: 1,5em 0,5em 2,5em;
text-align: stânga;
}
/* articole din lista */
.pricing_item li (
umplutura: 0,15em 0;
}
/* Butonul de comandă tarifară */
butonul .pricing_item(
greutatea fontului: bold;
margin-top: auto;
umplutura: 1em 2em;
culoare: #fff;
chenar-rază: 5px;
fundal: #428bca;
-webkit-tranziție: fundal-culoare 0.3s;
tranziție: culoare de fundal 0,3s;
}
/* schimba culoarea cand este apasat butonul */
.pricing_item button:hover,
buton .pricing_item:focus (
culoare de fundal: #285e8e;
}
/* fundal tarifar*/
.bg-2 (
fundal: #dddddd;
}

Rezultat

Recenziile clienților. Să le dăm o privire atentă și să le indicăm locația.

/* =========Stiluri de mărturii======== */
marturii (
umplutura: 4em 0;
text-align: centru;
}
.mărturii .avatar img (
raza-limită: 50%;
plutește la stânga;
display: inline;
margine-dreapta: 1em;
latime: 65px;
înălțime: 65px;
margine-jos: 30px;
}
.mărturii .avatar p (
text-align: stânga;
captuseala-top: 1em;
culoare: #5d5d5d;
greutate font: 900;
}

Tot ce rămâne este să decorezi ultimul apel la acțiune și subsolul.

/* Acțiune */
.acțiune(
fundal: #476177;
înălțime minimă: 180px;
latime: 100%;
umplutura: 4em 0;
text-align: centru;
}
.acțiune h2 (
culoare: #fff;
greutate font: 300;

}
.acțiune p(
culoare: #fff;
text-shadow: 0 1px 2px rgba(0, 0, 0, .2);
dimensiunea fontului: 1.2em;
}
.acțiune .container (
margine-top: 3em;
}
/* Subsol */
subsol(
fundal: #333333;
umplutura: 1em 0;
text-align: dreapta;
}
subsol p(
culoare: #fff;
înălțimea liniei: 1;
text-transform: majuscule;
dimensiunea fontului: 0.7em;
margine-top: 0,5em;
}

Butonului de subsol i se atribuie clasa de bootstrap încorporată btn-default.

Aducerea șablonului la viață. Să punem în aplicare defilare linăși butoane pentru secțiuni, precum și animație text pe primul ecran.

Pentru trecerea la serviciu, vom înlocui unele dintre clasele de secțiuni cu id - pentru beneficii și tarife. Și vom adăuga link-uri către id-ul la butoane. Captură de ecran - ce este atașat la ce, evidențiat cu un marcator galben.

Am stabilit indentări pentru butoane - jbutton. Derularea la apăsare funcționează, dar foarte brusc.

Tranzițiile netede sunt create când ajutor javascript sau jquery. Acesta din urmă este conectat implicit la șabloanele Bootstrap.

Derularea este acum lină.

Adăugarea de animație la text folosind Animate.css (https://raw.githubusercontent.com/daneden/animate.css/master/animate.css). Aceasta este gata sursa deschisa, poate fi folosit pe orice site web. Plasați fișierul din Github în folderul css și specificați calea.

Selectăm efectele aici: https://daneden.github.io/animate.css/. Am selectat fadeInDown. Este scris în cod așa:

Acum, când pagina este încărcată sau reîmprospătată, textul va fi animat. Gata.

Cu cât i se prezintă un vizitator mai multe câmpuri de formular, cu atât este mai puțin probabil să le completeze. Solicitați doar informațiile minime necesare.

Este asamblat prin analogie. Vom schimba fundalurile și culorile. Și, desigur, vom adăuga o formă.

Să începem cu paralaxa.

Să schimbăm fundalul jumbotronului în transparent:

fundal: transparent;

În interiorul capului vom introduce scriptul:

$(fereastră).scroll(funcție(e)(
paralaxă();
});
funcția paralaxă())(
var defilat = $(window).scrollTop();
$(".bgparallax").css("sus",-(defilat*0.2)+"px");
}

Prima linie din corp este un recipient pentru paralaxă:

Și în CSS comportamentul său este:

bgparallax (
fundal: url(/../img/fon.jpg) repetare;
poziție: fixă;
latime: 100%;
inaltime: 300%;
sus:0;
stânga:0;
indicele z: -1;
}

Parallax este gata. Dar făcând modificări la cod și fundal nou necesită reatribuirea schemei de culori.

Întunecarea meniului:

Navbar-implicit (
culoare de fundal: #333;
culoare-chenar: #444;
culoare: gri închis;
raza-limită: 0;
}

Navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus (
culoare: gri închis;
culoare de fundal: rgba(0, 0, 0, 0,5);
}

Înlocuim propoziția din jumbotron cu una nouă - cu codul de formular:

Pagina de destinație transformă vizitatorii în clienți
Quisque tincidunt dui augue suspendisse lorem vel diam consectetur posuere vehicula posueret mauris vehicula torttor rhoncus vulputate massa.

• 
  
  
  


• 
  

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

  
  

Și prescriem aspectul

/* formular */
.headform-list(
list-style-type: niciunul;
înălțimea liniei: 26px;
greutate font: 400;
umplutură: 0px;
margine-jos: 40px;
}
.headform(
preaplin: ascuns;
poziție: relativă;
culoare de fundal: rgba(0,0,0,.4);
umplutură: 35px 40px;
chenar-rază: 8px;
}
introducere, buton, selectare, zonă de text (
latime: 100%;
margine-jos: 10px;
}
.headform-list li .fa (
poziție: absolută;
sus: 0px;
stânga: 0px;
latime: 42px;
dimensiunea fontului: 24px;
text-align: centru;
}
.headform-list li (
poziție: relativă;
înălțime minimă: 38px;
umplutură-stânga: 62px;
margine-jos: 20px;
}
.jumbotron p (
culoare: #fff;
dimensiunea fontului: 16px;
font-style: italic;
}

Aici a ajuns și textul jumbotronului, deoarece a cerut modificări.

Schimbăm tarifele.

/* vedere generală a tarifului */
.price_articol(
culoare de fundal: rgba(0,0,0,.4); /* linia schimbată */
chenar-rază: 4px; /* linia schimbată */
poziție: relativă;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: coloana;
flex-direcție: coloană;
-webkit-align-items: stretch;
align-items: stretch;
text-align: centru;
-webkit-flex: 0 1 330px;
flex: 0 1 330px;
umplutura: 2em 3em;
marja: 1em;
culoare: #f2f2f2; /* linia schimbată */
cursor: implicit;
preaplin: ascuns;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.05);
}
/* schimba fundalul la clic */
.pricing_item:hover (
culoare: #444;
fundal: #ddd; /* linia schimbată */
}

Acum arată așa - fundal transparentși colțuri rotunjite.

Șablonul este gata.

Schimbăm din nou umplerea jumbotronului și recolorăm șablonul pentru a se potrivi cu noul fundal, similar șablonului anterior. Conectați scriptul de contor:

HTML





Timpul nu așteaptă
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 exerci tation 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 zzril delenit augue duis dolore te feugait nulla facilisi.

• 
  

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

  
  


• 
  

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