Cum să adăugați un efect parallax la orice temă WordPress

Efectul parallax este o tendință de design web în care o imagine de fundal se derulează mai lent decât conținutul din prim-plan. Acest lucru creează iluzia de profunzime și mișcare, creând o experiență de utilizare mai interactivă pe site-ul dvs. web.

În opinia noastră, utilizarea unui efect de paralaxă este o modalitate excelentă de a atrage atenția vizitatorilor. Atrage oamenii și îi încurajează să rămână mai mult timp, ceea ce poate crește implicarea. Am constatat că nu numai că oferă site-ului dvs. un aspect elegant și profesional, dar poate duce și la conversii mai mari.

În acest articol, vă vom arăta cum să adăugați cu ușurință un efect parallax oricărei teme WordPress. Vom explora diverse metode, inclusiv utilizarea de pluginuri și cod personalizat, pentru a vă oferi opțiuni flexibile.

Ce este un efect parallax?

Efectul parallax este o tehnică modernă de design web în care fundalul se derulează mai lent decât conținutul din prim-plan. Acest efect adaugă profunzime imaginilor de fundal și le face să pară mai interactive.

Efectul de paralaxă poate fi utilizat pe pagini de destinație, conținut de lungă formă, pagini de vânzări sau pagina de pornire a unui site web de afaceri.

Poate evidenția diferite secțiuni pe o pagină lungă, îmbunătăți aspectul vizual general al site-ului, crește implicarea utilizatorilor și poate fi un instrument uimitor pentru a transmite un mesaj sau a spune o poveste pe blogul tău.

Multe teme WordPress premium vin cu un efect parallax încorporat pe pagina lor de pornire. Puteți utiliza acest efect și în majoritatea pluginurilor de creare de pagini WordPress.

Cu toate acestea, nu toate temele au această funcționalitate și s-ar putea să nu doriți să utilizați un page builder pentru a crea layout-uri de pagină personalizate doar pentru un efect parallax.

Acestea fiind spuse, să vedem cum să adăugăm cu ușurință un efect de fundal parallax oricărei teme WordPress. Vom acoperi câteva metode diferite și puteți folosi linkurile rapide de mai jos pentru a sări la cea pe care doriți să o utilizați:

• Metoda 1: Adăugați efect parallax la tema WordPress folosind un plugin
• Metoda 2: Adăugați efect parallax la tema WordPress cu CSS
• Bonus: Adăugați un videoclip YouTube ca fundal pe tot ecranul în WordPress

Metoda 1: Adăugați efect parallax la tema WordPress folosind un plugin

Această metodă nu necesită adăugarea niciunui cod la tema dvs. WordPress. Este ușoară și recomandată pentru majoritatea utilizatorilor.

Mai întâi, trebuie să instalați și să activați pluginul Advanced WordPress Backgrounds. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, vizitați pagina Setări » AWB din tabloul de bord WordPress. Aici, puteți bifa casetele pentru browserele sau dispozitivele pe care nu doriți să afișați efectul parallax.

De exemplu, dacă nu doriți să afișați efectul parallax utilizatorilor pe dispozitive mobile, atunci puteți bifa acea casetă.

După aceea, faceți clic pe butonul „Salvează modificările” pentru a salva setările.

Apoi, deschideți o pagină sau o postare la alegere în editorul de blocuri Gutenberg.

Odată ce sunteți acolo, faceți clic pe butonul de adăugare bloc „+” din colțul din stânga sus al ecranului pentru a deschide meniul de blocuri.

De aici, trebuie să găsiți și să adăugați blocul Fundal (AWB) la postare.

Acum deschideți panoul de blocuri din partea dreaptă a ecranului și comutați la fila „Imagine” dacă doriți să adăugați o imagine ca fundal parallax.

După aceea, faceți clic pe butonul „Selectați imaginea” pentru a deschide biblioteca media. Puteți, de asemenea, să faceți clic pe butonul „Utilizați imaginea de prezentare” pentru a adăuga automat imaginea de prezentare ca fundal.

Puteți chiar adăuga o culoare de fundal sau un videoclip pentru efect, comutând la acele file.

După adăugarea unei imagini, puteți ajusta punctul focal din panoul blocului și puteți configura dimensiunea fundalului. Cu toate acestea, recomandăm lăsarea dimensiunii fundalului ca „Acoperire”.

Apoi, puteți folosi glisorul pentru a schimba opacitatea imaginii.

După ce faceți acest lucru, derulați în jos la fila „Parallax” și extindeți-o.

De aici, puteți alege tipul de paralax din meniul derulant. Odată ce ați ales o opțiune, modificările vor fi aplicate automat în editorul de blocuri, unde le puteți testa.

În exemplul nostru, folosim „Opacitate + Derulare”.

După ce ați adăugat efectul, faceți clic pe butonul „+” din blocul AWB pentru a deschide meniul blocului.

Acum puteți adăuga un paragraf, o imagine, un videoclip, o citație sau orice alt bloc doriți. Acest bloc va fi apoi afișat cu efectul parallax.

În final, faceți clic pe butonul „Update” sau „Publish” din partea de sus pentru a salva setările.

