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-designelemnt 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?

Att anpassa din webbplatsbakgrund kan verka oviktigt till en början. Men efter år i WordPress- och webbdesignvärlden har vi märkt att webbplatser med genomtänkt utformade animerade bakgrunder tenderar att hålla besökarna engagerade längre.

En animerad bakgrund kan förbättra din webbplats visuella utseende, vilket gör den mer interaktiv och iögonfallande för besökare. Det ger intrycket att din WordPress-webbplats använder en högkvalitativ och innovativ design.

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

Till exempel kan du se e-handelsbutiker som lägger till animerade snöflingor eller fallande julgranar på sina webbsidor för att skapa en festlig atmosfär under helgperioden.

Vissa webbplatser använder också en bakgrundsanimation för förladdning.

Med detta kan besökare få en känsla av att webbplatsen laddas, vilket gör dem mer benägna att vänta tålmodigt på att webbsideelementen ska visas. Du kan läsa vår artikel om att lägga till en förladdningsbakgrundsanimation för mer information.

I den här guiden visar vi dig hur du lägger till en animerad bakgrund med particle.js. Om du vill veta vad det är, fortsätt bara till 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)
• Method 2: How to Add an Animated Background With Code (Free)

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 det bästa WordPress-sidbyggarpluginet på marknaden. Det 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 läsa vår djupgående recension av SeedProd. Vi har täckt allt, inklusive anpassningsalternativen, mall- och blockvalen samt integrationer med tredje part.

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

För att använda SeedProd måste du först installera och aktivera pluginet. Du hittar mer information om detta i vår nybörjarguide om hur man installerar ett 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.

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 sidbyggaren för SeedProd.

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

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 även 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 senaste funktionen kommer partiklarna att röra sig enligt muspekarens riktning. Notera att detta inte fungerar när du visar din WordPress-webbplats i sidbyggarens område eller om innehållet i 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.

Skapa en anpassad partikelbakgrund för din webbplats

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.

Klicka sedan 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.

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.

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 verkar vara 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 helt fint, 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.

Installera först pluginet i din WordPress-admin.

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

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>

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 URL:en till din bild inuti url("").

Se till att bakgrundsbildens sökväg eller URL ä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.

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.

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 villkorslistan, välj 'Är' och ange din hemsidas URL.

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

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 är 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.

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 då på vår YouTube-kanal för WordPress-videoguider. Du kan också hitta oss på Twitter och Facebook.