Come aggiungere uno sfondo animato in WordPress (2 metodi)

Credi che aggiungere uno sfondo animato in WordPress sia complicato? Ripensaci.

La pensavamo allo stesso modo, ma dopo qualche esperimento, abbiamo scoperto che in realtà non è poi così male.

Sappiamo quanto sia importante stupire i tuoi visitatori dal momento in cui atterrano sul tuo sito. Uno sfondo animato è un ottimo elemento di design di WordPress per creare una prima impressione memorabile senza sovraccaricare i tuoi contenuti.

Ma se sei preoccupato per i tempi di caricamento lenti, la codifica complessa o i plugin costosi, non preoccuparti. Abbiamo scoperto una soluzione semplice utilizzando particle.js, che è una libreria JavaScript leggera che crea splendidi sfondi animati senza compromettere le prestazioni del tuo sito.

In questa guida, ti mostreremo esattamente come aggiungere bellissime animazioni di particelle al tuo sito WordPress, sia che tu preferisca usare un plugin o un po' di codice. Rendiamo il tuo sito web eccezionale!

Perché aggiungere uno sfondo animato in WordPress?

Personalizzare lo sfondo del tuo sito web potrebbe sembrare poco importante all'inizio. Ma, dopo anni nel mondo del web design e di WordPress, abbiamo notato che i siti con sfondi animati progettati con cura tendono a mantenere i visitatori più a lungo impegnati.

Uno sfondo animato può migliorare l'attrattiva visiva del tuo sito web, rendendolo più interattivo e accattivante per i visitatori. Dà l'impressione che il tuo sito WordPress utilizzi un design innovativo e di alta qualità.

Molti siti web utilizzano anche effetti animati quando vogliono celebrare un'occasione speciale.

Ad esempio, potresti vedere negozi eCommerce aggiungere fiocchi di neve animati o alberi di Natale che cadono sulle loro pagine web per creare un'atmosfera festosa per le festività.

Alcuni siti web utilizzano anche un'animazione di sfondo precaricatore.

Con questo, i visitatori possono avere la sensazione che il sito si stia caricando, rendendoli più propensi ad attendere pazientemente la comparsa degli elementi della pagina web. Puoi leggere il nostro articolo su come aggiungere un precaricatore di animazione di sfondo per maggiori informazioni.

In questa guida, ti mostreremo come aggiungere uno sfondo animato utilizzando particle.js. Se vuoi scoprire cos'è, continua pure alla sezione successiva.

Cos'è particle.js?

particle.js è una libreria JavaScript che ti consente di creare splendidi effetti visivi con particelle, che sono piccoli elementi grafici animati.

Queste particelle possono essere personalizzate per dimensioni, colore, forma e movimento. Rispondono anche alle interazioni dell'utente, come i movimenti del mouse o i clic, per aggiungere un ulteriore livello di coinvolgimento al tuo sito web.

Ora che sai cos'è particle.js, vediamo come puoi usarlo per aggiungere uno sfondo animato in WordPress. Ci sono due metodi per i principianti, e puoi navigare in questa guida con i collegamenti rapidi qui sotto:

• Metodo 1: Come aggiungere uno sfondo animato con un page builder (senza codice)
• Method 2: How to Add an Animated Background With Code (Free)

Metodo 1: Come aggiungere uno sfondo animato con un page builder (senza codice)

Il primo metodo consiste nell'utilizzare SeedProd, che è il miglior plugin per la creazione di pagine WordPress sul mercato. Offre una funzionalità di sfondo a particelle integrata e altamente personalizzabile.

Con esso, puoi scegliere una delle animazioni di particelle già disponibili o aggiungerne una personalizzata. È anche possibile modificare il numero di particelle, i movimenti dell'animazione e gli effetti al passaggio del mouse per adattarli alle tue preferenze.

Per maggiori informazioni su SeedProd, puoi consultare la nostra recensione approfondita di SeedProd. Abbiamo coperto tutto, comprese le opzioni di personalizzazione, le scelte di template e blocchi e le integrazioni di terze parti.

