Hur man lägger till en animerad bakgrund i WordPress (2 metoder)

Tror du att det är komplicerat att lägga till en animerad bakgrund i WordPress? Tänk om.

Vi brukade tänka likadant, men efter lite experimenterande har vi upptäckt att det faktiskt inte är så illa.

Vi vet hur viktigt det är att imponera på dina besökare från det ögonblick de landar på din webbplats. En animerad bakgrund är ett utmärkt WordPress-designelegment för att skapa ett minnesvärt första intryck utan att överväldiga ditt innehåll.

Men om du är orolig för långa laddningstider, komplex kodning eller dyra plugins, oroa dig inte. Vi har upptäckt en enkel lösning med particle.js, som är ett lättviktigt JavaScript-bibliotek som skapar fantastiska animerade bakgrunder utan att kompromissa med din webbplats prestanda.

I den här guiden visar vi dig exakt hur du lägger till vackra partikelanimationer på din WordPress-webbplats, oavsett om du föredrar att använda ett plugin eller lite kod. Låt oss få din webbplats att sticka ut!

Varför lägga till en animerad bakgrund i WordPress?

En animerad bakgrund hjälper till att göra din webbplats mer engagerande och visuellt intressant. Den lägger till subtil rörelse i din design, vilket kan fånga uppmärksamhet och hålla besökare kvar på din webbplats längre.

Vi har märkt att webbplatser med väldesignade animationer ofta känns mer moderna och interaktiva. Detta kan också skapa ett starkare första intryck och få din webbplats att se mer professionell ut.

En animerad bakgrund hjälper till med:

• Bättre engagemang: Rörelse drar naturligt blicken till sig och håller användarna intresserade.
• Modern designkänsla: Får din webbplats att se mer kreativ och uppdaterad ut.
• Säsongseffekter: Många webbutiker använder animationer för evenemang som jul eller speciella kampanjer (till exempel, fallande snö eller festliga ikoner).
• Förbättrad användarupplevelse: Förladdningsanimationer kan hjälpa användare att känna att sidan laddas smidigt, vilket minskar frustration.

Med det sagt är det viktigt att använda animationer försiktigt så att de förbättrar din design utan att distrahera användarna.

I den här guiden visar vi hur du lägger till en animerad bakgrund med particle.js. Om du är ny på det, oroa dig inte – vi förklarar allt steg för steg i nästa avsnitt.

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 anpassas efter storlek, färg, form och rörelse. De reagerar också på användarinteraktioner, som musrörelser eller klick, för att lägga till ett extra lager av engagemang på din webbplats.

Nu när du vet vad particle.js är, låt oss se hur du kan använda det för att lägga till 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 nedan:

Metod 1: Hur man lägger till en animerad bakgrund med en sidbyggare (ingen kod)

Den första metoden är att använda SeedProd, som är den bästa WordPress-sidbyggarpluginen på marknaden. Den erbjuder en inbyggd och mycket anpassningsbar partikelbakgrundsfunktion.

Med den kan du välja en av de partikelanimationer som redan finns tillgängliga eller lägga till en egen anpassad. Det är också möjligt att ändra antalet partiklar, animationsrörelser och hovereffekter för att passa dina preferenser.

För mer information om SeedProd kan du ta en titt på vår djupgående SeedProd-recension. Vi har täckt allt, inklusive anpassningsalternativen, mall- och blockvalen samt integrationer från tredje part.

I den här guiden kommer vi att använda premiumversionen av SeedProd, eftersom partikelbakgrundsfunktionen finns tillgänglig där.

Steg 1: Installera och aktivera SeedProd

För att använda SeedProd måste du först installera och aktivera pluginen. Du kan hitta mer information om detta i vår nybörjarguide för installation av en WordPress-plugin.

Efter det, kopiera och klistra bara in din licensnyckel i pluginet. Gå bara till din WordPress-instrumentpanel, navigera till SeedProd » Inställningar, och infoga licensnyckeln i lämpligt fält. Klicka sedan på ‘Verifiera nyckel’.

Om du vill anpassa 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 anpassat tema med SeedProd.

Steg 2: Öppna SeedProd sidbyggare

