WordPress Parallax: Ghidul dvs. complet de acces

Chiar și cel mai la modă site web poate deveni învechit după un timp. Apar noi tendințe, iar anumite stiluri de design pot deveni rapid învechite. Pentru a contracara acest lucru, trebuie să oferiți site-ului dvs. niște impulsuri vizuale din când în când. Nu trebuie să faceți o reproiectare completă, doar să modificați unele lucruri ici și colo, pentru a da senzația unui aspect proaspăt.

Utilizarea unui efect de paralaxă poate face exact asta. De exemplu, poate face să apară elementele dvs. grafice, în timp ce vă descompune materialul cu text.

Tutorialul de astăzi va explica efectele de paralaxă, avantajele și dezavantajele efectelor de paralaxă, de ce ar trebui să le utilizați, ce teme WordPress sunt o alegere bună pentru un efect de paralaxă și câteva dintre cele mai bune practici din care puteți învăța.

Deci, să începem cu începutul:

Ce sunt efectele paralaxei?

Un efect de paralaxă înseamnă că imaginea de fundal de pe un site web este fie înghețată pe loc, fie derulează mai lent decât restul conținutului paginii. Acest lucru creează iluzia că conținutul se mișcă în fața imaginii de fundal, dând site-ului tău profunzime.

Efectul de defilare cu paralaxă a făcut din valuri o tendință nouă și interesantă de design web atunci când a apărut pentru prima dată online în 2011. Desigur, de atunci, defilarea paralaxă s-a consolidat ca un activ fundamental de design care este aici pentru a rămâne.

Efectul de paralaxă este un element de design cunoscut frecvent pe site-urile WordPress. Pe scurt, este un efect de defilare în care imaginile de fundal se mișcă mai încet decât elementele din prim-plan, creând iluzia de trei dimensiuni într-un spațiu bidimensional.

A fost popular în industria jocurilor de noroc de ani de zile, dar abia recent și-a făcut loc în design web. Cu ajutorul unui efect de defilare paralaxă, acum puteți crea un design frumos al paginii cu elemente atrăgătoare care fac vizitarea paginilor dvs. și mai atrăgătoare.

Puteți utiliza efectul de paralaxă pe paginile de destinație ale unui site web de afaceri, conținutul de formă lungă, paginile de vânzări sau pagina de pornire. Este o modalitate excelentă de a atrage atenția asupra diferitelor secțiuni ale unei pagini lungi.

Multe teme premium WordPress includ un efect de paralaxă pe pagina de pornire. În plus, majoritatea pluginurilor pentru generarea de pagini WordPress acceptă și efectul de paralaxă. Cu toate acestea, nu toate temele includ un efect de paralaxă în mod implicit și este posibil să nu doriți să utilizați un generator de pagini pentru a crea machete de pagină personalizate doar pentru un efect de paralaxă. Dar vom intra în asta mai târziu.

De ce să folosiți Parallax pe site-ul dvs. WordPress?

Să începem cu unul dintre cele mai valoroase beneficii ale derulării paralaxe: este o abordare atrăgătoare pentru a afișa anumite secțiuni ale site-ului web.

Acum să ne uităm la câteva site-uri web care demonstrează ce altceva poate face această nouă metodă fantastică, astfel încât să puteți concluziona singur.

1. Prezentare îndrăzneață a produsului

Prezentând produsul dvs. cu efect de paralaxă, afișați pe deplin potențialul produsului respectiv. În plus, tehnica paralaxei permite utilizatorilor să defileze prin produs și să-l vadă din toate unghiurile, oferindu-le o mai bună înțelegere și făcându-l mai ușor de vizualizat.

Luați, de exemplu, Bagagia .

Acest site web este un exemplu excelent de a le permite vizitatorilor să experimenteze produsul dvs. într-un mod complet nou. Și este un exemplu excelent de efect de paralaxă. În loc de imagini statice, obțineți o prezentare 3D controlată de comportamentul dvs. de defilare. Designul este simplu, cu o mulțime de spații albe și un accent pe produsul unic: o sticlă de apă caldă acoperită cu piele și o geantă în același timp.

2. Crește implicarea site-ului

Utilizatorul web modern caută să se distreze și să se implice. Prin urmare, suntem mai mult decât fericiți să interacționăm cu un site web dacă suntem invitați. Puteți face multe lucruri interesante cu derularea paralaxă pentru a vă încuraja vizitatorii să interacționeze cu site-ul dvs.

