Przejdź do treści 
Jak dodać efekt cząsteczek w JS na swojej stronie WordPress? Przeczytaj ten poradnik, ponieważ jest to dużo prostsze niż się wydaje! Aby w całości wykonać kroki pokazane w tym poradniku musisz posiadać:
- Stronę internetową z zainstalowanym CMS WordPress
- Zainstalowany plugin Elementor (nie musisz posiadać wersji PRO)
Czas implementacji: 5 minut
Stwórz swój efekt cząsteczek
Zacznijmy od stworzenia własnego efektu cząsteczek. W tym poradniku pokażemy jak osiągnąć ten efekt bez instalowania niepotrzebnych pluginów na naszej stronie WWW. Aby zastosować ten nowoczesny i przyciągający oko efekt:
- Krok 1: Przejdź na stronę vincentgarreau.com/particles.js
- Krok 2: Dokonaj zmian które Cię interesują w menu w prawym górnym rogu. Możesz między innymi zmienić prędkość przepływu elementów, kolor lub kształt ikon.
- Krok 3: Gdy dokonałeś zmian, kliknij na przycisk „CodePen”
- Krok 4: Ukaże Ci się menu z kodem do umieszczenia HTML, CSS lub JS. Skopiuj zawartość kodu JS.
To powinny być wszystkie kroki do wykonania na tej stronie internetowej. Po dokonaniu zmian aby dostosować wygląd efektu cząsteczek do naszych potrzeb i skopiowaniu kodu JS możemy wykonać kolejne czynności.
Kod do zastosowania na stronie
Po skopiowaniu kodu JS umieść go w kodzie pokazanym poniżej, w miejscu oznaczonym „// TU WKLEJ SWÓJ KOD„:
<style>
.particles-js-canvas-el {
top: 0;
width: 100%;
position: absolute;
z-index: 0;
}
</style>
<script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
// TU WKLEJ SWÓJ KOD
</script>Dodaj widżet HTML w WordPress
Przejdź do strony na której chcesz umieścić efekt cząsteczek. Wybierz Edytuj w Elementorze. Z listy po lewej stronie ekranu nazwanej Elementy wybierz HTML i przenieś gdziekolwiek w sekcji w której chcesz użyć cząsteczek.
Naciśnij przycisk Edytuj na elemencie HTML, w polu tekstowym po lewej stronie ekranu umieść skopiowany kod ze skryptem JS.
Edytuj sekcję w której chcesz zastosować cząsteczki
Zaznacz sekcję w której umieściłeś element HTML a następnie przejdź do zakładki Zaawansowane w menu po lewej stronie ekranu.
Otwórz zakładkę Zaawansowane a następnie otwórz pierwszą rozwijaną listę nazwaną również Zaawansowane. W polu ID CSS wpisz wartość ’particles-js’ tak jak w przykładzie poniżej.
Po dodaniu odpowiedniej wartości w polu możesz zapisać zmiany klikając przycisk AKTUALIZUJ. Teraz zmiany będą widoczne na żywo na Twojej stronie internetowej. Możesz także przejrzeć zmiany przed aktualizacją strony – aby to zrobić kliknij na ikonkę oczka obok przycisku aktualizacji.
Voila! Udało Ci się dodać efekt cząsteczek w JS na swojej stronie WordPress! Możesz się teraz cieszyć nowoczesnym a także przyciągającym uwagę klienta efektem na swojej stronie 😉
