Jak dodać stylowy preloader do swojej witryny Divi?

Oglądanie wczytywania ekranu jest, no cóż, nudne. Może to być również niepokojące, jeśli nie możemy powiedzieć, co się dzieje. Spodziewamy się, że zobaczymy jakąś informację zwrotną, gdy coś klikniemy. Chcemy wiedzieć, że komputer zaakceptował nasze kliknięcie i otrzymuje to, o co prosiliśmy. Ekrany ładowania mogą zatem skorzystać z preloadera.

Preloader to animowana grafika, która pojawia się na ekranie podczas ładowania strony. Moduły wstępnego ładowania to świetny sposób na wyświetlanie wizualnych wskazówek, że strona się ładuje, a nawet zabawianie gości, gdy jesteś na niej. W tym samouczku zobaczymy, jak dodać preloader do Divi za pomocą wtyczki o nazwie DP Preloader. Jest łatwy w użyciu i możesz nawet dostosować swój preloader, aby dostosować go do swoich potrzeb.

Spójrzmy.

zapowiedź

Używam strony docelowej z pakietu układów Bike Repair. Używam również dostosowanej wersji nagłówka z pakietu układów #4 Theme Builder. Wybrałem moduł ładowania wstępnego, który dobrze współpracuje z elementami witryny, i nadałem mu styl tak, aby pasował do projektu strony docelowej. To jest preloader na ekranie komputera.

Tak wygląda preloader na telefonie. Możesz wyświetlać go na telefonie lub nie, a nawet ustawić punkt przerwania, aby określić, jaki rozmiar ekranu będzie wyświetlany. Zostawiłem to włączone dla telefonów, więc możemy zobaczyć, jak to działa.

Subskrybuj nasz kanał YouTube

Zainstaluj moduł wstępnego ładowania DP

Kup DP Preloader z Divi Marketplace. DP Preloader to wtyczka innej firmy z wieloma opcjami sposobu i miejsca wyświetlania preloadera. Zwykle kosztuje 13 USD i obejmuje nieograniczone korzystanie ze strony internetowej oraz rok wsparcia i aktualizacji.

Ma 55 predefiniowanych preloaderów, niestandardową opcję przesyłania, aby użyć GIF jako preloadera, animacje, opcję wyświetlania go na określonych stronach, ukrywania go na urządzeniach mobilnych, ustawiania mobilnych punktów przerwania itp. Wydaje się, że nie działa z puste szablony, ale działa doskonale z szablonem domyślnym, korzystając ze standardowego nagłówka lub Kreatora motywów. To doskonały wybór do dodawania gotowych i niestandardowych preloaderów do Twojej witryny Divi.

Po zakupie i pobraniu wtyczki przejdź do menu wtyczek na pulpicie WordPress i kliknij Dodaj nową . Gdy pojawi się lista wtyczek, wybierz opcję Prześlij wtyczkę u góry ekranu.

Wybierz Wybierz plik i przejdź do spakowanego pliku na komputerze i wybierz go. Kliknij Zainstaluj teraz i poczekaj, aż zakończy się instalacja.

Po zakończeniu instalacji kliknij Aktywuj wtyczkę . Moduł wstępnego ładowania jest teraz gotowy do skonfigurowania do użytku z witryną Divi.

Opcje wstępnego ładowania DP

DP Preloader musi zostać skonfigurowany, zanim pojawi się w Twojej witrynie. Przejdź do menu Divi na pulpicie nawigacyjnym WordPress, wybierz Opcje motywu , a następnie wybierz zakładkę DP Preloader . Podobnie jak w przypadku wszystkich ustawień na ekranie Opcje Divi, pamiętaj, aby zapisać zmiany, aby ustawienia zaczęły obowiązywać.

Opcje ogólne modułu wstępnego ładowania DP

Moduł wstępnego ładowania jest domyślnie wyłączony, więc należy go włączyć. Pozostałe ustawienia ogólne pozostawiam domyślnie, ale możesz je ukryć na telefonie komórkowym o szerokości urządzenia zgodnej ze specyfikacją lub mniejszej.

• Wyświetl moduł ładowania wstępnego na stronie – włącz

Ustawienia obrazu DP Preloader

DP Preloader pozwala nam wybrać kolory ikony i pełnoekranowej nakładki tła. Zanim zobaczymy moje ustawienia, chciałem pokazać, skąd czerpię moje pomysły projektowe. W ustawieniach obrazu używam kolorów z mojego układu. Strona docelowa Bike Repair ma białe tło z czerwonymi podświetleniami. Użyję koloru czerwonego, który znajduje się w całym układzie, jako ikony i białego jako tła.

