Cum să adăugați un fundal animat în WordPress (2 metode)

Credeți că adăugarea unui fundal animat în WordPress este complicată? Gândiți-vă din nou.

Obișnuiam să credem la fel, dar după o oarecare experimentare, am descoperit că de fapt nu este atât de rău.

Știm cât de important este să impresionați vizitatorii din momentul în care ajung pe site-ul dvs. Un fundal animat este un element de design WordPress excelent pentru a crea o primă impresie memorabilă, fără a vă suprasolicita conținutul.

Dar dacă vă îngrijorați de timpii de încărcare lenți, codificarea complexă sau pluginurile costisitoare, nu vă faceți griji. Am descoperit o soluție simplă folosind particle.js, care este o bibliotecă JavaScript ușoară care creează fundaluri animate uimitoare fără a compromite performanța site-ului dvs.

În acest ghid, vă vom arăta exact cum să adăugați animații frumoase cu particule pe site-ul dvs. WordPress, indiferent dacă preferați să folosiți un plugin sau puțin cod. Să facem site-ul dvs. să iasă în evidență!

De ce să adăugați un fundal animat în WordPress?

Personalizarea fundalului site-ului dvs. ar putea părea neimportant la început. Dar, după ani de experiență în lumea WordPress și a designului web, am observat că site-urile cu fundaluri animate atent concepute tind să mențină vizitatorii angajați mai mult timp.

Un fundal animat poate îmbunătăți atractivitatea vizuală a site-ului dvs., făcându-l mai interactiv și mai atrăgător pentru vizitatori. Dă impresia că site-ul dvs. WordPress folosește un design de înaltă calitate și inovator.

Multe site-uri web folosesc, de asemenea, efecte animate atunci când doresc să sărbătorească o ocazie specială.

De exemplu, ați putea vedea magazinele eCommerce adăugând fulgi de zăpadă animați sau copaci de Crăciun căzători pe paginile lor web pentru a crea o atmosferă festivă pentru sezonul sărbătorilor.

Unele site-uri web folosesc, de asemenea, o animație de fundal preloader.

Cu aceasta, vizitatorii pot avea senzația că site-ul se încarcă, făcându-i mai predispuși să aștepte cu răbdare ca elementele paginii web să apară. Puteți citi articolul nostru despre adăugarea unei animații de fundal de preîncărcare pentru mai multe informații.

În acest ghid, vă vom arăta cum să adăugați un fundal animat folosind particle.js. Dacă doriți să aflați ce este, continuați la secțiunea următoare.

Ce este particle.js?

particle.js este o bibliotecă JavaScript care vă permite să creați efecte vizuale uimitoare cu particule, care sunt elemente grafice, animate, mici.

Aceste particule pot fi personalizate după dimensiune, culoare, formă și mișcare. Ele răspund, de asemenea, la interacțiunile utilizatorilor, cum ar fi mișcările mouse-ului sau clicurile, pentru a adăuga un strat suplimentar de implicare site-ului dvs.

Acum că știți ce este particle.js, să vedem cum îl puteți folosi pentru a adăuga un fundal animat în WordPress. Există două metode pentru începători și puteți naviga prin acest ghid cu linkurile rapide de mai jos:

• Metoda 1: Cum să adăugați un fundal animat cu un Page Builder (fără cod)
• Method 2: How to Add an Animated Background With Code (Free)

Metoda 1: Cum să adăugați un fundal animat cu un Page Builder (fără cod)

Prima metodă este să folosiți SeedProd, care este cel mai bun plugin constructor de pagini WordPress de pe piață. Acesta oferă o funcționalitate de fundal cu particule încorporată și foarte personalizabilă.

Cu acesta, puteți alege una dintre animațiile de particule deja disponibile sau puteți adăuga una personalizată. De asemenea, este posibil să modificați numărul de particule, mișcările animației și efectele de hover pentru a se potrivi preferințelor dvs.

Pentru mai multe informații despre SeedProd, puteți consulta recenzia noastră detaliată SeedProd. Am acoperit totul, inclusiv opțiunile de personalizare, alegerile de șabloane și blocuri și integrările terțe.

