W tym artykule dowiesz się krok po kroku, jak tworzyć animacje ładowania strony Preloadera Elementora na swojej stronie internetowej przy użyciu plików Lottie, plików GIF, obrazów, płaskiego loadera Pure CSS, krótkich kodów i innych.
Na koniec zajmiemy się również przejściami stron w Elementorze.
Preloadery są bardzo popularnym stylem projektowania; wiele stron internetowych korzysta z różnych typów animacji płynnego ładowania stron, aby utrzymać zainteresowanie użytkowników, podczas gdy zawartość strony jest w pełni ładowana.
Daje to lepsze wrażenie niż wyświetlanie pustego ekranu do momentu załadowania zawartości witryny.
Wyobraź sobie, kto chciałby czekać w tym szybko biegnącym świecie? To właśnie tutaj preloadery przychodzą jako wybawcy, aby utrzymać ich zaangażowanie i zmniejszyć współczynnik odrzuceń.
Do dodawania animacji preloadera w WordPressie użyjemy Elementor Page Builder.
Jeśli jednak jesteś użytkownikiem Gutenberga, czyli trzymasz się domyślnych bloków WordPressa, możesz skorzystać z naszego Wersja Gutenberga bloku preloaderaProces pozostaje taki sam, a zestaw funkcji jest podobny.
Czym są preloadery Elementora i animacje ładowania stron Elementora?
Preloadery Elementora to animacje ładowania stron wyświetlane na ekranie, gdy przygotowywana jest treść strony internetowej.
Gdy strona ładuje się początkowo, często zobaczysz pusty biały ekran, zanim zawartość stanie się całkowicie widoczna. Ale gdy czas ładowania jest powolny, użytkownik staje w obliczu frustrującego doświadczenia wpatrywania się w pusty ekran przez dłuższy czas i może odbić się od Twojej witryny.
W takich sytuacjach z pomocą przychodzą preloadery Elementora.
Korzyści ze stosowania preloadera:
- Strona ładująca Elementora zmniejsza współczynnik odrzuceń.
- Poprawia komfort użytkowania.
- Elementor Loader utrzymuje zainteresowanie odwiedzających
- Rozwiązuje problemy z ładowaniem treści.
- Tworzy możliwości budowania marki.
Komu należy używać Preloadera?
W świecie krótkich filmów i filmików, w którym koncentracja większości użytkowników Internetu ulega skróceniu, preloadery odgrywają znaczącą rolę w utrzymywaniu zainteresowania użytkowników bez znudzenia ich.
Jeśli Twoja witryna zawiera dużo treści, a załadowanie wszystkich elementów CSS i JS zajmuje więcej czasu, to najlepszym rozwiązaniem będą preloadery.
Możesz wykorzystać tę możliwość do zarejestrowania tożsamości swojej marki, dzięki czemu Twoja witryna będzie wyglądać bardziej profesjonalnie.
Wiele popularnych marek, np. WhatsApp, Slack i Duolingo, korzysta z preloadera podczas ładowania treści.
Jak dodać preloader na stronach internetowych opartych na Elementorze?
W tym artykule pokażemy Ci, jak dodać 8 unikalnych typów treści preloadera do Elementor Page Builder.
Na koniec warto wspomnieć, że możemy połączyć dwie lub więcej zawartości preloadera, aby uzyskać ładnie wyglądający obraz przypominający animację modułu ładującego strony Elementora z paskiem postępu.
Wszystko to przy użyciu dodatku The Plus Addons dla widżetu Preloader Elementora.
8 typów preloadera WordPress Elementor Content:
- Animacje wstępnego ładowania obrazów/GIF
- Animacje wstępnego ładowania ikon/SVG
- Animacje wstępnego ładowania oparte na tekście
- Wstępnie zdefiniowane animacje preloadera (Wyłącznie dla użytkowników The Plus Addons)
- Lottie Files Animacje wstępnego ładowania
- Czyste animacje CSS Flat Preloader
- Animacje WordPress Shortcode Preloader
- Animacje wstępnego ładowania paska postępu
Przyjrzyjmy się bliżej każdemu z nich poniżej:
1. Animacje wstępnego ładowania obrazów/GIF
Bardzo powszechnym typem zawartości przejścia strony Elementor są obrazy używane przez wiele popularnych marek do wyświetlania ich logo podczas ładowania witryny. Używając tego, możesz dodawać niestandardowe obrazy na ekranie ładowania.
Nie tylko statyczne obrazy, ale także format obrazu GIF możesz przesłać do preloadera, ale upewnij się, że GIF jest zoptymalizowany dzięki czemu możesz zmniejszyć rozmiar treści i szybciej ją załadować.
Wtyczka Plus Addons do widżetu preloader Elementora zapewnia funkcję ładowania obrazu, dzięki której sam obraz ładuje się z efektem, takim jak pasek postępu, od mniejszego krycia do wypełnienia.
2. Animacje wstępnego ładowania ikon/SVG
Ikony lub formaty plików SVG to bardzo lekkie formy ładowania treści, ponieważ zazwyczaj mają bardzo małe rozmiary plików. W naszym widżecie preloadera możesz wybrać ikony dla wbudowanego Elementora biblioteka ikon lub prześlij swoje niestandardowy plik SVG.
3. Animacje wstępnego ładowania oparte na tekście
Preloader oparty na tekście to coś, co zawsze widzieliśmy podczas surfowania po sieci, czy to w postaci prostego komunikatu, takiego jak „ładowanie…”, ale czekaj, nie musisz utrzymywać aż tak nudnej typografii.
Używając trybu zawartości tekstowej, możesz stylizować tekst tak, jak chcesz, używając swojej ulubionej czcionki.
Podobnie jak nasz obraz preloadera, animacja ładowania Elementora oparta na tekście zawiera efekt ładowania, w którym kolor zmienia się z jednego odcienia na odcień normalny, tak jak pokazano na obrazku powyżej.
4. Wstępnie zdefiniowane animacje preloadera (Wyłącznie dla użytkowników The Plus Addons)
Predefiniowane animacje preloadera to ekskluzywny zestaw 12+ animacji ładowania stron Elementor od naszych projektantów. Tutaj nie musisz przesyłać żadnych obrazów ani dodawać tekstu, po prostu wybierz jeden ze stylów animacji i gotowe.
Każda animacja jest zaprojektowana w wyjątkowy sposób, aby była lekka i zapewniała najlepszy możliwy styl ładowania, np. ikona w kółku, ładujący się spinner, wirujące koło itp.
5. Lottie Files Animacje wstępnego ładowania
Animacje Lottie są wszędzie w sieci, od aplikacji mobilnej po ulubione strony internetowe. Jeśli jesteś nowy w tym pojęciu, pozwól, że podzielę się, czym one są.
Lottie preloader WordPress Animation, znana również jako animacja oparta na JSON, to nowoczesny sposób tworzenia animacji.
Są świetną alternatywą dla plików GIF, ponieważ umożliwiają prezentację bogatej zawartości animowanej przy znacznie zmniejszonym rozmiarze pliku.
Przy tak wielu zaletach nie możemy sobie pozwolić na ignorowanie animacji Lottie. Odwiedź więc dowolną bibliotekę plików Lottie i skopiuj kod lub adres URL JSON, aby wkleić go do opcji widżetu preloadera.
Możesz kontrolować rozmiar animacji, jej prędkość, a także to, czy animacja ma być odtwarzana w sposób ciągły, aż do momentu, gdy preloader się wyłączy.
6. Czyste animacje CSS Flat Preloader
Czyste, płaskie preloadery CSS to zbiory animacji ładowania, zapewniające najwyższą prędkość ładowania, prostotę i przyjazność kodu dla programistów.
Te animacje są tworzone przy użyciu HTML i niestandardowego CSS, co pozwala na szeroki wachlarz stylów i jest dostosowywalne dla deweloperów. Najlepszą częścią animacji CSS jest to, że mają one przeważnie rozmiar poniżej 1 KB.
Używając naszego widżetu Elementor preloader, możesz dodać moduł CSS Loader do witryny, wklejając kod w zakładce treści. To wszystko; Twoje moduły ładujące są gotowe do uruchomienia.
BEZPŁATNE biblioteki CSS Flat Loaders:
7. Animacje wstępnego ładowania kodu krótkiego WordPress
Krótki kodco oznacza skrót + kod, było jedną z pierwszych metod dodawania treści w WordPressie.
Shortcodes mogą być dowolną formą niestandardowej treści, niezależnie od tego, czy jest zaprojektowana w Elementorze, czy nie. Zazwyczaj wtyczki karuzeli galerii generują shortcode, który jest dodawany do dowolnej części witryny, aby wyświetlić tam treść.
Podobnie każdy Szablon Elementora generuje krótki kod aby pokazać zawartość szablonu na stronie internetowej. A The Plus Addons for Elementor używają tego, aby przełamać ograniczenia typu zawartości preloadera, którą możesz utworzyć.
Utwórz dowolny projekt łącząc widżety Elementor lub napisz własny kod, a następnie umieść go w polu krótkiego kodu naszego widżetu.
Shortcode sprawia, że nasz widżet preloadera jest nieograniczony. Możesz dostosować go tak, jak lubisz.
8. Animacje wstępnego ładowania paska postępu
Na koniec, bardzo popularna animacja ładowania paska postępu. Często widzisz ten typ preloadera, w którym pusty pasek wypełnia się, gdy zawartość ładuje się w tle.
Dodatki Plus Addons do wstępnego ładowania paska postępu Elementora zawierają szereg gotowych stylów, w których pasek postępu można umieścić na środku, w nagłówku witryny, w rogu ekranu, na okrągłych paskach postępu i wielu innych.
Funkcja specjalna: Animacja ładowania łączonego
Omówiliśmy powyżej 8 unikalnych typów zawartości Preloadera, a teraz posuniemy się o krok dalej i damy możliwość łączenia ich w pary lub więcej.
Może się to przydać, gdy chcesz pokazać obraz swojego logo z paskiem postępu pod nim. To zwiększa możliwości dostosowywania, czyniąc go najlepszym widżetem Preloader dla Elementora.
Używaj tej funkcji ostrożnie, ponieważ ładowanie dużej ilości treści naraz może sprawić, że strona stanie się ciężka, co z kolei wpłynie negatywnie na czas ładowania.
Daliśmy również możliwość kontrolowania maksymalnego i minimalnego czasu, przez jaki treść Preloadera będzie widoczna.
Możesz użyć tej funkcji, aby ograniczyć preloader na pierwsze kilka sekund, a następnie od razu wyświetlić główną treść swojej witryny.
Czym są przejścia stron?
Przejścia stron to animacje, które występują, gdy użytkownik przechodzi z jednej strony na drugą. Przejścia stron mogą być używane do dostarczania wizualnego sprzężenia zwrotnego i tworzenia poczucia ciągłości.
Składa się z dwóch części: jednej wejściowej i jednej wyjściowej.
Możesz łączyć Preloader z przejściami, aby stworzyć profesjonalne środowisko dla odwiedzających, którzy będą mogli płynnie przechodzić z jednej strony na drugą.
Można ich używać samodzielnie lub w połączeniu z Preloaderami. Najlepsze jest to, że obie funkcje są dostępne w tym samym widżecie z The Plus Addons for Elementor.
Jak utworzyć przejście strony Elementora?
Widget Plus Addons for Page transitions Elementora zawiera 2 zestawy elementów sterujących, jak wyjaśniono powyżej, jeden do animacji wejścia, tj. In-transitions, i jeden do animacji wyjścia, tj. out-transitions. Możesz wybierać spośród wielu stylów, takich jak:
- Znikać
- Slajd
- Potrójny Swoosh
- Prosty
- Ruch Duo
Każdy efekt przejścia strony ma unikalny styl animacji ładowania.
Podsumowanie
W tym artykule omówiliśmy 8 różnych typów stylów treści Preloader, od obrazów, tekstu, lottie po pasek postępu. Ze szczególnym uwzględnieniem opcji łączenia, w której można mieszać wiele formatów treści dla swojego Elementor preloader.
Na koniec zobaczyliśmy, jak przejścia stron mogą być pomocne w nadaniu dobrego wykończenia animacjom preloadera. Jesteśmy pewni, że ich wspólne użycie doprowadzi do najpiękniejszego doświadczenia witryny dla Twoich użytkowników.
Jeśli dowiedziałeś się czegoś nowego, koniecznie podziel się tym ze znajomymi i społecznościami.
Sprawdź podgląd na żywo widżetu Elementor Preloader w The Plus Addons – Zobacz demo
Plus Addons to nie tylko wtyczka preloadera Elementora, ale także ponad 120 dodatkowych funkcji widżetów Elementora za tę samą cenę.
Dzięki naszemu modułowemu podejściu upewniamy się, że ładowany jest tylko wymagany kod, a reszta jest całkowicie wyłączona, aby zapewnić najlepszą wydajność witryny
Czym jest animacja ładowania strony w WordPressie?
Animacja ładowania strony w WordPressie to element wizualny, który pojawia się podczas ładowania strony internetowej. Zapewnia użytkownikom wizualną wskazówkę, że treść jest pobierana.
Jak ustawić preloader w Elementorze?
Aby ustawić preloader w Elementorze, użyj widżetu Preloader firmy The Plus Addons. Po prostu dodaj widżet do swojego układu, dostosuj jego wygląd i ustawienia, a wyświetli on animację podczas ładowania strony.
Czym jest preloader w Elementorze?
Preloader w Elementorze to element wizualny wyświetlany podczas ładowania strony internetowej. Utrzymuje on odwiedzających zaangażowanych i poinformowanych podczas procesu ładowania.
Dlaczego potrzebujemy preloadera?
Moduły wstępnego ładowania są potrzebne, aby poprawić doświadczenia użytkowników poprzez informowanie ich o ładowaniu treści, zmniejszanie frustracji spowodowanej oczekiwaniem i podtrzymywanie zaangażowania.
Jaka jest różnica między modułem ładującym i modułem wstępnego ładowania?
Ładowarka to ogólne określenie na dowolną animację, która wskazuje na trwający proces. Preloader to konkretny typ ładowarki wyświetlany podczas ładowania treści, służący jako element antycypacyjny przed wyświetleniem całej strony.
Dlaczego mój preloader Elementora nie działa?
Preloader Elementora może zawieść z powodu konfliktów z innymi wtyczkami lub motywami, błędów JavaScript lub problemów z buforowaniem. Sprawdź konflikty, sprawdź JavaScript i wyczyść pamięć podręczną, aby rozwiązać problemy.