• Czerwony – #ea3900
• Biały – #ffffff

W moim układzie jest kilka kolejek projektowych, na które mogę zwrócić uwagę przy wyborze preloadera. Konkretnie patrzę na ikony, aby zobaczyć ich kształty, kolory i rozmiary. Układ ma dużo kół i kół zębatych. Jest też kilka narzędzi. Ponieważ kilka preloaderów ma podobne kształty jak narzędzia, są one również kandydatami do pomysłów projektowych. Na razie jednak skupię się na kołach i przerzutkach.

Do wyboru jest 55 preloaderów. Wybrałem taki, który przypomina mi biegi. Niektóre moduły ładowania wstępnego mają domyślne kolory, ale w następnej sekcji możemy dostosować kolor każdego modułu, dzięki czemu nie musimy wybierać jednego na podstawie koloru.

Pod modułami ładowania wstępnego znajduje się kolejny zestaw opcji, dzięki którym możesz przesłać niestandardowy moduł ładowania wstępnego jako plik GIF. Możesz także dostosować jego szerokość i wysokość. Ponieważ używam jednego z wbudowanych modułów ładowania wstępnego, nie muszę dostosowywać rozmiaru. Pozostaną one w swoich domyślnych ustawieniach, ale chciałem pokazać ustawienia na wypadek, gdybyś chciał wgrać własny preloader.

Ustawienia kolorów modułu wstępnego ładowania DP

Masz kontrolę nad preloaderem i kolorami tła zarówno dla koloru, jak i krycia. W przypadku modułu wstępnego ładowania wybierz kolorową kropkę i wprowadź kod szesnastkowy w polu lub użyj selektora, aby wybrać kolor. Zrób to samo dla koloru tła. Kolor tła jest już kolorem, którego chcę, więc pozostawiam domyślny kolor tła.

• Czerwony – #ea3900
• Biały – #ffffff

Ustawienia animacji modułu wstępnego ładowania DP

W przypadku ustawień animacji masz kontrolę nad tym, który z dwóch efektów jest wyświetlany (Zanikanie lub SlideUp), szybkość zanikania, czas opóźnienia i krycie ciała. Zmieniłem efekt na SlideUp, wybrałem wolną prędkość zanikania, aby preloader był bardziej widoczny, i dodałem 2000 ms (2 sekundy) do czasu opóźnienia, aby dla mojego przykładu preloader dłużej pozostawał na ekranie.

• Efekty wstępnego ładowania – SlideUp
• Szybkość zanikania modułu wstępnego ładowania — niska
• Czas opóźnienia wstępnego ładowania – 2350

Wyniki

Oto jak preloader wygląda na pulpicie. Działa dokładnie zgodnie z oczekiwaniami i dobrze pasuje do mojego układu. Wygląda na to, że pasuje do mojej strony, co jest ważne dla spójności brandingu.

Oto jak preloader wygląda na telefonie.

Postanowiłem wypróbować odwróconą opcję z czerwonym jako tłem i białym jako preloaderem. Jedyną zmianą, jaką wprowadziłem w kolorach, było dodanie 75% krycia do tła, aby strona mogła się wyświetlać podczas ładowania. Wybrałem też inny moduł wstępnego ładowania, abyśmy mogli zobaczyć coś innego i zmieniłem efekty wstępnego ładowania na FadeOut. To jest widok pulpitu.

To jest widok telefonu.

Końcowe myśli

Oto nasze spojrzenie na to, jak dodać stylowy preloader do Twojej witryny Divi. Dodanie modułu wstępnego ładowania do witryny Divi pomaga poinformować użytkownika, że ​​coś dzieje się w tle. DP Preloader jest do tego doskonały. Jest łatwy w użyciu. Masz do wyboru wiele programów do ładowania wstępnego i masz kontrolę nad kolorami modułu wstępnego ładowania i tła. Jeśli chcesz go jeszcze bardziej dostosować, możesz przesłać własny GIF i użyć go jako preloadera.

Teraz możesz łatwo dodać niestandardowy preloader do swojej witryny Divi!

Chcemy usłyszeć od Ciebie. Czy dodałeś preloader do swojej witryny Divi? Daj nam znać w komentarzach poniżej.

Polecany obraz za pośrednictwem FastMotion / shutterstock.com