In questa guida, utilizzeremo la versione premium di SeedProd, poiché la funzionalità di sfondo a particelle è disponibile lì.

Per utilizzare SeedProd, dovrai prima installare e attivare il plugin. Puoi trovare maggiori dettagli in merito nella nostra guida per principianti sull'installazione di un plugin WordPress.

Dopodiché, copia e incolla semplicemente la tua chiave di licenza nel plugin. Vai alla tua bacheca di WordPress, naviga su SeedProd » Impostazioni, e inserisci la chiave di licenza nel campo appropriato. Quindi, fai clic su 'Verifica chiave'.

Se desideri personalizzare prima il tuo tema prima di aggiungere uno sfondo a particelle in WordPress, puoi seguire la nostra guida su come creare facilmente un tema personalizzato con SeedProd.

Ora, devi aprire il builder drag-and-drop per la pagina in cui desideri inserire lo sfondo a particelle. Se hai creato un tema con SeedProd, dovresti già avere alcune pagine aggiunte in WordPress per te.

Successivamente, vai semplicemente su Pagine » Tutte le Pagine e passa il cursore del mouse su una pagina, come la home page, la pagina dei contatti o qualcos'altro. Quindi, scegli il pulsante 'Modifica con SeedProd'.

Se questa opzione non appare sul tuo schermo, non preoccuparti.

Fai semplicemente clic sul pulsante ‘Modifica’ e, nell'editor a blocchi, fai clic sul pulsante ‘Modifica con SeedProd’.

Dovresti ora trovarti all'interno del page builder di SeedProd.

Passa semplicemente il cursore sulla sezione della pagina in cui desideri aggiungere lo sfondo particellare in WordPress e selezionala. Saprai di aver selezionato una sezione se appare un bordo viola e una barra degli strumenti in alto.

Una volta fatto clic su una sezione, dovrebbe apparire la barra laterale Sezione sulla sinistra.

Tutto ciò che devi fare ora è passare alla scheda ‘Avanzate’ e attivare l'impostazione ‘Abilita sfondo particellare’.

Ci sono diverse impostazioni per lo sfondo particellare che puoi configurare.

Una è Stile, dove puoi scegliere uno qualsiasi degli effetti di animazione disponibili, che sono Poligono, Spazio, Neve, Fiocchi di neve, Natale, Halloween e Personalizzato.

Parleremo di più sull'aggiunta di un'animazione di sfondo particellare personalizzata più avanti nell'articolo.

C'è anche Opacità, che controlla quanto appare opaca l'animazione, e Direzione del flusso, che imposta la direzione verso cui dovrebbero dirigersi le particelle.

Per alcuni stili di particelle, puoi anche personalizzare i loro colori.

Tuttavia, per Natale e Halloween, non ci sono impostazioni di colore, poiché le particelle sono immagini.

Sotto Colore ci sono le ‘Impostazioni avanzate’. Abilitandole puoi personalizzare il Numero di particelle, la Dimensione delle particelle, la Velocità di movimento e Abilita effetto al passaggio del mouse.

Con l'ultima funzionalità, le particelle si muoveranno secondo la direzione del tuo mouse. Tieni presente che questo non funzionerà quando visualizzi il tuo sito web WordPress nell'area del page builder o se il contenuto all'interno della sezione occupa l'intero spazio di quella sezione.

E questo è tutto ciò che devi fare.

Una volta terminata la personalizzazione dello sfondo a particelle di WordPress, puoi fare clic sul pulsante 'Salva' in alto a destra per pubblicare le modifiche. Puoi anche scegliere il pulsante 'Anteprima' per vedere come appare lo sfondo a particelle.

Creare uno sfondo a particelle personalizzato per il tuo sito web

Se gli effetti animati disponibili non soddisfano le tue esigenze, puoi anche crearne uno personalizzato. Quello che dovresti fare è selezionare lo stile 'Personalizzato' nelle impostazioni dello sfondo a particelle.