Acum, puteți vizita site-ul dvs. WordPress pentru a vedea efectul parallax în acțiune.

Metoda 2: Adăugați efect parallax la tema WordPress cu CSS

Dacă doriți să utilizați o singură imagine ca fundal parallax pe întregul site web, atunci această metodă este pentru dvs.

Mai întâi, va trebui să încărcați imaginea pe care doriți să o utilizați în biblioteca media WordPress, vizitând pagina Media » Adăugare fișier media nou.

După ce ați făcut acest lucru, trebuie să copiați URL-ul imaginii făcând clic pe ea și deschizând fereastra „Detalii atașament”.

Odată ce ați făcut acest lucru, trebuie să adăugați cod CSS personalizat în fișierele temei dvs. Cu toate acestea, cea mai mică eroare la tastarea codului poate bloca site-ul dvs. și îl poate face inaccesibil.

Acesta este motivul pentru care recomandăm utilizarea WPCode. Este cel mai bun plugin pentru fragmente de cod WordPress de pe piață, care face extrem de sigur și ușor să adăugați cod personalizat, inclusiv CSS.

Mai întâi, trebuie să instalați și să activați pluginul WPCode. Pentru instrucțiuni detaliate, consultați ghidul nostru pentru începători despre cum să instalați un plugin WordPress.

După activare, vizitați pagina Fragmente de cod » + Adăugați fragment din tabloul de bord WordPress și faceți clic pe butonul „Utilizați fragmentul” sub opțiunea „Adăugați propriul cod personalizat (Fragment nou)”.

Acest lucru vă va duce la pagina „Creare fragment personalizat”, unde puteți începe prin a adăuga un titlu pentru codul dvs. personalizat.

După aceea, alegeți opțiunea „Fragment CSS” din meniul derulant Tip de cod din dreapta.

În continuare, adăugați următorul cod CSS personalizat în caseta „Previzualizare cod”:

.parallax {  
background-image: url("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
 
.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
} 

Odată ce ați făcut acest lucru, asigurați-vă că înlocuiți URL-ul exemplu din linia background-image: url cu URL-ul imaginii dvs.

Această imagine va fi folosită ca fundal al efectului parallax pe întregul site web.

Apoi, derulați în jos la secțiunea „Inserare” și alegeți modul „Inserare automată”.

Fragmentul va fi executat automat pe site-ul dvs. web odată ce adăugați cod HTML.

În cele din urmă, derulați înapoi în partea de sus a paginii și comutați comutatorul „Inactiv” la „Activ”.

Apoi, faceți clic pe butonul „Salvare fragment” pentru a vă stoca setările.

Acum este momentul să deschideți postarea sau pagina WordPress unde doriți să adăugați efectul parallax.

Odată ce sunteți acolo, faceți clic pe pictograma cu trei puncte din colțul din dreapta sus al ecranului pentru a deschide un meniu. Apoi, selectați modul „Editor de cod”.

Acum, trebuie să adăugați următorul cod HTML în editorul de cod, cu conținutul pentru efectul parallax între el:

<div class="parallax">
<div class="parallax-content">
 
Your content goes here...
 
</div>
</div>

Puteți apoi să reveniți cu ușurință la editorul vizual de blocuri făcând clic pe linkul „Exit Code Editor” din partea de sus.

După aceea, adăugați restul conținutului pentru pagină sau postare în editorul vizual de blocuri.

În cele din urmă, faceți clic pe butonul „Actualizare” sau „Publicare” pentru a salva setările.

Acum, vizitați pur și simplu blogul dvs. WordPress pentru a vedea efectul parallax în acțiune.

Bonus: Adăugați un videoclip YouTube ca fundal pe tot ecranul în WordPress

Pe lângă efectul parallax, puteți adăuga și un videoclip YouTube ca fundal fullscreen în WordPress.

Acest lucru poate oferi o experiență captivantă pentru utilizatorii dvs. și poate spori atractivitatea vizuală a site-ului dvs. WordPress. Un video YouTube pe tot ecranul ca fundal poate evoca emoții și poate crea o conexiune mai profundă cu publicul dvs.

De exemplu, dacă organizezi un concurs pe site-ul tău, atunci poți folosi un videoclip YouTube de fundal pentru a face pagina mai interesantă și pentru a încuraja utilizatorii să se înscrie la concurs.

Similar, dacă aveți o organizație caritabilă non-profit, atunci puteți folosi fundaluri video pentru a afișa impactul organizației dvs., misiunea și poveștile persoanelor sau comunităților pe care le serviți. Puteți chiar să prezentați povești de succes în fundalul video pe tot ecranul.

Pentru mai multe detalii, puteți consulta tutorialul nostru despre cum să adăugați un videoclip YouTube ca fundal pe tot ecranul în WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați cu ușurință un efect parallax la orice temă WordPress. De asemenea, ați putea dori să consultați ghidul nostru pentru începători despre cum să adăugați scroll infinit pe site-ul dvs. WordPress și lista noastră cu cele mai bune alternative la Canva pentru grafică web.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.