Este necesară navigarea pe pagina de destinație: date confirmate de cazuri. Meniu adaptabil pentru pagina de destinație

Navigarea dă un sentiment de control, care în sine nu este rău. Dar cum rămâne cu regula „o pagină, un obiectiv”? Nu există un răspuns clar la această întrebare (ca majoritatea întrebărilor de optimizare), dar există câteva studii de caz grozave care vă pot ajuta să vă luați decizia.

Optimizarea paginii de destinație

Aterizarea este o parte integrantă a strategiei de creștere a profiturilor. În medie, volumul de clienți potențiali crește cu 55% atunci când companiile cresc numărul de pagini de destinație. Cu toate acestea, cercetările arată că doar 22% dintre companii sunt mulțumite de .

Vezi toate aceste elemente de mai sus? Ele distrage atenția și te îndepărtează de pagina de destinație. Navigare care duce de la pagina de destinație, contrazice sensul existenței sale.

Aterizare - pagina offline, la care vizitatorul ajunge printr-un link publicitar sau din rezultatele căutării. Sarcina sa este de a încuraja utilizatorul să întreprindă o acțiune. De exemplu, obțineți o demonstrație a produsului sau înregistrați-vă pentru un webinar.

Este clar că navigarea aici nu are prea mult sens, dar doar 16% din paginile de destinație nu o conțin. Se crede că sunt necesare link-uri pentru a merge la alte secțiuni în aspectul paginii de destinație. Să vedem ce arată testele împărțite.

Caz „pentru” navigare

înțelegeți locația dvs.;
Navigați cu ușurință la alte secțiuni.

Există trei tipuri de navigare:

principal;
local;
contextual.

Acest tip reprezintă meniul principal al site-ului. Fiecare element din acesta duce la o secțiune specifică a resursei. Antetul de pe pagina Edgar este un exemplu de navigare principală:

Navigație locală

Acestea sunt subsecțiuni ale navigației principale într-un format de meniu derulant care structurează informațiile. Există un astfel de meniu pe pagina de destinație Zoho menționată mai sus.

Navigare contextuală

Toate cele trei tipuri sunt necesare pentru a vizualiza o resursă și a organiza conținutul pe aceasta. Ele fac ușor să treceți de la o pagină la alta și să cunoașteți compania mai profund.

Potrivit WordStream, până la 96% dintre paginile de destinație conțin cel puțin un link care duce vizitatorul departe. Cifrele spun:

doar 4% dintre paginile de destinație nu au deloc linkuri;
81% din pagini conțin de la 1 la 9 link-uri;
14% folosesc mai mult de 10 elemente de navigare.

Plasarea link-urilor vă permite să rezolvați alte probleme decât scopul principal al paginii de destinație. De exemplu, butoane sociale. rețelele cresc numărul de abonați.

Să luăm ca exemplu pagina Meltwater.

Pagina de destinație nu numai că introduce produsul făcând clic pe butonul CTA, dar deschide și calea către alte secțiuni prin navigare. Pentru cei care nu sunt interesați de scopul principal al paginii, poate fi potrivit altceva. Se pare că, chiar dacă legăturile conduc vizitatorul departe, până la urmă lucrează pentru rezultat.

Caz împotriva navigației

Legăturile de navigare nu funcționează pe o pagină de destinație, deoarece nu este una dintre paginile site-ului dvs. și ar trebui să fie distincte de aceasta. Link-urile din prima fereastră a resursei vă ajută să studiați informațiile, trecând de la o pagină la alta. Pe pagina de destinație, pur și simplu iau utilizatorul.

Nu contează cât de atractiv este titlul, cât de inteligent sunt prezentate informațiile sau cât de bun este . Linkul de navigare te îndepărtează de obiectivul de conversie și este imposibil să prezici dacă vizitatorul va reveni. Perioada de atenție a utilizatorului este limitată, așa că trebuie să-l captivezi de la început și să îndepărtezi distracția pe parcurs.

Acest lucru este valabil și pentru subsolul (subsolul paginii), plin cu link-uri. Imaginați-vă un vizitator care vă vede pagina de destinație și este pe cale să facă clic pe butonul CTA, dar este brusc distras de linkurile de mai jos. Acest lucru vă afectează conversia.

De exemplu, pe pagina de destinație a loteriei de la Better Homes and Gardens, există șanse mari ca vizitatorul să dorească să afle mai multe despre Meredith Corporation și să se abate de la calea care duce la clic pe butonul CTA.

