Vă prezentăm Kadence Lottie Block

Echipa Kadence este încântată să introducă Lottie Block, un nou bloc disponibil în Kadence Blocks versiunea 2.2.4+. Acest nou bloc oferă proprietarilor de site-uri care folosesc Kadence Blocks noi oportunități de a adăuga animații de înaltă calitate și cu lățime de bandă redusă pe site-urile lor. Kadence Blocks 2.2.4 introduce, de asemenea, noul Count Up Block, adăugând animație numărătoare în sus sau numărătoare inversă până la anumite valori.

Noi oportunități pentru animații cu animații Lottie

Animațiile de pe site-uri web au o putere incredibilă de a atrage publicul și de a atrage atenția asupra obiectivelor de conversie, dar tehnologia anterioară pentru adăugarea de animație a venit adesea cu experiență vizuală de calitate scăzută și fișiere de dimensiuni mari. De la GIF-uri animate la Adobe Flash la diferite formate video, tehnologiile de animație anterioare au creat mai multe probleme decât meritau.

Dezvoltatorii de la Airbnb au creat o nouă tehnologie, numită Lottie, care oferă animații de înaltă calitate, fără suprasolicitarea lățimii de bandă mari. După dezvoltare, acești dezvoltatori și-au deschis creația. Nu numai că fișierele Lottie sunt open source, extrem de mici și de înaltă calitate, dar sunt și interactive și pot fi manipulate în timpul execuției. Potrivit LottieFiles, „cele mai bune 500 de aplicații din iOS App Store folosesc acum Lottie pentru a implica utilizatorii și pentru a îmbunătăți conversiile”.

Acum, cu Kadence Lottie Block în Kadence Blocks, proprietarii de site-uri WordPress au capacitatea de a folosi animația pentru a crea experiențe mai bune și mai captivante pentru vizitatorii site-ului.

Ce este Lottie?

Lottie poartă numele unei regizoare germane, Lotte Reiniger. Reiniger a fost cel mai important pionier al animației cu siluete, cunoscut pentru Aventurile prințului Achmed, lansat în 1926. Acesta este cel mai vechi lungmetraj de animație care a supraviețuit, precedând lungmetrajul de la Walt Disney Albă ca Zăpada și cei șapte pitici (1937) cu peste zece ani. .

A Lottie este un format de fișier bazat pe JSON care permite oricui folosește Kadence Blocks să adauge animații la un site WordPress. Un fișier Lottie JSON este un fișier mic care funcționează pe desktop, tablete și dispozitive mobile. O animație Lottie se poate scala cu ușurință în sus sau în jos, fără pixelări văzute în animațiile anterioare sau fișierele grafice.

Găsirea animațiilor Lottie

LottieFiles.com este o resursă uimitoare pentru toate lucrurile cu Lottie. Fie că sunteți în căutarea unei animații Lottie gratuită pe care să o puteți încărca ca URL de la distanță sau să o descărcați pentru a fi utilizată pe site-ul dvs. local, LottieFiles are o serie de fișiere gratuite din care să alegeți. De asemenea, puteți afla mai multe despre crearea propriilor animații Lottie, accesați un plugin After Effects, un plugin Figma sau găsiți un animator pe piață care poate crea un fișier Lottie personalizat pentru dvs. Puteți chiar să adăugați interactivitate animației dvs. folosind instrumente de pe LottieFiles.

Folosind Blocul Lottie

Blocul Kadence Lottie este adăugat pe site-ul dvs. folosind pluginul gratuit Kadence Blocks, care este disponibil gratuit din depozitul WordPress.org. Pur și simplu actualizați la cea mai recentă versiune a pluginului gratuit Kadence Blocks, iar Lottie Block este disponibil pe site-ul dvs. Puteți folosi Blocul Lottie oriunde ați folosi orice alt bloc, inclusiv în postări, pe pagini sau chiar atunci când construiți șabloane Kadence Elements. Puteți chiar să adăugați Lottie Block la un pop-up/modal Kadence Conversion sau slide-in.

Utilizarea Lottie Block este simplă.

După selectarea blocului Lottie, veți vedea imediat un substituent WordPress animație Lottie Block de pe LottieFiles.com

Fișiere Lottie de la distanță

Dacă doriți să utilizați o adresă URL de la distanță pentru a înlocui substituentul, înlocuiți pur și simplu intrarea din câmpul Lottie Animation URL . Acest lucru va extrage fișierul Lottie dintr-o locație de la distanță pe alt server.

Puteți găsi adresa URL a fișierului Lottie de la distanță pe LottieFiles.com pe pagina de detalii a fiecărei animații.

Local Lottie Files

Dacă doriți să utilizați un fișier local, alegeți Fișier local din meniul derulant Sursă fișier.

Faceți clic pe Încărcați un fișier Lottie . Apoi vi se va solicita să încărcați un fișier JSON Lottie de pe hard disk. Mai întâi, introduceți un nume familiar pentru Titlul animației . Odată ce încărcați fișierul JSON Lottie, veți putea accesa fișierul din orice postare sau pagină în care este disponibil Kadence Blocks, iar acest nume familiar vă va ajuta să determinați ce fișier selectați.