În acest ghid, vom folosi versiunea premium a SeedProd, deoarece funcția de fundal cu particule este disponibilă acolo.

Pentru a utiliza SeedProd, va trebui să instalați și să activați mai întâi pluginul. Puteți găsi mai multe detalii despre acest lucru în ghidul nostru pentru începători despre instalarea unui plugin WordPress.

După aceea, pur și simplu copiați și lipiți cheia de licență în plugin. Accesați panoul de administrare WordPress, navigați la SeedProd » Setări, și introduceți cheia de licență în câmpul corespunzător. Apoi, faceți clic pe „Verificați cheia”.

Dacă doriți să vă personalizați mai întâi tema înainte de a adăuga un fundal cu particule în WordPress, atunci puteți urma ghidul nostru despre cum să creați ușor o temă personalizată cu SeedProd.

Acum, trebuie să deschideți constructorul drag-and-drop pentru pagina în care doriți să inserați fundalul cu particule. Dacă ați creat o temă cu SeedProd, atunci ar trebui să aveți deja câteva pagini adăugate în WordPress.

Apoi, accesați pur și simplu Pagini » Toate paginile și plasați cursorul peste o pagină, cum ar fi pagina principală, pagina despre noi sau altceva. Apoi, alegeți butonul „Edit with SeedProd”.

Dacă această opțiune nu apare la dvs., nu vă faceți griji.

Pur și simplu faceți clic pe butonul „Editare” în schimb, iar în editorul de blocuri, faceți clic pe butonul „Editare cu SeedProd”.

Ar trebui să vă aflați acum în constructorul de pagini SeedProd.

Pur și simplu plasați cursorul peste secțiunea paginii unde doriți să adăugați fundalul cu particule în WordPress și selectați-o. Veți ști că ați selectat o secțiune dacă apare o bordură mov și o bară de instrumente în partea de sus a acesteia.

Odată ce ați făcut clic pe o secțiune, bara laterală a secțiunii din stânga ar trebui să apară.

Tot ce trebuie să faceți acum este să comutați la fila „Avansat” și să activați setarea „Activați fundalul cu particule”.

Există mai multe setări pentru fundalul cu particule pe care le puteți configura.

Unul este Stil, unde puteți alege oricare dintre efectele de animație disponibile, care sunt Poligon, Spațiu, Zăpadă, Fulgi de zăpadă, Crăciun, Halloween și Personalizat.

Vom vorbi mai multe despre adăugarea unei animații personalizate de fundal cu particule mai târziu în articol.

Există, de asemenea, Opacitate, care controlează cât de opacă arată animația, și Direcția Fluxului, care setează direcția în care particulele ar trebui să se îndrepte.

Pentru anumite stiluri de particule, puteți personaliza și culorile acestora.

Cu toate acestea, pentru Crăciun și Halloween, nu există setări de culoare, deoarece particulele sunt imagini.

Sub Culoare se află „Setări avansate”. Activarea acesteia vă permite să personalizați Numărul de particule, Dimensiunea particulelor, Viteza de mișcare și Activarea efectului de hover.

Cu ultima funcție, particulele se vor mișca în funcție de direcția mouse-ului. Rețineți că acest lucru nu va funcționa atunci când vizualizați site-ul dvs. WordPress în zona de construire a paginilor sau dacă conținutul din interiorul secțiunii ocupă întregul spațiu al acelei secțiuni.

Și asta este tot ce trebuie să faceți.

După ce ați terminat de personalizat fundalul cu particule din WordPress, puteți face clic pe butonul „Salvare” din colțul din dreapta sus pentru a publica modificările. Puteți, de asemenea, să alegeți butonul „Previzualizare” pentru a vedea cum arată fundalul cu particule.

Crearea unui fundal personalizat cu particule pentru site-ul dvs.

Dacă efectele animate disponibile nu corespund nevoilor dvs., puteți crea și unul personalizat. Ceea ce ar trebui să faceți este să selectați stilul „Personalizat” în setările Fundalului de particule.

