Lottie animācijas programmā Elementor for WordPress

Vēlaties dažādot savu vietni ar dinamisku, kustīgu grafiku? Izmantojot Lottie animācijas, varat palielināt savas WordPress vietnes vizuālo pievilcību un sniegt apmeklētājiem saistošu pieredzi. Šajā rokasgrāmatā uzzināsiet, kā izmantot Lottie programmā Elementor, lai viegli integrētu satriecošas animācijas.

Galvenās atziņas

• Lottie ļauj izmantot kustīgu grafiku Elementor.
• Animācijas var lejupielādēt kā JSON failus vai integrēt no ārpuses.
• Elementor lietotāja saskarne piedāvā vienkāršas animācijas iestatījumu pielāgošanas iespējas.

Soli pa solim

Solis Nr. 1: Pievienojiet elementu Lottie

Vispirms Elementor ir jāpievieno elements Lottie. Lai to izdarītu, dodieties uz Elementor redaktoru savā lapā. Sānu joslā sameklējiet elementu "Lottie" un velciet to uz vēlamo vietu lapā. Elementor Pro versijā elementu Lottie atradīsiet salīdzinoši tālu lejā.

2. solis: Lejupielādējiet animācijas no LottieFiles

Lai atrastu piemērotu animāciju, varat apmeklēt platformu LottieFiles. Šeit varat reģistrēties bez maksas un pārlūkot plašo animāciju klāstu. Ievadiet meklēšanas laukā meklēto - piemēram, es meklēju "Apple".

Solis 3: Izvēlieties vēlamo animāciju

Tiklīdz esat atradis sev tīkamu animāciju, noklikšķiniet uz priekšskatījuma. Jums būs iespēja lejupielādēt animāciju JSON vai GIF formātā. Izvēlieties jums piemērotāko iespēju - ja vēlaties animāciju izmantot Elementor, lejupielādējiet to kā JSON failu.

4. solis: augšupielādējiet animācijas

Tagad atgriezieties Elementor. Lejupielādēto JSON failu varat augšupielādēt tieši, izmantojot augšupielādes lauku elementā Lottie. Pārliecinieties, ka failu vispirms aktivizējat, jo bez aktivizēšanas JSON fails Elementor netiks parādīts.

Solis Nr. 5: Ģenerējiet ārējo URL

Ja lejupielāde nedarbojas, varat izmantot arī tiešo animācijas URL adresi. Ievietojiet URL atbilstošajā laukā. Elementor automātiski ielādēs un parādīs animāciju.

6. solis: Pielāgojiet animācijas iestatījumus

Tagad varat pielāgot animācijas iestatījumus. Jums ir iespēja noteikt atskaņošanas ātrumu un fona krāsu. Pārliecinieties, ka esat aktivizējis cilpas funkciju, lai animācija tiktu nepārtraukti atkārtota.

7. posms: Iestatiet interaktīvos palaidējus

Izvēlieties animācijas trigeri, norādot, vai animācijai jāsākas pēc klikšķa vai novietošanas. Iestatījumos varat iestatīt vēlamo mijiedarbību - tas ļauj jums kontrolēt lietotāja pieredzi.

8. solis: Veiciet papildu pielāgojumus

Lai panāktu vēlamo efektu, varat rediģēt animācijas iestatījumu biežumu un iestatīt animācijas sākuma un beigu punktu. Šie pielāgojumi nodrošina, ka animācija ir precīzi pielāgota jūsu vajadzībām.

9. solis: Pielāgojiet stilu un dizainu

Lottie animācijas piedāvā arī stila un dizaina pielāgošanas iespējas. Šeit varat iestatīt animācijas augstumu, platumu un necaurredzamību. Varat arī pievienot CSS filtrus un noteikt pārejas laikus, lai nodrošinātu profesionālu izskatu.

10. posms: Pārbaudiet un saglabājiet animāciju

Kad esat veicis vēlamos iestatījumus, saglabājiet izmaiņas. Pārbaudiet animāciju Elementor redaktora priekšskatījumā, lai pārliecinātos, ka viss darbojas, kā paredzēts. Rezultātam vajadzētu būt pievilcīgai animācijai, kas rāda atsaucīgus efektus, kad uz tās uzskrienat ar peles kursoru vai noklikšķinot uz tās.

Kopsavilkums

Lottie animāciju ievietošana Elementor ir vienkārša un ļauj jums piešķirt jūsu vietnei dinamisku un modernu dizainu. Izmantojot aprakstītās darbības, varat pielāgot animācijas, uzlabot lietotāja pieredzi un radoši strādāt ar saturu.