Laptop na biurku z wtyczką loftloader

Jak dodać ciekawy efekt ładowania na stronie w WordPress?

Instrukcja!

Pobierz teraz - zachowaj na później!

Przy realizacji strony www.polskabania.pl użyłyśmy wtyczki, która urozmaica nieco moment ładowania strony (efekt przedstawiony poniżej):

W tym wypadku umieściłyśmy logo firmy, które sukcesywnie wypełnia się kolorem. Umieszczone przez nas logo wypełnione będzie całkowicie, w momencie kiedy strona załaduje się w 100%.

Aby osiągnąć taki efekt należy zainstalować i włączyć wtyczkę LoftLoader. Następnie należy przejść do edycji wtyczki w tym miejscu: Kokpit -> Wtyczki -> Loftloader Lite

Wyświetli się nam edytor wtyczki, w którym możemy ustawić m.in. moment wyświetlania efektu – w naszym wypadku został on ustawiony wyłącznie przy wejściu na stronę główną. Aby to zrobić należy przejść do opcji DISPLAY ON, a następnie zaznaczyć preferowaną opcję, np. HOMEPAGE ONLY

Aby ustawić kolor tła (znajdującego się za umieszczonym obrazem) oraz jego przezroczystość należy przejść do BACKGROUND i ustawić preferowaną przezroczystość – my ustawiłyśmy białe tło, którego przezroczystość wynosi 80%, po to aby strona była jak najmniej widoczna podczas jej ładowania. Dodatkowo możemy ustawić odpowiedni efekt wypełnienia.

Kolejnym krokiem jest ustawienie elementu, który ma zostać wyświetlony na pierwszym planie i którego ma dotyczyć animacja i wypełnienie. W tym celu przechodzimy do LOADER i wybieramy preferowaną animację, bądź tak jak my – wgrany przez nas obraz czyli logo klienta.

Na sam koniec przechodzimy do opcji MORE i następnie do MAXIMUM LOAD TIME, gdzie ustawiamy jak długo ma trwać animacja wypełnienia.

Gdy wykonamy wszystkie opisane czynności, należy sprawdzić czy wszystko działa tak jak zostało przez nas ustawione. Efekt wtyczki Loftloader działa poprawnie również na wersji mobilnej.

Instrukcja!

Pobierz teraz - zachowaj na później!

Chcesz więcej?

Przejdź do opisu realizacji, by zobaczyć dokładniej elementy strony!

Chcesz więcej?

Przejdź do opisu realizacji, by zobaczyć dokładniej elementy strony!

Facebook
Twitter
LinkedIn
Pinterest