Ce este efectul Parallax? De ce și cum să îl folosiți pe site-ul dvs. WordPress

Efectul Parallax este o caracteristică de design extrem de populară, care este frecvent utilizată pe site-urile WordPress. Acest efect special a apărut în lumea jocurilor de ani de zile, dar mai recent a trecut în designul web. Și până în prezent, această tendință majoră nu pare să se ducă nicăieri, dacă se folosește mai mult ca niciodată. Deci, care este efectul de paralax și de ce ar trebui să luați în considerare utilizarea acestuia pe site-ul dvs. WordPress?


În acest articol, vom lua în considerare care este un efect de paralax și beneficiile pe care le poate aduce site-ului și afacerii tale. Vom discuta apoi cum să adăugați rapid și cu ușurință un efect de paralax pe orice site, pagină sau postare WordPress, cu pluginul gratuit Parallax Scroll.

Ce este efectul Parallax?

Douăzeci și șaptesprezece

Efectul Parallax implică o pagină web fundal care se mișcă cu o viteză mai mică decât prim-planul. Acest lucru creează o iluzie de profunzime pentru pagină, oferind conținutului un efect 3D în timp ce spectatorii defilează în jos.

Majoritatea temelor premium WordPress vin acum cu efect de paralax încorporat pe pagina lor de pornire. Chiar și tema gratuită implicită WordPress Twenty Seventeen vine cu o caracteristică paralaxă. Majoritatea constructorilor de pagini includ, de asemenea, un instrument de efect paralax, care vă permite să adăugați efectul la orice pagină sau postare de pe site-ul dvs. web. Și, desigur, există numeroase pluginuri WordPress pe care le puteți instala pentru a adăuga elemente de efect de paralax pe site-ul dvs. web.

Care sunt avantajele utilizării unui efect Parallax?

Există o serie de avantaje pentru utilizarea unui efect de paralax pe site-ul dvs. WordPress. Primul, și cel mai evident, este aspectul vizual al unui efect de paralax. Un efect de paralax este plăcut estetic, oferind site-ului dvs. web un aspect proaspăt, elegant și modern. Acest efect wow poate face conținutul tău cu adevărat pop și creează o experiență interesantă și interesantă în browser.

Un alt motiv esențial pentru utilizarea efectului de paralax pe site-ul dvs. este de a vă ajuta sparge o pagină, în special o pagină de pornire, în bucăți ușor de citit. Utilizați acest efect pentru a sublinia diferitele secțiuni și tipuri de conținut pe care doriți să le prezentați. Acest lucru poate ajuta la promovarea diferitelor aspecte ale site-ului dvs. web, la iluminarea informațiilor importante și la încurajarea utilizatorilor să navigheze pe site-ul dvs. și să acceseze conținut într-un mod pe care îl alegeți.

Efectul Parallax poate fi utilizat pe orice pagină sau postare a unui site web, dar poate fi observat în special pe paginile de pornire, pe paginile de destinație sau pe site-urile cu o singură pagină. O paralaxă vizuală uimitoare creează, iar efectul pozitiv pe care îl are asupra experienței utilizatorului, poate duce la vizitatori să stea mai mult timp pe site-ul dvs. și să contribuie la îmbunătățirea ratelor de conversie a site-ului dvs. în funcție de obiectivele sale.

Parallax pe mobil

Deși parallaxul este excelent pentru a adăuga interes vizual, nu funcționează întotdeauna bine pe dispozitivele mobile. Deoarece telefoanele și tabletele folosesc în mod obișnuit navigația glisantă (în loc de derulare ca desktopurile), efectele de paralax nu pot fi redate corect. Desigur, aceasta va depinde de metoda și animațiile pe care le utilizați pentru propria secțiune de paralax, cu toate acestea, pentru o bună utilizare, poate doriți să luați în considerare dezactivarea paralajei pe dispozitive.

Selectați o temă cu efect Parallax

Total

Pentru cei care începeți un nou proiect, ar trebui să selectați o temă premium care să includă o caracteristică de efect de paralaxă. Și dacă doriți să utilizați un efect de paralax pe o varietate de pagini ale site-ului dvs., nu doar pe pagina principală, atunci poate doriți să luați în considerare o temă polivalentă, care vine cu un constructor avansat de pagini. Teme precum Divi de la Elegant Themes, Parallax by Themify și propria noastră temă Total, toate includ constructorii de pagini care oferă instrumente de paralax.

Adăugați Slide-uri Parallax cu plugin-ul WordPress Slider Revolution