După aceea, faceți clic pe linkul din linia „Vă rugăm să vizitați linkul aici și alegeți atributele necesare pentru particule.'

Acest link vă va duce pe site-ul lui Vincent Garreau, care prezintă o bibliotecă Javascript pentru animații cu particule.

Pe acest site, puteți personaliza designul dorit al particulelor, interactivitatea acestora și culoarea de fundal.

În setarea „particule”, puteți ajusta numărul de particule, culoarea, forma, dimensiunea, opacitatea, liniile care leagă particulele și mișcarea.

Sub aceasta se află „interactivitate”.

Aici puteți ajusta cum se comportă particulele atunci când treceți cu mouse-ul peste ele și faceți clic pe ele.

În final, aveți „fundalul paginii (css)”. Aici puteți schimba culoarea de fundal a animației cu particule și puteți modifica dimensiunea, poziția și repetarea acesteia.

Dacă este necesar, puteți încărca și un URL pentru o imagine de fundal personalizată.

După ce ați terminat, puteți face clic pe butonul „Descărcați configurația curentă (json)” din partea de jos.

Aceasta va descărca fișierul de cod JSON al fundalului cu particule, pe care trebuie să îl deschideți folosind o aplicație de editare de text. Păstrați fereastra editorului de text deschisă pe măsură ce continuați cu următorii pași.

Acum, să ne întoarcem la constructorul de pagini SeedProd.

Navigați din nou la meniul Particle Background din setările Advanced. Apoi, copiați și lipiți codul JSON în caseta de text corespunzătoare.

Ar trebui să vedeți acum fundalul cu particule în secțiunea de previzualizare.

Faceți clic pe „Previzualizare” pentru a vedea cum arată fundalul cu particule pe partea frontală și pe „Salvare” pentru a finaliza modificările.

Iată un exemplu despre cum ar putea arăta fundalul cu particule:

Metoda 2: Cum să adăugați un fundal animat cu cod (gratuit)

Dacă utilizarea unui page builder pentru a insera un fundal animat pare prea multă muncă, atunci îl puteți adăuga și folosind cod. Nu vă faceți griji dacă nu sunteți un expert în codare, deoarece vom folosi WPCode pentru a face acest proces sigur și simplu.

Puteți utiliza fie versiunea gratuită, fie cea premium a WPCode pentru acest tutorial. În timp ce versiunea gratuită funcționează perfect, versiunea premium include funcții utile precum generarea de cod AI și un mod de testare.

Puteți citi recenzia noastră WPCode dacă aveți nevoie de mai multe informații.

Mai întâi, instalați pluginul în administratorul WordPress.

După activare, accesați Code Snippets » + Add Snippet în tabloul de bord, apoi faceți clic pe „Add Your Custom Code (New Snippet)” urmat de butonul „+ Add Custom Snippet”.

Acum, va trebui să selectați tipul de fragment.

Deoarece vom lucra cu o combinație de HTML, JavaScript și CSS, puteți alege „Fragment HTML” din opțiuni.

Acum, dați un nume ușor de reținut snippet-ului dvs.

Poate fi ceva simplu precum „Fundal Particle.js”.

Acum, continuați și lipiți codul de mai jos.

Acest cod a fost adaptat de fapt din același site web Vincent Garreau care a fost prezentat în prima metodă, dar vă vom arăta cum să îl personalizați mai mult doar cu cod:

<!-- HTML -->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Particles.js Background</title>

  <!-- Include the particles.js library -->
  <script src="/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>

Acest cod este destul de lung, așa că să analizăm părțile pe care le puteți personaliza.

Pentru a schimba culoarea de fundal, modificați proprietatea background-color sub #particles-js. Înlocuiți #b61924 cu orice valoare de culoare CSS validă, cum ar fi #FF0000 pentru roșu sau rgb(255,0,0) sau chiar nume de culori precum red.

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

Pentru a adăuga o imagine de fundal, setați proprietatea background-image adăugând URL-ul imaginii dvs. în interiorul url("").

Asigurați-vă că calea sau URL-ul imaginii de fundal este corect.

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

