Jak dodać animowane tło w WordPress (2 metody)

Czy uważasz, że dodanie animowanego tła w WordPress jest skomplikowane? Pomyśl jeszcze raz.

Kiedyś myśleliśmy tak samo, ale po kilku eksperymentach odkryliśmy, że wcale nie jest tak źle.

Wiemy, jak ważne jest zrobienie wrażenia na odwiedzających od momentu, gdy trafią na Twoją stronę. Animowane tło to świetny element projektowania WordPress do stworzenia niezapomnianego pierwszego wrażenia, nie przytłaczając jednocześnie treści.

Ale jeśli martwisz się o wolne ładowanie, skomplikowany kod lub drogie wtyczki, nie martw się. Odkryliśmy proste rozwiązanie przy użyciu particle.js, która jest lekką biblioteką JavaScript tworzącą oszałamiające animowane tła bez wpływu na wydajność Twojej strony.

W tym przewodniku pokażemy Ci dokładnie, jak dodać piękne animacje cząsteczkowe do Twojej strony WordPress, niezależnie od tego, czy wolisz użyć wtyczki, czy trochę kodu. Sprawmy, aby Twoja strona internetowa się wyróżniała!

Dlaczego warto dodać animowane tło w WordPress?

Dostosowanie tła Twojej strony internetowej może na początku wydawać się nieistotne. Jednak po latach pracy w świecie WordPress i projektowania stron internetowych zauważyliśmy, że strony z przemyślanymi animowanymi tłami zazwyczaj dłużej utrzymują zaangażowanie odwiedzających.

Animowane tło może poprawić atrakcyjność wizualną Twojej strony internetowej, czyniąc ją bardziej interaktywną i przyciągającą wzrok odwiedzających. Daje to wrażenie, że Twoja witryna WordPress wykorzystuje wysokiej jakości i innowacyjny projekt.

Wiele stron internetowych używa również animowanych efektów, gdy chcą uczcić specjalną okazję.

Na przykład, możesz zobaczyć sklepy e-commerce dodające animowane płatki śniegu lub spadające choinki na swoich stronach internetowych, aby stworzyć świąteczną atmosferę na okres świąteczny.

Niektóre strony internetowe używają również animacji tła preloadera.

Dzięki temu odwiedzający mogą odnieść wrażenie, że strona się ładuje, co sprawia, że chętniej cierpliwie czekają na pojawienie się elementów strony internetowej. Możesz przeczytać nasz artykuł o dodawaniu animacji tła preloadera, aby uzyskać więcej informacji.

W tym przewodniku pokażemy Ci, jak dodać animowane tło za pomocą particle.js. Jeśli chcesz dowiedzieć się, czym to jest, przejdź do następnej sekcji.

Czym jest particle.js?

particle.js to biblioteka JavaScript, która pozwala tworzyć oszałamiające efekty wizualne za pomocą cząsteczek, które są małymi, graficznymi, animowanymi elementami.

Te cząsteczki można dostosować pod względem rozmiaru, koloru, kształtu i ruchu. Reagują również na interakcje użytkownika, takie jak ruchy myszy lub kliknięcia, aby dodać dodatkową warstwę zaangażowania do Twojej strony internetowej.

Teraz, gdy wiesz, czym jest particle.js, zobaczmy, jak możesz go użyć do dodania animowanego tła w WordPress. Istnieją dwie metody dla początkujących, a możesz nawigować po tym przewodniku za pomocą poniższych szybkich linków:

• Metoda 1: Jak dodać animowane tło za pomocą kreatora stron (bez kodu)
• Method 2: How to Add an Animated Background With Code (Free)

Metoda 1: Jak dodać animowane tło za pomocą kreatora stron (bez kodu)

Pierwszą metodą jest użycie SeedProd, który jest najlepszą wtyczką do tworzenia stron WordPress na rynku. Oferuje wbudowaną i wysoce konfigurowalną funkcję tła cząsteczkowego.

Dzięki niemu możesz wybrać jedną z dostępnych animacji cząsteczkowych lub dodać własną. Możliwe jest również modyfikowanie liczby cząsteczek, ruchów animacji i efektów najechania, aby dopasować je do swoich preferencji.

Aby uzyskać więcej informacji o SeedProd, możesz zapoznać się z naszą szczegółową recenzją SeedProd. Omówiliśmy wszystko, w tym opcje dostosowywania, wybór szablonów i bloków oraz integracje z innymi firmami.

W tym przewodniku użyjemy wersji premium SeedProd, ponieważ funkcja tła cząsteczkowego jest tam dostępna.

