Recent, unul dintre cititorii noștri ne-a întrebat cum să adăugăm efect de paralaxă oricărei teme WordPress?

Efectul Parallax este o tendință populară în zilele noastre pe web, unde o imagine de fundal se derulează mai lent decât conținutul din prim-plan.

În acest tutorial, vă vom arăta cum să adăugați cu ușurință efectul de paralaxă oricărei teme WordPress.

Dar, dacă nu ați instalat niciodată WordPress, descoperiți Cum se instalează un blog WordPress pași 7 et Cum de a găsi, a instala și a activa o temă WordPress pe blog-ul dvs. 

Dar înapoi la motivul pentru care suntem aici.

Cum se adaugă un efect de paralaxă oricărei teme wordpress e1567702269161

Ce este un efect de paralaxă?

Efectul Parallax este o tehnică modernă de proiectare web în care elementul de fundal derulează mai lent decât conținutul din prim-plan. Acest efect adaugă adâncime imaginilor de fundal și le face interactive.

Descoperiți-ne Temele WordPress 25 cu parallax pentru a crea un site web

Efectul Parallax poate fi utilizat pe paginile de destinație, pagini de vânzări sau pagina de pornire 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 au un efect de paralaxă încorporat pe pagina lor de pornire. De asemenea, puteți utiliza efectul de paralaxă cu majoritatea pluginurilor WordPress crearea vizuală a paginilor.

Cu toate acestea, toate Teme WordPress nu oferă un efect de paralaxă încorporat și este posibil să nu doriți să utilizați un generator de pagini vizuale doar pentru un efect de paralaxă.

Să aruncăm o privire la cum să adăugăm cu ușurință efectul de paralaxă oricărei teme WordPress.

Metoda 1: Adăugați efectul de paralaxă la orice temă WordPress folosind un plugin

Această metodă nu necesită adăugarea unui 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 Fundaluri avansate de WordPress. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre instalarea unui plugin WordPress.

După activarea pluginului, trebuie să editați pagina în care doriți să adăugați efectul de paralaxă. Veți observa noul buton "Fundaluri avansate de WordPress»Pe bara de instrumente a editorului vizual.

Adăugați un fundal Wordpress avansat

Dacă faceți clic pe aceasta, va apărea o fereastră pop-up în care puteți modifica diverse setări de fundal pe care doriți să le adăugați.

În primul rând, trebuie să selectați o imagine ca fundal și apoi să bifați opțiunea „ Întinde".

Fundal avansat al ferestrei wordpress

Apoi, trebuie să faceți clic pe buton Selectați Imagine Pentru a descă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 efectul Papalaxă Alegând un tip de efect de paralaxă. Există o serie de stiluri disponibile pe care le puteți experimenta. Cel mai frecvent efect de paralaxă utilizat este derularea.

Faceți clic pe butonul Insera pentru a continua.

Pluginul va adăuga o SHORTCODE dvs. pe Publishing Editor. Va arăta astfel:

