Jak dodać animację preloadera do WordPressa (krok po kroku)

Czy kiedykolwiek zauważyłeś ten obracający się ikonę lub animację, która pojawia się podczas ładowania strony internetowej? To jest animacja preloadera i jest to przydatne narzędzie, którego możesz używać w swoich projektach WordPress.

Preloadery służą realnemu celowi. Na stronach z dużą ilością treści utrzymują zaangażowanie odwiedzających podczas tych kluczowych sekund ładowania, co może zmniejszyć współczynnik odrzuceń.

A dla stron biznesowych, markowy preloader może nawet dodać profesjonalnego charakteru.

Jeśli myślisz, że to brzmi skomplikowanie, nie martw się. Przygotowaliśmy 2 metody dodawania animacji preloadera WordPress, odpowiednie dla użytkowników na wszystkich poziomach umiejętności.

Dlaczego warto dodać animację preloadera w WordPressie?

Preloader, czyli wskaźnik ładowania strony, to animacja, którą widzisz podczas oczekiwania na załadowanie strony. Informuje ona użytkowników, że strona internetowa jest jeszcze w trakcie przygotowywania i prosi o cierpliwość. Po zakończeniu ładowania preloader znika, a odwiedzający może normalnie zobaczyć stronę internetową.

Oto przykład tego elementu projektowego WordPress:

Jeden scenariusz, w którym możesz chcieć dodać animację ładowania, to sytuacja, gdy Twoja strona internetowa zawiera wiele dużych obrazów lub osadzonych filmów. W takim przypadku czas ładowania strony będzie dłuższy niż zwykle, a Ty chcesz, aby użytkownicy poczekali wystarczająco długo, aż strona w pełni się załaduje.

Jeśli Twoja strona nie ma wielu ciężkich elementów, lepiej skupić się na zwiększeniu szybkości i wydajności Twojej strony internetowej. Możesz również rozważyć przejście na lepszego dostawcę hostingu WordPress.

Mając to na uwadze, przyjrzyjmy się, jak możesz łatwo dodać animację ładowania strony do swojej witryny WordPress. Po prostu skorzystaj z poniższych szybkich linków, aby przejść bezpośrednio do metody, której chcesz użyć:

• Jak dodać prostą animację ładowania za pomocą WP Smart Preloader
• How to Add a Customizable Loading Animation With Safelayout Cute Preloader
• Frequently Asked Questions About WordPress Preloaders

Jak dodać prostą animację ładowania za pomocą WP Smart Preloader

Jednym z łatwych sposobów dodania animacji preloading w WordPress jest użycie WP Smart Preloader.

Ta wtyczka jest świetnym wyborem, jeśli chcesz szybkiego i łatwego rozwiązania bez zagłębiania się w zbyt wiele ustawień.

Dzieje się tak, ponieważ ma 6 wbudowanych animacji preloaderów WordPress, których możesz użyć, i nie musisz konfigurować wielu ustawień, aby włączyć animację.

Najpierw musisz zainstalować i aktywować wtyczkę WP Smart Preloader. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Ustawienia » WP Smart Preloader, a następnie otwórz rozwijane menu „Smart Preloader”. Tutaj zobaczysz wszystkie dostępne animacje.

Wtyczka wyświetli podgląd wybranej animacji, dzięki czemu możesz wybrać różne preloadery, aby zobaczyć, który najbardziej Ci się podoba.

Domyślnie animacja będzie wyświetlana na Twojej stronie WordPress, ale jeśli wolisz, możesz użyć jej tylko na stronie głównej. Wystarczy zaznaczyć pole „Pokaż tylko na stronie głównej”.

Jeśli chcesz stworzyć własną animację CSS, po prostu wpisz swój kod w polu „Niestandardowy CSS”.

Inną opcją jest stworzenie niestandardowej animacji HTML5 poprzez dodanie kodu do pola „Niestandardowa animacja”.

Po wybraniu animacji przewiń do sekcji "Czas wyświetlania ładowarki". Tutaj możesz zmienić czas odtwarzania preloadera. 

Domyślna opcja to 1500 milisekund, czyli 1,5 sekundy. Powinno to działać dobrze dla większości witryn, ale możesz wpisać inną liczbę, jeśli chcesz.

Domyślnie animacja będzie potrzebować 2500 milisekund, czyli 2,5 sekundy, aby całkowicie zniknąć. Aby to zmienić, po prostu wpisz większą lub mniejszą liczbę w polu „Loader to Fade Out”.

