Tot ce trebuie să știți despre modulul Lottie al Divi 5

Modulul Lottie al Divi 5 aduce animații dinamice și ușoare la paginile dvs., ceea ce face ca paginile dvs. să fie mai interesante și mai interactive. Vizualizările potrivite sunt esențiale pentru a atrage atenția și pentru a menține vizitatorii angajați. Cu modulul Lottie, DIVI 5 vă permite să adăugați animații cu aspect profesional, care sunt, de asemenea, favorabile performanței.

În această postare, vom explica tot ce trebuie să știți despre modulul Lottie, inclusiv caracteristicile sale, procesul de configurare, opțiunile de personalizare și modalitățile de utilizare a acestuia. Hai să sărim!

Ce sunt fișierele Lottie?

Animațiile Lottie sunt grafice ușoare, bazate pe JSON, care fac ca vectori scalabili. Ele livrează imagini scalabile fără dimensiunile grele ale fișierelor de videoclipuri sau GIF -uri. Datorită capacității sale de a combina performanța cu flexibilitatea, Lottie a câștigat în popularitate, ceea ce o face populară pentru designul web modern. Spre deosebire de animațiile tradiționale, fișierele Lottie folosesc date JSON bazate pe vector, asigurând imagini clare și redare lină pe toate dispozitivele și dimensiunile ecranului.

Abonați -vă la canalul nostru YouTube

În Divi 5, modulul Lottie integrează perfect aceste animații în constructorul vizual, permițând utilizatorilor să adauge atingeri dinamice și moderne la site -urile lor Divi în câteva clicuri. Indiferent dacă evidențiați un CTA sau adăugați flair la o secțiune Hero, modulul Lottie face încorporarea animațiilor fără a codifica complex fără efort.

Cu modulul Lottie, Divi 5 transformă modul în care aduceți mișcare proiectelor dvs. web, ceea ce le face captivante și eficiente.

Caracteristici cheie

Modulul Lottie din Divi 5 este un instrument versatil plin de capacități care facilitează crearea de animații dinamice și optimizate. Oferă control asupra comportamentului de animație, permițându -vă să reglați viteza, direcția, declanșatorii și multe altele. Să aruncăm o privire la unele dintre caracteristicile sale cheie.

Ușurință de utilizare

Modulul Lottie din Divi 5 este conceput cu simplitate în minte, ceea ce îl face pentru începători și accesibil utilizatorilor de toate nivelurile de abilități. Nu trebuie să fiți un expert în codificare pentru a adăuga animații profesionale, atrăgătoare, pe site-ul dvs. DIVI.

Datorită numărului de resurse disponibile online, furnizarea de animații este ușoară. Platforme precum Lotieffiles și Lordicon oferă biblioteci extinse de animații Lottie gratuite și premium, de la pictograme subtile de încărcare la grafică vibrantă.

Pentru cei care caută o atingere unică, puteți crea animații personalizate folosind instrumente precum Adobe After Effects cu pluginul BodyMovin. Acest plugin exportă animații ca fișiere JSON compatibile cu modulul Lottie. Indiferent dacă alegeți animații pre-făcute sau personalizate, procesul este simplu.

Opțiuni de personalizare

Modulul Lottie din Divi 5 oferă opțiuni de personalizare, oferindu -vă control asupra mai multor aspecte ale fișierului Lottie. Pentru experiențe interactive, utilizați Trigger Animation pentru a alege când pentru a activa animația, cum ar fi la încărcare, când elementul intră în Viewport, Hover, Faceți clic sau derulați. Puteți activa animația de buclă pentru a permite mișcarea continuă pe fișierul dvs. Lottie, regla viteza de animație , selectați direcția (înainte sau înapoi) și alegeți între normal sau săriți în câmpul Modului Play .

Încărcarea animațiilor JSON

Adăugarea de animații Lottie la DIVI 5 necesită încărcarea fișierelor JSON, formatul standard pentru fișierele Lottie. Cu toate acestea, WordPress nu acceptă nativ încărcările JSON în biblioteca sa media, așa că va trebui să faceți măsuri suplimentare pentru a vă asigura că le puteți încărca.

Prima opțiune este să creezi o temă pentru copii și să adaugi un fragment PHP în fișierul funcțiilor temelor copilului tău. Această metodă este ușoară și asigură gestionarea sigură a fișierelor de animație. În mod alternativ, puteți utiliza un plugin precum tipurile de încărcare a fișierelor pentru a permite încărcarea JSON fără a atinge niciun cod, ceea ce îl face ideal pentru utilizatorii care preferă o soluție plug-and-play. Pentru un ghid pas cu pas pentru implementarea oricărei metode, consultați articolul nostru de asistență, care vă parcurge procesul pentru a configura site-ul dvs. Divi 5 pentru încărcări JSON.

Cum se folosește modulul Lottie în Divi 5

Adăugarea unei animații Lottie în Divi 5 este simplă. Creați sau descărcați o animație Lottie dintr -o sursă precum Lotieffiles sau Lordicon. Găsiți și faceți clic pe modulul Lottie din Visual Builder pentru a -l adăuga pe pagina dvs.

Încărcați fișierul JSON sau localizați -l în galeria dvs. Media WordPress.

Alegeți animația declanșatoare . Îl puteți seta pentru a anima pe încărcare, vizualizare, plimbare, clic sau derulați pentru a anima.

Dacă doriți ca animația dvs. Lottie să aibă un element interactiv, utilizați defilarea modulului pentru a anima declanșatorul.

Utilizarea acestui declanșator oferă o modalitate excelentă de a crea experiențe dinamice și antrenante ale utilizatorilor. În loc să folosească animația atunci când pagina se încarcă, derulați pentru a analiza legătura cu progresul animației direct cu comportamentul de defilare al utilizatorului. Pe măsură ce utilizatorul derulează pe pagină, animația progresează cadru după cadru. Acest lucru face ca animația să fie un element interactiv care face ca experiența să se simtă mai dinamică.

Dacă doriți ca animația să se bucure la nesfârșit, activați comutarea de animație a buclei . Puteți, de asemenea, să setați viteza de animație , să controlați direcția ( înainte sau înapoi ) și să selectați Normal sau Bounce pentru modul de redare .

În fila Design , puteți controla dimensionarea, alinierea, înălțimea, distanțarea și multe altele.

Deși nu puteți schimba culorile fișierelor dvs. Lottie din Divi 5, majoritatea site -urilor web Lottie vă permit să alegeți culori specifice și lățimi de accident vascular cerebral înainte de a le descărca.

După cum puteți vedea, adăugarea unui fișier Lottie pe site -ul dvs. Divi 5 durează câteva secunde și adaugă un pic de fler la paginile dvs. web, fără a vă face griji pentru performanță.

Exemple practice folosind modulul Lottie

Modulul Lottie din Divi 5 oferă o gamă largă de aplicații, adăugând flair pe site -urile web cu animații dinamice. De la îmbunătățirea paginilor de contact până la secțiunile eroi atrăgătoare, flexibilitatea sa se potrivește tuturor tipurilor de modele.

Cu opțiunile sale de integrare și personalizare perfectă, utilizatorii Divi pot crea experiențe antrenante, favorabile performanței pe întregul lor site.

Pagini de contact

Adăugarea de animații Lottie vă poate face paginile de contact mai antrenante. De exemplu, așezați modulele de buclă Lottie lângă orele de lucru, numerele de telefon și alte informații de contact pentru a crea o experiență interactivă și primitoare care stimulează conversațiile fără a încetini site -ul.

404 pagini

Întoarceți 404 de erori frustrante în momente memorabile cu animații lottie jucăușe. Adăugați o busolă rotativă sau o pictogramă de căutare animată pe pagina dvs. 404, împerecheată cu un mesaj scurt.

Utilizați setarea de animație buclă pentru a menține mișcarea continuă și declanșați -o pe încărcare pentru a atrage instantaneu atenția. Acest lucru face ca pagina 404 să se simtă mai puțin ca un punct mort și mai mult ca un punct de contact creativ.

Produse prezentate

Prezentați -vă produsele sau categoriile preferate de woo cu animații Lottie pentru a evidenția produsele de vânzare. De exemplu, așezați o animație Lottie Badge Lottie lângă un produs prezentat pentru a -l evidenția.

În primul rând, setați animația pentru a declanșa pe încărcare. Apoi, se activează pe măsură ce utilizatorii răsfoiesc, atrăgându -și ochii asupra produselor și stimulând apelul vizual.

Secțiuni de servicii

Aduceți -vă pe viață secțiunea Servicii cu animații Lottie care reprezintă vizual ofertele dvs. De exemplu, utilizați animații de buclă pentru agenția dvs. de marketing, ajustarea vitezei pentru a se potrivi cu tonul.

În plus, setați declanșarea vizualizării pentru a activa animațiile în timp ce utilizatorii explorează, asigurând o prezentare dinamică, profesională.

Secțiuni de eroi

Faceți secțiunile dvs. de eroi de neuitat cu animații lottie îndrăznețe care au setat tonul pentru site -ul dvs. web. În primul rând, adăugați o animație de fundal lină folosind modulul Lottie al lui Divi. Apoi, așezați -l în spatele rândurilor și modulelor cu setările de poziție ale Divi.

De exemplu, o animație modernă sau un efect de particule subtile poate adăuga profunzime site -ului dvs. cu puțin efort. Utilizați declanșatorul de încărcare pentru impact imediat și reglați modul de redare pentru a sări pentru un efect captivant.

Descărcați fișierele

Descărcați gratuit

Alăturați -vă buletinului informativ Divi și vă vom trimite prin e -mail o copie a pachetului de aspect final al paginii Divi Divi, plus tone de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmați -vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți pur și simplu adresa de e -mail de mai jos și faceți clic pe Descărcare pentru a accesa pachetul de aspect.

Descărcare

V -ați abonat cu succes. Vă rugăm să verificați adresa de e -mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de aspect Divi gratuit săptămânal!

Concluzie

În Divi 5, modulul Lottie simplifică adăugarea de animații ușoare, dinamice, pe site -uri web. Integrat perfect în constructorul vizual, permite animațiile profesionale cu un efort minim. Controalele flexibile, personalizarea extinsă și platformele de fișiere Lottie gratuite facilitează îmbunătățirea site -ului dvs.

Sunteți gata să încercați modulul Lottie? Împărtășește -ți gândurile sau creațiile în comentarii sau pe rețelele de socializare.