Apoi, faceți clic pe Răsfoire . Acest lucru vă va duce la sistemul dvs. de fișiere pentru a găsi fișierul JSON pe care doriți să îl încărcați. Faceți clic pe Încărcare, iar imaginea dvs. va apărea în Blocul Kadence Lottie. De asemenea, va fi disponibil pentru Kadence Lottie Block pe tot site-ul dvs. WordPress.

Accesibilitate Lottie

Pentru cititoare de ecran și alte browsere alternative, adăugați o descriere a animației în câmpul Aria Label pentru accesibilitate. (Etichetele Aria sunt similare cu etichetele alternative ale imaginii.)

Setări disponibile în Blocul Lottie

Există o serie de setări disponibile prin Kadence Lottie Block pentru a oferi controale asupra modului în care animația dvs. Lottie apare pe site-ul dvs.

Afișați comenzile

Dacă doriți să le oferiți utilizatorilor controlul asupra animației pentru a porni/opri animația, puteți activa această opțiune.

Redare automata

Dacă doriți ca animația dvs. să fie redată automat când utilizatorul vă încarcă pagina, activați această opțiune.

Joacă doar la hover

Când un utilizator trece cu mouse-ul peste animație, animația dvs. se va reda dacă aceasta este activată. Util dacă doriți să încurajați utilizatorul să ia măsuri.

Joacă numai pe derularea paginii

Animația dvs. se va reda numai când utilizatorul derulează. Rețineți că aceasta va suprascrie majoritatea setărilor, cum ar fi redarea automată, viteza de redare, sărirea, bucla și redarea la hover. Acest lucru nu va funcționa când previzualizați în editorul de blocuri.

Viteza de redare

Puteți determina cât de repede sau încet este redată animația.

Controale buclei

Există două comenzi principale pentru buclă: Redare în buclă și Redare Bounce. Redarea în buclă va reda animația în mod repetat, unde redarea prin respingere va reda animația, apoi va inversa redarea. De asemenea, puteți seta (în secunde) o întârziere a redării în buclă, precum și a limita numărul de bucle care se redă pentru un utilizator.

Controale dimensiuni

Controalele de dimensiune funcționează în același mod ca și alte blocuri. Puteți seta umplutura și marginile în jurul blocului Lottie fie după fiecare variabilă (stânga, dreapta, sus și jos) sau faceți clic pe casetă pentru a lega setările de marjă sau setările de umplutură. De asemenea, puteți seta lățimea maximă a unui bloc Lottie pentru a redimensiona rapid animația Lottie.

Folosiți blocurile Kadence Lottie oriunde puteți folosi blocuri

Folosește Kadence Lottie Block oriunde folosești blocuri. Este disponibil în versiunea gratuită a Kadence Blocks.

Și dacă utilizați deja pluginul Kadence Blocks Pro, Kadence Conversions sau Kadence Theme Pro, puteți începe să adăugați Lottie Block în orice zonă în care utilizați deja blocuri.

Dacă utilizați Kadence Elements Templates ca parte a Kadence Theme Pro și doriți să adăugați un bloc Lottie la subsol, de exemplu, puteți face acest lucru cu ușurință. Pur și simplu mergeți la Kadence > Elemente > Șablon pentru a găsi șablonul de subsol și adăugați Blocul Lottie acolo. Pentru un exemplu, vedeți o postare recentă despre cum să adăugați o animație Lottie la un subsol folosind șabloane Kadence Elements.

Dacă utilizați Kadence Conversions pentru un pop-up/modal sau slide-in și doriți să adăugați un Lottie Block la un element de conversie folosit pe site-ul dvs., îl puteți adăuga în același mod. Folosiți blocurile în același mod în care ați face-o în mod normal și personalizați blocul Lottie pentru articolul dvs. Kadence Conversions.

Resurse pentru utilizarea animației

Animațiile de pe un site web WordPress sunt instrumente incredibil de puternice care vă permit să atrageți atenția și să implicați publicul. Desigur, cu o mare putere vine o mare responsabilitate. Există câteva resurse disponibile pentru a înțelege cele mai bune practici cu animația și vă recomandăm să examinați cele mai bune practici de utilizare pentru animație pe web. Nielsen Norman Group oferă câteva ghiduri grozave: Animație pentru atenție și înțelegere, precum și Rolul animației și mișcării în UX.

Folosiți-vă cercetarea în utilizarea animației pentru a vă ghida obiectivele de conversie. Procedând astfel, puteți adăuga animație care îi ajută pe utilizatori să obțină ceea ce caută, în timp ce vă îndepliniți și obiectivele de marketing. Animația este un instrument excelent pentru a crea experiențe care încântă utilizatorii, iar Kadence este încântată să aducă acest instrument inovator celor peste 200.000 de utilizatori care folosesc Kadence Blocks pentru a crea experiențe de utilizator excepționale cu WordPress.

Kadence continuă să inoveze

Blocul Kadence Lottie este doar cea mai recentă inovație venită de la echipa Kadence. Disponibil în pluginul gratuit Kadence Blocks, veți vedea Kadence Lottie Block atunci când actualizați la versiunea 2.2.4 sau o versiune ulterioară.

Pentru a obține tot ceea ce oferă Kadence, vă sugerăm pachetul complet. Pe măsură ce se adaugă produse și funcții noi, acestea sunt adăugate la pachetul complet, astfel încât veți avea întotdeauna acces la cea mai recentă inovație Kadence.