Slider Revolution Parallax

Dacă doriți un glisor prezentat cu efect de paralax, alegerea noastră de top este pluginul Slider Revolution. Acest plugin premium include sute de opțiuni și funcții încorporate pentru fonturi, straturi, efecte glisante, machete și, desigur, paralax.

Activați Slider Revolution Parallax

Mai întâi instalați pluginul, apoi importați un șablon al sliderului sau începeți să vă construiți singur slider-ul de la zero (puteți citi ghidul nostru complet pentru Revoluția Slider-ului pentru mai multe detalii).

Setări paralelice revoluție slider

Apoi, editați diapozitivul Fundal principal pentru a adăuga a Sursă imagine de fundal și selectați Parallax / 3D tab pentru a aloca un nivel de paralax. Apoi, pe măsură ce adăugați straturi, selectați Parallax / 3D opțiune de strat pentru adâncimea paralaxului pentru a adăuga mișcare textului, imaginii, butonului și altor straturi. Este atât de ușor!

După ce ați terminat, salvați glisorul și folosiți codul scurt pentru a-l introduce în orice postare sau pagină. Sau dacă utilizați un constructor de pagini precum Visual Composer, puteți utiliza elementul Slider Revolution pentru constructorul de pagini pentru a selecta și insera rapid cursorul.

Adăugați secțiuni Parallax cu plugin-ul WordPress Parallax Scroll

Defilare Parallax

Dacă aveți deja o temă și nu include o opțiune de efect de paralax încorporat, atunci ar trebui să luați în considerare utilizarea unui plugin WordPress pentru a face treaba. Defilare Parallax este o opțiune gratuită care vă va permite să adăugați o imagine de fundal cu defilare paralaxă la diferite elemente de pe o pagină sau postare a site-ului dvs. web. Adăugați un fundal de defilare la un singur element, un text de antet sau o secțiune completă care conține orice conținut, toate folosind un cod scurt.

Să aruncăm acum o privire asupra modului de instalare și de pornire a utilizării Parallax Scroll …

Instalarea Parallax Scroll

Pentru a instala Parallax Scroll, conectați-vă la tabloul de bord WordPress ca admin și selectați Pluginuri> Adaugă nou din meniu.

Adăugați un nou plugin

Căutare Defilare Parallax, apoi selectați Instalați acum> Activare.

Derulare Parallax Activare

Veți găsi acum o filă Parallax Scroll care a fost adăugată în meniul dvs. WordPress.

Adăugarea unei secțiuni de defilare Parallax

Pentru a începe cu Parallax Scroll, trebuie mai întâi să creezi o nouă secțiune de paralax. Pentru a face acest lucru, selectați Defilare Parallax> Adăugare nouă din meniul WordPress.

Parallax Scroll Adaugă nou

Aici puteți crea acum noua dvs. secțiune de paralax …

Adăugați Parallax nou

Setarea imaginii de fundal Parallax de derulare

În primul rând, trebuie să setați o imagine pentru fundalul paralajei de defilare. Pentru a face acest lucru, faceți clic pe Setați imagine recomandată și adăugați imaginea la secțiunea Imagine recomandată.

Imagine prezentată

Gândiți-vă cu atenție la imaginea pe care o utilizați pentru fiecare secțiune de fundal. Asigurați-vă că sunt relevante pentru site-ul dvs. și sincronizați cu marca dvs. Dacă aveți de gând să afișați un antet sau un conținut suplimentar peste partea de sus a acestei imagini de fundal, luați în considerare utilizarea unei culori de bloc sau a unor modele subtile în locul unei fotografii sau al unui grafic care atrage atenția. Acest lucru vă poate ajuta să vă asigurați că imaginea dvs. funcționează și să vă promoveze conținutul, în loc să vă distrageți atenția.

Dacă optați pentru a utiliza fotografii, imaginile trebuie să fie de înaltă calitate. Imagini frumoase atrăgătoare vă pot ajuta să oferiți site-ului dvs. un aspect profesional și unic. Aceste imagini vizuale vor crea o impresie puternică asupra publicului dvs., ceea ce va determina pe oameni să își amintească și să se întoarcă pe site-ul dvs. Există o gamă largă de site-uri de stocuri din care puteți descărca imagini de cea mai bună calitate. Consultați colecția noastră de site-uri web gratuite și premium de fotografii de stoc, unde veți găsi rapid fotografii uimitoare pentru fundalurile dvs. de paralax.