Aby korzystać z SeedProd, musisz najpierw zainstalować i aktywować wtyczkę. Więcej szczegółów na ten temat znajdziesz w naszym przewodniku dla początkujących dotyczącym instalacji wtyczki WordPress.

Następnie po prostu skopiuj i wklej swój klucz licencyjny do wtyczki. Przejdź do swojego panelu WordPress, wybierz SeedProd » Ustawienia, i wstaw klucz licencyjny w odpowiednim polu. Następnie kliknij „Zweryfikuj klucz”.

Jeśli chcesz najpierw dostosować swój motyw przed dodaniem tła cząsteczkowego w WordPress, możesz skorzystać z naszego przewodnika jak łatwo stworzyć niestandardowy motyw za pomocą SeedProd.

Teraz musisz otworzyć kreator metodą przeciągnij i upuść dla strony, na którą chcesz wstawić tło cząsteczkowe. Jeśli stworzyłeś motyw za pomocą SeedProd, powinieneś już mieć dodane strony w WordPress.

Następnie po prostu przejdź do Strony » Wszystkie strony i najedź kursorem na stronę, taką jak strona główna, strona „O nas” lub coś innego. Następnie wybierz przycisk „Edytuj za pomocą SeedProd”.

Jeśli ta opcja nie pojawia się u Ciebie, nie martw się.

Po prostu kliknij przycisk „Edytuj”, a w edytorze bloków kliknij przycisk „Edytuj za pomocą SeedProd”.

Powinieneś teraz znaleźć się w kreatorze stron SeedProd.

Po prostu najedź kursorem na sekcję strony, do której chcesz dodać tło cząsteczkowe w WordPressie i wybierz ją. Będziesz wiedział, że wybrałeś sekcję, jeśli pojawi się na niej fioletowa ramka i pasek narzędzi.

Po kliknięciu sekcji powinna pojawić się boczna sekcja z panelami po lewej stronie.

Teraz wystarczy przełączyć się na zakładkę „Zaawansowane” i włączyć ustawienie „Włącz tło cząsteczkowe”.

Istnieje kilka ustawień tła cząsteczkowego, które możesz skonfigurować.

Jednym z nich jest Styl, gdzie możesz wybrać dowolny z dostępnych efektów animacji, takich jak Wielokąt, Przestrzeń, Śnieg, Płatki śniegu, Boże Narodzenie, Halloween i Niestandardowy.

Więcej o dodawaniu niestandardowej animacji tła cząsteczkowego porozmawiamy później w artykule.

Jest też Przezroczystość, która kontroluje, jak przezroczysta wygląda animacja, oraz Kierunek przepływu, który ustawia kierunek, w którym powinny zmierzać cząsteczki.

Dla niektórych stylów cząsteczek możesz również dostosować ich kolory.

Jednak dla stylu świątecznego i Halloween nie ma ustawień kolorów, ponieważ cząsteczki są obrazami.

Poniżej Kolor znajduje się „Ustawienia zaawansowane”. Włączenie go pozwala dostosować liczbę cząsteczek, rozmiar cząsteczek, prędkość ruchu i włączyć efekt najechania.

Dzięki ostatniej funkcji cząsteczki będą poruszać się zgodnie z kierunkiem myszy. Pamiętaj, że nie będzie to działać podczas przeglądania Twojej strony WordPress w obszarze kreatora stron lub jeśli zawartość sekcji zajmuje całą jej przestrzeń.

I to wszystko, co musisz zrobić.

Po zakończeniu dostosowywania tła cząsteczkowego WordPress możesz kliknąć przycisk „Zapisz” w prawym górnym rogu, aby opublikować zmiany. Możesz również wybrać przycisk „Podgląd”, aby zobaczyć, jak wygląda tło cząsteczkowe.

Tworzenie niestandardowego tła cząsteczkowego dla Twojej strony internetowej

Jeśli dostępne efekty animacji nie odpowiadają Twoim potrzebom, możesz również utworzyć własny. Powinieneś wybrać styl „Niestandardowy” w ustawieniach tła cząsteczkowego.

Następnie kliknij link w wierszu „Proszę odwiedzić link tutaj i wybrać wymagane atrybuty dla cząsteczki.”

Ten link zaprowadzi Cię do strony internetowej Vincenta Garreau, która zawiera bibliotekę Javascript do animacji cząsteczkowych.

Na tej stronie możesz dostosować pożądany projekt cząsteczek, ich interaktywność i kolor tła.

W ustawieniu „cząsteczki” możesz dostosować liczbę cząsteczek, kolor, kształt, rozmiar, przezroczystość, linie łączące cząsteczki i ruch.

