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 przejdź do ustawień landing page, klikając w prawym panelu opcji ikonę koła zębatego,
  • otwórz kartę "Własne style" 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 i zaznacz element, który chcesz animować - w tym przykładzie jest to element tekstowy. W prawym panelu opcji kliknij opcje "Zaawansowane",
  • 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?