[nk_awb awb_type = "image" awb_stretch = "true" awb_image = "22" awb_image_size = "complet" awb_parallax = "defilare" awb_parallax_speed = "0.5" awb_mouse_parallax = "true" awb_m_ X_ "aw" aici [/ nk_awb]

Înlocuiți " acest conținut După propriul conținut, apoi salvați pagina.

Puteți vizita site-ul dvs. web pentru ao vedea în acțiune.

Efect paralela asupra wordpress-uluiMetoda 2: Adăugați efectul "Parallax" la orice temă WordPress cu CSS

Această metodă necesită să aveți cunoștințe despre „HTML / CSS”, precum și modul în care funcționează temele și pluginurile WordPress.

Mai întâi, trebuie să încărcați în biblioteca dvs. media WordPress, imaginea pe care doriți să o utilizați pentru efectul de paralaxă vizitând „ media> Adaugă nou ".

Mergeți mai departe descoperind Cum să organizați mass-media pe blogul dvs. WordPress

După încărcarea imaginii, trebuie să copiați adresa URL a imaginii editând imaginea în biblioteca media WordPress.

Copiați adresa URL a imaginii în wordpress

Apoi, trebuie să adăugați următorul cod HTML în pagina în care doriți să afișați efectul de paralaxă. De asemenea, puteți adăuga acest cod HTML la Tema WordPress sau tema copilului tău.

div class = "parallax"> Conținutul dvs. aici ...

Apoi, trebuie să adăugați următorul cod CSS personalizat la tema dvs. WordPress.

.parallax {background-image: url ("http://example.com/wp-content/uploads/2017/08/my-background-image.jpg"); înălțime: 100%; atașament de fundal: fix; fundal-poziție: centru; background-repeat: nu-repeta; dimensiunea fundalului: capac; margin-left: -410px; marja de-dreapta: -410px; } .parallax-content {width: 50%; margine: 0 auto; Culoare: #fff; padding-top: 50px; }

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

Acum puteți salva modificările și vizita site-ul dvs. web.

Exemplu de efect de paralaxă Wordpress

Aici este ! Acum puteți adăuga efectul de paralaxă pe site-ul dvs. WordPress.

Descoperiți și câteva teme și plugin-uri premium WordPress  

Puteți folosi altele WordPress plugin-uri pentru a oferi un aspect modern și pentru a optimiza gestionarea blogului sau site-ului dvs.

Vă oferim aici câteva plugin-uri WordPress premium care vă vor ajuta să faceți asta.

1. WooCommerce Donation

Acceptați prin această extensie donații pe site-ul dvs. WooCommerce cu sume specificate de clienți. Acest lucru le va permite să ofere cât vor. Fiecare donație poate fi prezentată ca orice produs obișnuit WooCommerce


Plugin pentru donații Woocommerce

Dacă clientul trece de pagina coșului sau merge direct la casă fără a dona, va apărea un link deasupra paginii de casă, astfel încât să poată dona.

Fiecare pas al utilizării donației WooCommerce este explicat într-o documentație cu capturi de ecran. Doar activați pluginul și veți găsi câmpul „Adăugați donație” pe coș.

Descarca | Demo web hosting

2. LinkedIn Mai mult

LinkedIn Plus este un WordPress plug-in care vă permite să vă prezentați profilul LinkedIn pe blogul dvs. Funcționează și pentru bloguri cu mai mulți autori. Acesta adaugă butoane Urmăriți și Partajați postărilor, paginilor sau widget-urilor dvs. WordPress.Linkedin plus pluginul WordPress wordpress

Este o modalitate excelentă de a adăuga toate funcțiile LinkedIn pe blogul dvs. și de a vă valida marca cu consumatorii. Vă oferă posibilitatea de a-și personaliza aspectul, de a configura setările și de a activa alte opțiuni avansate pentru a vă promova profilul către potențiali recrutori sau angajatori. 

Descarca | Demo | web hosting

3. utilizator YouTuber

YouTubeR este un WordPress plug-in platformă unică, care vă permite să încărcați videoclipuri pe YouTube de pe site-ul dvs. și să încorporați cu ușurință videoclipuri YouTube, liste de redare și canale pe site-ul dvs.

Youtuber youtube wordpress plugin

Cu acest plugin, aveți oportunitatea de a crea galerii video excepționale pe site-ul dvs. web.

Celelalte caracteristici ale acestuia sunt: ​​posibilitatea de încărcați cu ușurință videoclipuri pe YouTube de pe site-ul dvs. WordPress, integrare videoclipuri, liste de redare și canale YouTube ușoare pentru site-ul dvs. web, suport pentru Visual Composer, defilare infinită în liste de redare, memorie în cache excelentă, dispunere receptivă, documentație detaliată și multe altele.

Descarca | Demo | web hosting

Resurse recomandate

Aflați despre alte resurse recomandate pentru a vă ajuta să construiți și să gestionați site-ul dvs. web.

Concluzie

Asta e tot! Sperăm că a fost de mare ajutor. Nu ezita sa împărtășiți cu prietenii de pe rețelele de socializare preferate

Cu toate acestea, veți putea, de asemenea, să ne consultați Resurse, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress.

Și dacă aveți sugestii sau observații, lăsați-le în secțiunea noastră comentarii.

...