Jak dodać moduł ładujący do Elementora

Preloadery (lub animacje ładowania) pokazują postęp procesu ładowania strony internetowej. Trwają tylko kilka sekund, podczas gdy serwer i przeglądarka współpracują ze sobą, aby renderować twoją stronę, ale mogą służyć ważnemu celowi – utrzymywaniu odwiedzających na twojej stronie podczas ładowania treści.

Bez nich, jeśli Twoja witryna jest duża, odwiedzający mogą być zmuszeni do odwiedzania jej i oglądania brzydkiego procesu renderowania strony, najpierw treść HTML, potem CSS, potem czcionka, potem obrazy… To słabe pierwsze wrażenie, a jeśli trwa to zbyt długo, odwiedzający może łatwo kliknąć przycisk „wstecz” i przejść do drugiego linku w Google. Niedobrze!

Animacje ładowania są zabawne i przyjemne. Rzućmy okiem na preloader do Elementora.

Dodawanie modułu wstępnego ładowania do Elementora za pomocą wtyczki

Jeśli szukasz wtyczki, aby dodać animację wstępnego ładowania do swojej witryny Elementor, najlepszym rozwiązaniem jest LoftLoader.

Używaliśmy tego przez ostatnie kilka lat w wielu projektach — od prostej strony korporacyjnej, która chciała wyświetlać swoje logo podczas ładowania, po nasze narzędzie SpeedOpp Reports (wprowadź adres URL, aby zobaczyć, jak działa).

Powodem, dla którego zalecamy używanie tej wtyczki z Elementorem, jest to, że używaliśmy jej w przeszłości i działa dobrze. Konfiguracja jest również bardzo prosta. Oto jak.

Użyj Loftloadera, aby dodać moduł ładujący do Elementora

Najpierw pobierz plik wtyczki z Envato. Wybieramy wersję pro LoftLoadera, ponieważ zawiera o wiele więcej funkcji niż limitowana wersja Lite. Jeśli po prostu szukasz niesamowicie prostego, przejrzystego programu ładującego, którego tak naprawdę nie możesz dostosować (ale jest bezpłatny ), przewiń w dół do następnej sekcji. Jeśli jednak chcesz dodać mnóstwo dostosowań, jest to najlepszy wybór.

Po zainstalowaniu w witrynie WordPress kliknij przycisk Dostosuj (lub przejdź do niego, przechodząc do wyglądów, dostosuj). Spowoduje to załadowanie modułu Preloader Customizer.

Masz teraz kilka opcji do dostosowania. Przyjrzyjmy się, jak skonfigurowaliśmy LoftLoader w witrynach Elementora naszego klienta.

Najpierw upewnij się, że moduł wstępnego ładowania jest włączony. Następnie ustaw reguły wyświetlania. Zazwyczaj konfigurujemy moduł wstępnego ładowania tak, aby działał na elemencie lub stronie głównej, a jeśli witryna jest dość ciężka i ładowanie zajmuje trochę czasu, włączamy go globalnie.

W razie potrzeby możesz również wykluczyć strony i posty. Jest to przydatne, jeśli chodzi o strony docelowe i tym podobne.

Następnie skonfiguruj tło. Zazwyczaj używamy jednolitego, ciemnego koloru, który pasuje do marki klienta. W razie wątpliwości wybierz szary. Możesz także wybrać obraz (co jest miłe, jeśli używasz tła utworzonego w czymś takim jak Photoshop).

Jedno z najważniejszych ustawień modułu wstępnego ładowania jest zawarte w ustawieniach tła; „Zakończenie animacji”. Zawsze wybieramy fade, ale masz wiele możliwości – od podziałów po skurcze.

Kolejnym ustawieniem do manipulowania jest sama ikona ładowania. Możesz wybierać spośród wielu gotowych ustawień, ale to, co czyni to narzędzie tak potężnym, to fakt, że możesz przesyłać własne pliki. Mogą to być animowane pliki GIF, logo firmy lub cokolwiek innego.

Możesz również dodać kod html, dzięki czemu można zintegrować loterie i inne złożone animacje. Super potężny!

W przypadku ładowarek naszych klientów zazwyczaj decydujemy się na ciemne tło, białe logo firmy lub specjalnie zaprojektowany gif ładowania… coś takiego:

Istnieją inne mniej istotne opcje, takie jak pasek postępu ładowania, wyświetlanie procentu lub czasu potrzebnego do załadowania strony, niestandardowy komunikat, który można wyświetlić pod lub nad ikoną/logo i nie tylko.

Istnieje również kilka narzędzi, które naprawdę sprawiają, że jest to świetne rozwiązanie dla każdej witryny WordPress, w tym Elementora.

Wygeneruj krótki kod do umieszczenia na dowolnej stronie (użyj bloku shortcode w Elementorze), animuj wewnętrzne elementy preloadera, zastosuj animację ładowania do określonych elementów (nie do całej strony - przydatne w połączeniu z niestandardowymi identyfikatorami i klasami Elementora), włącz określone urządzenia i ustaw min./maks. czasy ładowania.

Kiedy skończysz z konfiguracją, po prostu kliknij „opublikuj”, a twój zabójczy moduł ładowania wstępnego pojawi się na wybranych stronach.

Użyj Preloader Plus, aby dodać moduł wstępnego ładowania do Elementora

Jeśli szukasz darmowego (ale bardziej ograniczonego rozwiązania), słyszeliśmy dobre rzeczy o Preloader Plus.

Zainstaluj wtyczkę, a będziesz mógł przełączać tło, ikonę, pasek postępu i nie tylko.

Loftloader ma wersję lite, ale jest irytująco limitowana. Plus jest łatwiejszy w użyciu i ma więcej funkcji.

Głównym powodem, dla którego podajemy LoftLoader zamiast Preloader Plus, jeśli chodzi o strony naszych klientów Elementor, jest to, że Loft zawiera mnóstwo funkcji, które nie są zawarte w żadnej bezpłatnej wtyczce.

Dodatkowo, jeśli nasz klient kiedykolwiek zechce zmienić którekolwiek z ustawień preloadera, jest to całkiem łatwe, nawet jeśli nie ma wiedzy na temat kodu (szczególnie niezbędnej dla nas, ponieważ reklamujemy nasze strony internetowe jako niezwykle łatwe w użyciu).

Dodawanie modułu wstępnego ładowania do Elementora z kodem (kopiuj/wklej)

Omówiliśmy wtyczki, ale w rzeczywistości jest to nasza zalecana metoda dodawania modułu wstępnego ładowania do Elementora.

Jeśli wybierzesz ścieżkę kodowania, zyskasz elastyczność, kontrolę, a co najważniejsze, jest to całkowicie bezpłatne. Być może myślisz sobie, nic o tym nie wiem i zamierzam pozostać przy wtyczce, ale jest to dość proste do zaimplementowania w dowolnej witrynie Elementora i pozwoli Ci zaoszczędzić pieniądze.

Wystarczy skopiować i wkleić poniższy kod. Wyjaśnimy, jak to działa, abyś mógł go zmodyfikować, aby dopasować go do potrzeb Twojej witryny.

Wstępne ładowanie GIF-ów/obrazów

Ten kod pochodzi stąd, a następnie został zmodyfikowany.

 <!--Preloader--> < div id = "load" class = "spinner-loader" > < div class = "load-wrap" > </ div > </ div >
 Język kodu: HTML, XML ( xml )

Jest on wstawiany do nagłówka Twojej witryny WordPress (za chwilę omówimy, jak to zrobić).

/** Body Overlay **/ body #load { display : block; height : 100% ; overflow : hidden; position : fixed; top : 0 ; left : 0 ; width : 100% ; z-index : 9901 ; opacity : 1 ; background-color : #FFFFFF ; visibility : visible; -webkit-transition : all . 35s ease-out; transition : all . 35s ease-out; } body #load .loader-removed { opacity : 0 ; visibility : hidden; } .spinner-loader .load-wrap { background-image : url ( "https://isotropic.co/wp-content/uploads/2020/11/isodarklogo1.png" ); background-position : center center; background-repeat : no-repeat; text-align : center; width : 100% ; height : 100% ; }
 Język kodu: CSS ( css )

To trafia do twojego arkusza stylów (możesz dodać go do niestandardowego css w Elementorze lub niestandardowego css pod wyglądami, dostosuj).