Gdy będziesz zadowolony z konfiguracji preloadera, po prostu kliknij przycisk „Zapisz zmiany”, aby zachować swoje ustawienia.

Możesz teraz odwiedzić swojego bloga WordPress lub stronę internetową, aby zobaczyć preloader w akcji.

Jak dodać konfigurowalną animację ładowania za pomocą Safelayout Cute Preloader

Pierwszy plugin ułatwia dodanie animacji ładowania w WordPress. Jeśli jednak chcesz mieć większą kontrolę nad projektem, aby dopasować go do swojej marki, możesz sprawdzić Safelayout Cute Preloader.

Aby rozpocząć, zainstaluj i aktywuj wtyczkę w swoim panelu administracyjnym WordPress. Więcej szczegółów znajdziesz w naszym przewodniku jak zainstalować wtyczkę WordPress.

Po aktywacji wtyczki przejdź do Ustawienia » Safelayout Preloader, aby rozpocząć jej konfigurację.

Krok 1: Włącz preloader i wybierz ustawienie wstępne

Najpierw musisz włączyć preloader i zdecydować, gdzie będzie się pojawiał na Twojej stronie.

Możesz zacząć od zakładki "Ustawienia predefiniowane", aby wybrać gotowy projekt. Jeśli ci się spodoba, po prostu kliknij przycisk "Zmień ustawienia na ten preloader" poniżej szablonu.

Następnie przełącz się na zakładkę „Ustawienia wyświetlania”.

Tutaj musisz zaznaczyć pole „Włącz uroczy preloader Safelayout”, aby upewnić się, że wtyczka działa.

Następnie użyj listy rozwijanej „Wyświetl na”, aby wybrać, gdzie chcesz pokazać preloader. W tym samouczku wybierzemy „Cała witryna”.

Na tym ekranie możesz również ustawić czas trwania animacji.

• Minimalny czas ładowania: Ustawia najkrótszy czas, przez który preloader będzie widoczny. Jest to przydatne, jeśli chcesz mieć pewność, że Twoja markowa animacja będzie zawsze widoczna przez co najmniej chwilę, nawet jeśli Twoja strona ładuje się natychmiast.
• Maksymalny czas ładowania: Określa najdłuższy czas, przez który preloader będzie widoczny. Działa to jako siatka bezpieczeństwa, automatycznie ukrywając preloader, aby użytkownicy nie utknęli, oglądając go, jeśli Twoja strona napotka błąd ładowania.

Możesz również wybrać wyświetlenie przycisku „Zamknij” po upływie kilku sekund. Po wprowadzeniu zmian kliknij „Zapisz zmiany”.

Krok 2: Dostosuj animację rdzenia

Teraz możesz zaprojektować wygląd samej animacji. Obejmuje to tło, główną ikonę i opcjonalny pasek postępu.

Najpierw przejdź do zakładki „Tło”.

Tutaj możesz wybrać efekt animacji, zmienić kolor tła i dostosować jego przezroczystość.

Jeśli nie chcesz specjalnego efektu tła, po prostu wybierz „Brak tła”.

Następnie kliknij zakładkę „Pasek postępu”.

Pasek postępu to świetny sposób, aby pokazać odwiedzającym, że strona się ładuje.

Możesz wybrać kształt, a następnie dostosować jego kolor, pozycję i rozmiar.

Jeśli nie chcesz żadnego, po prostu wybierz „Brak paska postępu”.

Po tym przejdź do zakładki „Ikona”.

To jest główna animowana grafika, jak obracające się koło.

Możesz wybrać ikonę, a następnie zmienić jej rozmiar, kolor i styl animacji. Jeśli uważasz, że ikona jest zbyt wiele w stosunku do innych ustawień, możesz wybrać opcję „Brak ikony”.

Pamiętaj, aby kliknąć przycisk „Zapisz zmiany” po zakończeniu dostosowywania każdej zakładki.

Krok 3: Dodaj swoje logo i tekst

Na koniec możesz dodać swoje logo i niestandardowy tekst, aby preloader idealnie pasował do Twojej marki.

Przejdź do zakładki „Obraz marki” i zaznacz pole „Pokaż markę”, aby dodać swoje logo.

Następnie kliknij przycisk „Biblioteka mediów”, aby przesłać obraz swojego logo.

Możesz wtedy dostosować pozycję i marginesy logo, aby ładnie pasowało do innych elementów.

Następnie przyjrzyjmy się zakładce „Licznik”.

To ustawienie pokazuje procent od 0% do 100%, aby wskazać postęp ładowania. Możesz je włączyć i dostosować jego pozycję, kolor i rozmiar czcionki.

