Jak korzystać z animacji Lottie w WordPressie

Włączenie animacji do witryny WordPress to świetny sposób na ożywienie zmęczonej strony internetowej i utrzymanie zaangażowania odwiedzających przez cały czas spędzony w witrynie. Łatwym i skutecznym sposobem na to jest użycie animacji lottie: wysokiej jakości, lekkich animacji.

Animacje Lottie zyskują na popularności z wielu powodów, a jeśli jesteś gotowy, aby wskoczyć na modę i urozmaicić swoją witrynę, mogą być właśnie dla Ciebie.

Istnieje kilka różnych sposobów tworzenia tych animacji i płynnego dodawania ich do witryny WordPress.

Czym są animacje Lottie?

Lottie to biblioteka dla systemów Android, iOS, Web i Windows, która renderuje animacje After Effects i umożliwia eksportowanie danych animacji jako plików JSON, w przeciwieństwie do typowego typu pliku graficznego. Krótko mówiąc, mogą łatwo zastąpić statyczny zasób czymś zabawnym i wciągającym.

To rozwiązanie typu open source zostało po raz pierwszy wprowadzone przez zespół AirBnB, ale szybko zyskuje na popularności wśród projektantów i animatorów na różnych rynkach. Jedną z wielkich zalet korzystania z animacji lottie w witrynie WordPress jest to, że rozmiar pliku jest bardzo mały w porównaniu z animacją GIF lub plikami mp4. Dodatkowo elastyczny format animacji pozwala przeglądarce obsłużyć renderowanie.

Wiele możliwości wykorzystania animacji lottie to jeden z powodów, dla których są one tak popularne. Możesz używać animacji loterii jako animowanych nagłówków, przycisków, przyciągających wzrok elementów graficznych i nie tylko. Możesz także ustawić animację, która ma się uruchamiać, gdy odwiedzający będą przewijać, najeżdżać lub klikać stronę internetową. Ich wszechstronność i łatwa implementacja zarówno w witrynach B2C, jak i B2B sprawiają, że są to przełomowy sposób na poprawę jakości i ogólnego wyglądu Twojego projektu internetowego.

Tworzenie animacji Lottie

Rozważając, czy dodać animacje loterii do swojej witryny, najpierw musisz zdecydować, czy zastosować podejście magazynowe, czy niestandardowe. Każda ma swoje wady i zalety, więc dobrze jest rozważyć obie opcje przed podjęciem decyzji.

Przy każdym rodzaju animacji mniej znaczy zawsze więcej. Włączając animowany element do przeprojektowania strony internetowej, zastanów się, jaką rolę pełni ta animacja w podróży klienta.

Niestandardowe animacje Lottie

Jeśli szukasz niestandardowej animacji loterii dla swojej witryny, musisz współpracować z animatorem lub projektantem, który specjalizuje się w programie Adobe After Effects i jest zaznajomiony z tego typu animacją.

Wiele animacji lottie wykorzystuje styl ilustracyjny, więc zanim przejdziesz dalej, musisz zdecydować, czy pasuje on do marki i stylu witryny. Po wybraniu elementów graficznych i efektów animacji animator będzie musiał utworzyć niestandardowe animacje w programie Adobe After Effects i wyeksportować je jako animacje lottie, korzystając z rozszerzenia After Effects. Spowoduje to wyrenderowanie wysokiej jakości animacji, którą można łatwo zaimplementować w witrynie.

Jednym z powodów, dla których animacje loterii są wysokiej jakości, jest to, że proces tworzenia eliminuje potrzebę odtworzenia przez programistę lub inżyniera animacji projektanta w formacie internetowym. Oferuje gotowe do użycia rozwiązanie, które sprawia, że ​​wdrażanie animacji jest łatwiejsze niż kiedykolwiek.

Animacje Stock Lottie

Animacje Lottie to świetna opcja, jeśli chcesz przyspieszyć swój nowy projekt. Możesz poszukać istniejącej animacji loterii i w razie potrzeby dostosować ją do swojej marki.

Lottie Files to strona internetowa, na której można znaleźć wiele darmowych i płatnych animacji loterii. Witryna oferuje również narzędzie do edycji, w którym można edytować kolory animacji przed pobraniem. Jeśli musisz zmienić dużą liczbę kolorów w animacji, wykwalifikowany animator lub projektant może również użyć programu Adobe After Effects, aby wprowadzić te zmiany bardziej efektywnie i wyeksportować animację.

Jeśli chcesz zaimplementować w witrynie wiele animacji lub masz bardzo specyficzną estetykę witryny, znalezienie wielu opcji magazynowych we właściwym stylu może być trudne. W takim przypadku możesz rozważyć zatrudnienie animatora, który stworzy więcej animacji, które pasują do Twojej witryny i pasują do już wybranych opcji giełdowych.

