Cum să utilizați animațiile Lottie în WordPress

Încorporarea animațiilor în site-ul dvs. WordPress este o modalitate excelentă de a anima o pagină web obosită și de a menține vizitatorii implicați pe tot parcursul timpului pe care îl au pe site-ul dvs. O modalitate ușoară și eficientă de a face acest lucru este prin utilizarea animațiilor lottie: animații ușoare și de înaltă calitate.

Animațiile Lottie sunt în creștere în popularitate din numeroase motive și, dacă sunteți gata să vă urcați și să vă îmbunătățiți site-ul, ele ar putea fi pentru dvs.

Există câteva moduri diferite de a crea aceste animații și de a le adăuga fără probleme pe site-ul dvs. WordPress.

Ce sunt animațiile Lottie?

Lottie este o bibliotecă pentru Android, iOS, Web și Windows care redă animații After Effects și permite ca datele de animație să fie exportate ca fișiere JSON, spre deosebire de un tip de fișier imagine tipic. Pe scurt, pot înlocui cu ușurință un activ static cu ceva distractiv și captivant.

Această soluție open-source a fost introdusă pentru prima dată de echipa AirBnB, dar câștigă rapid popularitate în rândul designerilor și animatorilor din diferite piețe. Un mare avantaj al folosirii animațiilor lottie pe site-ul dvs. WordPress este că dimensiunea fișierului este foarte mică în comparație cu animația GIF sau fișierele mp4. În plus, formatul flexibil de animație permite browserului să se ocupe de randare.

Numeroasele posibilități de utilizare a animațiilor de loterie este unul dintre motivele pentru care sunt atât de populare. Puteți folosi animații de loturi ca anteturi animate, butoane, elemente grafice atrăgătoare și multe altele. De asemenea, puteți seta animația să se declanșeze pe măsură ce vizitatorii derulează, trec cu mouse-ul sau dau clic pe pagina web. Versatilitatea și implementarea ușoară a acestora atât pentru site-urile web B2C, cât și B2B le fac să fie o modalitate de schimbare a jocului de a îmbunătăți calitatea și aspectul general al designului dvs. web.

Crearea de animații Lottie

Când vă gândiți dacă să adăugați animații de lottie pe site-ul dvs., va trebui mai întâi să decideți dacă faceți o abordare stoc sau personalizată. Fiecare are avantajele și dezavantajele sale, așa că este înțelept să luați în considerare ambele opțiuni înainte de a decide.

Cu orice tip de animație, mai puțin este întotdeauna mai mult. Atunci când încorporați un element animat într-un reproiectare a site-ului web, luați în considerare ce rol îl joacă acea animație în călătoria clientului.

Animații personalizate Lottie

Dacă sunteți în căutarea unei animații personalizate de lottie pentru site-ul dvs., va trebui să lucrați cu un animator sau un designer care este specializat în Adobe After Effects și este familiarizat cu acest tip de animație.

Multe animații de lottie folosesc un stil ilustrativ, așa că va trebui să decideți dacă acesta se potrivește cu branding-ul și stilul site-ului web înainte de a continua. Odată ce vă decideți asupra elementelor grafice și a efectelor de animație, animatorul va trebui să creeze animații personalizate în Adobe After Effects și să le exporte ca animații lottie, folosind extensia After Effects. Acest lucru va reda o animație de înaltă calitate, care poate fi implementată cu ușurință pe site-ul dvs.

Un motiv pentru care animațiile lottie sunt de înaltă calitate este că procesul de creare elimină orice nevoie ca un dezvoltator sau inginer să recreeze animația designerului într-un format web. Oferă o soluție gata de utilizare care face implementarea animațiilor mai ușoară ca niciodată.

Stock Lottie Animations

Animațiile de loterie de stoc sunt o opțiune excelentă dacă doriți să vă accelerați noul design. Puteți căuta o animație de loterie de stoc existentă și, dacă este necesar, personalizați-o pentru a se potrivi mărcii dvs.

Lottie Files este un site web stoc unde puteți găsi un număr mare de animații gratuite și plătite pentru lottie. Site-ul oferă și un instrument de editare în care puteți edita culorile animației înainte de descărcare. Dacă trebuie să schimbați un număr mare de culori într-o animație, un animator sau un designer calificat poate folosi și Adobe After Effects pentru a face acele modificări mai eficient și pentru a exporta animația.

Dacă doriți să implementați numeroase animații pe un site sau dacă aveți o estetică foarte specifică a site-ului, poate fi dificil să găsiți mai multe opțiuni de acțiuni în stilul potrivit. În acest caz, puteți lua în considerare angajarea unui animator pentru crearea mai multor animații care se potrivesc site-ului dvs. și se potrivesc cu opțiunile pe care le-ați ales deja.