Poniżej znajduje się „interaktywność”.

Tutaj możesz dostosować, jak cząsteczki zachowują się po najechaniu na nie kursorem i kliknięciu ich.

Na koniec masz „tło strony (css)”. Tutaj możesz zmienić kolor tła animacji cząsteczkowej oraz zmodyfikować jej rozmiar, pozycję i powtórzenie.

W razie potrzeby możesz również przesłać adres URL niestandardowego obrazu tła.

Po zakończeniu możesz kliknąć przycisk „Pobierz bieżącą konfigurację (json)” na dole.

Spowoduje to pobranie pliku kodu JSON tła cząsteczkowego, który należy otworzyć za pomocą edytora tekstu. Pozostaw okno edytora tekstu otwarte podczas przechodzenia do następnych kroków.

Teraz wróćmy do kreatora stron SeedProd.

Przejdź ponownie do menu Tło cząsteczkowe w ustawieniach zaawansowanych. Następnie skopiuj i wklej kod JSON do odpowiedniego pola tekstowego.

Powinieneś teraz zobaczyć swoje tło cząsteczkowe w sekcji podglądu.

Kliknij „Podgląd”, aby zobaczyć, jak tło cząsteczkowe wygląda na froncie, i „Zapisz”, aby sfinalizować zmiany.

Oto przykład tego, jak może wyglądać tło cząsteczkowe:

Metoda 2: Jak dodać animowane tło za pomocą kodu (bezpłatnie)

Jeśli używanie kreatora stron do wstawienia animowanego tła wydaje się zbyt pracochłonne, możesz również dodać je za pomocą kodu. Nie martw się, jeśli nie jesteś ekspertem od kodowania, ponieważ użyjemy WPCode, aby ten proces był bezpieczny i prosty.

Możesz użyć darmowej lub płatnej wersji WPCode do tego samouczka. Chociaż darmowa wersja działa doskonale, wersja premium zawiera pomocne funkcje, takie jak generowanie kodu AI i tryb testowania.

Możesz przeczytać naszą recenzję WPCode, jeśli potrzebujesz więcej informacji.

Najpierw zainstaluj wtyczkę w swoim panelu administracyjnym WordPress.

Po aktywacji przejdź do Fragmenty kodu » + Dodaj fragment w swoim panelu, a następnie kliknij „Dodaj własny kod (nowy fragment)”, a następnie przycisk „+ Dodaj własny fragment”.

Teraz musisz wybrać typ fragmentu.

Ponieważ będziemy pracować z kombinacją HTML, JavaScript i CSS, możesz wybrać „Fragment HTML” z opcji.

Teraz nadaj swojemu fragmentowi łatwą do zapamiętania nazwę.

Może to być coś prostego, jak „Tło Particle.js”.

Teraz wklej poniższy kod.

Ten kod został faktycznie zaadaptowany z tej samej strony Vincenta Garreau, która została zaprezentowana w pierwszej metodzie, ale pokażemy Ci, jak dalej ją dostosować za pomocą samego kodu:

<!-- HTML --> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Particles.js Background</title> <!-- Include the particles.js library --> <script src="https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script> <!-- Include your custom styles --> <style> /* Reset styles */ body { margin: 0; font: normal 75% Arial, Helvetica, sans-serif; } canvas { display: block; vertical-align: bottom; } /* Particles.js container */ #particles-js { position: fixed; top: 0; width: 100%; height: 100%; /* Background color; change this to any valid CSS color value */ background-color: #b61924; /* <-- Customize background color here */ /* Optional background image; add the URL inside the quotes */ background-image: url(""); /* <-- Add background image URL here */ background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; z-index: -1; /* Ensure the particles are behind other content */ } /* Optional stats styles */ .count-particles { background: #000022; position: absolute; top: 48px; left: 0; width: 80px; color: #13E8E9; font-size: 0.8em; text-align: left; text-indent: 4px; line-height: 14px; padding-bottom: 2px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; border-radius: 0 0 3px 3px; -webkit-user-select: none; margin-top: 5px; margin-left: 5px; } .js-count-particles { font-size: 1.1em; } </style> </head> <body> <!-- Particles.js container --> <div id="particles-js"></div> <!-- Optional Stats Display --> <div class="count-particles"> <span class="js-count-particles">--</span> particles </div> <!-- Initialize particles.js --> <script> /* Customize the particles.js parameters below */ particlesJS("particles-js", { "particles": { "number": { "value": 80, /* <-- Number of particles; adjust this value */ "density": { "enable": true, "value_area": 800 /* <-- Particle density area */ } }, "color": { "value": "#ffffff" /* <-- Particle color; change to any valid CSS color */ }, "shape": { "type": "circle", /* <-- Particle shape: "circle", "edge", "triangle", etc. */ "stroke": { "width": 0, "color": "#000000" /* <-- Stroke color of particles */ }, "polygon": { "nb_sides": 5 /* <-- Number of sides for polygon shape */ }, "image": { "src": "img/github.svg", /* <-- URL of custom image for particles */ "width": 100, "height": 100 } }, "opacity": { "value": 0.5, /* <-- Opacity of particles */ "random": false, /* <-- Whether opacity is random */ "anim": { "enable": false, "speed": 1, "opacity_min": 0.1, "sync": false } }, "size": { "value": 3, /* <-- Size of particles; adjust to change particle size */ "random": true, /* <-- Whether particle size is random */ "anim": { "enable": false, "speed": 40, "size_min": 0.1, "sync": false } }, "line_linked": { "enable": true, /* <-- Enable lines between particles */ "distance": 150, /* <-- Maximum distance for linking particles */ "color": "#ffffff", /* <-- Color of the lines */ "opacity": 0.4, /* <-- Opacity of the lines */ "width": 1 /* <-- Width of the lines */ }, "move": { "enable": true, /* <-- Enable particle movement */ "speed": 6, /* <-- Speed of particle movement */ "direction": "none", /* <-- Direction of movement */ "random": false, /* <-- Randomize movement direction */ "straight": false, /* <-- Move in straight lines */ "out_mode": "out", /* <-- Action when particles go out of canvas */ "bounce": false, /* <-- Enable particles to bounce off edges */ "attract": { "enable": false, /* <-- Attract particles toward mouse */ "rotateX": 600, "rotateY": 1200 } } }, "interactivity": { "detect_on": "canvas", /* <-- Interaction events occur on "canvas" or "window" */ "events": { "onhover": { "enable": true, /* <-- Enable interaction on hover */ "mode": "repulse" /* <-- Interaction mode on hover: "grab", "bubble", "repulse" */ }, "onclick": { "enable": true, /* <-- Enable interaction on click */ "mode": "push" /* <-- Interaction mode on click: "push", "remove", "bubble", "repulse" */ }, "resize": true /* <-- Enable reactivity to window resize */ }, "modes": { "grab": { "distance": 400, /* <-- Distance for grab mode */ "line_linked": { "opacity": 1 } }, "bubble": { "distance": 400, /* <-- Distance for bubble mode */ "size": 40, /* <-- Size of particles in bubble mode */ "duration": 2, /* <-- Duration of bubble effect */ "opacity": 8, /* <-- Opacity of particles in bubble mode */ "speed": 3 /* <-- Speed of bubble effect */ }, "repulse": { "distance": 200, /* <-- Distance for repulse mode */ "duration": 0.4 /* <-- Duration of repulse effect */ }, "push": { "particles_nb": 4 /* <-- Number of particles added on click */ }, "remove": { "particles_nb": 2 /* <-- Number of particles removed on click */ } } }, "retina_detect": true /* <-- Enable retina display support */ }); /* Optional: Variables for stats.js (if used) */ var count_particles, stats, update; </script> </body> </html> 

Ten kod jest dość długi, więc przyjrzyjmy się częściom, które można dostosować.

Aby zmienić kolor tła, zmodyfikuj właściwość background-color pod #particles-js. Zamień #b61924 na dowolną prawidłową wartość koloru CSS, taką jak #FF0000 dla czerwonego lub rgb(255,0,0) lub nawet nazwy kolorów, takie jak red.

background-color: #b61924; /* <-- Customize background color here */ 

Aby dodać obraz tła, ustaw właściwość background-image, dodając adres URL swojego obrazu wewnątrz url("").

Upewnij się, że ścieżka lub adres URL obrazu tła jest prawidłowy.

background-image: url("path/to/your/image.jpg"); /* <-- Add background image URL here */ 

Aby zmienić liczbę cząstek, dostosuj "wartość" w sekcji "liczba".

Zwiększenie wartości dodaje więcej cząstek, podczas gdy jej zmniejszenie redukuje ich liczbę.

