fbpx

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

jak dodać efekt ruchomych czastek. particle background efekt
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. efekt ruchomych cząstek polde kodu 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 particlejs generowanie kodu efekt ruchomych cząstek 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. szablony efektów ruchomych 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). szablony efektów ruchomych cząsteczek pobranie kodu 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. id efektu ruchomej cząsteczki Zapisujemy zmiany i cieszymy się efektem ruchomych cząsteczek 🙂 Jeśli masz jakieś pytania napisze je w komentarzu.

Więcej bardzo szczegółowej wiedzy, o tym jak, tworzyć strony internetowe, które przyciągną rzesze nowych klientów dowiesz się na bezpłatnym szkoleniu przez Internet.

na blogu jak zrobić stronę internetowa

8 komentarzy

  1. Damian

    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?

    Odpowiedz
    • Rafał Stępień

      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ść.

      Odpowiedz
    • Damian

      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.

      Odpowiedz
      • Rafał Stępień

        Super 😀 Powodzenia 🙂

  2. Jurek

    Witam
    Jak można ustawić ikonę telefonu tak aby była cały czas widoczna podczas przewijania strony ?

    Pozdrawiam Jurek

    Odpowiedz
  3. Asia

    Super sprawa! Wykorzystam na pewno 😉 Dzięki Rafał, jak zawsze masz świetne pomysly, którymi dzielisz się bez limitów. Ukłony 😉

    Odpowiedz
    • Rafał Stępień

      Do usług 😉

      Odpowiedz

Wyślij komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *

Facebook – Fanpage

Facebook – Grupa

Bezpłatny Kurs 

Jak Zrobić Skuteczną Stronę Internetową Bez Kodowania za 77,49 zł w 12 godzin?

BEZPŁATNE WIDEO SZKOLENIE_

Kategorie

Pin It on Pinterest

Share This

Udostępnij to

Podziel się z znajomymi