Na koniec łączymy go z pewnym JS, który pokazuje i ukrywa preloader podczas ładowania strony:

 < script type = "text/javascript" > // Javascript function to display loader on page load document .addEventListener( "DOMContentLoaded" , function ( event ) { var $load = document .getElementById( "load" ); var removeLoading = setTimeout( function ( ) { $load.className += " loader-removed" ; }, 500 ); }); </ script >
 Język kodu: HTML, XML ( xml )

Znajduje się to również w nagłówku Twojej witryny.

Istnieją dwie główne rzeczy do edycji, jeśli chcesz dostosować logo i kolory; oba znajdują się w CSS.

Tło strony:

background-color : #FFFFFF ;
 Język kodu: CSS ( css )

Domyślnie biały, zmień #ffffff, aby zmienić kolor.

Ładowarka:

 background-image: url( "https://isotropic.co/wp-content/uploads/2020/11/isodarklogo1.png" );
 Język kodu: JavaScript ( javascript )

Używamy PNG. Upewnij się, że obraz ma wstępnie rozmiar około 50 na 50 pikseli. Możesz także użyć GIF-a lub czegoś innego, co obsługuje tła CSS. Zmień adres URL na lokalizację zasobu. Oto prosty gif do ładowania.

 background-image: url( "https://i.imgur.com/llF5iyg.gif" ); /** Resize it to 50px by 50px like so **/ background-size: 50 px 50 px;
 Język kodu: JavaScript ( javascript )

Możesz także dostosować czas wyświetlania programu ładującego: w JS jest on ustawiony na 500 ms. Zmień 500 na dowolną inną wartość, aby zmienić wyświetlany czas.

Jak dodać kodowany moduł ładujący do Elementora

Możesz dodać ten kod, kopiując i wklejając do Elementora. Jest tu kilka tras.

Preloader na całej stronie (metoda Elementor):

Zakładając, że zbudowałeś nagłówek w Elementorze, po prostu skopiuj i wklej kod z następnej sekcji, wyłączając wszystkie aspekty PHP, więc (" add_action( 'wp_head', function() { ?> " i " <?php } ); " ) do bloku html, tak jak.

Powinien pokazywać preloader nakładający się na wszystko (to dlatego, że JS nie został zainicjowany). Zapisz i przetestuj na interfejsie.

Preloader w całej witrynie (inna metoda):

1. Pobierz wtyczkę Fragmenty kodu.
2. Utwórz nowy fragment kodu (i zastosuj go globalnie)
3. Wklej następujące elementy do fragmentu kodu:

 add_action( 'wp_head' , function ( ) { ?> < style > /** Body Overlay **/ body #load { display : block; height : 100% ; overflow : hidden; position : fixed; top : 0 ; left : 0 ; width : 100% ; z-index : 9901 ; opacity : 1 ; background-color : #FFFFFF ; visibility : visible; -webkit-transition : all . 35s ease-out; transition : all . 35s ease-out; } body #load .loader-removed { opacity : 0 ; visibility : hidden; } .spinner-loader .load-wrap { background-image : url ( "https://isotropic.co/wp-content/uploads/2020/11/isodarklogo1.png" ); background-position : center center; background-repeat : no-repeat; text-align : center; width : 100% ; height : 100% ; } </ style > < div id = "load" class = "spinner-loader" > < div class = "load-wrap" > </ div > </ div > < script type = "text/javascript" > // Javascript function to display loader on page load document .addEventListener( "DOMContentLoaded" , function ( event ) { var $load = document .getElementById( "load" ); var removeLoading = setTimeout( function ( ) { $load.className += " loader-removed" ; }, 500 ); }); </ script > <?php } );
 Język kodu: JavaScript ( javascript )

Preloader na zbiorze stron:

Filtruj w ten sposób:

 <?php global $post; if ( $post->ID == 120 ) { ?> <!-- add the preloader code here --> <?php } ?>
 Język kodu: HTML, XML ( xml )

To spowoduje zastosowanie modułu wstępnego ładowania tylko do określonej strony/postu o identyfikatorze 120. Możesz również użyć is_page i tablicy, aby wybrać wiele stron.