Derularea Parallax creează un mediu fantastic, captivant și captivant pentru ca o poveste să se desfășoare. Parallax vă permite să dezvăluiți în mod dinamic detaliile site-ului dvs. pe măsură ce utilizatorul progresează prin narațiunea pe care ați creat-o pentru el.

3. Îmbunătățește UX

Conform cercetărilor, unui utilizator îi iau doar 50 de milisecunde pentru a-și forma o opinie despre un site web și pentru a decide dacă îi place sau nu (Lindgaard, Fernandes, Dudek și Brown, 2006).

Făcând imaginile de fundal să se miște mai încet decât imaginile din prim-plan, această tehnică de defilare creează iluzia de profunzime pe o pagină web. Utilizatorii defilării paralaxe susțin că îmbunătățește experiența utilizatorului și îi implică pe utilizatori cu un site web. Cercetătorii atribuie această experiență plăcută a utilizatorului îndeplinirii următoarelor variabile: utilizare, satisfacție, plăcere, distracție și atracție vizuală.

4. Scade ratele de respingere

Ratele de respingere reprezintă procentul de vizitatori ai site-ului care fac clic pe butonul „înapoi” sau închid fila înainte de a explora alte pagini de pe site. Ratele de respingere pot avea un impact semnificativ asupra clasamentului dvs. SEO. Angajarea efectelor de paralaxă poate ajuta la reducerea acestei rate.

Dacă un site web folosește animația paralaxă pentru a spune o poveste în mod eficient, puteți paria că clienții sau cititorii vor rămâne pe o pagină mai mult timp. De exemplu, dacă te uiți la pagina portofoliului lui Alex Dram aici , vei observa mai multe forme care interacționează în timpul animației de defilare cu paralax.

Întregul aspect al site-ului spune o poveste despre experiențele vizuale pe care Alex le poate proiecta clienților. Este o modalitate de a atrage atenția spectatorului și de a intra în legătură cu el fără a scrie pur și simplu despre ceea ce faci în text.

5. Adaugă un declanșator de acțiune

Adăugarea unui declanșator de acțiune pentru utilizatorii dvs. poate fi cel mai important aspect al derulării paralaxe. Suntem mai atenți și dispuși să continuăm să interacționăm cu site-ul dvs. deoarece primim feedback instantaneu. Se întâmplă ceva în timp ce derulăm. Continuăm să derulăm și se întâmplă altceva. Această promisiune este foarte motivantă și îi face pe oameni să vrea să intre pe site-ul dvs. și să vă asculte povestea.

Derularea Parallax poate fi o modalitate excelentă de a atrage vizitatorii să vă viziteze site-ul.

Și acum că am acoperit beneficiile evidente ale încorporării unui efect de paralaxă în site-ul dvs. WordPress, este timpul să vă aprofundați în diferitele tipuri de teme WordPress care sunt gata de paralaxă pentru site-ul dvs.!

Teme WordPress Parallax de top din care puteți alege

Pentru a entuziasma vizitatorii și a converti clienții potențiali în clienți, cele mai bune site-uri web se bazează pe conținut captivant și design impresionant și pe o experiență de utilizator fluidă. Acesta este motivul pentru care ar trebui să vă gândiți să utilizați o temă paralaxă pentru site-ul dvs. - există ceva deosebit de impresionant despre navigarea pe un site cu derulare paralaxă.

Iată o listă cu câteva teme WordPress care vin cu efect de paralaxă:

ColibriWP

Știați că Colibri este una dintre cele mai populare teme WordPress de pe WordPress.org, cu peste 50.000 de instalări active? Creatorii săi sunt, de asemenea, responsabili pentru temele populare Mesmerize și One Page Express .

Această temă este multifuncțională, frumoasă și complet personalizabilă pentru nevoile dvs. Poți folosi Colibri pentru a crea secțiuni captivante de eroi care lasă o impresie de durată asupra vizitatorilor tăi. Puteți combina diferite tipuri de media, cum ar fi imagini, videoclipuri, colaje și casete lightbox.

Colibri oferă numeroase opțiuni de personalizare și este pe deplin receptiv la lucrul pe toate dispozitivele. În plus, este o temă gata de traducere care funcționează impecabil. Această temă include, de asemenea, trei șabloane de site web preproiectate, fundaluri de imagine și gradient, trei opțiuni de aspect pentru antet, două aspecte de meniu de navigare și alte funcții valoroase.