Nu måste du öppna dra-och-släpp-byggaren för den sida där du vill infoga partikelbakgrunden. Om du har skapat ett tema med SeedProd, bör du redan ha några sidor tillagda i WordPress.

Gå sedan helt enkelt till Sidor » Alla sidor och för muspekaren över en sida, som en startsida, en om-sida eller något annat. Välj sedan knappen 'Redigera med SeedProd'.

Om det här alternativet inte visas för dig, oroa dig inte.

Klicka bara på knappen ‘Redigera’ istället, och i blockredigeraren, klicka på knappen ‘Redigera med SeedProd’.

Du bör nu vara inne i SeedProds sidbyggare.

Steg 3: Aktivera partikelbakgrund för en sektion

Håll bara muspekaren över den del av sidan där du vill lägga till partikelbakgrunden i WordPress och välj den. Du vet att du har valt en sektion om en lila kantlinje och verktygsfält visas överst på den.

När du har klickat på en sektion bör sidofältet för sektionen till vänster visas.

Allt du behöver göra nu är att växla till fliken 'Avancerat' och aktivera inställningen 'Aktivera partikelbakgrund'.

Steg 4: Konfigurera inställningar för partikelbakgrund

Det finns flera inställningar för partikelbakgrund som du kan konfigurera.

En är Stil, där du kan välja någon av de tillgängliga animationseffekterna, som är Polygon, Rymd, Snö, Snöflingor, Jul, Halloween och Anpassad.

Vi kommer att prata mer om att lägga till en anpassad partikelbakgrundsanimation senare i artikeln.

Det finns också Opacitet, som styr hur ogenomskinlig animationen ser ut, och Flödesriktning, som ställer in riktningen som partiklarna ska röra sig mot.

För vissa partikelstilar kan du också anpassa deras färger.

För jul och halloween finns det dock inga färginställningar, eftersom partiklarna är bilder.

Under Färg finns 'Avancerade inställningar'. Om du aktiverar det kan du anpassa Antal partiklar, Partikelstorlek, Rörelsehastighet och Aktivera svävar-effekt.

Med den sista funktionen kommer partiklarna att röra sig enligt musens riktning. Notera att detta inte fungerar när du visar din WordPress-webbplats i sidbyggarens område eller om innehållet inom sektionen tar upp hela utrymmet i den sektionen.

Och det är allt du behöver göra.

När du är klar med att anpassa din WordPress-partikelbakgrund kan du klicka på knappen 'Spara' längst upp till höger för att publicera ändringarna. Du kan också välja knappen 'Förhandsgranska' för att se hur partikelbakgrunden ser ut.

Steg 5: Skapa en anpassad partikelbakgrund (valfritt)

Om de animerade effekterna som finns tillgängliga inte passar dina behov, kan du också skapa en egen. Det du bör göra är att välja stilen 'Anpassad' i inställningarna för Partikelbakgrund.

Efter det, klicka på länken i raden 'Besök länken här och välj önskade attribut för partikeln'.

Den här länken leder dig till Vincent Garreaus webbplats, som innehåller ett Javascript-bibliotek för partikelanimationer.

På den här webbplatsen kan du anpassa din önskade partikeldesign, dess interaktivitet och bakgrundsfärgen.

Inom inställningen 'partiklar' kan du justera antalet partiklar, färg, form, storlek, opacitet, linjer som länkar partiklarna och rörelse.

Nedanför det finns ‘interaktivitet’.

Det här är där du kan justera hur partiklarna beter sig när du svävar över dem och klickar på dem.

Slutligen har du ‘sidbakgrund (css).’ Här kan du ändra bakgrundsfärgen på partikelanimationen och ändra dess storlek, position och repetition.

Om det behövs kan du också ladda upp en URL för en anpassad bakgrundsbild.

När du är klar kan du klicka på knappen 'Ladda ner aktuell konfiguration (json)' längst ner.

Steg 6: Tillämpa anpassad partikelkonfiguration i SeedProd (valfritt)

Detta laddar ner partikelbakgrundens JSON-kodfil, som du behöver öppna med en textredigerare. Håll textredigeringsfönstret öppet medan du fortsätter till nästa steg.

Nu går vi tillbaka till SeedProd-sidbyggaren.

Navigera till menyn Partikelbakgrund inom Avancerade inställningar igen. Kopiera sedan och klistra in JSON-koden i lämplig textruta.

Steg 7: Spara dina ändringar

Du bör nu se din partikelbakgrund i förhandsgranskningssektionen.

Klicka på 'Förhandsgranska' för att se hur partikelbakgrunden ser ut på framsidan och 'Spara' för att slutföra ändringarna.

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

Metod 2: Hur man lägger till en animerad bakgrund med kod (gratis)

Om det känns som för mycket arbete att använda en sidbyggare för att infoga en animerad bakgrund, kan du också lägga till den med kod. Oroa dig inte om du inte är en kodningsexpert, eftersom vi kommer att använda WPCode för att göra denna process säker och enkel.

Du kan använda antingen den kostnadsfria eller premiumversionen av WPCode för den här handledningen. Medan gratisversionen fungerar utmärkt, inkluderar premiumversionen användbara funktioner som AI-kodgenerering och ett testläge.

Du kan läsa vår WPCode-recension om du behöver mer information.

Steg 1: Installera och aktivera WPCode

Installera först pluginet i din WordPress-admin.

Om du inte vet hur du gör det, ta en titt på vår guide om hur man installerar ett WordPress-plugin.

Steg 2: Skapa ett nytt anpassat HTML-utdrag

Efter aktivering, gå till Kodavsnitt » + Lägg till kodavsnitt i din instrumentpanel, klicka sedan på ‘Lägg till din anpassade kod (nytt kodavsnitt)’ följt av knappen ‘+ Lägg till anpassat kodavsnitt’.

Nu behöver du välja din snippet-typ.

Eftersom vi kommer att arbeta med en kombination av HTML, JavaScript och CSS, kan du välja 'HTML-utdrag' från alternativen.

Ge nu ditt kodavsnitt ett namn som är lätt att komma ihåg.

Det kan vara något enkelt som 'Particle.js Background'.

Steg 3: Klistra in Particle.js-koden

Gå nu vidare och klistra in koden nedan.

Den här koden anpassades faktiskt från samma Vincent Garreau-webbplats som presenterades i den första metoden, men vi kommer att visa dig hur du anpassar den ytterligare med bara kod:

<!-- 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>

Steg 4: Anpassa Particle.js-parametrar

Lägg märke till egenskapen `z-index: -1;`. Detta är viktigt eftersom det talar om för webbläsaren att placera ditt animerade bakgrundslager bakom allt annat innehåll på din sida. Utan det kan dina partiklar täcka din text eller dina bilder.

Den här koden är ganska lång, så låt oss titta på de delar du kan anpassa.

För att ändra bakgrundsfärgen, modifiera background-color egenskapen under #particles-js. Ersätt #b61924 med ett giltigt CSS-färgvärde, som #FF0000 för rött eller rgb(255,0,0) eller till och med färgnamn som red.

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

För att lägga till en bakgrundsbild, ställ in egenskapen `background-image` genom att lägga till *hela URL:en* till din bild inuti `url(\"\")`.

Du kan vanligtvis hämta denna URL från ditt WordPress mediebibliotek. Se till att URL:en är korrekt.

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

För att ändra antalet partiklar, justera "värde" under "antal".

Att öka värdet lägger till fler partiklar, medan att minska det minskar antalet.

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

För att ändra partiklarnas storlek, kan du modifiera "value" under "size".

Ett större antal ökar partikelstorleken, och vice versa.

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

För att ändra färgen på partiklarna, ersätt "värde" i "färg" med ett giltigt CSS-färgvärde.

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

För att ändra formen på partiklarna kan du ändra "type" under "shape".

Du kan använda former som "cirkel", "kant", "triangel", "polygon",  eller till och med "stjärna".

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

För att ändra egenskaperna för linjer mellan partiklar kan du justera egenskaperna under "line_linked".

Om du till exempel ändrar "enable": true till "enable": false, kommer du inte att se någon linje som förbinder partiklarna.

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

Du kan också ändra linjens färg, opacitet och bredd.

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

Oroa dig inte om du behöver göra ändringar senare, eftersom du alltid kan ändra koden även efter aktivering.

Steg 5: Konfigurera var kodavsnittet ska infogas

När du har anpassat koden efter eget tycke är det dags att ställa in var och när din animerade bakgrund visas.

Bläddra ner till avsnittet Infogning i ditt WPCode-utdrag. Se till att välja 'Auto Insert' som din Infogningmetod och välj 'Site Wide Footer' för Plats.

Steg 6: Tillämpa villkorlig logik (valfritt)

WPCode erbjuder också en kraftfull funktion som kallas villkorsstyrd logik, som finns tillgänglig i både gratis- och premiumversioner. Den här funktionen låter dig styra exakt var din animerade bakgrund visas på din webbplats.

För att använda den här funktionen, leta upp sektionen 'Smart Conditional Logic' och slå på 'Enable Logic'. Du kommer att se alternativ för att ställa in specifika villkor för visning av din bakgrund.

Om du till exempel vill att den animerade bakgrunden bara ska visas på din hemsida, välj 'Sid-URL' från villkorsmenyn, välj 'Är' och ange din hemsidas URL.

Du kan lägga till flera villkorsgrupper genom att klicka på knappen '+ Add new group'.

Steg 7: Aktivera och spara kodavsnittet

Det sista steget är att aktivera ditt utdrag. Leta efter växlingsknappen 'Inaktiv' högst upp på sidan och klicka på den för att ändra den till 'Aktiv'. Glöm inte att klicka på 'Spara utdrag' för att spara dina ändringar.

Det var allt! Besök din webbplats på mobilen eller datorn för att se din nya animerade bakgrund i aktion. Så här ser det ut på vår testsida:

Saktar animerade bakgrunder ner webbplatser?

Om det inte görs rätt kan animerade bakgrunder sakta ner din webbplats. 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 sida laddas. Fler partiklar och snabbare rörelse kräver mer processorkraft, vilket kan sakta ner saker.

För att åtgärda detta kan du prova olika inställningar för partikeldensitet och hastighet för att hitta vad som fungerar bäst för din webbplats. Under denna process kan du köra WordPress-hastighetstester för att se effekterna.

Det är också en bra idé att bara använda animerade bakgrunder på sidor där de är viktigast. Du behöver dem inte överallt, annars kan de bli tråkiga.

Slutligen, för att hålla din webbplats snabb med en partikelbakgrund, se till att följa bästa praxis för webbplatshastighet. Du kan lära dig mer i vår ultimata guide för att göra WordPress snabbare.

Vanliga frågor om att lägga till en animerad bakgrund i WordPress

Här är några frågor som våra läsare ofta har ställt om att lägga till en animerad bakgrund i WordPress:

Hur lägger jag till animation i WordPress?

Du kan lägga till animation i WordPress med hjälp av sidbyggare som SeedProd eller genom att lägga till anpassad CSS med WPCode. Dessa verktyg låter dig applicera rörelseeffekter på text, bilder och sektioner utan att behöva avancerade kodningskunskaper.

Hur lägger jag till en videobakgrund i WordPress?

Du kan lägga till en videobakgrund i WordPress genom att använda en sidbyggare som SeedProd som stöder bakgrundsvideor. De flesta verktyg låter dig ladda upp en video eller bädda in en från plattformar som YouTube.

För mer information, se vår handledning om att lägga till en YouTube-video som en helskärmsbakgrund i WordPress.

Hur gör jag en dynamisk bakgrundsbild i WordPress?

Du kan göra en dynamisk bakgrundsbild i WordPress genom att använda plugins eller anpassade skript som partikeleffekter eller bildspel. Dessa lägger till rörelse och interaktivitet till din webbplats bakgrund.

Kan jag infoga en video i WordPress?

Ja, du kan infoga en video i WordPress genom att ladda upp den direkt eller bädda in den från plattformar som YouTube eller Vimeo. Blockredigeraren gör denna process enkel med ett inbyggt videoblock.

För att komma igång, ta en titt på vår guide om hur man bäddar in videor i WordPress.

Vi hoppas att den här artikeln har hjälpt dig att lära dig hur du lägger till en animerad partikelbakgrund i WordPress. Du kanske också vill kolla in vår guide om hur du får feedback på webbdesign i WordPress och vårt experttips om de bästa WordPress-temabyggarna.

Om du gillade den här artikeln, prenumerera gärna på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.