Există suficiente exemple, acum să vedem ce spun testele împărțite despre impactul linkurilor asupra conversiei. Test - Cel mai bun mod afla ce este eficient pe pagina de destinație și ce este distructiv. Pentru a vedea impactul pozitiv al eliminării legăturilor de navigare, priviți exemplul AmeriFirst.

Specialiștii în marketing au vrut să îmbunătățească performanța, dar au ezitat să reproiecteze întreaga pagină de teamă să nu piardă încrederea clienților. S-a luat decizia de a elimina bara de navigare, ceea ce a făcut pagina mai organizată și a dus la o creștere cu 30-40% a conversiilor. Iată diferențele dintre cele două pagini:

În mod similar, Hubspot a testat cinci pagini de destinație volum mare trafic. Versiunea A, spre deosebire de versiunea B, avea un superior și panoul de jos butoane de navigare și rețele sociale.

Datele arată că eliminarea tuturor linkurilor de navigare a crescut conversiile.

Este deosebit de interesant faptul că excluderea navigării din mijlocul pâlniei de conversie a dus la o creștere de 16% și 28%, iar din partea de sus a pâlniei - 0-4%.
Când echipa Minders și-a testat pagina de destinație și a eliminat bara de navigare, în decurs de o lună, conversia a crescut de la 9,2% la 17,6%.

Testul numărul patru. Yuppiechef este un important retailer online de ustensile de bucătărie premium cu sediul în Africa de Sud. Ei au testat eliminarea barei de navigare pentru a preveni distrarea atenției vizitatorilor de la sarcina principală de conversie de înregistrare pentru a crea o listă de cadouri de nuntă online.

Iată ce s-a întâmplat după eliminarea barei de navigare:

Această opțiune a crescut conversia la 100%.

Când nu există linkuri străine pe pagina de destinație (cu excepția butonului CTA), nimic nu distrage atenția utilizatorului de la sarcina principală. O pagină de destinație fără linkuri se concentrează pe o singură acțiune, ceea ce înseamnă că vizitatorul îi va acorda atenție. Dar legăturile de navigare nu sunt doar o distragere a atenției, ci sunt pline de pierderi materiale.

Dacă utilizați o pagină de destinație pentru a promova, atunci plătiți pentru fiecare vizitator. Și dacă pagina nu duce la obiectivul de conversie, pur și simplu pierdeți bani. Indiferent de modul în care creați o pagină de destinație - folosind un șablon sau de la zero, linkurile de navigare îndepărtează vizitatorii de sarcina principală, trecând la cele secundare.

Merită să precizăm că este destul de normal să plasezi link-uri care să faciliteze navigarea și lucrul pe pagină. Paginile de destinație lungi exersează plasarea mobilelor bare de navigare, care ajută la trecerea de la un bloc de informații la altul.

Pagina agenției Conversion XL are un meniu care vă permite să vă deplasați prin pagina de destinație fără a derula.

Dacă există multe informații pe pagină, meniul din antet vă va permite să mergeți imediat la secțiunea necesară. Este mai confortabil derulare infinită secțiuni.

Asa functioneaza pagina Google Aplicație:

Concluzie

Spre deosebire de site, pagina de destinație ar trebui să conducă la o acțiune specifică și să concentreze atenția asupra acesteia. Când adăugați linkuri, șansa de a pierde vizitatori crește.

Pe o resursă obișnuită, navigarea este necesară. De asemenea, merită să ofere vizitatorului o hartă a site-ului, deoarece acesta trebuie să vizualizeze mai multe pagini cu oferte diferite. Dar nu are rost să pui link-uri pe pagina de destinație, pentru că te vei pierde pe singura pagină creată sub sarcina specifica, Nu sunt sigur că se va întâmpla.

Deci datele sunt necruțătoare. O pagină de destinație ar trebui să aibă un singur scop. Nu ar trebui să le oferi vizitatorilor tăi un întreg meniu de motive să te părăsească.

Salutare prieteni, colegi! Ce mai faci? Sper că toată lumea se descurcă grozav :) Astăzi vom face un meniu adaptiv simplu pentru noi pagina de destinație. Oamenii întreabă despre asta din ce în ce mai des, iar eu notez astfel de întrebări și încerc să o fac timp liber scrie articole pe aceste subiecte.

Vă mulțumesc că mi-ați oferit idei noi în acest fel și că m-ați ajutat la dezvoltarea blogului. Apropo, despre ce subiect ai vrea să citești? articolul urmator? Vă rog să scrieți în comentarii, acest lucru este foarte important pentru mine. Acum, să începem...

Cum să faci un meniu responsive pentru un site web

