Ja lubię proste i szybkie rozwiązania dlatego też przygotowałem poradnik gdzie wykonamy to bez znajomości kodowania 🙂
Zaczynamy
Krok 1 – Integracja biblioteki ParticleJs z WordPress.
W pierwszej kolejności aby WordPress mógł obsługiwać takie efekty musisz dodać do niego bibliotekę JS. Można zrobić to ręcznie korzystając z tej instrukcji. Jednak mam dla Ciebie lepsze rozwiązanie. Wykona to za Ciebie specjalna wtyczka „Particles Background”. Wystarczy, że ją pobierzesz, zainstalujesz i włączysz w kokpicie WordPress. Kliknij w poniższy link aby pobrać wtyczkę:
Pobierz Wtyczkę (Particles Background)
Po aktywacji wtyczki w menu WordPress pojawi się nowa opcja „Particles Background”:
Kliknij na tą nową opcję. Po prawej tronie pojawi się pole gdzie należy wkleić specjalny kod, który generuje efekt ruchomych cząstek.
Teraz jesteś przygotowany do wdrożenia efektu ruchomych cząstek. Kolejny krok do wygenerowanie kodu efektu.
Krok 2 – Generowanie kodu – efekt ruchomych cząstek.
Kod wygenerujesz na tej stronie:
Mamy tutaj możliwość skonfigurowania różne efekty. W prawym górnym rogu strony jest kilka funkcji. W polu gdzie obecnie jest widoczny napis „Default” mamy do wyboru 5 szablonów efektów wizualnych. Poniżej są dodatkowe opcje konfiguracji. Można tam zmienić szybkość, kształt i inne parametry związane z wyglądem i sposobem poruszana cząsteczek.
Po wybraniu pasującego nam szablonu i skonfigurowaniu efektu, należy pobrać go w postaci kodu na swój komputer klikając na opcję „Dowload current config (json).
Kolejny krok to dodanie tego kodu w pole wcześniej zainstalowanej wtyczki „Particles Background”.
Krok 3 – Dodanie pobranego kodu do pola wtyczki „Particles Background”
Pobrany plik z poprzedniego kroku nazywa się „particlesjs-config” z rozszerzeniem „json” (particlesjs-config.json). Standardowo system Windows nie ma przypisanej domyślnej aplikacji do otwierania takich plików. Taki plik możesz otworzyć przy pomocy zwykłego notatnika. Kliknij prawym przyciskiem myszy na ten plik, następnie wybierz „otwórz za pomocą” i wskaż aplikacje Notatnik aby otworzyć ten plik. Po otwarciu pliku zobaczysz kod efektu ruchomych cząstek.
Przejdź teraz do kokpitu WordPress i opcji wtyczki „Particles Background”. W pierwszej kolejności dodaj poniższy kod:
particlesJS('ID_efektu',
>> Tutaj wklej kod z notatnika <<
);
W miejsce 'ID_efektu’ możesz wpisać dowolną nazwę.
Następnie w miejsce tekstu „>> Tutaj wklej kod z notatnika <<
” wklej kod z pobranego pliku particlesjs-config.json, który otworzyłeś za pomocą notatnika.
Po wklejeniu kodu kliknij na przycisk „Zapisz zmiany”.
Krok 4 – Przypisanie efektu ruchomych cząstek do elementu na stronie.
Czas na uruchomienie efektu na stronie.
Dla osób, które korzystają z motywu Divi
Wystarczy, że w ustawieniach sekcji w zakładce „Zaawansowane” w polu CSS ID wpiszesz „ID_efektu” oraz ustawisz kolor tło dla tej sekcji.
Zapisujemy zmiany i cieszymy się efektem ruchomych cząsteczek 🙂
Jeśli masz jakieś pytania napisze je w komentarzu.
Do usług 😉
Witam
Jak można ustawić ikonę telefonu tak aby była cały czas widoczna podczas przewijania strony ?
Pozdrawiam Jurek
Cześć, najprościej użyć wtyczki np. takiej jak ta https://pl.wordpress.org/plugins/call-now-button/
Cześć super sprawa z tym tłem, Po instalacji wszystko ładnie śmiga, ale przycisk który miałem, niestety już nie. Czy masz może na to rozwiązanie?
Cześć,
należny ustawić z-index. Dla guzika 999 aby był na wierszu, a dla sekcji która ma w tle ruchome cząstki z-index niższy nić 999.
W ustawieniach modu czy sekcji jest to w zakładce Zaawansowane i opcji widoczność.
Dzięki wielkie Rafał 😀
Jesteś dla mnie mistrzem. Świetnie to wygląda i teraz po ustawieniach tego co pisałeś, wszystko działa jak powinno, dzięki jeszcze raz.
Super 😀 Powodzenia 🙂
Witam,
mam mały problem. Efekt działa jak należy, jednak przy otwieraniu strony na telefonie lub urządzeniu o mniejszym wyświetlaczu efekt gubi proporcje (tzn. wygląda na rozciągnięty, nie dostosowuje się od razu do rozmiaru wyświetlacza). Po przesunięciu ekranu i powrocie już wszystko jest ok.
Próbuję różne konfiguracje w ustawieniach, efekt ten sam. Stronkę edytuję przy pomocy wtyczki elementor.
Może ktoś już napotkał taki problem?
Pozdrawiam