Jak dodać animacje Lottie w WordPress (4 proste kroki)

Używanie animacji Lottie w WordPress może być świetnym sposobem na urozmaicenie stron. Zazwyczaj są lekkie i można je dostosowywać, dzięki czemu mogą pomóc w tworzeniu atrakcyjnych treści bez szkody dla doświadczenia użytkownika (UX). Być może jednak szukasz bezstresowego sposobu dodania ich do swojej witryny.

Na szczęście proces ten jest prostszy niż myślisz. Korzystając z wtyczki, takiej jak Otter Blocks, możesz dodawać i dostosowywać animacje Lottie za pomocą zaledwie kilku kliknięć. Będziesz także mógł ustawić warunki widoczności, aby grały we właściwym czasie.

Wprowadzenie do animacji Lottie

Lottie to format plików typu open source do animacji internetowych. Pozwala tworzyć niestandardowe animacje dla Twojej marki i wykorzystywać je na swojej stronie internetowej:

Oczywiście zawsze możesz zdecydować się na pliki GIF, ale te pliki mogą obciążyć Twoją witrynę. Animacje Lottie są znacznie mniejsze niż GIF-y. Dlatego mogą pomóc Ci uatrakcyjnić Twoją witrynę, zachowując jednocześnie UX i zapewniając szybki czas ładowania.

Ponadto animacje Lottie mają wiele opcji dostosowywania. Sama biblioteka jest obszerna i zapewnia dostęp do tysięcy elementów, postaci i ilustracji. Możesz jednak również zamieniać kolory, zmieniać ustawienia wyświetlania i dodawać warunki widoczności.

Niestandardowe animacje mogą pomóc Ci zaimponować odwiedzającym. Ponadto mogą sprawić, że Twoja witryna będzie wyglądać świeżo i niepowtarzalnie.

Jak dodać animacje Lottie do WordPressa (w 4 krokach)

Teraz, gdy wiesz nieco więcej o Lottie Animations, spójrzmy, jak dodać je do swojej witryny WordPress:

Krok 1: Zainstaluj i aktywuj Otter Blocks

Istnieje wiele sposobów dodawania animacji Lottie w WordPress. Na przykład możesz użyć HTML i JavaScript. Jednak ta metoda może być dość skomplikowana.

Alternatywnie możesz użyć wtyczki animacji Lottie, chociaż może ona nie być kompatybilna ze wszystkimi programami budującymi strony. Poza tym nie oferuje zbyt wielu opcji stylistycznych.

Najłatwiejszym sposobem dodania Lottie Animations do swojej witryny jest użycie wtyczki takiej jak Otter Blocks:

Ta wtyczka dodaje nowe bloki treści i szablony do Twojej witryny, w tym blok animacji Lottie. Rozszerza również funkcjonalność Edytora bloków o niestandardowe CSS, animacje, warunki widoczności i nie tylko. Dlatego pomaga w wydajniejszym projektowaniu stron i zmniejsza zapotrzebowanie na narzędzia do tworzenia stron.

Jeśli dokonasz aktualizacji do Otter Blocks Pro, uzyskasz dostęp do zaawansowanych funkcji, takich jak specjalne bloki WooCommerce i dodatkowe ustawienia stylistyczne. Jednak nie potrzebujesz wersji Pro, aby korzystać z funkcji animacji Lottie.

Jeśli chcesz skorzystać z darmowej wersji, przejdź do Wtyczki > Dodaj nowy na pulpicie nawigacyjnym WordPress i wyszukaj „Otter Blocks”:

Następnie kliknij Zainstaluj > Aktywuj . Powinieneś teraz zobaczyć wybór nowych bloków w Edytorze bloku.

Krok 2: Wybierz animację z biblioteki Lottie

Teraz, gdy masz skonfigurowane Otter Blocks w swojej witrynie, możesz udać się do biblioteki Lottie, aby wybrać animację. Aby uzyskać dostęp do projektów, musisz utworzyć bezpłatne konto.

Po utworzeniu profilu przejdź do Discover i wybierz Bezpłatne gotowe do użycia animacje :

Tutaj możesz przeglądać bibliotekę elementów Lottie, których można używać na stronach internetowych, w aplikacjach i mediach społecznościowych:

Gdy znajdziesz animację, której chcesz użyć, kliknij projekt. Pojawi się wyskakujące okienko, w którym możesz dokonać pewnych zmian w wyglądzie animacji:

Na przykład możesz dostosować szybkość animacji i zmienić kolor tła. Jeśli klikniesz Edytuj kolory warstw , zostaniesz przeniesiony do edytora Lottie:

Tutaj możesz dostosować kolor dowolnej części projektu. Po prostu kliknij sekcję elementu, którą chcesz zmienić, przejdź do opcji Wszystkie kolory i użyj próbnika kolorów, aby zastosować nowy ton:

Jeśli wprowadzisz zmianę, która Ci się nie podoba, kliknij strzałkę Cofnij w lewym górnym rogu ekranu.

Krok 3: Wklej adres URL animacji Lottie do Otter Block lub prześlij plik Lottie

Gdy będziesz zadowolony ze swojego projektu, masz dwie opcje dodania go do WordPress:

1. Możesz skopiować adres URL animacji Lottie, aby dodać wersję z serwera LottieFiles do swojej witryny. Znajdziesz to w wyskakującym okienku animacji, tuż pod projektem.
2. Możesz pobrać gotowy plik LottieFile na swój komputer, klikając przycisk Pobierz w prawym górnym rogu i wybierając format dotLottie . Umożliwi to hostowanie pliku na serwerze.

Następnie wróć do swojej witryny WordPress i otwórz stronę lub post, na którym chcesz wstawić animację.

Kliknij, aby dodać nowy blok i wyszukaj „Animacje Lottie”:

Dodaj blok do swojej strony. Następnie wybierz jedną z tych opcji:

• Wstaw z adresu URL – użyj tej opcji, jeśli chcesz wprowadzić link do pliku Lottie na serwerach LottieFiles. Wszystko, co musisz zrobić, to wkleić link Lottie Animation URL , który skopiowałeś ze strony LottieFiles.
• Prześlij – użyj tego, jeśli pobrałeś rzeczywisty plik dotLottie z LottieFiles. Następnie możesz przesłać ten plik do swojej witryny WordPress.

Następnie naciśnij Enter , a animacja pojawi się na stronie:

Możesz teraz zapisać zmiany i przejść do ostatniego kroku.

Krok 4: Dostosuj swoją animację za pomocą bloków wydry

Teraz, po dodaniu animacji Lottie do WordPress, możesz dostosować projekt i układ. W ustawieniach blokowania zobaczysz wybór opcji wyświetlania.

W sekcji WYZWALANIE możesz wybrać między automatycznym odtwarzaniem , przewijaniem , najechaniem kursorem lub kliknięciem . Animacja nie zostanie odtworzona, dopóki jedna z tych czynności nie zostanie wykonana na stronie:

Masz również opcję przełączania animacji, aby odtwarzać ją w pętli. Ponadto możesz dostosować prędkość animacji za pomocą suwaka, odwrócić kierunek i zmienić szerokość projektu.

Jeśli chcesz zmienić kolor tła, kliknij kartę Tło . Tutaj możesz wybrać jedną z domyślnych opcji Solid , użyć próbnika kolorów lub wybrać tło gradientowe:

Jeśli przejdziesz do Warunków widoczności , będziesz mógł skonfigurować animację tak, aby pojawiała się tylko w określonych okolicznościach:

Na przykład możesz chcieć, aby blokada była widoczna tylko dla zalogowanych użytkowników lub aby była wyświetlana w określonym dniu. Aby to zrobić, kliknij Dodaj grupę reguł . Następnie wybierz strzałkę, aby otworzyć ustawienia:

W sekcji CONDITION użyj menu rozwijanego, aby skonfigurować ustawienia widoczności. Możesz dodać więcej niż jeden warunek i utworzyć dodatkowe grupy reguł.

Zacznij korzystać z animacji Lottie w WordPress

Podsumowując, oto cztery kroki, aby dodać animacje Lottie w WordPress:

Aby uzyskać jeszcze więcej sposobów na ulepszenie natywnego edytora WordPress, możesz sprawdzić naszą pełną kolekcję najlepszych wtyczek blokowych WordPress.

Czy masz jakieś pytania dotyczące dodawania animacji Lottie w WordPress? Daj nam znać w sekcji komentarzy poniżej!