Google a confirmat că de la mijlocul lunii aprilie unul dintre factorii de clasare va fi adaptabilitatea site-ului. dispozitive mobile. În acest sens, toate materialele despre cum să vă faceți aterizarea adaptiv de pagină- mai relevant ca oricând. Astăzi nu voi explica nimic complicat, ci dimpotrivă, vă voi spune cum să faceți un meniu adaptabil foarte simplu, cu un minim de timp.

Practic va fi html + css, dar veți avea nevoie de un script foarte mic pentru a procesa clicul. Asa de…

Meniu orizontal receptiv

Să începem cu html. În primul rând, să conectăm biblioteca jquery. Probabil că îl folosești de mult timp, așa că asigură-te că nu îl conectezi a doua oară:

Acum marcajele. O listă neordonată obișnuită și un mic div care conține o pictogramă de meniu. Va fi vizibil doar la rezoluții scăzute.

Preț de descărcare

Contacte

Recenzii

După cum puteți vedea, nu este complicat, cred că îl puteți îmbunătăți singur după cum este necesar.
Acum să adăugăm stiluri:

#meniu ( fundal: #2ba9c0; lățime: 100%; umplutură: 10px 0; text-align: center; ) #meniu a ( culoare: #fff; text-decor: niciunul; umplutură: 12px 12px; ) #meniu a: hover (border-bottom: 4px solid #fff; background: #078ecb; ) .itemsMenu li (afișare:inline; padding-right: 35px; width:100%; margin: 0 auto; ) .itemsMenu li img( vertical-align : mijloc; margine-dreapta: 10px; .iconMenu (culoare: #fff; cursor: cursor; afișare: niciunul; ) .showitems (afișare:bloc !important; ) Ecran @media și (max-width: 600px) ( # meniu a( padding-bottom: 13px; ) #menu a:hover (border-bottom: none; ) .iconMenu ( display:block; ) .itemsMenu ( display:none; ) .itemsMenu li ( display:block; padding:10px 0 ;))

Acum, când reduceți fereastra browserului, veți vedea următoarea imagine:

Chiar nu mi-ar plăcea să descriu fiecare rând, pentru că blogul nu este despre aspect ca atare. Lasă-mă să încerc să explic.

Mai întâi, setăm proprietatea display:inline la elementele li pentru a le face să apară orizontal unul lângă celălalt. Aș fi putut folosi float:left, dar am decis să o fac așa. Și ascundeți pictograma meniului cu proprietatea display:none. Când rezoluția ecranului este mai mică de 600 de pixeli, eliminați linia din elementele li, ascundeți-le și afișați pictograma. Pe scurt - da.

Acum avem nevoie de un script simplu care să proceseze un clic pe pictograma meniului și să arate elementele acestuia:

$(function() ( $(".iconMenu").click(function() ( if($(".itemsMenu").is(":visible")) ( $(".itemsMenu").removeClass(" showitems"); ) else ( $(".itemsMenu").addClass("showitems"); ) )); ));

Ca aceasta. L-am dus la dosar separatși l-a inclus înainte de eticheta de închidere a corpului.

Asta e tot. În acest fel, puteți crea rapid un meniu adaptiv simplu pentru pagina dvs. de destinație.

Desigur, există dezavantaje. Indentațiile sunt specificate în pixeli, dar puteți seta toate distanțele procent. Pur și simplu nu era nevoie de el. Dacă acesta ar fi un site cu drepturi depline, atunci aș folosi pictograme svg sau font, nu png și aș recalcula indentările ca procent. Și așa, a fost puțin improvizat :) Sper că totul este clar? Pa.

Astăzi vom analiza modul în care puteți utiliza pluginul pentru a crea o pagină de destinație cu derulare pe ecran complet. Adică, pagina dvs. de destinație constă din anumite blocuri, iar aceleași blocuri se vor schimba numai atunci când derulați cu o ușoară întârziere. Companii foarte celebre își creează paginile de destinație în acest stil. Și astăzi veți afla cât de ușor este să creați singur un astfel de design de pagină de destinație.

Articole despre efectele de defilare:

Esența efectului: există o ușoară întârziere înainte de a derula la următorul bloc, apoi pagina trece la următorul bloc. Animația apare și la derularea în direcția opusă. Pare mic.

Încercați să defilați această pagină de destinație până la sfârșit și apoi să utilizați meniul:

Descarca

Procesul de schimbare a blocurilor:

Cum să faci un astfel de design de pagină de destinație?1 Structură HTML

Mai întâi, să creăm un meniu, astfel încât să putem nu numai să derulăm prin blocuri, ci și să folosim meniul general.

Structura meniului este standard:

1 2 3 4 5 6