Na koniec przejdź do zakładki „Tekst”. Domyślnie preloader wyświetla tekst „Ładowanie…”, ale możesz zmienić go na coś bardziej kreatywnego.

Wystarczy zaznaczyć pole „Pokaż tekst”, napisać własną wiadomość i dostosować jej czcionkę, kolor i pozycję.

Po zakończeniu kliknij przycisk „Zapisz zmiany”.

I to wszystko! Animacja preloadera powinna teraz pojawić się zgodnie z Twoimi konfiguracjami. Możesz wyświetlić swoją stronę na telefonie komórkowym, komputerze stacjonarnym lub tablecie, aby zobaczyć ją w akcji.

Oto jak wygląda nasz:

Najczęściej zadawane pytania dotyczące preloaderów WordPress

Na przestrzeni lat wielu czytelników pytało nas o korzystanie z preloaderów. Oto odpowiedzi na niektóre z najczęściej zadawanych pytań.

Czy preloadery wpływają na szybkość strony internetowej?

Sam preloader nie przyspiesza Twojej strony internetowej. Jego celem jest poprawa doświadczenia użytkownika poprzez maskowanie procesu ładowania za pomocą schludnej animacji.

Aby faktycznie poprawić szybkość swojej witryny, powinieneś skupić się na takich rzeczach jak buforowanie za pomocą WP Rocket, optymalizacja obrazów i korzystanie z wydajnego hostingu.

Czy preloadery są złe dla SEO?

Poprawnie zaimplementowany, lekki preloader nie powinien zaszkodzić Twojemu SEO. Jednak źle zakodowana lub ciężka animacja może spowolnić początkowe ładowanie strony.

Może to negatywnie wpłynąć na Twoje Core Web Vitals, które są ważne dla pozycji w wyszukiwarkach. Kluczem jest prostota i szybkość.

Czy mogę używać preloader tylko na określonych stronach?

Tak, absolutnie. Większość wtyczek preloader pozwala wybrać, gdzie animacja ma się pojawić.

Możesz włączyć go w całej witrynie, tylko na stronie głównej, a nawet na konkretnych postach i stronach, gdzie spodziewasz się dłuższych czasów ładowania.

Jaka jest różnica między preloaderem a stroną powitalną?

Preloader działa podczas ładowania Twojej treści i znika automatycznie.

Strona powitalna to oddzielny ekran wprowadzający, który wymaga od użytkownika kliknięcia linku lub przycisku, aby wejść na główną stronę internetową.

Zazwyczaj odradzamy korzystanie ze stron powitalnych, ponieważ stanowią one dodatkowy krok dla odwiedzających i mogą negatywnie wpłynąć na współczynnik odrzuceń oraz SEO.

Więcej sztuczek WordPress, aby zaangażować odwiedzających Twoją witrynę

Dodanie animacji preloadera to tylko jeden z wielu sposobów na ulepszenie Twojej witryny WordPress. Jeśli szukasz bardziej kreatywnych pomysłów, aby przyciągnąć odbiorców, mamy dla Ciebie coś specjalnego:

• Jak dodać efekt paralaksy do dowolnego motywu WordPress – Stwórz głębię i zainteresowanie wizualne dzięki tej technice iluzji przewijania.
• Jak dodać spadające płatki śniegu na swoim blogu WordPress – zachwyć swoich odwiedzających odrobiną zimowej magii na swojej stronie.
• Jak łatwo dodać tryb ciemny do swojej witryny WordPress – Zapewnij bardziej komfortowe przeglądanie dzięki tej popularnej funkcji.
• Sposoby na dodanie efektów Halloween do Twojej strony WordPress – Upiornie udekoruj swoją stronę tymi zabawnymi i świątecznymi sztuczkami na Halloween.
• Jak dodać animowane tło w WordPressie – Zrób odważne wrażenie dzięki przyciągającym wzrok wzorom ruchomych teł.
• Jak dodać wideo YouTube jako pełnoekranowe tło w WordPressie – Stwórz potężne pierwsze wrażenie dzięki dynamicznym tłom wideo.
• Jak dodać nieskończone przewijanie do swojej witryny WordPress (przewodnik krok po kroku) – Utrzymuj zaangażowanie odwiedzających, płynnie ładując więcej treści podczas przewijania.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodać animację preloadera do swojej witryny WordPress. Możesz również zapoznać się z naszymi rekomendacjami najlepszych kreatorów stron metodą przeciągnij i upuść w WordPress oraz naszym kompletnym przewodnikiem jak edytować witrynę WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.