Divi

Divi se întâmplă multe sub perdele și oferă o multitudine de opțiuni pentru a crea un site web elegant, receptiv, axat pe imagine. De exemplu, Divi Builder, inclus cu tema, este o modalitate fantastică de a proiecta machete folosind o interfață de tip drag-and-drop. În plus, configurarea părților site-ului dvs. este o ușoară, datorită meniului de opțiuni de temă ușor de utilizat.

Există, de asemenea, multe demonstrații, inclusiv design interior, cafenele și restaurante, fotografie și multe altele! De asemenea, puteți alege dintre una dintre frumoasele demonstrații de paralaxă și vă puteți îmbunătăți și mai mult efectul de paralaxă adăugând un fundal video.

Este inutil să ai efecte frumoase de paralaxă dacă nu ai o modalitate de a face restul site-ului tău uimitor. Divi (recenzie) este o temă multifuncțională grozavă, puternică și ușor de personalizat, cu mai multe caracteristici specifice paralaxei.

O pagina

OnePage este o temă WordPress de o pagină, concepută pentru liber profesioniști și profesioniști creativi. Este un design foarte adaptabil și receptiv, astfel încât site-ul dvs. va arăta fantastic pe orice dispozitiv.

Puteți folosi OnePage pentru a adăuga mai multe imagini de fundal de paralaxă pe site-ul dvs. pentru o adâncime sporită, precum și glisoare grozave cu navigare cu săgeți pentru a facilita navigarea spectatorilor prin conținutul dvs.

OnePage are, de asemenea, animație CSS3, tabele de prețuri, mărturii, posibilități infinite de culoare, pictograme de font, o parte din portofoliu, meniu plutitor, contor animat și secțiune de echipă, pentru a numi câteva caracteristici.

Paralaxă

Ironic, nu? Designul Parallax de la Themify este unul dintre cele mai populare. Combină două tendințe de design, combinând un aspect pe o singură pagină cu efecte de paralaxă și este proiectat pentru a crea o experiență excelentă pentru utilizatorul front-end.

Themify Builder include peste 60 de layout-uri prefabricate complet personalizabile, cu glisoare, defilare paralaxă și alte animații. Parallax folosește funcționalitatea de tip de postare personalizat WordPress pentru a vă permite să personalizați fiecare componentă a site-ului dvs., inclusiv o secțiune pentru portofoliul, echipa, produsele și serviciile dvs., printre altele.

De asemenea, puteți alege dintre 11 machete diferite, puteți adăuga o imagine de antet personalizată sau un glisor și puteți oferi fiecărei pagini de pe site-ul dvs. meniul său. În acest fel, puteți oferi fiecărei pagini un aspect distinct sau le puteți face pe toate să aibă același stil și același simț.

Parallax este perfect pentru profesioniștii creativi, cum ar fi designeri web, instructori de muzică și analiști, datorită generatorului de pagini încorporat, machetelor pre-proiectate și versatilității.

eCommerce

eCommerce este o temă WordPress concepută de MyThemeShop. Comerțul electronic are un timp de încărcare rapid, un design prietenos cu SEO și alte caracteristici grozave ca și celelalte teme ale acestora.

Această temă este creată pentru a funcționa cu faimosul plugin WooCommerce, ceea ce face simplă configurarea unui magazin online . În plus, puteți folosi această temă pentru a vă vinde produsele sau pentru a vă afilia produsele și pentru a câștiga bani rapid.

Un glisor de paralaxă, șase modele de antet, patru opțiuni de paginare, categorii infinite pe pagina de pornire, un proces simplu de plată, o secțiune de subsol cu ​​trei, patru sau cinci coloane, un banner cu panglică pentru produse noi și o bară de navigare plutitoare fixă ​​sunt câteva a caracteristicilor sale primare.

Stockholm

La fel ca și orașul însuși, Stockholm are un aspect clasic, atemporal. Peste 140 de mostre gata de utilizare sunt incluse în temă, de la site-uri web de afaceri de arhitectură la portofolii de fotografie și tot ce se află între ele. Fiecare design folosește excelent spațiul negativ, rezultând un aspect de eleganță fără efort.

Stockholm are multe de oferit în personalizare și totul este aranjat frumos în fila Select Options. Puteți schimba totul despre site-ul dvs. aici, inclusiv sigla, antetul și subsolul, precum și bara laterală, 404 pagini și paralaxa.

