Animacje, które wykorzystasz na swoim landingu, będą pojawiać się na ekranie w momencie, kiedy użytkownik przewinie stronę do pozycji animowanego elementu. 

Pamiętaj, że strony typu landing page nie powinny być przeładowane elementami animowanymi. Ruch odciąga uwagę od treści i samego przekazu strony. Warto animować elementy, które zachęcają do podjęcia akcji np. strzałki, które wskazują CTA lub przyciski.
Poniższy przykład animacji ma na celu jedynie zaprezentowanie możliwości animacji. Nie zalecamy animować landing page w takim stopniu, jak pokazujemy to poniżej.

1. Dodawanie animacji.

Aby dodać animację do swojego landinga, przejdź proszę poniższe kroki.

  • Wejdź w "Edycję" landinga, któremu chcesz dodać animację.
  • W edytorze wybierz "Ustawienia strony" z prawego panelu opcji.
  • Otwórz kartę "Własny CSS" i dodaj poniższy kod na samej górze okna (jeśli posiadasz już jakieś kody w tej zakładce).
@import 'https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/animate.css';
  • Następnie, opublikuj swój landing page i przejdź z powrotem do kampanii - po przejściu wejdź w zakładkę "Kody JavaScript", kliknij "Dodaj kod" po czym skopiuj i wklej w pole poniższą linijkę kodu. "Zapisz i zamknij".
<script src="https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/wow.min.js"></script><script>new WOW().init();</script>
  • W następnym kroku, przejdź z powrotem do edytora tego landinga i zaznacz element, który chcesz animować - w tym przykładzie jest to tekst.
  • W prawym panelu opcji tego tekstu, w polu "Klasy", wpisz wybraną nazwę animacji CSS poprzedzoną komendą 'wow' i jedną spacją, np.: 

                                                               wow flipInX

PAMIĘTAJ!

Kod w polu "Klasy" rozróżnia małe i wielkie litery, dlatego nazwy efektów należy zawsze przepisywać dokładnie tak, jak wyglądają w oryginale.


  • Jako ostatnie - opublikuj swojego landinga, wprowadzone rozwiązanie wizualne będzie już widoczne 😉

W razie pojawienia się dodatkowych pytań, napisz do nas na support@landingi.com.

Did this answer your question?