"number": { "value": 80, /* <-- Number of particles; adjust this value */ // ... } 

Aby zmienić rozmiar cząstek, możesz zmodyfikować "wartość" w sekcji "rozmiar".

Większa liczba zwiększa rozmiar cząstek i odwrotnie.

"size": { "value": 3, /* <-- Size of particles; adjust to change particle size */ "random": true, /* <-- Set to false for uniform size */ // ... } 

Aby zmienić kolor cząstek, zastąp "wartość" w sekcji "kolor" dowolną prawidłową wartością koloru CSS.

"color": { "value": "#ffffff" /* <-- Particle color; change to any valid CSS color */ }, 

Aby zmienić kształt cząstek, możesz zmodyfikować "typ" w sekcji "kształt".

Możesz użyć kształtów takich jak "koło", "krawędź", "trójkąt", "wielokąt",  lub nawet "gwiazda".

"shape": { "type": "circle", /* <-- Particle shape: "circle", "edge", "triangle", etc. */ // ... }, 

Aby zmienić właściwości linii między cząstkami, możesz dostosować właściwości w sekcji "line_linked".

Na przykład, jeśli zmienisz "enable": true na "enable": false, nie zobaczysz żadnej linii łączącej cząstki.

"line_linked": { "enable": true, /* <-- Enable lines between particles */ // ... }, 

Możesz również zmienić kolor linii, przezroczystość i szerokość.

"line_linked": { "color": "#ffffff", /* <-- Line color */ "opacity": 0.4, /* <-- Line opacity */ "width": 1, /* <-- Line width */ // ... }, 

Nie martw się, jeśli będziesz musiał dokonać zmian później, ponieważ zawsze możesz zmodyfikować kod nawet po aktywacji.

Po dostosowaniu kodu do swoich potrzeb, czas ustawić, gdzie i kiedy ma pojawić się Twoje animowane tło.

Przewiń w dół do sekcji Wstawianie (Insertion) swojego fragmentu kodu WPCode. Upewnij się, że wybrałeś „Automatyczne wstawianie” (Auto Insert) jako Metodę wstawiania (Insert Method) i wybierz „Stopka całej witryny” (Site Wide Footer) jako Lokalizację (Location).

WPCode oferuje również potężną funkcję zwaną logiką warunkową, która jest dostępna zarówno w wersji darmowej, jak i premium. Ta funkcja pozwala dokładnie kontrolować, gdzie Twoje animowane tło pojawia się na Twojej stronie internetowej.

Aby skorzystać z tej funkcji, zlokalizuj sekcję „Inteligentna logika warunkowa” i przełącz opcję „Włącz logikę” na pozycję włączoną. Zobaczysz opcje ustawiania konkretnych warunków wyświetlania tła.

Na przykład, jeśli chcesz, aby animowane tło pojawiało się tylko na Twojej stronie głównej, wybierz „URL strony” z listy rozwijanej warunków, wybierz „Jest” i wprowadź adres URL swojej strony głównej.

Możesz dodać wiele grup warunków, klikając przycisk „+ Dodaj nową grupę”.

Ostatnim krokiem jest aktywacja fragmentu. Poszukaj przełącznika „Nieaktywny” na górze strony i kliknij go, aby zmienić na „Aktywny”. Nie zapomnij kliknąć „Zapisz fragment”, aby zachować zmiany.

To wszystko! Odwiedź swoją witrynę na urządzeniu mobilnym lub komputerze, aby zobaczyć swoje nowe animowane tło w akcji. Oto jak to wygląda na naszej stronie testowej:

Czy animowane tła spowalniają strony internetowe?

Jeśli nie zrobisz tego dobrze, animowane tła mogą spowolnić Twoją stronę internetową. Ale są sposoby, aby tego uniknąć.

W przypadku teł cząsteczkowych liczba cząsteczek i szybkość ich ruchu mogą wpływać na szybkość ładowania strony. Więcej cząsteczek i szybszy ruch wymagają większej mocy obliczeniowej, co może spowolnić działanie.

Aby to naprawić, możesz wypróbować różne ustawienia gęstości i prędkości cząsteczek, aby znaleźć to, co najlepiej działa dla Twojej witryny. Podczas tego procesu możesz przeprowadzić testy prędkości WordPress, aby zobaczyć efekty.

Dobrym pomysłem jest również używanie animowanych teł tylko na stronach, gdzie mają one największe znaczenie. Nie potrzebujesz ich wszędzie, bo mogą się znudzić.

Na koniec, aby Twoja strona internetowa działała szybko z tłem cząsteczkowym, upewnij się, że przestrzegasz najlepszych praktyk dotyczących szybkości strony internetowej. Więcej informacji znajdziesz w naszym kompletnym przewodniku po przyspieszaniu WordPressa.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać animowane tło cząsteczkowe w WordPressie. Możesz również zapoznać się z naszym przewodnikiem na temat jak uzyskać opinie na temat projektu strony internetowej w WordPressie oraz naszym wyborem najlepszych konstruktorów motywów WordPress.

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube po samouczki wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku.