"Lottie" animacijos "Elementor for WordPress

Norite paįvairinti svetainę ryškia, judančia grafika? Naudodami "Lottie" animacijas galite padidinti savo "WordPress" svetainės vizualinį patrauklumą ir suteikti lankytojams įdomios patirties. Šiame vadove sužinosite, kaip naudoti "Lottie" " Elementor" programoje ir lengvai integruoti stulbinančias animacijas.

Pagrindinės žinios

• "Lottie" leidžia naudoti judesio grafiką "Elementor".
• Animacijas galima atsisiųsti kaip JSON failus arba integruoti iš išorės.
• Elementor naudotojo sąsaja siūlo paprastas animacijos nustatymų pritaikymo parinktis.

Žingsnis po žingsnio instrukcijos

1 veiksmas: pridėkite elementą Lottie

Pirmiausia į "Elementor" reikia pridėti elementą "Lottie". Norėdami tai padaryti, eikite į savo puslapio "Elementor" redaktorių. Šoninėje juostoje raskite elementą "Lottie" ir vilkite jį į norimą vietą puslapyje. Elemento "Lottie" elementą rasite gana toli "Elementor Pro" versijoje.

2 žingsnis: atsisiųskite animacijas iš "LottieFiles

Norėdami rasti tinkamą animaciją, galite apsilankyti "LottieFiles" platformoje. Čia galite nemokamai užsiregistruoti ir peržiūrėti platų animacijų asortimentą. Paieškos lauke įveskite, ko ieškote, pavyzdžiui, aš ieškojau "Apple".

3 žingsnis: pasirinkite norimą animaciją

Kai tik rasite patinkančią animaciją, spustelėkite jos peržiūrą. Turėsite galimybę atsisiųsti animaciją JSON arba GIF formatu. Pasirinkite jums tinkamiausią variantą - jei norite animaciją naudoti "Elementor" programoje, atsisiųskite ją kaip JSON failą.

4 veiksmas: įkelkite animaciją

Dabar grįžkite į "Elementor". Atsisiųstą JSON failą galite įkelti tiesiogiai naudodami elemento Lottie įkėlimo lauką. Pirmiausia įsitikinkite, kad failą aktyvavote, nes JSON failas nebus rodomas "Elementor" be aktyvavimo.

5 veiksmas: sugeneruokite išorinį URL adresą

Jei atsisiuntimas neveikia, taip pat galite tiesiogiai naudoti animacijos URL adresą. Į atitinkamą lauką įklijuokite URL adresą. Elementor automatiškai paims ir parodys animaciją.

6 veiksmas: pritaikykite animacijos nustatymus

Dabar galite pritaikyti animacijos nustatymus. Galite nustatyti atkūrimo greitį ir fono spalvą. Įsitikinkite, kad įjungėte funkciją loop, kad animacija būtų kartojama nuolat.

7 veiksmas: nustatykite interaktyvius trigerius

Pasirinkite animacijos paleidiklį, nurodydami, ar animacija turėtų prasidėti paspaudus arba užvedus pelės žymeklį. Pageidaujamą sąveiką galite nustatyti nustatymuose - taip galėsite kontroliuoti naudotojo patirtį.

8 veiksmas: atlikite tolesnius koregavimus

Galite redaguoti animacijos nustatymų dažnį ir nustatyti animacijos pradžios ir pabaigos tašką, kad pasiektumėte norimą efektą. Šie koregavimai užtikrina, kad animacija būtų tiksliai pritaikyta jūsų poreikiams.

9 veiksmas: pritaikykite stilių ir dizainą

Lottie animacijos taip pat siūlo stiliaus ir dizaino pritaikymo parinktis. Čia galite nustatyti animacijos aukštį, plotį ir nepermatomumą. Taip pat galite pridėti CSS filtrų ir nustatyti perėjimo laiką, kad užtikrintumėte profesionalią išvaizdą.

10 veiksmas: išbandykite ir išsaugokite animaciją

Atlikę norimus nustatymus, išsaugokite pakeitimus. Patikrinkite animaciją "Elementor" redaktoriaus peržiūroje, kad įsitikintumėte, jog viskas veikia taip, kaip norima. Rezultatas turėtų būti patraukli animacija, kurioje rodomi reaguojantys efektai, kai ant jos užvedamas pelės žymeklis arba paspaudžiama.

Apibendrinimas

Įterpti "Lottie" animaciją į "Elementor" yra paprasta ir leidžia suteikti svetainei dinamišką ir modernų dizainą. Atlikę šiuos veiksmus galite pritaikyti animacijas, pagerinti naudotojo patirtį ir kūrybiškai kurti turinį.