Dopodiché, fai clic sul link nella riga 'Si prega di visitare il link qui e scegli gli attributi richiesti per la particella.'

Questo link ti porterà al sito web di Vincent Garreau, che presenta una libreria Javascript per animazioni di particelle.

Su questo sito web, puoi personalizzare il design delle particelle desiderato, la sua interattività e il colore di sfondo.

All'interno dell'impostazione 'particles', puoi regolare il numero di particelle, il colore, la forma, le dimensioni, l'opacità, le linee che collegano le particelle e il movimento.

Sotto c'è 'interactivity'.

Qui puoi regolare come le particelle si comportano quando ci passi sopra con il mouse e ci clicchi sopra.

Infine, hai 'page background (css)'. Qui puoi cambiare il colore di sfondo dell'animazione delle particelle e modificarne le dimensioni, la posizione e la ripetizione.

Se necessario, puoi anche caricare un URL di immagine di sfondo personalizzata.

Una volta terminato, puoi fare clic sul pulsante 'Download current config (json)' in basso.

Questo scaricherà il file di codice JSON dello sfondo delle particelle, che devi aprire utilizzando un editor di testo. Tieni aperta la finestra dell'editor di testo mentre procedi ai passaggi successivi.

Ora, torniamo al page builder di SeedProd.

Naviga nuovamente nel menu Particle Background all'interno delle impostazioni Avanzate. Quindi, copia e incolla il codice JSON nella casella di testo appropriata.

Ora dovresti vedere il tuo sfondo di particelle nella sezione di anteprima.

Fai clic su 'Preview' per vedere come appare lo sfondo delle particelle sul front-end e su 'Save' per finalizzare le modifiche.

Ecco un esempio di come potrebbe apparire lo sfondo delle particelle:

Metodo 2: Come aggiungere uno sfondo animato con il codice (Gratuito)

Se l'utilizzo di un page builder per inserire uno sfondo animato sembra troppo complicato, puoi anche aggiungerlo tramite codice. Non preoccuparti se non sei un esperto di codifica, poiché utilizzeremo WPCode per rendere questo processo sicuro e semplice.

Puoi usare sia la versione gratuita che quella premium di WPCode per questo tutorial. Mentre la versione gratuita funziona perfettamente, la versione premium include funzionalità utili come la generazione di codice AI e una modalità di test.

Puoi leggere la nostra recensione di WPCode se hai bisogno di maggiori informazioni.

Innanzitutto, procedi con l'installazione del plugin nella tua bacheca di WordPress.

Dopo l'attivazione, vai su Snippet di codice » + Aggiungi snippet nella tua bacheca, quindi fai clic su ‘Aggiungi il tuo codice personalizzato (Nuovo snippet)’ seguito dal pulsante ‘+ Aggiungi snippet personalizzato’.

Ora dovrai selezionare il tipo di snippet.

Poiché lavoreremo con una combinazione di HTML, JavaScript e CSS, puoi scegliere ‘Snippet HTML’ tra le opzioni.

Ora, dai al tuo snippet un nome facile da ricordare.

Può essere qualcosa di semplice come ‘Sfondo Particle.js’.

Ora, incolla il codice qui sotto.

Questo codice è stato in realtà adattato dallo stesso sito web di Vincent Garreau che è stato presentato nel primo metodo, ma ti mostreremo come personalizzarlo ulteriormente con solo codice:

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

Questo codice è piuttosto lungo, quindi diamo un'occhiata alle parti che puoi personalizzare.

Per modificare il colore di sfondo, modifica la proprietà background-color sotto #particles-js. Sostituisci #b61924 con qualsiasi valore di colore CSS valido, come #FF0000 per il rosso o rgb(255,0,0) o anche nomi di colori come red.

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

Per aggiungere un'immagine di sfondo, imposta la proprietà background-image aggiungendo l'URL della tua immagine all'interno di url("").

