Jak dodać animację przewijania w witrynie WordPress?

Efekty i animacje pomagają ożywić strony internetowe. Nie tylko sprawiają, że wyglądają oszałamiająco, ale także poprawiają wygodę użytkownika, co jest jednym z najważniejszych sygnałów rankingowych wyszukiwarek Google.

Być może myślałeś, że to niesamowite, ale tworzenie nie mieści się w twojej lidze. Ale faktem jest, że jest to nie tylko możliwe, ale możesz stworzyć animację przewijania swojej witryny WordPress za pomocą zaledwie kilku kliknięć.

Na tym blogu pomożemy Ci dowiedzieć się, jak tak łatwo dodać animację przewijania w WordPress.

Bądźcie więc czujni i przeczytajcie post do końca.

Ale wcześniej pozwól nam zrozumieć, jakie są zalety dodania animacji przewijania w WordPress.

Korzyści z dodania animacji przewijania w WordPress

Jeśli nadal zastanawiasz się, dlaczego warto dodać animację przewijania w WordPressie, sprawdź zalety wymienione poniżej:

1. Większe zaangażowanie użytkowników

Animacje przewijania przyciągają uwagę i utrzymują zaangażowanie odwiedzających podczas przeglądania Twojej witryny. Dynamiczne elementy, takie jak zanikający tekst lub ruchome obrazy, tworzą interaktywne wrażenia, zachęcając użytkowników do dalszego przewijania i spędzania większej ilości czasu na Twoich stronach.

2. Lepsze doświadczenie użytkownika (UX)

Animacje mogą prowadzić użytkownika przez treść w płynny i intuicyjny sposób. Stopniowe ujawnianie informacji lub wyróżnianie kluczowych sekcji powoduje, że nawigacja staje się łatwiejsza i przyjemniejsza, poprawiając ogólną satysfakcję użytkownika.

3. Zwiększona atrakcyjność wizualna

Dodanie animacji przewijania nada Twojej witrynie nowoczesny i profesjonalny wygląd. Subtelne przejścia i animacje mogą sprawić, że Twój projekt będzie bardziej dynamiczny, pomagając Twojej witrynie wyróżnić się na tle konkurencji.

4. Możliwości opowiadania historii

Animacje przewijania pozwalają na kreatywne opowiadanie historii. Możesz prezentować informacje w logicznej, atrakcyjnej wizualnie sekwencji, co pomoże skuteczniej przekazać wiadomość i utrzymać zainteresowanie odwiedzających Twoją treścią.

5. Interakcje przyjazne dla urządzeń mobilnych

Animacje przewijania usprawniają interakcje na urządzeniach mobilnych, czyniąc je płynniejszymi i bardziej wciągającymi. W szczególności użytkownicy mobilni korzystają z intuicyjnych elementów projektu, które reagują na ich gesty, poprawiając wrażenia mobilne.

6. Korzyści SEO

Ponieważ animacje mogą przyczynić się do lepszego zaangażowania użytkowników i wydłużenia czasu spędzonego na stronie, pośrednio wspierają działania SEO. Niższy współczynnik odrzuceń i większa interakcja użytkownika mogą sygnalizować wyszukiwarkom, że Twoja witryna zawiera wartościowe treści, co pomaga podnieść Twoje rankingi.

7. Profesjonalny branding

Animacje przewijania odzwierciedlają wyższy poziom profesjonalizmu, zgodnie z nowoczesnymi trendami w projektowaniu stron internetowych. Stosowane strategicznie mogą wzmocnić tożsamość Twojej marki i sprawić, że Twoja witryna internetowa będzie bardziej zapadająca w pamięć.

8. Subtelne wskazówki dla użytkowników

Animacje przewijania mogą podkreślać wezwania do działania (CTA), kierować uwagę do ważnych sekcji lub prowadzić użytkowników przez określoną ścieżkę w Twojej witrynie. Ta subtelna pomoc w nawigacji może pomóc poprawić konwersje.

Zobaczmy teraz, jak możesz to zrobić.

Dodaj animację przewijania w WordPress za pomocą wtyczki WordPress

Jednym z najprostszych sposobów dodania animacji przewijania w WordPressie jest użycie wtyczki o nazwie Scrollsequence .

Chociaż oprócz Scrollsequence dostępne są inne wtyczki WordPress, okazało się, że są one najbardziej stabilne i bogate w funkcje.

Dlatego na potrzeby tego bloga wybraliśmy go, aby pokazać, jak dodać animację przewijania w WordPress.

Oto metoda krok po kroku, którą możesz wykonać:

Krok 1: Zainstaluj wtyczkę i aktywuj

• Przejdź do panelu administracyjnego WordPress:
  Najpierw zaloguj się na swojej stronie WordPress > Wyszukaj „Scrollsequence” w sekcji wtyczek > zainstaluj bezpłatną wersję > Aktywuj wtyczkę po instalacji.

Krok 2: Uzyskaj dostęp do menu sekwencji przewijania

• Znajdź opcję nowej sekwencji przewijania:
  Po aktywowaniu wtyczki spójrz ponownie na lewą stronę pulpitu nawigacyjnego. Powinieneś zobaczyć nową opcję o nazwie Scrollsequence .
• Kliknij to menu:
  Kliknij opcję Kolejność przewijania . Spowoduje to przejście do nowego obszaru, w którym możesz skonfigurować i dostosować animacje. Znajdziesz tu również przydatne tutoriale wyjaśniające, jak z niego korzystać.

Krok 3: Przygotuj animację

• Zrozumienie działania kolejności przewijania:
  Scrollsequence tworzy animacje przy użyciu serii nieruchomych obrazów, coś w rodzaju flipbooka, aby wyglądały jak wideo, gdy użytkownicy przewijają stronę w dół.
• Konwertuj wideo na obrazy:
  Aby stworzyć animację, najpierw potrzebujesz krótkiego filmu (około 5-10 sekund). Użyj bezpłatnego narzędzia, takiego jak Ezgif , aby przekonwertować ten film na osobne klatki obrazu (format JPEG). Oznacza to, że otrzymasz kilka zdjęć ze swojego filmu, które Scrollsequence wykorzysta do stworzenia animacji.

Krok 4: Utwórz nową animację przewijania

• Rozpocznij nową sekwencję przewijania:
  W menu Scrollsequence poszukaj przycisku Add New Scrollsequence i kliknij go.
• Dodaj scenę:
  Kliknij Dodaj scenę . Pojawi się menu rozwijane, w którym możesz wybrać sekwencję obrazów, której chcesz użyć w swojej animacji.

• Prześlij swoje obrazy:
  Teraz prześlij obrazy z filmu. Może to zająć trochę czasu, w zależności od szybkości Twojego Internetu.

Krok 5: Dostosuj animację

• Dostosuj ustawienia animacji:
  Po przesłaniu wszystkich zdjęć możesz zmienić niektóre ustawienia. Możesz wybrać, kiedy animacja zaczyna się i kończy podczas przewijania.
• Wybierz typ animacji:
  Zdecyduj, czy chcesz, aby animacja pozostawała w jednym miejscu (lepka), czy poruszała się, gdy użytkownik przewija stronę (statyczna).

Krok 6: Wyświetl podgląd i zapisz

• Sprawdź swoją animację:
  Przed sfinalizowaniem wszystkiego kliknij przycisk podglądu, aby zobaczyć, jak wygląda animacja.
• Opublikuj swoją animację:
  Jeśli podoba Ci się to, co widzisz, kliknij przycisk Publikuj , aby animacja pojawiła się w Twojej witrynie.

Krok 7: Użyj animacji na swojej stronie internetowej

• Pobierz krótki kod:
  Po opublikowaniu wróć do menu Scrollsequence . Znajdziesz krótki kod (specjalny kod) dla Twojej nowej animacji.

• Wklej krótki kod:
  Skopiuj ten krótki kod i wklej go na dowolnej stronie lub poście, w którym chcesz wyświetlić animację. Możesz dodać dowolną liczbę animacji na tej samej stronie

Teraz Twoja witryna WordPress ma zabawną i interaktywną animację przewijania!

Dodaj animację przewijania w WordPress za pomocą Elementora

W powyższej metodzie użyliśmy wideo, a nie obrazów, ale w tej metodzie Elementora zastosujemy inne podejście.

Obraz będzie się przesuwał z jednej strony ekranu na drugą, gdy użytkownicy będą przewijać stronę. Oto, jak możesz to zrobić, używając nieruchomych obrazów zamiast wideo za pomocą Elementora.

Krok 1: Utwórz nową stronę

• Zacznij od utworzenia nowej strony w witrynie WordPress.

Krok 2: Edytuj za pomocą Elementora

• Kliknij Edytuj za pomocą Elementora . Elementor to narzędzie do tworzenia stron, które pomaga w łatwym projektowaniu stron.

Krok 3: Wstaw obraz

• Będąc w edytorze Elementora, poszukaj opcji wstawienia obrazu na stronę.
• Wskazówka: animacja działa najlepiej, gdy obraz jest przezroczysty. Możesz użyć pliku PNG (który obsługuje przezroczystość) lub pliku SVG (który jest również formatem wektorowym).

Krok 4: Ustaw rozmiar obrazu

• Dostosuj rozmiar obrazu. Upewnij się, że jest wystarczająco duży, aby ludzie mogli zauważyć ruch podczas przewijania. Na przykład możesz ustawić średni rozmiar, który wynosi około 300 x 300 pikseli .

Krok 5: Wybierz obraz

• Kliknij właśnie dodany obraz, aby go wybrać.

Krok 6: Uzyskaj dostęp do ustawień zaawansowanych

• Poszukaj zakładki Zaawansowane w ustawieniach po lewej stronie edytora Elementor.

Krok 7: Włącz efekty ruchu

• Przewiń w dół, aby znaleźć Efekty ruchu .
• Włącz efekty przewijania . Umożliwi to dodanie ruchu do obrazu.

Krok 8: Ustaw kierunek przewijania w poziomie

• Ponieważ chcesz, aby obraz poruszał się po stronie, poszukaj opcji oznaczonej Przewijanie w poziomie .
• Zmień ustawienie Kierunek na W prawo . Oznacza to, że obraz będzie przesuwał się od lewej do prawej, gdy użytkownik będzie przewijał stronę.

Krok 9: Przetestuj efekt

• Przewiń stronę w dół, aby zobaczyć, jak porusza się Twój obraz. To prosty przykład, ale pokazuje, jak łatwo można uzyskać angażujący efekt.

Dodatkowe uwagi

• Możesz także użyć wtyczki Scrollsequence , aby dodać podobne animacje przewijania w Elementorze.
• Jeśli masz Elementor Pro , zawiera on wbudowaną funkcję trwałych efektów przewijania, ale może ona być bardziej ograniczona w porównaniu z innymi opcjami.

Dodaj animację przewijania w WordPress za pomocą Divi

Jeśli nie jesteś użytkownikiem Elementora, ale zamiast tego używasz Divi, nadal możesz stworzyć podobny efekt.

Oto jak możesz to zrobić.

Rozważamy na przykład witrynę piłkarską

Krok 1: Utwórz nową stronę

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nową stronę i wybrać Divi Page Builder. Umożliwi to zaprojektowanie strony przy użyciu funkcji Divi.

Krok 2: Wybierz układ (opcjonalnie)

• Teraz, aby przyspieszyć działanie, wybierz gotowe układy Divi. Na przykład wybierz układ witryny poświęconej instruktażowi tenisa .

Krok 4: Dodaj swój obraz

• Aby utworzyć efekt przewijania, potrzebujesz obrazu. W tym przykładzie użyjesz obrazu Score.
• Upewnij się, że obraz partytury ma przezroczyste tło (najlepiej sprawdza się format PNG). Prześlij ten obraz na swoją stronę.

Krok 5: Uzyskaj dostęp do ustawień obrazu

• Kliknij właśnie dodany obraz wyniku, aby otworzyć jego ustawienia.
• Poszukaj karty Zaawansowane w menu ustawień.

Krok 6: Włącz efekty przewijania

• W ustawieniach zaawansowanych znajdź sekcję Efekty przewijania .
• Zobaczysz różne opcje efektów przewijania.

Krok 7: Wybierz swoje efekty

• Wybierz dowolny efekt, jaki chcesz uzyskać.
• Włącz także efekt Ruch w poziomie , aby obraz partytury przesuwał się z jednej strony ekranu na drugą podczas przewijania w dół.

Krok 8: Przetestuj ruch przewijania

• Po ustawieniu efektów przewiń stronę w dół, aby zobaczyć, jak porusza się obraz partytury.

Krok 9: Zapisz zmiany

• Gdy będziesz zadowolony z wyglądu, pamiętaj o zapisaniu zmian.
• Następnie kliknij Opublikuj , aby ożywić stronę z nowym efektem przewijania.

Dodaj podstawową i płynną animację przewijania w WordPress za pomocą tagów Anchor i CSS

Ta metoda nie oferuje fantazyjnych opcji dodawania animacji przewijania w WordPressie, ale może pomóc w najprostszym dodawaniu prostych animacji do witryny WordPress.

W tym celu należy użyć znaczników zakotwiczenia, które są zwykle używane, aby pomóc odwiedzającym przejść do określonej treści na tej samej stronie. Problem polega jednak na tym, że domyślnie animacja przewijania wygląda na niezgrabną lub gwałtowną.

Możemy jednak sprawić, że ten ruch będzie płynny, dając czytelnikom wrażenie animowanego zwoju, a nie nagłego skoku.

Oto jak możesz to zrobić.

Krok 1 : Skonfiguruj tagi zakotwiczenia : Najpierw musisz utworzyć sekcję strony, do której będziesz mógł „przeskakiwać”. Odbywa się to poprzez dodanie słowa (znacznika kotwicy) w polu Kotwica HTML, które pełni rolę celu dla łącza.

Krok 2 : Utwórz link : Połącz znacznik zakotwiczenia z jakimś tekstem lub przyciskiem na stronie. Link powinien być opatrzony hasztagiem i tekstem zakotwiczenia (np. #sekcja1).

Krok 3 : Opublikuj stronę : po opublikowaniu strony kliknięcie linku przeniesie Cię do tagu kotwicy, ale może się to wydawać nagłe.

Krok 4 : Napraw problem z płynnym przewijaniem : Aby przewijanie było płynne, dodajesz mały fragment kodu CSS (zachowanie przewijania: gładkie) do sekcji „Dodatkowe CSS” w WordPress.

html{
scroll-behavior: smooth;
}

Ten kod sprawia, że ​​przewijanie jest stopniowe i przyjemne wizualnie, jakby było animowane.

Po ponownym opublikowaniu strony kliknięcie linku spowoduje płynne, animowane przewinięcie w dół do kotwicy, a nie gwałtowny skok.

Wniosek

Teraz już wiesz, że dodanie animacji przewijania do witryny WordPress nie wymaga żadnych specjalnych umiejętności technicznych ani pomocy programisty. Wystarczy prosta wtyczka lub narzędzie do tworzenia stron, aby w ciągu kilku minut stworzyć dynamiczne i atrakcyjne strony.

Aby uzyskać najlepsze wyniki, możesz także połączyć metody wymienione powyżej, aby osiągnąć jeszcze lepsze wyniki, przyciągając i zatrzymując większy ruch w swojej witrynie.

Jeśli masz jakieś pytania lub chciałbyś podzielić się swoją cenną opinią, daj nam znać w sekcji komentarzy poniżej.

Rahul

Rahul Kumar jest entuzjastą sieci i specjalistą ds. strategii treści, specjalizującym się w WordPressie i hostingu. Dzięki wieloletniemu doświadczeniu i zaangażowaniu w bycie na bieżąco z trendami branżowymi tworzy skuteczne strategie online, które generują ruch, zwiększają zaangażowanie i zwiększają konwersję. Dbałość Rahula o szczegóły i umiejętność tworzenia atrakcyjnych treści czyni go cennym nabytkiem dla każdej marki chcącej poprawić swoją obecność w Internecie.