Treci la conținutul principal

Cum de a adăuga un efect de paralaxă pe orice temă WordPress

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

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, nu toate temele WordPress au un efect de paralax încorporat și este posibil să nu doriți să utilizați un constructor vizual de pagini doar pentru 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".

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

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.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

.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 utiliza alte plugin-uri WordPress pentru a da un aspect modern și a optimiza aderența blogului sau a site-ului dvs. web.

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 plugin WordPress care vă permite să vă prezentați profilul LinkedIn pe blog. De asemenea, funcționează pentru bloguri cu mai mulți autori. Acesta adaugă butoane Follow and Share la publicațiile, paginile sau widget-urile 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 plugin WordPress unic, care vă permite să încărcați videoclipuri YouTube de pe site-ul dvs. web și să încorporați cu ușurință videoclipuri, liste de redare și canale YouTube pe site-ul dvs. web.

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.

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

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.

... 

Acest articol conține comentarii 0

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate *

Acest site folosește Akismet pentru a reduce nedorite. Aflați mai multe despre modul în care sunt utilizate datele dvs. de comentarii.

Inapoi in top
6 acțiuni
acțiune3
tweet
Registru3