Jak dodać efekt ruchomych cząstek jako tło? (Particles Background)

W tym wpisie dowiesz się jak dodać tło z efektem ruchomych cząstek (particles background effect). Poradnik ten dotyczy stron zbudowanych za pomocą platformy WordPress oraz wykorzystującej dowolną wtyczkę kreatora stron (buildera np: Divi Builder, Elementor, Page Builder by SiteOrigin, itd.) z możliwością przypisania ID do wybranego elementu na stronie. No i też bez buildera da się to zrobić tylko, że tutaj już będzie potrzebna znajomość języka HTML i praca z identyfikatorami ID.

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:

Strona do Generowania Kodu

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.