Wszystko, co musisz wiedzieć o module Lottie Divi 5

Moduł Lottie Divi 5 wprowadza na twoje strony dynamiczne, lekkie animacje, dzięki czemu twoje strony są bardziej wciągające i interaktywne. Właściwe elementy wizualne są kluczem do przyciągania uwagi i utrzymania zaangażowania odwiedzających. Dzięki module Lottie Divi 5 pozwala dodawać profesjonalne animacje, które są również przyjazne dla wydajności.

W tym poście wyjaśnimy wszystko, co musisz wiedzieć o module Lottie, w tym jego funkcje, proces konfiguracji, opcje dostosowywania i sposoby korzystania z niego. Wskoczmy!

Co to są pliki Lottie?

Animacje Lottie są lekką grafiką opartą na JSON, która renderuje skalowalne wektory. Dostarczają skalowalne wizualizacje bez dużych rozmiarów plików filmów lub GIF. Dzięki zdolności do łączenia wydajności z elastycznością Lottie zyskała popularność, dzięki czemu popularna jest nowoczesne projektowanie stron internetowych. W przeciwieństwie do tradycyjnych animacji, pliki Lottie używają danych JSON opartych na wektorach, zapewniając chrupiące wizualizacje i płynne odtwarzanie na wszystkich urządzeniach i rozmiarach ekranu.

Subskrybuj nasz kanał YouTube

W Divi 5 moduł Lottie płynnie integruje te animacje z konstruktorem wizualnym, umożliwiając użytkownikom dodawanie dynamicznych, nowoczesnych dotknięć witryn Divi za pomocą kilku kliknięć. Niezależnie od tego, czy podkreśla CTA, czy dodanie flaira do sekcji bohatera, moduł Lottie tworzy zawieranie animacji bez skomplikowanego kodowania bez wysiłku.

Dzięki module Lottie Divi 5 przekształca sposób, w jaki wnosisz ruch do swoich projektów stron internetowych, czyniąc je urzekającymi i wydajnymi.

Kluczowe funkcje

Moduł Lottie w Divi 5 to wszechstronne narzędzie wypełnione możliwościami, które ułatwiają tworzenie dynamicznych, zoptymalizowanych animacji. Oferuje kontrolę nad zachowaniem animacji, umożliwiając dostosowanie prędkości, kierunku, wyzwalaczy i innych. Rzućmy okiem na niektóre z jego kluczowych funkcji.

Łatwość użytkowania

Moduł Lottie w Divi 5 został zaprojektowany z myślą o prostocie, dzięki czemu jest przyjazny dla początkujących i dostępny dla użytkowników wszystkich poziomów umiejętności. Nie musisz być ekspertem w zakresie kodowania, aby dodać profesjonalne, przyciągające wzrok animacje do swojej witryny Divi.

Dzięki liczbie zasobów dostępnych online animacje pozyskiwania są łatwe. Platformy takie jak Lottiefiles i Lordicon oferują obszerne biblioteki bezpłatnych i premium Lottie Animations, od subtelnych ikon ładowania po żywą grafikę.

Dla osób poszukujących unikalnego dotyku możesz tworzyć niestandardowe animacje za pomocą narzędzi takich jak Adobe After Effects z wtyczką BodyMovin. Ta wtyczka eksportuje animacje jako pliki JSON kompatybilne z modułem Lottie. Niezależnie od tego, czy wybierzesz animacje gotowe, czy niestandardowe, proces jest prosty.

Opcje dostosowywania

Moduł Lottie w Divi 5 oferuje opcje dostosowywania, zapewniając kontrolę nad kilkoma aspektami pliku Lottie. W przypadku interaktywnych doświadczeń użyj animacji Trigger , aby wybrać, kiedy aktywować animację, na przykład na obciążeniu, gdy element wchodzi do rzutni, najeżdżającego, kliknięcia lub przewijania. Możesz włączyć animację pętli , aby umożliwić ciągły ruch w pliku Lottie, dostosować prędkość animacji , wybrać kierunek (do przodu lub do tyłu) i wybrać między normalną lub odbijaną w polu trybu odtwarzania .

Przesyłanie animacji JSON

Dodanie animacji Lottie do Divi 5 wymaga przesłania plików JSON, standardowego formatu plików Lottie. Jednak WordPress nie obsługuje natywnie przesyłania JSON w swojej bibliotece multimediów, więc musisz podjąć dodatkowe kroki, aby upewnić się, że możesz je przesłać.

Pierwszą opcją jest utworzenie motywu dziecięcego i dodanie fragmentu PHP do pliku Funkcje Funkcje motywu dziecka. Ta metoda jest lekka i zapewnia bezpieczne obsługę plików animacji. Alternatywnie możesz użyć wtyczki, takiej jak typy przesyłania plików, aby umożliwić przesyłanie JSON bez dotykania żadnego kodu, dzięki czemu jest idealny dla użytkowników, którzy wolą rozwiązanie plug-and-play. Aby uzyskać przewodnik krok po kroku w celu wdrażania dowolnej metody, sprawdź nasz artykuł wsparcia, który przeprowadza proces, aby skonfigurować witrynę Divi 5 dla przesyłania JSON.

Jak używać modułu Lottie w Divi 5

Dodanie animacji Lottie w Divi 5 jest proste. Utwórz lub pobierz animację Lottie ze źródła takiego jak Lottiefiles lub Lordicon. Znajdź i kliknij moduł Lottie w The Visual Builder, aby dodać go do strony.

Prześlij plik JSON lub zlokalizuj go w swojej galerii multimediów WordPress.

Wybierz animację wyzwalacza . Możesz ustawić go na AMAME przy obciążeniu, widoku, najechaniu, kliknięciu lub przewijaniu do animkim.

Jeśli chcesz, aby Twoja animacja Lottie miała interaktywny element, użyj przewijania modułu do wyzwalacza Animate .

Korzystanie z tego spustu stanowi świetny sposób na tworzenie dynamicznych i angażujących wrażeń użytkowników. Zamiast korzystać z animacji, gdy strona ładuje się, przewiń, aby animować, wiąże postęp animacji bezpośrednio do przewijania użytkownika. Gdy użytkownik przewija stronę, animacja postępuje ramka według ramki. To sprawia, że ​​animacja jest interaktywnym elementem, który sprawia, że ​​doświadczenie wydaje się bardziej dynamiczne.

Jeśli chcesz, aby animacja zapętliła się bez końca, włącz przełącznik animacji pętli . Możesz także ustawić prędkość animacji , kontrolować kierunek ( do przodu lub do tyłu ) i wybrać normalny lub odbicie dla trybu odtwarzania .

Na karcie Projekt możesz kontrolować rozmiar, wyrównanie, wysokość, odstępy i wiele innych.

Chociaż nie możesz zmienić kolorów plików Lottie w Divi 5, większość witryn Lottie pozwala wybrać określone kolory i szerokości skoku przed ich pobraniem.

Jak widać, dodanie pliku Lottie do witryny Divi 5 zajmuje kilka sekund i dodaje odrobinę flair do twoich stron internetowych, nie martwiąc się o wydajność.

Praktyczne przykłady za pomocą modułu Lottie

Moduł Lottie w Divi 5 oferuje szeroką gamę aplikacji, dodając styl do stron internetowych o dynamicznych animacjach. Od zwiększania stron kontaktowych po przyciągające wzrok sekcje bohaterów-jego elastyczność odpowiada wszelkiego rodzaju projektom.

Dzięki bezproblemowym opcjom integracji i dostosowywania użytkownicy DIVI mogą tworzyć angażujące, przyjazne dla wydajności doświadczenia na całej swojej stronie internetowej.

Strony kontaktowe

Dodanie animacji Lottie może sprawić, że Twoje strony kontaktowe są bardziej wciągające. Na przykład umieść zapętlanie modułów Lottie obok godzin pracy, numerów telefonów i innych danych kontaktowych w celu stworzenia interaktywnego i zachęcającego wrażenia, które zwiększa konwersje bez spowolnienia witryny.

404 stron

Zmień frustrujące 404 błędy w niezapomniane chwile z zabawnymi animatami Lottie. Dodaj wirujący kompas lub animowaną ikonę wyszukiwania do swojej strony 404, w połączeniu z krótką wiadomością.

Użyj ustawienia animacji pętli, aby utrzymać ciągły ruch, i uruchom go na obciążeniu, aby natychmiast zwrócić uwagę. To sprawia, że ​​strona 404 wydaje się mniej jak ślepy zaułek i bardziej jak kreatywny punkt kontaktowy.

Wyposażone produkty

Zaprezentuj swoje ulubione produkty lub kategorie Woo z animacje Lottie, aby wyróżnić produkty w sprzedaży. Na przykład umieść animację Lottie, obok wyświetlonego produktu, aby go podkreślić.

Najpierw ustaw animację, aby uruchomić obciążenie. Następnie aktywuje się podczas przeglądania użytkowników, wciągając oczy na produkty i zwiększając atrakcyjność wizualną.

Sekcje usług

Wprowadź sekcję Usług do animacji Lottie, które wizualnie reprezentują Twoją ofertę. Na przykład użyj animacji zapętlanych dla swojej agencji marketingowej, dostosowując prędkość, aby dopasować ton.

Ponadto ustaw wyzwalacz widoku, aby aktywować animacje, gdy użytkownicy eksplorują, zapewniając dynamiczną, profesjonalną prezentację.

Sekcje bohaterów

Spraw, aby Twoje sekcje bohaterów są niezapomniane z odważnymi animacjami Lottie, które nadają ton Twojej witrynie. Najpierw dodaj płynną animację tła za pomocą modułu Lottie Divi. Następnie umieść go za rzędami i modułami z ustawieniami pozycji Divi.

Na przykład płynąca, nowoczesna animacja lub subtelny efekt cząstek może dodać głębokości do Twojej witryny przy niewielkim wysiłku. Użyj spustu na obciążeniu, aby uzyskać natychmiastowy uderzenie i dostosuj tryb gry, aby odbijać się, aby urzekający efekt.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a my wysyłamy Ci e -mailem kopię pakietu układu Ultimate Divi Landing Page, a także ton innych niesamowitych i bezpłatnych zasobów, wskazówek i wskazówek. Śledź dalej, a będziesz mistrzem Divi w krótkim czasie. Jeśli jesteś już subskrybowany, po prostu wpisz swój adres e -mail poniżej i kliknij Pobierz, aby uzyskać dostęp do pakietu układu.

POBIERAĆ

Udało ci się zasubskrybować. Sprawdź swój adres e -mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układu Divi!

Wniosek

W Divi 5 moduł Lottie upraszcza dodanie lekkich, dynamicznych animacji do stron internetowych. Bezproblemowo zintegrowane z wizualnym budowniczym, umożliwia profesjonalne animacje z minimalnym wysiłkiem. Elastyczne elementy sterujące, obszerne dostosowywanie i bezpłatne platformy plików Lottie ułatwiają ulepszenie Twojej witryny.

Gotowy do wypróbowania modułu Lottie? Podziel się swoimi przemyśleniami lub dziełami w komentarzach lub w mediach społecznościowych.