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

Chcesz stworzyć animowane tło dla twojej witryny internetowej WordPress?

Animowane tło może dodać wizualnej atrakcyjności twojej witrynie internetowej. Sprawi, że twoja witryna będzie bardziej atrakcyjna i zapadnie w pamięć, pozostawiając trwałe wrażenie na odwiedzających.

W tym przewodniku pokażemy, jak dodać tło cząsteczkowe w WordPressie przy użyciu particle.js, biblioteki animacji JavaScript.

Dlaczego warto dodać animowane tło w WordPress?

Dostosowanie własnego tła witryny internetowej może wydawać się nieistotne. Jednak w rzeczywistości może ono kształtować pierwsze wrażenia odwiedzających na temat twojej marki i mieć wpływ na ich wrażenia z korzystania z witryny.

Animowane tło może zwiększyć atrakcyjność wizualną twojej witryny internetowej, czyniąc ją bardziej interaktywną i przyciągającą wzrok odwiedzających. Sprawia wrażenie, że twoja witryna WordPress wykorzystuje wysokiej jakości i innowacyjny projekt.

Wiele witryn internetowych wykorzystuje również animowane efekty, gdy chcą uczcić specjalną okazję.

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

Niektóre witryny internetowe używają również animacji tła preloadera na swojej stronie internetowej.

Dzięki temu odwiedzający mogą mieć poczucie, że witryna się wczytuje, co sprawia, że są bardziej skłonni cierpliwie czekać na pojawienie się elementów strony. Możesz przeczytać nasz artykuł na temat dodawania animacji tła preloadera, aby uzyskać więcej informacji.

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

Czym jest particle.js?

particle.js to biblioteka JavaScript, która umożliwia tworzenie oszałamiających efektów wizualnych za pomocą cząsteczek, które są małymi, graficznymi, animowanymi elementami.

Cząsteczki te można dostosować pod względem rozmiaru, koloru, kształtu i ruchu. Reagują one również na interakcje użytkownika, takie jak ruchy myszą lub kliknięcia, aby dodać dodatkową warstwę zaangażowania do twojej witryny internetowej.

Teraz, gdy już 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 i możesz poruszać się po tym przewodniku za pomocą szybkich odnośników poniżej:

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

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

Za jego pomocą można wybrać jedną z już dostępnych animacji cząsteczek lub dodać własną. Możliwe jest również modyfikowanie liczby cząsteczek, ruchów animacji i efektów najechania kursorem, aby dostosować je do twoich preferencji.

Aby uzyskać więcej informacji na temat SeedProd, zapoznaj się z naszą szczegółową recenzją SeedProd. Omówiliśmy wszystko, w tym opcje konfiguratora, wybór szablonów i bloków oraz integracje z innymi firmami.

W tym przewodniku będziemy korzystać z wersji premium SeedProd, ponieważ funkcja tła cząsteczkowego jest tam dostępna.

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

Następnie wystarczy skopiować-wkleić twój klucz licencyjny do wtyczki. Wystarczy przejść do twojego kokpitu WordPress, przejść do SeedProd ” Ustawienia, i wstawić 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 na temat tego, jak łatwo utworzyć własny motyw za pomocą SeedProd.

Teraz musisz otworzyć kreator „przeciągnij i upuść” dla strony, do której chcesz wstawić tło cząsteczkowe. Jeśli utworzyłeś motyw za pomocą SeedProd, to powinieneś mieć już dodane strony w WordPressie.

Następnie przejdź do zakładki Strony ” Wszystkie strony i najedź kursorem na wybraną stronę, np. stronę główną, stronę z informacjami lub inną. Następnie wybierz przycisk „Edytuj za pomocą SeedProd”.

Jeśli ta opcja nie pojawia się po twojej stronie, nie martw się.

Wystarczy kliknąć przycisk „Edytuj”, a następnie w edytorze bloków kliknąć przycisk „Edytuj za pomocą SeedProd”.

Powinieneś być teraz wewnątrz kreatora 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 u góry pojawi się fioletowa ramka i pasek narzędzi.

Po kliknięciu sekcji powinien pojawić się panel boczny sekcji po lewej stronie.

Teraz wystarczy przejść do karty „Zaawansowane” i włączyć opcję „Włącz tło cząsteczek”.

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

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

Więcej o dodawaniu własnych animacji tła cząsteczek powiemy w dalszej części artykułu.

Dostępne jest również Krycie, które kontroluje nieprzezroczystość animacji, oraz Kierunek przepływu, który ustawia kierunek, w którym powinny zmierzać cząsteczki.

W przypadku niektórych stylów cząsteczek można również dostosować ich kolor.

Jednak w przypadku Świąt Bożego Narodzenia i Halloween nie ma ustawień kolorów, ponieważ cząsteczki mają postać obrazków.

Poniżej koloru znajdują się „Ustawienia zaawansowane”. Włączenie tej opcji pozwala dostosować liczbę cząsteczek, rozmiar cząsteczek, prędkość ruchu i włączyć efekt najechania kursorem.

Dzięki tej ostatniej funkcji cząsteczki będą poruszać się zgodnie z kierunkiem ruchu twojej myszy. Należy pamiętać, że funkcja ta nie będzie działać, gdy witryna internetowa zostanie zobaczona w obszarze kreatora stron lub gdy treść w sekcji zajmuje całą przestrzeń tej sekcji.

I to wszystko, co musisz zrobić.

Po zakończeniu konfigurowania własnego tła cząsteczek 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ąsteczek.

