Dodaj animację ładowania do swojej witryny WordPress (10 różnych opcji)

Wszyscy zawsze się spieszą, a strona, której załadowanie trwa dłużej niż 2 lub 3 sekundy, jest postrzegana jako „zbyt wolna”. Na szczęście istnieje sposób na chwilowe ominięcie tej paniki i zatrzymanie użytkowników na stronie wystarczająco długo, aby wszystko się załadowało. Mowa o idealnie hipnotyzującej animacji ładowania.

W tym poście przyjrzymy się, czym dokładnie jest animacja ładowania, jaki jest jej cel i jak dodać ją do dowolnej witryny WordPress – w tym do witryn Divi.

Co to jest animacja ładowania?

Animacja ładowania, zwana także pre-loaderem, to przyciągająca wzrok animacja, która pojawia się na stronie internetowej wystarczająco długo, aby załadować wszystkie elementy. Niektóre animacje wczytywania są krótkie i nie muszą zbyt długo utrzymywać uwagi użytkownika. Ale w niektórych przypadkach, jeśli witryna jest bardzo duża, animacja ładowania musi być naprawdę wciągająca, aby użytkownik mógł pozostać.

Jeśli jesteś w pobliżu wystarczająco długo, wiesz, że animacje wczytywania pojawiają się od lat 90-tych. Już na początku ery internetu mieliśmy wczytujące się animacje. Oczywiście wtedy mogły trwać znacznie dłużej niż teraz. Nauczyliśmy się również, jak sprawić, by były o wiele przyjemniejsze dla użytkownika, nie nudząc ich i nie odchodząc.

Zapoznanie się z ładowaniem animacji

Najpopularniejszym stylem ładowania animacji jest obracające się koło. Nie mylić z „tęczowym kręgiem śmierci” z komputerów Apple. Animacja ładowania obracającego się okręgu ma naprzemienny ruch gradientowy. Pierwsze obrotowe ładowarki wstępne miały wiele różnych wersji, od kwiatów, przez kółka, płatki śniegu, a nawet wirujące ying yang. Obecnie animacje wirującego ładowania są bardziej dynamiczne i przyjemniejsze dla oka.

Wirujące animacje ładowania działają tylko wtedy, gdy czas oczekiwania jest krótki. Więcej niż 5 sekund to już za dużo. Właśnie wtedy programiści muszą używać bardziej kreatywnych programów do wstępnego ładowania. Zabawna i zabawna animacja ładowania utrzyma użytkownika na stronie bez względu na to, jak długo to potrwa.

Wskazówki dotyczące lepszego ładowania animacji

Jest kilka rzeczy, które możesz dodać do animacji ładowania, aby była ciekawsza niż tylko ruchomy obraz. Oto kilka wskazówek, dzięki którym będą one jeszcze lepsze i skuteczniejsze.

• Uwzględnij pasek procentowy
• Pokaż, ile więcej czasu użytkownik musi czekać
• Wyjaśnij, co dzieje się pod maską (rekwizyty do używania humoru)
• Użyj zabawnej animacji, która niekoniecznie powtarza dokładnie tę samą akcję

Zalety markowej animacji ładowania

Jeśli masz możliwość stworzenia własnej animacji ładowania lub skorzystaj z wtyczki z opcjami dostosowywania, upewnij się, że preloader jest oznaczony marką. Może to być tak proste, jak użycie kolorów strony internetowej marki do rzeczywistego wykorzystania ilustracji firmy. Ideą brandingu animacji ładowania jest to, że wygląda tak, jakby należała do tej witryny i nie jest tylko dodatkiem. To podsumowanie na stronie Awwwards może zainspirować Twoje własne kreacje.

Jak dodać animację ładowania do swojej witryny WordPress?

Dodanie animacji ładowania jest łatwiejsze niż mogłoby się wydawać. Istnieje wiele opcji dodawania go do witryny WordPress. Od łatwych w użyciu wtyczek po dodawanie niestandardowego kodu do witryny. Ponieważ jest tak wiele różnych opcji, wymienię je tutaj, abyś mógł się rozejrzeć i znaleźć najlepszy dla siebie.

Używanie wtyczki do dodawania animacji ładowania

