Så här addar du en animerad bakgrund i WordPress (2 metoder)

Vill du skapa en animerad bakgrund till din website i WordPress?

En animerad bakgrund kan add to en visuell attraktion till din website. Den gör din site mer attraktiv och minnesvärd och lämnar ett bestående intryck på dina besökare.

I den här guiden visar vi dig hur du addar en partikelbakgrund i WordPress med hjälp av particle.js, ett JavaScript-animationsbibliotek.

Varför add to en animerad bakgrund i WordPress?

Att customize bakgrunden på din website kan verka oviktigt. Men det kan faktiskt forma besökarnas första intryck av ditt varumärke och påverka deras upplevelse av din site.

En animerad bakgrund kan förbättra din websites visuella tilltal och göra den mer interaktiv och iögonfallande för besökarna. Det ger intrycket att din WordPress site använder en högkvalitativ och innovativ design.

Många websites använder också animerade effekter när de vill fira ett speciellt tillfälle.

Till exempel kan du se att ecommerce stores lägger till animerade snöflingor eller fallande julgranar på sina pages för att skapa en festlig atmosfär inför julhelgen.

Vissa webbplatser använder också en animering av bakgrunden för preloader på sin website.

Med detta kan besökare få en känsla av att webbplatsen håller på att hämta, vilket gör dem mer benägna att tålmodigt vänta på att webbsidans element ska visas. Du kan läsa vår artikel om att lägga till en bakgrundsanimation för förladdare för mer information.

I den här guiden visar vi you hur man add to en animerad bakgrund med hjälp av particle.js. Om du vill ta reda på vad det är, fortsätt bara till nästa section.

Vad är particle.js?

particle.js är ett JavaScript-bibliotek som låter dig skapa fantastiska visuella effekter med partiklar, som är små, grafiska, animerade element.

Dessa partiklar kan customizes efter storlek, färg, form och rörelse. De reagerar också på interaktioner från användare, till exempel musrörelser eller clicks, för att add to ett extra lager av engagement till your website.

Nu när du vet vad particle.js är, låt oss se hur du kan använda det för att add to en animerad bakgrund i WordPress. Det finns två metoder för nybörjare, och du kan navigera genom den här guiden med snabblänkarna under:

Metod 1: Hur man lägger till en animerad bakgrund med en Page Builder (rekommenderas)

Den första metoden är att använda SeedProd, som är det bästa WordPress page builder tillägget på marknaden. Det erbjuder en built-in och mycket anpassningsbar funktion för partikel bakgrund.

Med den kan du välja en av de partikelanimationer som redan finns available eller add to en customize själv. Det är också möjligt att ändra antalet partiklar, animeringsrörelser och hover-effekter så att de passar dina alternativ.

För mer information om SeedProd kan du kontrollera vår djupgående SeedProd-review. Vi har täckt allt, inklusive alternativen för customize, val av templates och block och integrationer från tredje part.

I den här guiden kommer vi att använda premiumversionen av SeedProd, eftersom funktionen för partikelbakgrund är tillgänglig där.

För att kunna använda SeedProd måste du först installera och aktivera pluginet. Du hittar mer detaljer om detta i vår guide för nybörjare om hur du installerar ett plugin för WordPress.

Efter det är det bara att kopiera och klistra in din license key i plugin. Gå bara till din WordPress dashboard, navigera till SeedProd ” Settings, och insert license key i lämpligt fält. Sedan klickar du på ”Verify Key”.

Om du vill customize ditt tema först innan du lägger till en partikelbakgrund i WordPress, kan du följa vår guide om hur du enkelt skapar ett customizer tema med SeedProd.

Nu måste du öppna drag and drop-byggaren för den page builder som du vill infoga partikelbakgrunden i. Om du har skapat ett tema med SeedProd bör du redan ha några pages add to i WordPress åt dig.

Därefter går du bara till Pages ” All Pages och hoverar med markören över en page, som gillar en homepage, about page eller något annat. Välj sedan knappen ”Edit with SeedProd”.

Om det här alternativet inte visas på din sida, oroa dig inte.

Klicka bara på knappen ”Edit” istället, och i block editor, klicka på knappen ”Edit with SeedProd”.

Du bör nu vara inne i page buildern för SeedProd.

Håll bara markören över den page section där du vill add to partikel bakgrunden i WordPress och välj den. Du vet att du har valt en section om en lila kant och toolbar visas högst upp på den.

När du har klickat på en section visas sidebaren Section till vänster.

Allt du behöver göra nu är att växla till tabben ”Advanced” och toggle inställningen ”Enable Particle Background”.

Det finns flera Settings för Particle Background som du kan konfigurera.

Den ena är Styling, där du kan välja någon av de tillgängliga animationseffekterna, som är Polygon, Space, Snow, Snowflakes, Christmas, Halloween och Customize.

Vi kommer att prata mer om att lägga till en animering av bakgrunden till en custom partikel senare i artikeln.

Det finns också Opacity, som kontrollerar hur ogenomskinlig animationen ser ut, och Flow Direction, som anger i vilken riktning partiklarna ska headas.

För vissa partikelstilar kan du också customize deras färg.

För jul och Halloween finns det dock inga färginställningar, eftersom partiklarna är i form av images.

Under Color finns ”Advanced Settings”. Om du aktiverar det kan du customize Antal partiklar, Partikelstorlek, Flytthastighet och Aktivera Hover-effekt.

Med den sistnämnda funktionen kommer partiklarna att röra sig i enlighet med din mus riktning. Obs/observera att detta inte fungerar när du viewar hemsidan i page builder area eller om innehållet i sektionen tar upp hela utrymmet i den sektionen.

