Produkt

Twórz, publikuj i optymalizuj strony w intuicyjnym kreatorze “drag&drop”, bez znajomości kodowania

Przyspiesz proces tworzenia dzięki ponad 400 w pełni edytowalnym szablonom stron, pop-upów i sekcji

Śledź mikrokonwersje bezpośrednio w Dashboardzie i analizuj eventy za pomocą mapy wizualnej strony

Łącz się z ponad 170 integracjami, aby pracować szybciej, wydajniej i tak jak lubisz

Zwiększaj sprzedaż i konwersje dzięki ekspozycji produktów i płynnemu procesowi zakupowemu

Korzystaj z niezawodnej i bezpiecznej platformy, płynnie obsługującej miliony wizyt miesięcznie

Zasoby

Poznaj digital marketing! Dowiedz się, jak zwiększać konwersje na stronach i zaangażowanie klientów

Instrukcje konfiguracji i wskazówki, dzięki którym postawisz pierwsze kroki w Landingi i zoptymalizujesz swoje strony

Darmowy kurs dla twórców landing page’y! Zostań mistrzem stron docelowych i poznaj wszystkie ich sekrety

Masz pytanie? Jesteśmy do Twojej dyspozycji

Umów się na indywidualną rozmowę i odkryj, co może dać Ci nasza platforma

Zleć projekt landing page’a lub import istniejącej strony z innej platformy do Landingi

Home Help Center Animowanie elementów

Animowanie elementów

SPIS TREŚCI

Na swoim landing page’u możesz wykorzystać animacje, dodając odpowiedni kod CSS i JavaScript oraz przypisując elementom klasy.

Animacje pojawią się, kiedy odwiedzający przewinie stronę do pozycji animowanego elementu.

Pamiętaj, że strony typu landing page nie powinny być przeładowane animacjami. 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 hasła. Poniższej możesz zobaczyć przykład animacji.

Dodaj kody CSS i JavaScript

1. Zaloguj się na swoje konto w platformie Landingi i przejdź do edytora landing page’a, na którym chcesz dodać animację.

2. W edytorze wejdź w Ustawienia strony w toolbarze po prawej stronie i kliknij w przycisk Dodaj własny CSS.

Podczas edycji do Ustawień strony wrócisz, klikając na strzałkę:

3. Dodaj poniższy kod CSS na samej górze okna (jeśli posiadasz już jakieś kody CSS) i zapisz zmiany.

@import 'https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/v2/animate.min.css';

4. Jeżeli chcesz zapętlić animację, dodaj poniższy kod pod kodem przed chwilą dodanym – zamień nazwa_animacji na wybraną nazwę animacji.

.nazwa_animacji {
animation-iteration-count: infinite;
}

5. Opublikuj landing page’a i wejdź w Dashboard i zakładkę Kody JavaScript. Kliknij w Dodaj kod. Do Kodów JavaScript możesz przejść także bezpośrednio z edytora:

6. W nowym oknie wklej poniższą linijkę kodu na Stronie głównej landing page’a, na pozycji Body – na górze, a na koniec kliknij Dodaj.

<script src="https://s3-eu-west-1.amazonaws.com/landingi-ftp/script/wow/wow.min.js"></script><script>new WOW().init();</script>

Bez względu na ilość animacji na landing page’u kod CSS i JavaScript dodajesz tylko raz.

Dodaj klasę do wybranych elementów na landing page’u

Po dodaniu kodu CSS i Javascript możesz wybrać, w jaki sposób i które elementy landing page’a chcesz animować.

1. Wybierz animację, korzystając np. ze strony Animate.style. Skopiuj jej nazwę.

WAŻNE: Niestety niektóre animacje mogą nie zadziałać na Twoim landing page’u. Poniżej znajdziesz listę niedziałających animacji:

  • shakeX
  • shakeY
  • heartBeat
  • lightSpeed
  • lightSpeedInRight
  • lightSpeedInLeft
  • lightSpeedOutRight
  • lightSpeedOutLeft
  • jackInTheBox
  • fadeInTopRight
  • fadeInTopLeft

2. Przejdź ponownie do edycji swojego landing page’a i zaznacz element, który chcesz animować – to może być obraz, ikona lub tekst. Nie animuj przycisków, które są wyzwalaczami pop upów i lightboksów.

3. W pasku bocznym odszukaj zakładkę Inne i w polu Klasy wpisz nazwę animacji poprzedzoną komendą “wow” i jedną spacją, np.: wow flipInX. Powtórz ten krok dla wszystkich elementów, które chcesz animować.

PAMIĘTAJ: Kod w polu Klasy rozróżnia małe i wielkie litery, dlatego nazwy efektów należy skopiować dokładnie.

4. Opublikuj swojego landing page’a.

Sprawdź, czy animacja wyświetla się zgodnie z Twoimi oczekiwaniami.