Crearea unui text antet pe fundalul Parallax

Adăugați antetul

Dacă doriți să creați un text de antet cu un fundal de paralax, trebuie să introduceți un titlu al postării. Acest titlu va apărea ca titlu de antet peste partea de sus a imaginii de fundal paralax alese.

Este posibil să nu doriți un antet în secțiunea de paralax. Dacă acesta este cazul, ar trebui să acordați în continuare fiecărei paralaxe un titlu post, astfel încât fiecare secțiune creată este ușor de identificat. Apoi, va trebui să selectați pentru a ascunde titlul în Opțiuni de defilare Parallax (în continuare în acest articol), astfel încât un antet nu este afișat în partea din față a site-ului dvs..

Afișați orice conținut cu un fundal de defilare Parallax

Poate doriți că secțiunea paralaxă să afișeze alt conținut peste imaginea de fundal. Aceasta ar putea include orice lucru necesar pentru site-ul dvs., de la text și imagini la coduri scurte. Decideți ce doriți să afișați și apoi introduceți acest conținut în căsuța postală.

Personalizarea setărilor de defilare Parallax

După ce sunteți mulțumit de conținut, trebuie să personalizați setările secțiunii de paralax pentru a se potrivi cu pagina dvs..

Opțiuni de defilare Parallax

Derulați în jos spre Opțiuni de defilare Parallax. În stil, puteți modifica înălțimea și dimensiunea paralajei, precum și selectarea lățimii complete pentru a forța tema dvs. să afișeze imaginea de fundal pe toată lățimea ecranului, dacă nu este deja.

De asemenea, puteți modifica poziția orizontală și verticală a antetului pe fundalul paralaxului. Și dacă doriți să ascundeți titlul postării, puteți face acest lucru aici tastând afișare: niciuna; în Stil antet.

Setări Parallax vă va permite să personalizați cum se comportă defilarea paralaxă. Aceasta include modificarea vitezei fundalului paralaxului. Încercați viteze diferite pentru a vedea ce funcționează pentru site-ul și publicul dvs..

Este deasemenea o Setări mobile opțiune, care vă permite să dezactivați imaginea de fundal paralaxă și / sau conținutul pe telefoane mobile, dacă simțiți că secțiunile de paralax nu funcționează bine pe dispozitivele mobile.

După ce ați ajustat setările și ați terminat de creat secțiunea de paralax, faceți clic pe Publicare.

Introducerea secțiunii Parallax într-o postare sau pe o pagină

În continuare, trebuie să introduceți secțiunea de paralax într-o postare sau o pagină de pe site-ul dvs. web. Selectați Parallax Scroll din meniul WordPress.

Shortcode Parallax Scroll

În tabelul prezentat, veți vedea acum un cod scurt pentru secțiunea de paralax pe care tocmai ați creat-o. Copiați codul și apoi deschideți pagina sau postarea corespunzătoare. Lipiți codul în conținutul paginii în poziția corespunzătoare.

Introduceți codul scurt

Previzualizați modificările și dacă sunteți mulțumit de noua dvs. secțiune de paralax, faceți clic pe Publicați. Acum puteți crea secțiuni suplimentare pentru a oferi paginii sau a posta un efect de paralax complet. Și dacă trebuie să efectuați modificări, pur și simplu redeschideți pagina secțiunii de paralaxă și faceți toate modificările necesare.

Gânduri finale

Dacă tema dvs. nu are o funcție de efect de paralax încorporat sau dacă doriți să adăugați un efect la mai mult decât pagina dvs. de pornire, Parallax Scroll vă va permite să creați secțiuni de paralax pentru a le adăuga în paginile sau postările dvs..

După cum ați văzut, adăugarea unui efect de paralax pe site-ul dvs. web poate fi foarte utilă. Nu numai că poate îmbunătăți considerabil vizualurile site-ului dvs. web, ci va ajuta să vă atragă audiența, îi va permite să navigheze cu ușurință site-ul dvs. și să acceseze conținut și să crească timpul petrecut pe site-ul dvs. Această experiență de utilizator îmbunătățită ar trebui să ajute site-ul dvs. să se convertească la obiectivele sale, indiferent dacă vor crește vizitatori înapoi, colecta oportunități sau vinde produse sau servicii..

Vei adăuga un efect de paralax pe pagina ta de pornire, pe pagina de destinație, pe o postare sau în altă parte? Vă rugăm să vă împărtășiți gândurile în comentariile de mai jos …

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me