Tworzenie własnego tła cząsteczkowego dla twojej witryny internetowej

Jeśli dostępne efekty animacji nie odpowiadają twoim potrzebom, możesz również utworzyć własny efekt. W tym celu należy wybrać styl „Własny” w ustawieniach tła cząsteczek.

Następnie kliknij odnośnik w wierszu „Przejdź na link tutaj i wybierz wymagane atrybuty dla cząsteczki”.

Na tej witrynie internetowej możesz dostosować swój własny wygląd cząsteczki, jej interaktywność i kolor tła.

W ustawieniach „cząsteczek” można dostosować liczbę cząsteczek, kolor, kształt, rozmiar, krycie, linie stanowiące odnośniki między cząsteczkami oraz ruch.

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

W tym miejscu można dostosować zachowanie cząsteczek po najechaniu na nie kursorem i kliknięciu.

Na koniec mamy „tło strony (css)”. Tutaj możesz zmienić kolor tła animacji cząsteczek i zmodyfikować jej rozmiar, pozycję i powtarzanie.

W razie potrzeby można również przesłać własny adres URL obrazka tła.

Gdy skończysz, możesz kliknąć przycisk „Pobierz obecną konfigurację (json)” na dole.

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

Wróćmy teraz do kreatora stron SeedProd.

Przejdź ponownie do menu Tło cząsteczek 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 wygląda tło cząsteczek na front-endzie i „Zapisz”, aby sfinalizować zmiany.

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

Metoda 2: Jak dodać animowane tło za pomocą darmowej wtyczki?

Druga metoda jest darmową alternatywą dla korzystania z SeedProd. W tym celu potrzebna będzie wtyczka Particle Background WP, która jest darmową wtyczką do animacji.

Tak jak poprzednio, upewnij się, że zainstalowałeś i włączałeś wtyczkę Particle Background WP. Jeśli potrzebujesz wskazówek, możesz zapoznać się z naszym przewodnikiem na temat instalacji wtyczki WordPress.

Po włączeniu wtyczki, przejdź do Particle Background z kokpitu WordPress. Tutaj zobaczysz kilka sekcji.

Jedną z nich jest Deploy. Zawiera krótki kod dla gotowego tła cząsteczki, jeśli chcesz dodać go później do twoich stron lub wpisów.

Możesz także zaznaczyć pola „Dodaj do strony głównej” i/lub „Dodaj do strony bloga”, aby automatycznie wstawić tło do tych stron.

Przewijając w dół, zobaczysz sekcję Treść. W tym miejscu można dodać tekst do tła cząsteczek.

Jeśli znasz HTML, możesz dodać kod HTML, aby dostosować tekst. Alternatywnie możesz kliknąć „Dodaj multimedia”, aby wstawić obrazki lub pliki z biblioteki multimediów WordPress.

Poniżej znajdują się ustawienia animacji tła cząsteczek WordPress. Możesz dostosować gęstość cząsteczek, która kontroluje, jak blisko i daleko znajdują się cząsteczki, kolor kropki cząsteczki i kolor tła. Możliwe jest również ustawienie przezroczystości tła.

Jedną z wad tej wtyczki WordPress jest to, że nie można dostosować kształtu cząsteczek w taki sam sposób, jak w przypadku SeedProd. Jest to więc coś, co należy wziąć pod uwagę, jeśli chcesz korzystać z tej wtyczki.

I gotowe!

Oto przykład tego, jak wygląda animowane tło cząsteczkowe przy użyciu tej wtyczki WordPress.

Opcja alternatywna: Dodaj tło filmu WordPress

Jeśli chcesz dodać animowany efekt do twojej witryny internetowej, ale nie podobają ci się metody, które ci pokazaliśmy, to zamiast tego zalecamy dodanie tła filmowego.

Tło w postaci filmu daje więcej możliwości wyboru rodzaju animowanych efektów, które możesz umieścić na swojej witrynie internetowej. Ponadto film może być odtwarzany automatycznie w pętli, dzięki czemu sprawia wrażenie animowanego.

Oczywiście nie zalecamy przesyłania całego filmu na twoją witrynę internetową. Spowolni to znacznie WordPress i sfrustruje odwiedzających.

Zamiast tego można osadzać filmy z YouTube i używać ich jako pełnoekranowego animowanego tła.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat dodawania pełnoekranowego tła filmu YouTube w WordPress.

Czy animowane tła spowalniają witryny internetowe?

Jeśli nie zostanie to zrobione prawidłowo, animowane tła mogą spowolnić twoją witrynę internetową. Istnieją jednak sposoby, aby tego uniknąć.

W przypadku tła cząsteczkowego, liczba cząsteczek i szybkość ich ruchu może mieć wpływ na szybkość wczytywania twojej strony. Większa liczba cząsteczek i szybszy ruch wymagają większej mocy obliczeniowej, co może spowolnić działanie.

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

Dobrym pomysłem jest również używanie animowanego tła tylko na stronach, na których ma ono największe znaczenie. Nie są one potrzebne wszędzie, bo mogą się znudzić.

Wreszcie, aby Twoja witryna internetowa działała szybko, upewnij się, że postępujesz zgodnie z najlepszymi praktykami dotyczącymi szybkości witryny. Dowiedz się więcej z naszego przewodnika na temat przyspieszania WordPressa.

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak dodać animowane tło cząsteczkowe w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tego, jak uzyskać uwagi dotyczące projektu witryny internetowej w WordPress i naszym wyborem najlepszych kreatorów motywów WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.