Cu orice tip de animație sau grafică stoc, țineți cont de cerințele de licențiere pentru animațiile stoc și asigurați-vă că contribuiți cu animația designerului original dacă este necesar.

Adăugarea de animații Lottie în WordPress

Este un proces destul de simplu pentru adăugarea de animații de lottie pe un site web WordPress. Puteți fie să utilizați un widget HTML personalizat pentru a adăuga codul de animație pe site, fie să utilizați un plugin WordPress pentru a adăuga animația.

Widget HTML personalizat

Un dezvoltator WordPress calificat poate folosi o mică bibliotecă JavaScript și un widget HTML personalizat pentru a adăuga animațiile lottie pe site. Veți începe prin a încărca scriptul lottie.min.js împreună cu fișierul de animație .json și orice material de imagine în folderul cu teme. Apoi, există un mic fragment de JS de adăugat la widget pentru a iniția scriptul Lottie, care încarcă fișierul de animație .json în div-ul containerului dorit.

Această abordare simplificată poate fi potrivită pentru majoritatea site-urilor WordPress, deoarece evită îngreunarea site-ului cu pluginuri WordPress suplimentare. Când adăugați animații de loterie, puteți controla, de asemenea, dacă animația este în bucle, de câte ori se realizează în bucle și ce poate declanșa elementul animat de pe pagină.

Majoritatea pluginurilor pentru adăugarea de animații lottie fără asistența unui dezvoltator necesită generatorul de pagini Elementor, astfel încât abordarea HTML personalizată tinde să funcționeze mai bine dacă utilizați un plugin de generator de teme sau de pagini, altul decât Elementor.

Adăugarea de elemente pe site fără un plugin este, de asemenea, mai bună pentru viteza și performanța site-ului, deoarece adăugarea din ce în ce mai multe plugin-uri va îngreuna site-ul.

Opțiuni pentru pluginul WordPress

Dacă nu doriți să utilizați un dezvoltator pentru a face acest lucru în mod personalizat, o altă opțiune de a adăuga widget-uri de lottie pe site-ul dvs. este să utilizați un plugin WordPress.

Elementor Pro – Lottie Widget

Elementor este un generator de pagini pentru WordPress cu funcții de glisare și plasare, iar licența Elementor Pro include widget-ul Lottie. Cu acest widget, puteți adăuga animații lottie fără cod și puteți personaliza dimensiunile și comportamentul animației. Acest plugin se conectează convenabil cu site-ul web Lottie Files, astfel încât să puteți selecta cu ușurință opțiunile de animație stoc direct de pe site sau să vă încărcați propriile creații.

Blocuri Gutenberg – Suplimente finale

Dacă utilizați editorul Gutenberg pe site-ul dvs., pluginul Ultimate Addon pentru Gutenberg poate fi o alegere bună pentru adăugarea de animații de lottie cu ajutorul unui plugin. Editorul Gutenberg a făcut parte din nucleul WordPress de la lansarea WordPress 5.0, însă nu este cel mai popular. Multe site-uri încă folosesc editorul clasic sau alți generatori de pagini precum Site Origin, Elementor sau Beaver Builder, pentru a numi câteva.

Cu toate acestea, este o opțiune viabilă. Ultimate Addons pentru Gutenberg este un plugin bine revizuit și oferă o mulțime de funcții grozave, inclusiv opțiunea de a adăuga animații de lot și de a controla opțiunile avansate, cum ar fi viteza și declanșarea animației.

Pluginuri WordPress suplimentare

Există pluginuri suplimentare disponibile în directorul WordPress pentru adăugarea și personalizarea animațiilor lottie. Rețineți că unele dintre pluginuri necesită ca site-ul dvs. să fie construit și să utilizeze Elementor, cum ar fi Addons Premium pentru Elementor și Elementskit Addon pentru Elementor. Există, de asemenea, pluginuri care sunt destinate altor teme și constructori WordPress, cum ar fi tema Divi sau blocurile Gutenberg.

E timpul să faci animație

Animațiile Lottie sunt extrem de accesibile oricui are un site WordPress. Indiferent dacă doriți animații personalizate sau animații stoc, animații eroi sau cele cu derulare, resursele sunt la îndemână.

Începeți să fiți creativ în ceea ce doriți să arate animațiile dvs. și ce doriți să facă, iar atunci când începeți să explorați posibilitățile animațiilor cu lottie, veți începe să vă dați seama cât de mult pot adăuga la calitatea site-ului dvs. .