Ronneby

Ronneby este o temă WordPress multifuncțională pentru companii, bloggeri, profesioniști în creație și liber profesioniști, cu peste 40 de opțiuni demonstrative gata de utilizat.

Tema este bine codificată, prietenoasă cu SEO și pe deplin receptivă, astfel încât să vă puteți concentra mai degrabă pe design decât pe performanța site-ului dvs.

În cele din urmă, tema are un panou de administrare robust și un număr mare de coduri scurte care simplifică personalizarea și adăugarea de funcționalități site-ului dvs. atunci când vine vorba de design.

Neve

Neve este o temă WordPress cu o singură pagină, cu un efect de paralaxă fantastic. Împreună cu designul complet receptiv al site-ului, aceste funcții vă pot ajuta să construiți un site de succes care arată uimitor pe orice dispozitiv.

Panoul cuprinzător de setări ale temei inclus cu Neve vă va ajuta să vă configurați rapid site-ul și să faceți modificări după cum este necesar.

Neve este o temă fantastică pentru orice site de afaceri sau portofoliu. Aceste exemple includ servicii, echipă, informații de contact, mărturii, informații despre prețuri, un blog și un magazin pentru a vă vinde produsele sau serviciile.

Și probabil crezi că, dacă este atât de fantastic, aproape prea frumos pentru a fi adevărat, trebuie să existe unele dezavantaje. Dreapta? Si ai dreptate. Ca orice altceva în lumea tehnologiei, efectul de paralaxă are câteva dezavantaje și beneficii. Să vedem care sunt acestea.

WordPress Parallax: argumente pro și contra

Dacă decideți să utilizați efectul de paralaxă pe site-ul dvs., în ciuda dezavantajelor acestuia, țineți cont de următoarele:

Web Design: de ce să țineți cont atunci când utilizați Parallax

Acum că ați învățat despre atracția designului site-ului web paralax, este timpul să studiați cele mai bune practici. Am ales un titlu mai precaut pentru această secțiune, deoarece un site web paralax nu este pentru toată lumea și ar trebui să fie folosit cu prudență. Iată cele două sfaturi ale noastre:

Ține cont de viteza de încărcare a paginii

Este de la sine înțeles că introducerea de efecte sofisticate în site-ul dvs. web va afecta performanța acestuia. Unul dintre aceste efecte este defilarea paralaxă. Succesul SEO al unui site este afectat de un timp lung de încărcare a paginii. Utilizatorii sunt predispuși să sară de la un site la altul și sunt gata să abandoneze o pagină care durează prea mult să se încarce.

Asigurați-vă că efectele de paralaxă nu degradează prea mult performanța site-ului dvs. Puteți verifica viteza site-ului dvs. și vedeți ce cauzează încetinirea acestuia. Există numeroase instrumente online disponibile pentru a vă ajuta în acest demers. Unul dintre ele este serviciul gratuit Google PageSpeed ​​Insights.

Folosește-l cu moderație

În cel mai bun caz, designul web paralax va atrage atenția cu experiență asupra tuturor zonelor adecvate ale unui site web. Scenariul cel mai rău va distrage atenția de la punctul central, lăsând publicul încurcat. Utilizarea efectelor de paralaxă în locurile potrivite și moderarea va asigura că instanța dvs. este prima.

Când creați un site web paralax, este esențial să luați în considerare accesibilitatea. Dispozitivele mobile, care reprezintă mai mult de jumătate din tot traficul web, sunt incompatibile cu modelele de paralaxă. În plus, versiunile de browser învechite pot fi incompatibile cu designul site-ului web paralax.

Este randul tau

Acest lucru ne duce la sfârșitul ghidului nostru de proiectare a site-ului web paralax. Povestiri online îmbunătățite, mesaje captivante, mai multe interacțiuni cu utilizatorul și timpul mai lung petrecut pe site sunt doar câteva dintre avantajele efectelor de paralaxă.

Cu toate acestea, nu abuzați de designul paralax, deoarece ți-ar putea domina cu ușurință mesajul de bază. Scopul principal al oricărui element de design web este de a îmbunătăți experiența utilizatorului pe site. Ca rezultat, asigurați-vă că designul dvs. realizează acest lucru.

Sperăm că acest articol v-a oferit informațiile pe care le căutați. Mult succes la proiectarea site-ului tău web!