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

Recent, unul dintre cititorii noștri ne-a întrebat cum să adăugăm un efect de paralax la orice temă WordPress? Efectul Parallax este o tendință de design web în care o imagine de fundal derulează mai lent decât conținutul prim plan. În acest articol, vă vom arăta cum puteți adăuga cu ușurință un efect de paralax la orice temă WordPress.


Adăugarea efectului de paralax la orice temă WordPress

Ce este un efect Parallax?

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

Efectul Parallax poate fi utilizat pe pagini de destinație, conținut de formă lungă, pagini de vânzări sau pe pagina principală a unui site web de afaceri. Este o modalitate excelentă de a evidenția diferite secțiuni pe o pagină lungă.

Multe teme premium WordPress vin cu efect de paralax încorporat pe pagina lor de pornire. De asemenea, puteți utiliza efectul de paralax în majoritatea pluginurilor pentru constructorul de pagini WordPress.

Cu toate acestea, nu toate temele au un efect de paralax încorporat și este posibil să nu doriți să utilizați un constructor de pagini pentru a crea machete de pagini personalizate doar pentru un efect de paralax.

Să aruncăm o privire cum să adăugați cu ușurință efectul de fundal paralax la orice temă WordPress.

Metoda 1: Adăugați efectul Parallax la orice temă WordPress folosind pluginul

Această metodă nu necesită să adăugați niciun cod la tema dvs. WordPress. Este mai ușor și recomandat pentru majoritatea utilizatorilor.

Primul lucru pe care trebuie să îl faceți este 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, trebuie să editați pagina sau postarea unde doriți să adăugați efectul paralax. Veți observa noul buton „Advanced WordPress Backgrounds” din editorul vizual.

Buton WordPress avansat de fundal

Dacă faceți clic pe aceasta, va apărea o fereastră în care puteți modifica diferite setări pentru fundalul pe care doriți să îl adăugați.

În primul rând, trebuie să selectați o imagine ca tip de fundal și apoi să verificați opțiunea „întindere”.

Setări de fundal Parallax

În continuare, trebuie să faceți clic pe butonul „Select Image” pentru a încărca sau selecta o imagine pe care doriți să o utilizați. Asigurați-vă că utilizați o imagine mare, altfel va apărea pixelată.

După aceea, trebuie să activați Parallax alegând un tip de paralax. Există o serie de stiluri disponibile cu care puteți experimenta. Cel mai des utilizat efect de paralax este defilarea.

Faceți clic pe butonul Inserare pentru a continua.

Pluginul va adăuga acum un cod scurt în editorul dvs. de postare WordPress. Va arăta așa:

.

Conținutul dvs. aici

[/ Nk_awb]

Înlocuiți „Conținutul dvs. aici” cu propriul dvs. conținut, apoi salvați pagina.

Acum puteți vizita site-ul dvs. web pentru a-l vedea în acțiune.

Previzualizare efect Parallax

Metoda 2: Adăugați Parallax Effect la orice temă WordPress cu CSS

Această metodă necesită o înțelegere corectă a HTML / CSS, precum și modul în care funcționează temele WordPress.

În primul rând, va trebui să încărcați imaginea pe care doriți să o utilizați pentru efect de paralax în media media WordPress, vizitând Media »Adaugă nou pagină.

După încărcarea imaginii, trebuie să copiați adresa URL a imaginii prin editarea imaginii în biblioteca media WordPress.

Copiați adresa URL a imaginii

În continuare, trebuie să adăugați următorul HTML în pagina sau postarea unde doriți să afișați efectul paralax. Puteți adăuga și acest HTML în tema dvs. WordPress sau în tema copilului.

Conținutul dvs. merge aici…

În continuare, trebuie să adăugați următorul CSS personalizat la tema dvs. WordPress.

.paralax {
fundal imagine: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg");
inaltime: 100%;
fundal-atașament: fix;
fundal-poziție: centru;
fundal-repetare: nu se repetă;
fundal-size: cover;
-Marginea din stânga: -410px;
-Marja dreapta: -410px;
}

.conținut paralax {
lățime: 50%;
marja: 0 auto;
Culoare: #fff;
padding-top: 50px;
}

Nu uitați să înlocuiți adresa URL a imaginii de fundal cu propria imagine de fundal.

Acum puteți salva modificările și vizitați site-ul dvs. web pentru a-l vedea în acțiune.

Efectul Parallax adăugat cu CSS

Notă: Poate trebuie să ajustați CSS pentru a funcționa cu aspectul site-ului.

Sperăm că acest articol te-a ajutat să înveți cum să adaugi cu ușurință efectul de paralax la orice temă WordPress. Poate doriți să vedeți și mega noastră listă cu cele mai căutate sfaturi, trucuri și hack-uri WordPress.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map