Assicurati che il percorso o l'URL dell'immagine di sfondo sia corretto.

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

Per modificare il numero di particelle, regola il "value" sotto "number".

Aumentare il valore aggiunge più particelle, mentre diminuirlo ne riduce il numero.

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

Per modificare la dimensione delle particelle, puoi modificare il "value" sotto "size".

Un numero maggiore aumenta la dimensione delle particelle e viceversa.

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

Per modificare il colore delle particelle, sostituisci il "value" in "color" con qualsiasi valore di colore CSS valido.

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

Per modificare la forma delle particelle, puoi modificare il "type" sotto "shape".

Puoi usare forme come "circle", "edge", "triangle", "polygon",  o anche "star".

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

Per modificare le proprietà delle linee tra le particelle, puoi regolare le proprietà sotto "line_linked".

Ad esempio, se cambi "enable": true in "enable": false, non vedrai alcuna linea che collega le particelle.

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

Puoi anche cambiare il colore, l'opacità e la larghezza della linea.

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

Non preoccuparti se devi apportare modifiche in seguito, poiché puoi sempre modificare il codice anche dopo l'attivazione.

Dopo aver personalizzato il codice a tuo piacimento, è ora di impostare dove e quando appare il tuo sfondo animato.

Scorri verso il basso fino alla sezione Inserimento dello snippet WPCode. Assicurati di selezionare 'Inserimento automatico' come Metodo di inserimento e scegli 'Piè di pagina del sito' per la Posizione.

WPCode offre anche una potente funzionalità chiamata logica condizionale, disponibile sia nelle versioni gratuite che premium. Questa funzionalità ti consente di controllare esattamente dove appare il tuo sfondo animato sul tuo sito web.

Per utilizzare questa funzionalità, individua la sezione ‘Smart Conditional Logic’ e attiva l’opzione ‘Enable Logic’. Vedrai le opzioni per impostare condizioni specifiche per la visualizzazione dello sfondo.

Ad esempio, se desideri che lo sfondo animato appaia solo sulla tua homepage, seleziona ‘Page URL’ dal menu a discesa delle condizioni, scegli ‘Is’ e inserisci l'URL della tua homepage.

Puoi aggiungere più gruppi di condizioni facendo clic sul pulsante ‘+ Add new group’.

Il passaggio finale è attivare il tuo snippet. Cerca l'interruttore ‘Inactive’ in cima alla pagina e fai clic su di esso per cambiarlo in ‘Active’. Non dimenticare di fare clic su ‘Save Snippet’ per salvare le modifiche.

Tutto qui! Visita il tuo sito web su mobile o desktop per vedere il tuo nuovo sfondo animato in azione. Ecco come appare sul nostro sito di prova:

Gli sfondi animati rallentano i siti web?

Se non fatto correttamente, gli sfondi animati possono rallentare il tuo sito web. Ma ci sono modi per evitarlo.

Per gli sfondi a particelle, il numero di particelle e la velocità con cui si muovono possono influire sulla velocità di caricamento della pagina. Più particelle e movimenti più veloci richiedono più potenza di elaborazione, il che può rallentare le cose.

Per risolvere questo problema, puoi provare diverse impostazioni per la densità e la velocità delle particelle per trovare ciò che funziona meglio per il tuo sito web. Durante questo processo, puoi eseguire test di velocità di WordPress per vedere gli effetti.

È anche una buona idea utilizzare sfondi animati solo nelle pagine in cui contano di più. Non ne hai bisogno ovunque, altrimenti potrebbero diventare noiosi.

Infine, per mantenere il tuo sito web veloce con uno sfondo a particelle, assicurati di seguire le migliori pratiche per la velocità del sito web. Puoi saperne di più nella nostra guida definitiva per rendere WordPress più veloce.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere uno sfondo animato a particelle in WordPress. Potresti anche voler consultare la nostra guida su come ottenere feedback sul design del sito web in WordPress e la nostra selezione di esperti dei migliori costruttori di temi WordPress.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.