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.
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.
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".
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.
Metoda 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.
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.
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.
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.
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.
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.
- Cum se remediază eroarea „Nu se poate scrie pe disc” pe WordPress
- Cum să devii un blogger de succes și să câștigi bani cu WordPress
- Cum de a publica articole prin e-mail pe WordPress
- Cum să devii un blogger de succes și să câștigi bani cu WordPress
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.
...