W przypadku dowolnego typu animacji lub grafiki stockowej, pamiętaj o wymaganiach licencyjnych dla animacji stockowych i upewnij się, że animacja zostanie przesłana do oryginalnego projektanta, jeśli jest to wymagane.

Dodawanie animacji Lottie do WordPress

Jest to dość płynny proces dodawania animacji loterii do witryny WordPress. Możesz użyć niestandardowego widżetu HTML, aby dodać kod animacji do witryny, lub skorzystać z wtyczki WordPress, aby dodać animację.

Niestandardowy widżet HTML

Doświadczony programista WordPress może użyć małej biblioteki JavaScript i niestandardowego widżetu HTML, aby dodać animacje loterii do witryny. Zaczniesz od przesłania skryptu lottie.min.js wraz z plikiem animacji .json i wszelkimi zasobami graficznymi do folderu motywu. Następnie do widżetu należy dodać mały fragment kodu JS, aby zainicjować skrypt Lottie, który ładuje plik animacji .json do żądanego kontenera div.

To uproszczone podejście może doskonale pasować do większości witryn WordPress, ponieważ pozwala uniknąć obciążania witryny dodatkowymi wtyczkami WordPress. Dodając animacje loterii, możesz również kontrolować, czy animacja się zapętla, ile razy się zapętla i co może wywołać animowany element na stronie.

Większość wtyczek do dodawania animacji loterii bez pomocy programisty wymaga kreatora stron Elementor, więc niestandardowe podejście HTML działa lepiej, jeśli używasz motywu lub wtyczki do tworzenia stron innych niż Elementor.

Dodawanie elementów do witryny bez wtyczki jest również lepsze dla szybkości i wydajności witryny, ponieważ dodawanie coraz większej liczby wtyczek obciąża witrynę.

Opcje wtyczki WordPress

Jeśli nie chcesz, aby programista zrobił to w niestandardowy sposób, inną opcją dodania widżetów lottie do swojej witryny jest użycie wtyczki WordPress.

Elementor Pro – Widżet Lottie

Elementor to kreator stron dla WordPress z funkcjami przeciągania i upuszczania, a licencja Elementor Pro zawiera widżet Lottie. Za pomocą tego widżetu możesz dodawać animacje lottie bez kodu oraz dostosowywać wymiary i zachowanie animacji. Ta wtyczka wygodnie łączy się ze stroną internetową Lottie Files, dzięki czemu możesz łatwo wybrać opcje animacji stockowych bezpośrednio ze strony lub przesłać własne kreacje.

Bloki Gutenberga – Ultimate Addons

Jeśli korzystasz z edytora Gutenberg na swojej stronie, wtyczka Ultimate Addon dla Gutenberga może być dobrym wyborem do dodawania animacji loterii za pomocą wtyczki. Edytor Gutenberga jest częścią rdzenia WordPressa od czasu wydania WordPress 5.0, jednak nie jest najpopularniejszy. Wiele witryn nadal korzysta z klasycznego edytora lub innych kreatorów stron, takich jak Site Origin, Elementor lub Beaver Builder, żeby wymienić tylko kilka.

Niemniej jednak jest to realna opcja. Ultimate Addons dla Gutenberga to dobrze sprawdzona wtyczka i oferuje wiele wspaniałych funkcji, w tym opcję dodawania animacji loterii i kontrolowania zaawansowanych opcji, takich jak szybkość animacji i wyzwalanie.

Dodatkowe wtyczki WordPress

W katalogu WordPress dostępne są dodatkowe wtyczki do dodawania i dostosowywania animacji loterii. Pamiętaj, że niektóre wtyczki wymagają, aby Twoja witryna była zbudowana i korzystała z Elementora, np. Dodatki Premium dla Elementora i Dodatek Elementskit dla Elementora. Istnieją również wtyczki przeznaczone dla innych motywów i kreatorów WordPress, takich jak motyw Divi lub bloki Gutenberga.

Czas na animację

Animacje Lottie są niezwykle dostępne dla każdego, kto ma witrynę WordPress. Niezależnie od tego, czy potrzebujesz niestandardowych animacji, animacji stockowych, animacji bohaterów czy przewijanych, zasoby są na wyciągnięcie ręki.

Możesz być kreatywny w tym, jak chcesz, aby Twoje animacje wyglądały i co chcesz, aby robiły, a kiedy zaczniesz odkrywać możliwości animacji loterii, zaczniesz zdawać sobie sprawę, jak wiele mogą one wnieść do jakości Twojej witryny .