Adăugați o animație de încărcare pe site-ul dvs. WordPress (10 opțiuni diferite)

Toată lumea se grăbește întotdeauna și un site web care durează mai mult de 2 sau 3 secunde pentru a fi încărcat este perceput ca „mult prea lent”. Din fericire, există o modalitate de a ocoli momentan această panică și de a menține utilizatorii pe un site suficient de mult timp pentru a încărca lucrurile. Vorbesc despre animația de încărcare perfect hipnotică.

În această postare, vom analiza ce anume este o animație de încărcare, care este scopul lor și cum să adăugați una la orice site WordPress - inclusiv site-urile dvs. Divi.

Ce este o animație de încărcare?

O animație de încărcare, numită și pre-încărcător, este o animație atrăgătoare care apare pe un site web suficient de mult timp pentru a fi încărcate toate elementele. Unele animații de încărcare sunt scurte și nu trebuie să păstreze atenția utilizatorului foarte mult timp. Dar, în unele cazuri, dacă site-ul este foarte mare, animația de încărcare trebuie să fie cu adevărat captivantă pentru ca utilizatorul să rămână în jur.

Dacă ați fost în jur suficient de mult, știți că încărcarea animațiilor a apărut din anii '90. Chiar și la începutul erei internetului, am avut animații de încărcare. Desigur, pe atunci, puteau dura mult mai mult decât fac acum. De asemenea, am învățat cum să le facem mult mai plăcute pentru utilizator, fără să le plictisim și să ne deplasăm.

Familiarizarea cu încărcarea animațiilor

Cel mai comun stil de încărcare a animațiilor este cercul rotativ. Nu trebuie confundat cu „cercul curcubeu al morții” de pe computerele Apple. Animația de încărcare a cercului rotativ are o mișcare gradientă eșalonată. Primele încărcătoare preîncărcate au avut o mulțime de versiuni diferite, de la flori, la cerc până la fulgi de zăpadă și chiar la rotirea yang-urilor. În zilele noastre, animațiile de încărcare rotitoare sunt mai dinamice și mai frumoase de privit.

Animațiile de încărcare prin rotire funcționează numai dacă timpul de așteptare este scurt. Peste 5 secunde este deja prea mult. Atunci dezvoltatorii trebuie să folosească pre-încărcătoare mai creative. O animație de încărcare distractivă și distractivă va menține un utilizator pe site, indiferent de cât timp durează.

Sfaturi pentru o mai bună încărcare a animațiilor

Există câteva lucruri pe care le puteți adăuga la animația de încărcare pentru a o face mai interesantă decât o simplă imagine în mișcare. Iată câteva sfaturi pentru a le face și mai bune și mai eficiente.

• Includeți o bară procentuală
• Arată cât timp mai are de așteptat utilizatorul
• Explicați ce se întâmplă sub capotă (elemente de recuzită pentru folosirea umorului)
• Utilizați o animație distractivă care nu repetă neapărat aceeași acțiune exactă

Avantajele unei animații de încărcare de marcă

Dacă aveți ocazia să vă creați propria animație de încărcare sau să utilizați un plugin cu opțiuni de personalizare, atunci asigurați-vă că preîncărcătorul este marcat. Acest lucru ar putea fi la fel de simplu ca utilizarea culorilor site-ului web al mărcii pentru a utiliza de fapt o ilustrație a companiei. Ideea din spatele marcării unei animații de încărcare este că se pare că aparține site-ului respectiv și nu este doar un supliment. Această rundă de pe site-ul web Awwwards vă poate inspira propriile creații.

Cum să adăugați o animație de încărcare pe site-ul dvs. WordPress

Adăugarea unei animații de încărcare este mai ușoară decât ai putea crede. Există o serie de opțiuni despre cum să adăugați una la un site WordPress. De la pluginuri ușor de utilizat până la adăugarea de cod personalizat pe site. Deoarece există atât de multe opțiuni diferite, le voi lista aici, astfel încât să puteți arunca o privire în jur și să găsiți care dintre ele funcționează cel mai bine pentru dvs.

Utilizarea unui plugin pentru a adăuga o animație de încărcare