Blocul 1 Blocul 2 Blocul 3 Blocul 4

Lasă-mă să explic atributele:

data-menuanchor - atributul este necesar pentru a crea un meniu.
href este un atribut de link care merge la ancora corespunzătoare cu același ID.

Acum să creăm structura tuturor blocurilor:

1 2 3 4 5 6 7 8 9 10 11 12 13 14

Există un bloc general cu identificatorul „fullpage” care conține blocuri cu conținut. Există un atribut aici care nu vă este familiar:

data-anchor - acest atribut este pentru funcționarea meniului, pe care îl vom face să funcționeze puțin mai târziu.

2 stiluri CSS

Nu există stiluri speciale aici, așa că aici voi plasa doar stilurile pentru meniu:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

#meniu (înălțime: 60px; stânga: 0; margine: 0; umplutură: 0; poziție: fix; sus: 0; lățime: 100%; z-index: 70; text-align: dreapta; fundal: #fff ; ) #menu li ( background : rgba(255 , 255 , 255 , 0.5 ) ; border-radius : 4px ; color : #000 ; display : inline-block; margin : 10px ; ) /*Stil de legătură când blocul corespunzător este activ* / # meniu li a , #menu li.activ a ( display : bloc ; padding : 9px 18px ; text-decoration : none ; color : #ccc ; ) /*Stil de articol listă când blocul corespunzător este activ*/ #menu li .activ ( fundal : rgba(0 , 0 , 0 , 0.5 ) ; culoare : #fff ;

Tot ce rămâne este să conectați scriptul și să scrieți un mic cod JS.

3 JS parte

Biblioteci necesare:

jQuery.min.js

Să le conectăm:

1 2

Cum se creează un link în meniul de aterizare? Da, foarte simplu! Doar copiați o parte din cod (câteva rânduri) și lipiți-o în locul potrivit. Acum să ne uităm la toate acestea. Dar să explicăm mai întâi. Inițial, se presupune că pagina de destinație nu duce nicăieri (adică spre alte pagini), este un site de o pagină. Prin urmare, toate legăturile din teorie ar trebui să conducă doar la secțiuni ale LP() în sine. Uneori este necesar să puneți un link către o altă pagină, de exemplu, către politica de confidențialitate. Am descris deja toate aceste detalii în articolul „”. Să luăm în considerare ambele opțiuni pentru adăugarea de hyperlinkuri la o pagină de o singură pagină.

Ca exemplu, vom folosi resursa noastră „”. Urmați linkul către pagină și apăsați combinația de taste Ctrl + U (nu este nevoie să comutați tastatura în limba engleză). Se va deschide codul html al paginii.

Codul HTML al paginii de destinație

Hyperlinkurile de pe site-uri web sunt incluse în etichete HTML speciale. Etichetă are un atribut href = urmat de o adresă legală, un link către o pagină (alta) sau o ancoră către o parte a documentului cu semnul # și un titlu, ceva de genul acesta Primă

Cod meniu

Acum trebuie să redirecționați către partea dorită a aterizării, pentru aceasta utilizați identificatorul id = „numele care a fost folosit în meniu cu semnul #”, în cazul nostru „ecran”, vezi imaginea

ID din meniu

Acum să creăm un link suplimentar către subsol (subsol). În acest scop într-un fel editor html, de exemplu NotePad++, pur și simplu copiați unul dintre linkurile de meniu existente și lipiți mai jos după cost. Apoi, după pictograma #, înlocuiți-o cu futer și cuvântul după pasăre >Footer. Asta ar trebui să obții.

adăugat link nouîn meniu

Începeți-vă afacerea pe Internet - deschideți internet afiliat magazin. În articolul „”, dat instrucțiuni pas cu pas la lansare, fara investitie. Și abonându-vă, veți primi un curs întreg pe această temă și absolut gratuit. Vezi și „”, articolul oferă cazuri reale și principii pentru a aduce o resursă în rezultatele căutării de TOP.

Meniu înainte de adăugarea linkului

Meniu după adăugarea codului

Apoi, trebuie să puneți id-ul la locul potrivit. Pentru a face acest lucru, mergeți în partea de jos a documentului și căutați un div cu subsolul numelui, am greșit în mod deliberat în noul nume de meniu și am pus subsol, deoarece id-ul trebuie să fie unic. Acesta este rezultatul, vezi captura de ecran.

Setarea unui identificator din meniu Înlocuirea unui link către o altă pagină

Cu ajutorul editorului nostru minune și șabloane cool, Puteți edita cu ușurință toate textele, secțiunile și puteți crea o pagină de destinație de vânzare.