Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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.

How to Add an Animated Background in WordPress

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.

An example of a Christmas particle background

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:

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.

The SeedProd page builder plugin for WordPress

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”.

Adding a SeedProd license key to WordPress

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”.

Clicking Edit with SeedProd on a WordPress page

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”.

Clicking Edit with SeedProd inside the WordPress block editor

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”.

Enabling the particle background settings in SeedProd

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.

Configuring the basic particle background settings in SeedProd

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.

What the Christmas particle background in SeedProd looks like

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.

The particle background's advanced settings in SeedProd

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.

Saving or previewing changes in SeedProd

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.

Selecting the Custom style and clicking the link provided in SeedProd to make a custom particle background

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.

Editing the Particles settings in Vincent Garreau's particle.js website

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.

The particle interactivity settings in Vincent Garreau's website

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.

The particle page background settings in Vincent Garreau's website

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.

Downloading the JSON file for the particle background

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.

Inserting the JSON code  in the particle background settings of SeedProd

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:

Example of an animated particle background made with SeedProd

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.

Configuring the Particle Background WP Deploy settings

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.

Inserting some text in the Particle Background WP plugin

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.

Configuring the Particle Background WP's animated particle background settings

Och you are done!

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

An animated background example using Particle Background WP 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.

Video background example made with Thrive Architect

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.

Avslöjande: Vårt innehåll stöds av våra läsare. Det innebär att om du klickar på några av våra länkar, kan vi tjäna en provision. Se hur WPBeginner finansieras, varför det är viktigt, och hur du kan stödja oss. Här är vår editoriala process.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Den ultimata WordPress-verktygslådan

Få GRATIS tillgång till vår verktygslåda - en samling WordPress-relaterade produkter och resurser som varje professionell användare bör ha!

Reader Interactions

3 kommentarerLämna ett svar

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Carlos Rangel

    Nice article. I wonder if is possible to achieve this effect using some code like vanilla JavaScript and maybe some CSS styles. This as become my favorite WordPress blog :)

    • WPBeginner Support

      While possible, it would require coding knowledge and would not be a beginner task which is why we do not currently recommend it.

      Administratör

Lämna ett svar

Tack för att du väljer att lämna en kommentar. Tänk på att alla kommentarer modereras enligt våra policy för kommentarer, och din e-postadress kommer INTE att publiceras. Vänligen använd INTE nyckelord i namnfältet. Låt oss ha en personlig och meningsfull konversation.