Cum să adăugați o animație preloader la WordPress (Pas cu Pas)

Ați observat vreodată acea pictogramă sau animație de rotire care apare în timp ce un site web se încarcă? Aceasta este o animație de preîncărcare și este un instrument util pe care îl puteți utiliza în proiectele dvs. WordPress.

Preloader-ele au un scop real. Pe site-urile cu mult conținut, acestea mențin vizitatorii angajați în timpul acelor secunde cruciale de încărcare, ceea ce poate reduce ratele de respingere.

Și pentru site-urile de afaceri, un preîncărcător personalizat poate adăuga chiar și o notă profesională.

Dacă credeți că acest lucru sună complicat, nu vă faceți griji. Am venit cu 2 metode pentru a adăuga o animație de preloader WordPress, potrivite pentru utilizatori de toate nivelurile de experiență.

De ce să adăugați o animație de preîncărcare în WordPress?

Un preîncărcător sau un încărcător de pagină este o animație pe care o vedeți când așteptați ca o pagină să se încarce. Le spune utilizatorilor că pagina web este încă în curs de pregătire și le cere să aștepte cu răbdare. Odată ce s-a terminat încărcarea, preîncărcătorul dispare, iar vizitatorul poate vedea pagina web în mod normal.

Iată un exemplu al acestui element de design WordPress:

Un scenariu în care ați putea dori să adăugați o animație de încărcare este dacă pagina dvs. web are multe imagini mari sau încorporări video. În acest caz, timpul de încărcare a paginii va fi mai lung decât în mod normal și doriți ca utilizatorii să rămână suficient de mult timp pentru ca pagina să apară complet.

Dacă pagina dvs. nu are multe elemente grele, atunci este mai bine să vă concentrați pe îmbunătățirea vitezei și performanței site-ului dvs. web. De asemenea, ați putea dori să faceți upgrade la un furnizor de hosting WordPress mai bun.

Acestea fiind spuse, să vedem cum puteți adăuga cu ușurință o animație de încărcare a paginii pe site-ul dvs. WordPress. Pur și simplu utilizați linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați:

• Cum să adăugați o animație simplă de încărcare cu WP Smart Preloader
• How to Add a Customizable Loading Animation With Safelayout Cute Preloader
• Frequently Asked Questions About WordPress Preloaders

Cum să adăugați o animație simplă de încărcare cu WP Smart Preloader

O modalitate ușoară de a adăuga o animație de preîncărcare în WordPress este prin utilizarea WP Smart Preloader.

Acest plugin este o alegere excelentă dacă doriți o soluție rapidă și ușoară, fără a vă pierde în prea multe setări.

Acest lucru se datorează faptului că are 6 animații predefinite de preîncărcare WordPress pe care le puteți utiliza și nu trebuie să configurați multe setări pentru a activa animația.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul WP Smart Preloader. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, accesați Setări » WP Smart Preloader și apoi deschideți meniul derulant ‘Smart Preloader’. Acesta afișează toate animațiile diferite pe care le puteți utiliza.

Pluginul va afișa o previzualizare a animației alese, astfel încât să puteți selecta diferite preîncărcătoare pentru a vedea care vă place cel mai mult.

Implicit, animația va apărea pe întregul site WordPress, dar dacă preferați, o puteți folosi doar pe pagina principală. Pur și simplu bifați căsuța „Afișare doar pe pagina principală”.

Dacă doriți să creați propria animație CSS, atunci pur și simplu introduceți codul dvs. în caseta „CSS personalizat”.

O altă opțiune este să creați o animație personalizată HTML5 adăugând cod în caseta „Animație personalizată”.

După ce ați ales o animație, derulați la secțiunea „Durata de afișare a loader-ului”. Aici puteți schimba cât timp rulează preloader-ul. 

Opțiunea implicită este de 1500 milisecunde sau 1,5 secunde. Aceasta ar trebui să funcționeze bine pentru majoritatea site-urilor, dar puteți introduce un alt număr dacă doriți.

Implicit, animația va dura 2500 milisecunde sau 2,5 secunde pentru a dispărea complet. Pentru a schimba acest lucru, pur și simplu tastați un număr mai mare sau mai mic în câmpul ‘Loader to Fade Out’.

Când sunteți mulțumit de modul în care este configurat preloader-ul, pur și simplu faceți clic pe butonul „Salvează modificările” pentru a stoca setările.