Un plugin este cel mai simplu și mai simplu mod de a adăuga o animație de încărcare. Acestea sunt deosebit de utile dacă nu vă simțiți confortabil să păcăliți codul sau nu aveți timp. Iată o listă cu unele dintre cele mai versatile pluginuri pentru încărcarea animațiilor. Unele dintre acestea sunt gratuite, iar altele sunt premium. În unele cazuri, același plugin are o versiune gratuită mai simplă și o versiune pro mai robustă.

Loftloader

Loftloader are o versiune gratuită și una pro. În versiunea gratuită, puteți încerca câteva dintre încărcătoare și le puteți personaliza pentru a se potrivi cu site-ul și marca. Versiunea pro are mai multe opțiuni și mai multe controale granulare.

Preloader plat

Flat Preloader este un plugin gratuit simplu cu un set limitat de animații colorate de încărcare. Acest plugin este perfect dacă aveți nevoie de o soluție rapidă pentru un pre-încărcător și nu este nevoie să personalizați culorile sau imaginea.

Cel mai bun preîncărcător

Best Preloader este un plugin gratuit de animație de încărcare cu o singură opțiune, care se potrivește oricărui stil de site web. Vin cu o animație cu câteva controale personalizate.

Încărcător de pagini

Page Loader este un plugin de animație de încărcare premium, cu multe opțiuni de personalizare și branding. Este unul dintre pluginurile de preîncărcare preferate de pe piață.

WP Smart Preloader

WP Smart Preloader este un plugin gratuit și open source cu opțiuni complete de personalizare. Animațiile nu sunt foarte elaborate, dar se vor potrivi cu orice stil de site. Puteți personaliza culorile și setările destul de ușor.

Adăugarea unei animații de încărcare fără plugin

Dacă doriți să evitați utilizarea unui plugin, există o mulțime de animații gratuite și gata de utilizare disponibile. La fel și câteva tutoriale în avans care oferă fragmente de cod pe care trebuie să le adăugați.

PixelBuddha cu multimedia:

Băieții de la Multimedia au publicat un tutorial simplu cu două seturi gratuite de încărcare a animațiilor de la PixelBuddha și codul de care aveți nevoie pentru a le configura pe site-ul dvs.

CodePen:

Acest articol mediu al UX Planet, autorul completează o mulțime de animații de încărcare în diferite stiluri. Există altele simple și mai complexe. Cele mai multe dintre ele sunt încorporate din CodePen și puteți obține fragmentul HTML și CSS din widgetul însuși. Va trebui să le inserați într-un set complet de coduri pentru o animație de încărcare configurată.

SpinKit:

Tobias Ashlink are un SpinKit cu o frumoasă colecție de animații de încărcare cu codul disponibil prin GitHub. Acestea trebuie, de asemenea, să fie adăugate la un set complet de coduri pentru o configurare pre loaer.

Loading.io:

Loading.io este o colecție de animații de încărcare cu o mulțime de opțiuni diferite. Există pre-încărcătoare CSS, preîncărcătoare GIF, butoane și multe altele. Căutați pe site-ul lor pentru a găsi toate opțiunile și instrucțiunile despre cum să le adăugați pe site-ul dvs.

Pixelvars:

Băieții sunt Pixelvars, a scris un tutorial la îndemână cu tot codul de care aveți nevoie pentru a configura propria animație de încărcare. Puteți folosi chiar și codul acestora împreună cu animațiile CodePen sau GitHub de mai sus. Această opțiune pare ceva mai avansată pentru unii oameni. Mergeți cu acest lucru dacă sunteți un dezvoltator cu cunoștințe bune de codificare.

Cu atât de multe opțiuni, la care vei merge?

Adăugarea unei animații de încărcare pe un site web WordPress este ușoară. Cu atât de multe opțiuni disponibile, este doar o chestiune de a alege una.

În această postare, v-am arătat o mulțime de moduri diferite de a adăuga o animație de încărcare pe site-ul dvs. Care este metoda preferată? Conceput personalizat și adăugat cu cod la o temă pentru copii? Un plugin personalizabil? O opțiune simplă, fără bibelouri? Spuneți-ne în comentarii pentru a putea verifica propriile dvs. animații de încărcare.

Imagine prezentată prin muchomoros / shutterstock.com