Doriți să adăugați animație Lottie în Elementor?
Din versiunea 2.10.0, Elementor Pro acceptă animația Lottie, permițându-vă să adăugați animație ușoară paginii dvs. Înainte de actualizare, puteți aplica efecte de animație unui widget din opțiune Efecte de mișcare sub filă avansat.
Cu toate acestea, Lottie lucrează într-un mod diferit. Lottie este un format de animație, la fel ca GIF, așa că un fișier Lottie este o condiție prealabilă pentru adăugarea animației Lottie în Elementor.
Dans Elementor, puteți adăuga un fișier Lottie folosind widget-ul Lottie. Prin urmare, puteți aplica și efecte de mișcare fișierului Lottie. De exemplu, puteți aplica un efect de defilare orizontală pentru a face pe Lottie să se miște orizontal - fie în direcția dreaptă, fie în direcția stângă - atunci când pagina este derulată. Iată un exemplu.
Puteți vedea fișierul de animație original mai sus aici. În fișierul original Lottie, ciclistul - și bicicleta lui - rămân în aceeași poziție atunci când pagina este derulată. Pentru a-l face să se miște la dreapta când pagina este derulată în jos și la stânga când pagina este derulată în sus, puteți utiliza efectul de mișcare încorporat în Elementor.
Dacă sunteți nou la Elementor, consultați ghidul nostru pe: Cum se instalează Elementor pe WordPress
Ce este Lottie și de unde să obțineți un fișier Lottie?
După cum am menționat mai devreme, Lottie este un format de animație. Este un format de animație bazat pe JSON, dezvoltat de inginerii Airbnb. Puteți citi mai multe despre povestea lui Lottie la această pagină.
Cel mai mare beneficiu al adoptării Lottie pe tine site-ul web este a ta site-ul web va fi mult mai ușor, deoarece un fișier Lottie este mult mai mic decât alte formate de animație, cu o calitate vizuală clară. De asemenea, puteți redimensiona fișierul Lottie fără a sparge pixelii.
Adobe After Effects este unul dintre instrumentele pe care le puteți folosi pentru a crea un fișier Lottie. De asemenea, puteți obține fișiere Lottie gratuit LottieFiles.
Vă rugăm să rețineți că Lottie și LottieFiles sunt două lucruri diferite. Lottie este din nou — — un format de animație, în timp ce LottieFiles este un site-ul web care oferă fișiere Lottie.
Cum să adăugați animație Lottie în Elementor
Înainte de a începe să adăugați animație Lottie în Elementor, asigurați-vă că ați actualizat Elementor Pro. După ce sunteți gata, creați o pagină nouă și editați cu Elementor. Sau modificați unul existent.
În editorul Elementor, trageți widgetul Lottie în zona de editare
Accesați panoul din stânga. pe bloc Lottie sub filă Conținut, selectați sursa. Dacă alegi Fișier media, pur și simplu încărcați fișierul Lottie (fișierul JSON) făcând clic pe pictograma de încărcare.
Citiți și: Cum să setați dimensiunea personalizată pentru pictograma butonului Elementor
Apoi puteți seta alinierea și adăuga o adresă URL personalizată.
Dacă doriți să utilizați un fișier Lottie găzduit pe o sursă terță parte, selectați opțiunea URL extern și inserați URL-ul fișierului Lottie pe care doriți să îl utilizați în câmpul disponibil.
Apoi deschide blocul setările sub filă Conținut pentru a controla comportamentul animației. Mai întâi, selectați tipul de declanșare pentru a declanșa animația Lottie. Puteți alege dintre 4 tipuri de declanșatori:
- Vizualizarea: Animația Lottie începe să fie redată pe baza ferestrei de sus (zona vizibilă a ecranului dispozitivului).
- În clic: Animația Lottie începe să fie redată când a vizitator apasa pe el.
- La hover: Animația Lottie începe să fie redată când a vizitator plutește mouse-ul.
- Pe defilare: Animația Lottie este redată numai când pagina este derulată.
De asemenea, puteți seta opțiunea de activare buclă, activați opțiunea Verso, setați punctul de început/sfârșit și setați viteza de redare.
Există, de asemenea, o opțiune pentru a activa Lazyload.
Pentru a seta lățimea fișierului Lottie, puteți accesa fila Stil. În această filă puteți seta lățimea, precum și adăugarea unui filtru CSS, ca atunci când lucrați cu widget-ul Imagine.
Dacă doriți să aplicați o mișcare orizontală ca cea din exemplul de mai sus, accesați fila avansat. bloc deschis Efecte de mișcare și activați Efecte de derulare.
Faceți clic pe opțiune Derulare orizontală. Setați direcția, viteza și fereastra.
Concluzie
Dacă doriți să descărcați un fișier Lottie de pe site-ul LottieFiles, asigurați-vă că descărcați fișierul JSON. Mai întâi, selectați fișierul Lottie pe care doriți să îl descărcați și faceți clic pe butonul Descărcați JSON .
Obțineți Elementor Pro acum!!!
Concluzie
Aici ! Gata pentru acest articol care vă arată cum adăugați animație Lottie în Elementor. Dacă aveți nelămuriri despre cum să ajungeți acolo, anunțați-ne în termen comentarii.
Cu toate acestea, puteți consulta și resursele noastre, 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 sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