Pentru a schimba numărul de particule, ajustați "value" sub "number".

Mărirea valorii adaugă mai multe particule, în timp ce scăderea acesteia reduce numărul.

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

Pentru a schimba dimensiunea particulelor, puteți modifica "value" sub "size".

Un număr mai mare crește dimensiunea particulelor și invers.

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

Pentru a schimba culoarea particulelor, înlocuiți "value" din "color" cu orice valoare CSS validă pentru culoare.

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

Pentru a schimba forma particulelor, puteți modifica "type" sub "shape".

Puteți folosi forme precum "circle", "edge", "triangle", "polygon",  sau chiar "star".

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

Pentru a modifica proprietățile liniilor dintre particule, puteți ajusta proprietățile din secțiunea "line_linked".

De exemplu, dacă schimbați "enable": true în "enable": false, atunci nu veți vedea nicio linie care să conecteze particulele.

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

Puteți schimba, de asemenea, culoarea, opacitatea și lățimea liniei.

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

Nu vă faceți griji dacă trebuie să faceți modificări mai târziu, deoarece puteți modifica întotdeauna codul chiar și după activare.

După ce ați personalizat codul după bunul plac, este timpul să configurați unde și când apare fundalul dvs. animat.

Derulați în jos la secțiunea Inserare a fragmentului dvs. WPCode. Asigurați-vă că selectați „Inserare automată” ca Metodă de inserare și alegeți „Antetul întregului site” pentru Locație.

WPCode oferă, de asemenea, o funcționalitate puternică numită logică condițională, disponibilă atât în versiunea gratuită, cât și în cea premium. Această funcționalitate vă permite să controlați exact unde apare fundalul dvs. animat pe site-ul dvs. web.

Pentru a utiliza această funcție, localizați secțiunea „Smart Conditional Logic” și activați „Enable Logic”. Veți vedea opțiuni pentru a seta condiții specifice pentru afișarea fundalului dvs.

De exemplu, dacă doriți ca fundalul animat să apară doar pe pagina de pornire, selectați „URL-ul paginii” din meniul derulant al condițiilor, alegeți „Este” și introduceți URL-ul paginii de pornire.

Puteți adăuga mai multe grupuri de condiții făcând clic pe butonul „+ Add new group”.

Ultimul pas este să vă activați fragmentul. Căutați comutatorul „Inactiv” din partea de sus a paginii și faceți clic pe el pentru a-l schimba în „Activ”. Nu uitați să faceți clic pe „Salvare fragment” pentru a păstra modificările.

Atât! Vizitați site-ul dvs. pe mobil sau pe desktop pentru a vedea noul dvs. fundal animat în acțiune. Iată cum arată pe site-ul nostru de test:

Fundalele animate încetinesc site-urile web?

Dacă nu sunt făcute corect, fundalurile animate pot încetini site-ul dvs. Dar există modalități de a evita acest lucru.

Pentru fundalurile cu particule, numărul de particule și viteza cu care se mișcă pot afecta cât de repede se încarcă pagina dvs. Mai multe particule și mișcare mai rapidă necesită mai multă putere de procesare, ceea ce poate încetini lucrurile.

Pentru a remedia acest lucru, puteți încerca diferite setări pentru densitatea și viteza particulelor pentru a găsi ceea ce funcționează cel mai bine pentru site-ul dvs. În timpul acestui proces, puteți efectua teste de viteză WordPress pentru a vedea efectele.

Este, de asemenea, o idee bună să folosiți fundaluri animate doar pe paginile unde contează cel mai mult. Nu aveți nevoie de ele peste tot, altfel ar putea deveni plictisitoare.

În cele din urmă, pentru a menține site-ul dvs. rapid cu un fundal de particule, asigurați-vă că urmați cele mai bune practici pentru viteza site-ului web. Puteți afla mai multe în ghidul nostru suprem pentru a face WordPress mai rapid.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați un fundal animat cu particule în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să obțineți feedback despre designul site-ului web în WordPress și selecția noastră de experți a celor mai buni constructori de teme WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.