Acum puteți vizita blogul dvs. WordPress sau site-ul web pentru a vedea preloader-ul în acțiune.

Cum să adăugați o animație de încărcare personalizabilă cu Safelayout Cute Preloader

Primul plugin facilitează adăugarea unei animații de încărcare în WordPress. Cu toate acestea, dacă doriți mai mult control asupra designului pentru a se potrivi mărcii dvs., atunci puteți verifica Safelayout Cute Preloader.

Pentru a începe, instalează și activează pluginul din zona de administrare WordPress. Pentru mai multe detalii, consultă ghidul nostru despre cum să instalezi un plugin WordPress.

Odată ce pluginul este activ, navigați la Setări » Preloader Safelayout pentru a începe configurarea.

Pasul 1: Activați Preloader-ul și Alegeți o Presetare

Mai întâi, trebuie să activați preloader-ul și să decideți unde va apărea pe site-ul dvs.

Puteți începe în fila „Presetări” pentru a alege un design predefinit. Dacă vă place unul, pur și simplu faceți clic pe butonul „Schimbați setările la acest preloader” de sub șablon.

Apoi, comutați la fila „Setări de afișare”.

Aici, trebuie să bifați căsuța „Enable Safelayout Cute Preloader” pentru a vă asigura că pluginul funcționează.

Apoi, folosiți meniul derulant „Afișați pe” pentru a alege unde să afișați preloader-ul. Pentru acest tutorial, vom alege „Site web complet”.

Pe acest ecran, poți seta și durata animației.

• Timp minim de încărcare: Acesta setează cea mai scurtă perioadă de timp în care preloader-ul va fi vizibil. Este util dacă doriți să vă asigurați că animația dvs. de marcă este întotdeauna văzută cel puțin pentru un moment, chiar dacă pagina dvs. se încarcă instantaneu.
• Timp maxim de încărcare: Acesta setează cea mai lungă perioadă de timp în care preloader-ul va fi vizibil. Acesta acționează ca o plasă de siguranță, ascunzând automat preloader-ul, astfel încât utilizatorii să nu fie blocați să-l privească dacă pagina dvs. întâmpină o eroare de încărcare.

Puteți alege, de asemenea, să afișați un buton de ‘Închidere’ după ce au trecut câteva secunde. După ce ați făcut modificările, faceți clic pe ‘Salvare modificări’.

Pasul 2: Personalizați animația de bază

Acum, puteți proiecta aspectul animației în sine. Aceasta include fundalul, pictograma principală și o bară de progres opțională.

Mai întâi, accesați fila „Fundal”.

Aici poți alege un efect de animație, schimba culoarea de fundal și ajusta opacitatea acestuia.

Dacă nu doriți un efect special de fundal, selectați pur și simplu „Fără fundal”.

Apoi, faceți clic pe fila „Bara de progres”.

O bară de progres este o modalitate excelentă de a arăta vizitatorilor că pagina se încarcă.

Puteți alege o formă și apoi să îi personalizați culoarea, poziția și dimensiunea.

Dacă nu doriți unul, alegeți pur și simplu „Nicio bară de progres”.

După aceea, accesați fila „Iconiță”.

Aceasta este grafica animată principală, ca un cerc care se rotește.

Puteți alege o pictogramă și apoi îi puteți schimba dimensiunea, culoarea și stilul animației. Dacă simțiți că o pictogramă este prea mult cu celelalte setări, puteți selecta „Nicio pictogramă”.

Nu uitați să faceți clic pe butonul „Salvează modificările” după ce ați terminat de personalizat fiecare filă.

Pasul 3: Adăugați marca și textul dvs.

În final, puteți adăuga logo-ul și textul personalizat pentru a face preloader-ul să se potrivească perfect cu marca dvs.

Accesați fila „Imagine de marcă” și bifați caseta „Afișați marca” pentru a adăuga logo-ul dvs.

Apoi, faceți clic pe butonul „Biblioteca media” pentru a încărca imaginea logo-ului dvs.

Puteți apoi ajusta poziția și marginile logo-ului, astfel încât să se potrivească frumos cu celelalte elemente.

Apoi, să ne uităm la fila „Contor”.

Această setare afișează un procent de la 0% la 100% pentru a indica progresul încărcării. O puteți activa și personaliza poziția, culoarea și dimensiunea fontului.

În final, accesați fila „Text”. Implicit, preloader-ul afișează textul „Loading…”, dar îl puteți schimba cu ceva mai creativ.

Pur și simplu bifați căsuța „Afișare text”, scrieți propriul mesaj și personalizați fontul, culoarea și poziția acestuia.

După ce ați terminat, faceți clic pe butonul „Salvare modificări”.

Și gata! Animația preloader ar trebui acum să apară în funcție de configurațiile dvs. Puteți vizualiza site-ul pe mobil, desktop sau tabletă pentru a-l vedea în acțiune.

Iată cum arată al nostru:

Întrebări frecvente despre preloader-ele WordPress

De-a lungul anilor, mulți cititori ne-au întrebat despre utilizarea preîncărcătoarelor. Iată răspunsurile la unele dintre cele mai frecvente întrebări.

Preloader-ele afectează viteza site-ului web?

Un preloader în sine nu face site-ul dvs. mai rapid. Scopul său este de a îmbunătăți experiența utilizatorului prin mascarea procesului de încărcare cu o animație elegantă.

Pentru a îmbunătăți cu adevărat viteza site-ului dvs., ar trebui să vă concentrați pe lucruri precum cache-ul cu WP Rocket, optimizarea imaginilor și utilizarea unui furnizor de găzduire de înaltă performanță.

Sunt preîncărcările rele pentru SEO?

Atunci când este implementată corect, o preîncărcare ușoară nu ar trebui să vă afecteze SEO-ul. Cu toate acestea, o animație prost codificată sau grea ar putea încetini încărcarea inițială a paginii.

Acest lucru vă poate afecta negativ Core Web Vitals, care sunt importante pentru clasamentele în căutare. Cheia este să păstrați lucrurile simple și rapide.

Pot folosi un preloader doar pe anumite pagini?

Da, absolut. Majoritatea plugin-urilor de preloader vă permit să alegeți unde apare animația.

Îl puteți activa pe întregul site, doar pe pagina principală sau chiar pe postări și pagini specifice unde vă așteptați la timpi de încărcare mai mari.

Care este diferența dintre un preloader și o pagină de prezentare?

Un preloader rulează în timp ce conținutul dvs. se încarcă și dispare automat.

O pagină de prezentare (splash page) este un ecran introductiv separat, care necesită ca un utilizator să facă clic pe un link sau un buton pentru a accesa site-ul web principal.

În general, descurajăm utilizarea paginilor de prezentare, deoarece acestea creează un pas suplimentar pentru vizitatori și pot avea un impact negativ asupra ratei de respingere și a SEO-ului.

Mai multe trucuri WordPress pentru a atrage vizitatorii site-ului dvs.

Adăugarea unei animații de preîncărcare este doar una dintre multele modalități de a-ți îmbunătăți site-ul WordPress. Dacă ești în căutarea mai multor idei creative pentru a-ți captiva publicul, te avem acoperit:

• Cum să adăugați un efect de paralaxă oricărei teme WordPress – Creați profunzime și interes vizual cu această tehnică de iluzie de derulare.
• Cum să adăugați fulgi de zăpadă care cad pe blogul dvs. WordPress – Încântați-vă vizitatorii cu o notă de magie de iarnă pe site-ul dvs.
• Cum să adaugi ușor modul întunecat pe site-ul tău WordPress – Oferă o experiență de navigare mai confortabilă cu această funcție populară.
• Modalități de a aduce efecte de Halloween pe site-ul dvs. WordPress – Speriați-vă site-ul cu aceste trucuri distractive și festive de Halloween.
• Cum să adăugați un fundal animat în WordPress – Faceți o declarație îndrăzneață cu fundaluri mobile atrăgătoare.
• Cum să adăugați un videoclip YouTube ca fundal pe tot ecranul în WordPress – Creați o primă impresie puternică cu fundaluri video dinamice.
• Cum să adăugați scroll infinit pe site-ul dvs. WordPress (Ghid pas cu pas) – Mențineți vizitatorii implicați prin încărcarea continuă a mai mult conținut pe măsură ce derulează.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați cu ușurință o animație de preîncărcare pe site-ul dvs. WordPress. De asemenea, ați putea dori să consultați selecțiile noastre de experți ale celor mai bune constructori de pagini drag-and-drop în WordPress și ghidul nostru complet despre cum să editați un site web WordPress.

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.