Och det är all you behöver göra.

När du är klar med att customize din WordPress-partikelbakgrund kan du klicka på knappen ”Save” högst upp i högra hörnet för att publicera ändringarna. Du kan också välja knappen ”Preview” för att se hur partikelbakgrunden gillar att se ut.

Skapa en customize bakgrund med partiklar för din website

Om de animerade effekterna som finns tillgängliga inte passar dina behov kan du också skapa en customize. Vad du ska göra är att välja ”Custom” -stilen i inställningarna för partikelbakgrund.

Därefter klickar du på länken i raden ”Vänligen besök länken här och välj obligatoriska attribut för partikeln.

På denna website kan du customize din önskade partikeldesign, dess interaktivitet och bakgrundsfärg.

I ”particles”-inställningen kan you justera partikelantal, färg, form, storlek, opacitet, linjer som länkar samman partiklarna och rörelse.

Under det ligger ”interaktivitet”.

Det är här du kan justera hur partiklarna beter sig när du hoverar över dem och clickar på dem.

Slutligen har du ”page background (css)”. Här kan du ändra bakgrundsfärgen för partikelanimationen och modifiera dess storlek, position och upprepning.

Om det behövs kan du också uploada en URL för en custom bakgrundsbild.

När du är klar kan du klicka på knappen ”Download current config (json)” längst ner.

Detta kommer att downloada partikelbakgrundens JSON-kodfil, som du måste öppna med hjälp av en app med textredigerare. Håll fönstret i textredigeraren öppet när du fortsätter till nästa steg.

Låt oss nu gå tillbaka till SeedProd page builder.

Navigera till menyn Particle Background i de avancerade inställningarna igen. Sedan kopierar du och klistrar in JSON-koden i lämplig textbox.

You should now see your particle background in the preview section.

Click ”Preview” för att se hur partikelbakgrunden gillar att se ut on the front end och ”Save” för att slutföra ändringarna.

Här är ett exempel på hur partikelbakgrunden kan gilla att se ut:

Metod 2: Hur man lägger till en animerad bakgrund med ett gratis plugin

Den andra metoden är ett gratis alternativ till att använda SeedProd. För detta behöver du tillägget Particle Background WP, som är ett gratis plugin för animering.

Gilla tidigare, se till att installera och aktivera WP-pluginet Particle Background. Om du behöver lite vägledning kan du kontrollera vår guide om hur du installerar ett plugin för WordPress.

När pluginet är aktivt går du till Particle Background från WordPress dashboard. Här ser du flera sections.

En av dem är Deploy. Den innehåller en shortcode för den slutförda partikelbakgrunden om du vill add den senare till dina pages eller posts.

Du kan också kryssa i boxarna ”Add to front page” och/eller ”Add to blogg page” för att automatiskt inserta bakgrunden på dessa pages.

När du rullar ner ser du section Content. Det är här du kan lägga till text högst upp på partikelbakgrunden.

Om du kan HTML kan du add to lite HTML-kod för att customize texten. Imagely kan du också clicka på ”Add Media” för att inserta images eller filer från WordPress mediabibliotek.

Under finns Settings för animeringen av bakgrunden för WordPress-partikeln. You can adjust the Particle Density, which controls how close and far the particles are, the particle’s Dot Color, and the Background Color. Det är också möjligt att göra bakgrunden transparent.

En nackdel med detta WordPress plugin är att du inte kan justera partikelformen på samma sätt som du skulle med SeedProd. Så det är något att tänka på om du vill använda det här pluginet.

Och you are done!

Här är ett exempel på hur den partikelanimerade bakgrunden gillar att använda detta WordPress plugin.

Valfritt alternativ: Add to en bakgrund för WordPress videoklipp

Om du vill add to en animerad effekt till din website men inte gillar de metoder vi har visat dig, rekommenderar vi att du lägger till en videoklipp bakgrund istället.

En bakgrund med videoklipp ger dig fler alternativ för vilken typ av animerade effekter du kan ha på din website. Dessutom kan du få videoklippet att spelas upp automatiskt i en loop så att det känns animerat.

Naturligtvis rekommenderar vi inte att du uppladdar ett helt videoklipp till din website. Det kommer att göra WordPress betydligt långsammare och frustrera besökarna.

Istället kan du embeda ett videoklipp från YouTube och använda det som en animerad bakgrund i helskärm.

För mer information, kontrollera vår guide om hur du lägger till en helskärmsbakgrund för YouTube videoklipp i WordPress.

Saktar animerade bakgrunder ner websites?

Om det inte görs på rätt sätt kan animerade bakgrunder göra din website långsammare. Men det finns sätt att undvika detta.

För partikelbakgrunder kan antalet partiklar och hur snabbt de rör sig påverka hur snabbt din page hämtar data. Fler partiklar och snabbare rörelser kräver mer processorkraft, vilket kan göra att det går långsammare.

För att fixa detta kan du prova olika Settings för partikeldensitet och hastighet för att hitta vad som fungerar bäst för din website. Under denna process kan du runna WordPress hastighetstester för att se effekterna.

Det är också en bra idé att bara använda animerade bakgrunder på pages där de har störst betydelse. Du behöver inte ha dem överallt, för då kan de bli tråkiga.

Slutligen, för att hålla din website snabb med en partikelbakgrund, se till att följa de bästa metoderna för webbplatsens hastighet. Du kan lära dig mer i vår ultimata guide om hur du gör WordPress snabbare.

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du add to en animerad partikel bakgrund i WordPress. Du kanske också vill kontrollera vår guide om hur du får återkoppling på webbplatsens design i WordPress och vårt expertval av de bästa temabyggarna för 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.