Wtyczka to najprostszy i najprostszy sposób na dodanie animacji ładowania. Są one szczególnie przydatne, jeśli nie czujesz się komfortowo manipulując kodem lub nie masz czasu. Oto lista niektórych z najbardziej wszechstronnych wtyczek do ładowania animacji. Niektóre z nich są bezpłatne, a inne premium. W niektórych przypadkach ta sama wtyczka ma prostszą wersję darmową i bardziej niezawodną wersję pro.

Loftloader

Loftloader ma wersję darmową i pro. W darmowej wersji możesz wypróbować kilka proloaderów i dostosować je do strony i marki. Wersja pro ma więcej opcji i bardziej szczegółowe sterowanie.

Płaski moduł ładowania wstępnego

Flat Preloader to prosta darmowa wtyczka z ograniczonym zestawem kolorowych animacji ładowania. Ta wtyczka jest idealna, jeśli potrzebujesz szybkiej naprawy modułu wstępnego ładowania i nie musisz dostosowywać kolorów ani obrazu.

Najlepszy preloader

Best Preloader to darmowa wtyczka do animacji ładowania z jedną opcją, która pasuje do każdego stylu witryny. Mam jedną animację z kilkoma kontrolkami customizatio.

Program ładujący strony

Page Loader to wtyczka do animacji ładowania premium z wieloma opcjami dostosowywania i brandingu. Jest to jedna z ulubionych wtyczek preloadera na rynku.

WP Smart Preloader

WP Smart Preloader to darmowa wtyczka typu open source z pełnymi opcjami dostosowywania. Animacje nie są zbyt rozbudowane, ale pasują do każdego stylu strony. Możesz łatwo dostosować kolory i ustawienia.

Dodawanie animacji ładowania bez wtyczki

Jeśli chcesz uniknąć korzystania z wtyczki, dostępnych jest wiele darmowych i gotowych do użycia animacji ładowania. A także kilka zaawansowanych samouczków, które zawierają fragmenty kodu, które musisz dodać.

PixelBuddha z multimediami:

Chłopaki z Multimedia opublikowali prosty samouczek z dwoma darmowymi zestawami animacji ładowania od PixelBuddha i kodem potrzebnym do ich skonfigurowania na swojej stronie.

CodePen:

W tym średnim artykule autorstwa UX Planet autor podsumowuje wiele animacji ładowania w różnych stylach. Są proste i bardziej złożone. Większość z nich jest osadzona z CodePen, a fragment kodu HTML i CSS można pobrać z samego widżetu. Będziesz musiał wstawić je do pełnego zestawu kodu, aby skonfigurować animację ładowania.

SpinKit:

Tobias Ashlink ma SpinKit z ładną kolekcją animacji ładowania z kodem dostępnym przez GitHub. Muszą one również zostać dodane do pełnego zestawu kodów w celu konfiguracji wstępnej.

Ładowanie.io:

Loading.io to zbiór animacji ładowania z wieloma różnymi opcjami. Dostępne są preloadery CSS, preloadery GIF, przyciski i nie tylko. Przejrzyj ich witrynę, aby znaleźć wszystkie opcje i instrukcje, jak dodać je do swojej witryny.

Pikselwary:

Chłopaki to Pixelvars napisali przydatny samouczek ze wszystkimi kodami potrzebnymi do skonfigurowania własnej animacji ładowania. Możesz nawet użyć ich kodu wraz z powyższymi animacjami CodePen lub GitHub. Dla niektórych osób ta opcja wydaje się nieco bardziej zaawansowana. Idź z tym, jeśli jesteś programistą z dobrą znajomością kodowania.

Przy tak wielu opcjach, które wybierzesz?

Dodanie animacji ładowania do witryny WordPress jest łatwe. Przy tak wielu dostępnych opcjach wystarczy wybrać jedną.

W tym poście pokazaliśmy Ci wiele różnych sposobów na dodanie animacji ładowania do Twojej witryny. Która jest Twoja preferowana metoda? Zaprojektowane na zamówienie i dodane z kodem do motywu potomnego? Konfigurowalna wtyczka? Prosta opcja bez dodatków? Daj nam znać w komentarzach, abyśmy mogli sprawdzić własne animacje ładowania.

Polecane zdjęcie za pośrednictwem muchomoros / shutterstock.com