Proste metody, instrukcje krok po kroku, porady i filmy...

Elementor PRO 2.10 Animacje Lottie i Multi Step Forms

Krzysztof Wojteczko
Krzysztof Wojteczko
Ostatnia aktualizacja: 23 lipca 2020
Elementor PRO 2.9.10

Elementor Pro w najnowszej wersji, to przede wszystkim dwie nowe funkcje: Lottie Animations i Multi Step Forms. Na temat animacji Lottie jakiś czas temu nagrałem film na kanale YouTube, ale wtedy nie wiedziałem jeszcze, że możliwość renderowania pojawi się natywnie w Elementorze. W dalszej części artykułu film dla tych wszystkich z Was, którzy nie mają Elementora PRO i nie na razie planują jego zakupu, a chcieliby korzystać w nim z tego typu animacji.

Teraz jednak przyglądamy się nowym możliwościom Elementora PRO. Na pierwszym filmie możesz obejrzeć jak zachowują się nowe możliwości.

Lottie Animations

Zacznijmy może od tego czym są animacje Lottie. Najprościej temat ujmując to animacje, które można wyeksportować z programie Adobe Affter Effects do formatu JSON, a które mogą być renderowane przez odpowiednie biblioteki i wyświetlane na naszej stronie jako ruchome obrazy. Przykład:

Popularnym miejscem, gdzie znajdziesz całkiem pokaźną bazę tego typu animacji jest serwis LottieFiles. Wystarczy się zarejestrować, aby otrzymać możliwość pobrania plików json. Potem pozostaje już tylko wykorzystać możliwości nowej wersji Elementora PRO. Ale po kolei.

Pierwsze co trzeba zrobić aby osadzić animację na stronie, to wykorzystać nowy widget Lottie.

Widget Elementora PRO Lottie

Kolejny krok, to załadowanie pobranego wcześniej pliku json lub wybór takiego, który wcześniej trafił do biblioteki mediów WordPress’a. Jeśli nie chcesz ładować pliku bezpośrednio ze swojej strony możesz także wprowadzić jego adres URL.

Wybierz źródło pliku json

Dodatkowo w tym miejscu masz także możliwość odpowiedniego wyrównania osadzonej animacji, dorzucenia jej podpisu, a także adresu URL gdzie ma być odesłany użytkownik strony po kliknięciu na animacji. Jednak najwięcej możliwości konfiguracji masz rozwijając zakładkę Ustawienia:

Dodatkowe ustawienia widgetu lottie

Wyzwalacze (Trigger) pozwalają zdecydować o warunkach jakie muszą wystąpić aby animacja się rozpoczęła. Viewport, OnClick, OnHover i Scroll pozwalają na bardzo dużo na tym polu. Na powyższym filmie możesz obejrzeć jak zachowuje się wyzwalacz scrollowania. Gdy przewijasz stronę animacja trwa, gdy przestajesz ona również zamiera. Fajna zabawa 🙂

Możesz zapętlić animację jeśli chcesz aby trwała w nieskończoność lub żeby zapętliła się tylko określoną ilość razy. Animacja, którą umieściłem powyżej ma właśnie taką niekończącą się pętlę aktywną, dzięki czemu nigdy się nie kończy.

Idąc dalej masz także możliwość uruchomienia animacji od tyłu, co pewnie nie będzie często wykorzystywane, ale pomysłowi designerzy z pewnością zrobią z tej opcji nie raz, nie dwa razy użytek 🙂

Ten rodzaj animacji cieszy się coraz większym zainteresowaniem i nie bez powodu. Wykorzystanie animowanych gifów zwłaszcza jeśli zależy nam na jakości wiąże się z koniecznością wrzucania ciężkich plików. Wykorzystując Lottie, animacje nie tylko są świetnej jakości i skalowalne, ale także znacznie lżejsze.

Jeśli nie masz Elementora PRO, nie martw się ponieważ również w bezpłatnej wersji także możesz łatwo osadzić tego typu animacje. Do tego celu potrzebujesz instalacji dodatkowej wtyczki. Przykład znajdziesz na poniższym filmie: 

Multi Step Forms

Na tę funkcję długo czekałem. Zawsze irytowało mnie gdy chcąc uruchomić formularz z kilkoma krokami trzeba było rozglądać się za rozszerzeniami, które taką możliwość oferują. Od teraz nie będzie to już konieczne ponieważ Elementor PRO pozwoli na budowę formularzy składających się z dowolnej ilości etapów.

Wykorzystujesz standardowy widget formularza i jedyne co musisz zrobić, to dodać dodatkowe pole rodzaju “Step” (Krok).

Widget formularza

Wszystkie inne pola jakie umieścisz poniżej będą widoczne w kolejnym kroku, a kroków możesz dodać wiele. Jest to przydatne zwłaszcza wtedy, gdy formularz jest dość rozbudowany przez co może zniechęcać do jego wypełnienia. Jeśli go rozbijesz na kilka mniejszych etapów podświadomie stanie się bardziej przyjazny. Oczywiście nie ma to większego sensu jeśli dodajesz formularz kontaktowy z 3 polami, ale jeśli tych pól masz więcej, np. kilkanaście, wtedy wykorzystanie kroków może wpłynąć pozytywnie na współczynnik konwersji, czyli na to ile ostatecznie osób zdecyduje się go wypełnić.

Teraz pozostaje już tylko czekać na kolejną funkcję, a mianowicie na warunki. Tego wciąż mi brakuje.

Podsumowanie

Gdy zacząłem się dłużej zastanawiać, to nie wiem z której nowej funkcji cieszę się bardziej. Chyba częściej wykorzystuję na swoich stronach animacje lottie niż złożone formularze, ale zapewne te również nie raz użyję w prowadzonych kampaniach.

To co jest jednak dla mnie ważne i myślę że dla większości właścicieli stron działających na WordPressie także, to możliwość odstawienia na bok kolejnych wtyczek. Z każdą następną wersją Elementora staje się on coraz wszechstronniejszy. Tak trzymać 🙂

Jeśli wciąż zastanawiasz się nad Elementorem PRO myślę, że coraz więcej przemawia za tym aby w końcu zdecydować się na jego zakup. Informacje znajdziesz pod adresem https://jzswp.pl/elementor

Więcej tekstów związanych z Elementorem

PODAJ DALEJ!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

Autor

Krzysztof Wojteczko

Krzysztof Wojteczko

Szkoleniowiec, miłośnik nowych technologii, WordPress'a i wszystkiego co ma związek z marketingiem internetowym. Swoją pierwszą stronę stworzył w 1996 roku, a od 2003 roku prowadzi agencje marketingowe i hostingowe.

Może Cię zainteresować także

Twój Komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Przewiń do góry

Zaczekaj!

Planujesz uruchomienie strony, bloga, a może sklepu internetowego?

Jeśli tak, to nie możesz tego przegapić! Zapraszam Cię na bezpłatny Kurs WordPress z nagrodami, który pomoże Ci zrobić pierwszy, ważny krok na drodze do własnej strony internetowej.

Zapisując się akceptujesz naszą Politykę Prywatności

ODBIERZ prezent!

KURS wordpress!