Come aggiungere uno sfondo animato in WordPress (2 metodi)

Volete creare uno sfondo animato per il vostro sito web WordPress?

Uno sfondo animato può aggiungere un certo fascino visivo al vostro sito web. Renderà il vostro sito più attraente e memorabile, lasciando un’impressione duratura ai vostri visitatori.

In questa guida vi mostreremo come aggiungere uno sfondo particellare in WordPress utilizzando particle.js, una libreria di animazione JavaScript.

Perché aggiungere uno sfondo animato in WordPress?

La personalizzazione dello sfondo del vostro sito web potrebbe sembrare poco importante. In realtà, può dare forma alla prima impressione che i visitatori hanno del vostro marchio e influenzare la loro esperienza sul vostro sito.

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

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

Ad esempio, si possono vedere negozi di e-commerce che aggiungono fiocchi di neve animati o alberi di Natale cadenti sulle loro pagine web per creare un’atmosfera festosa per le festività natalizie.

Alcuni siti web utilizzano anche un’animazione di sfondo per il preloader.

In questo modo, i visitatori possono avere l’impressione che il sito si stia caricando, e sono quindi più propensi ad attendere pazientemente la comparsa degli elementi della pagina web. Per ulteriori informazioni, potete leggere il nostro articolo sull’aggiunta di un’animazione di sfondo al preloader.

In questa guida vi mostreremo come aggiungere uno sfondo animato utilizzando particle.js. Se volete scoprire di cosa si tratta, proseguite con la prossima sezione.

Che cos’è particle.js?

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

Queste particelle possono essere personalizzate per dimensione, colore, forma e movimento. Rispondono anche alle interazioni degli utenti, come i movimenti del mouse o i clic, per aggiungere un ulteriore livello di coinvolgimento al vostro sito web.

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

Metodo 1: Come aggiungere uno sfondo animato con un builder di pagina (consigliato)

Il primo metodo consiste nell’utilizzare SeedProd, il miglior plugin per il page builder di WordPress presente sul mercato. Offre una funzione di sfondo particellare integrata e altamente personalizzabile.

È possibile 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 di hover in base alle proprie preferenze.

Per ulteriori informazioni su SeedProd, potete consultare la nostra recensione approfondita di SeedProd. Abbiamo trattato tutto, comprese le opzioni di personalizzazione, la scelta dei modelli e dei blocchi e le integrazioni di terze parti.

In questa guida utilizzeremo la versione premium di SeedProd, in quanto la funzione di sfondo particellare è disponibile.

Per utilizzare SeedProd, è necessario installare e attivare il plugin. Per maggiori dettagli, consultare la nostra guida per principianti sull’installazione di un plugin di WordPress.

Dopodiché, è sufficiente copiare-incollare la chiave di licenza nel plugin. Basta andare nella dashboard di WordPress, navigare in SeedProd ” Impostazioni, e inserire la chiave di licenza nel campo appropriato. Quindi, fare clic su “Verifica chiave”.

Se volete personalizzare il vostro tema prima di aggiungere uno sfondo particellare in WordPress, potete seguire la nostra guida su come creare facilmente un tema personalizzato con SeedProd.

A questo punto, è necessario aprire il costruttore drag-and-drop per la pagina in cui si desidera inserire lo sfondo particellare. Se avete creato un tema con SeedProd, dovreste avere già alcune pagine aggiunte in WordPress.

Successivamente, è sufficiente andare su Pagine ” Tutte le pagine e passare il cursore su una pagina, come la homepage, la pagina informativa o altro. Quindi, scegliere il pulsante “Modifica con SeedProd”.

Se questa opzione non appare sul vostro computer, non preoccupatevi.

È sufficiente fare clic sul pulsante “Modifica” e nell’editor dei blocchi fare clic sul pulsante “Modifica con SeedProd”.

Ora dovreste trovarvi all’interno del costruttore di pagine di SeedProd.

È sufficiente passare il cursore sulla sezione della pagina in cui si desidera aggiungere lo sfondo particellare in WordPress e selezionarla. Saprete di aver selezionato una sezione se nella parte superiore di essa appariranno un bordo viola e una barra degli strumenti.

Una volta cliccato su una sezione, dovrebbe apparire la barra laterale delle sezioni sulla sinistra.

A questo punto è sufficiente passare alla scheda ‘Avanzate’ e attivare l’impostazione ‘Abilita sfondo particelle’.

È possibile configurare diverse impostazioni dello sfondo delle particelle.

Uno è Stile, dove è possibile scegliere uno qualsiasi degli effetti di animazione disponibili, ovvero Poligono, Spazio, Neve, Fiocchi di neve, Natale, Halloween e Personalizzato.

Parleremo più avanti dell’aggiunta di un’animazione di sfondo personalizzata per le particelle.

Sono presenti anche l’Opacità, che controlla l’aspetto opaco dell’animazione, e la Direzione del flusso, che imposta la direzione verso cui le particelle devono dirigersi.

Per alcuni stili di particelle, è possibile personalizzare anche il loro colore.

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

Sotto il colore si trova l’opzione “Impostazioni avanzate”. Abilitato, consente di personalizzare il numero di particelle, la dimensione delle particelle, la velocità di spostamento e l’abilitazione dell’effetto Hover.

Con quest’ultima funzione, le particelle si muoveranno in base alla direzione del mouse. Si noti che non funzionerà quando si visualizza il sito web nell’area del costruttore di pagine o se il contenuto della sezione occupa l’intero spazio della sezione stessa.

E questo è tutto ciò che dovete fare.

Una volta terminata la personalizzazione dello sfondo particellare di WordPress, è possibile fare clic sul pulsante “Salva” nell’angolo in alto a destra per pubblicare le modifiche. Potete anche scegliere il pulsante “Anteprima” per vedere l’aspetto dello sfondo particellare.

Creazione di uno sfondo particellare personalizzato per il vostro sito web

Se gli effetti animati disponibili non sono adatti alle vostre esigenze, potete crearne uno personalizzato. È sufficiente selezionare lo stile ‘Personalizzato’ nelle impostazioni dello Sfondo particellare.

Successivamente, fare clic sul link nella riga “Visitare il link qui e scegliere gli attributi richiesti per la particella”.

Su questo sito web è possibile personalizzare il design della particella desiderata, la sua interattività e il colore dello sfondo.

Nell’impostazione “particelle” è possibile regolare il numero di particelle, il colore, la forma, la dimensione, l’opacità, le linee che collegano le particelle e il movimento.

Al di sotto di questo c’è l'”interattività”.

Qui è possibile regolare il comportamento delle particelle quando ci si passa sopra e si fa clic su di esse.

Infine, c’è “sfondo della pagina (css)”. Qui è possibile cambiare il colore di sfondo dell’animazione delle particelle e modificarne le dimensioni, la posizione e la ripetizione.

Se necessario, è possibile caricare anche un’immagine di sfondo personalizzata.

Una volta terminato, si può fare clic sul pulsante “Download current config (json)” in basso.

In questo modo si scaricherà il file di codice JSON dello sfondo delle particelle, che dovrà essere aperto con un editor di testo. Tenere aperta la finestra dell’editor di testo mentre si procede con i passi successivi.

Torniamo ora al costruttore di pagine SeedProd.

Passare nuovamente al menu Sfondo particellare delle impostazioni avanzate. Quindi, copiare e incollare il codice JSON nella casella di testo appropriata.

Ora si dovrebbe vedere lo sfondo delle particelle nella sezione di anteprima.

Fare clic su ‘Anteprima’ per vedere l’aspetto dello sfondo delle particelle sul front-end e su ‘Salva’ per finalizzare le modifiche.

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

Metodo 2: come aggiungere uno sfondo animato con un plugin gratuito

Il secondo metodo è un’alternativa gratuita all’uso di SeedProd. A tale scopo, è necessario il plugin Particle Background WP, un plugin di animazione gratuito.

Come in precedenza, assicuratevi di installare e attivare il plugin Particle Background WP. Se avete bisogno di una guida, potete consultare la nostra guida su come installare un plugin di WordPress.

Dopo aver attivato il plugin, accedere a Sfondo particellare dalla dashboard di WordPress. Qui, si vedranno diverse sezioni.

Uno è Deploy. Include uno shortcode per lo sfondo della particella finita, se si desidera aggiungerlo in seguito alle pagine o ai post.

È inoltre possibile selezionare le caselle “Aggiungi alla prima pagina” e/o “Aggiungi alla pagina del blog” per inserire automaticamente lo sfondo in tali pagine.

Scorrendo verso il basso, si vedrà la sezione Contenuto. Qui è possibile add-on del testo in alto sullo sfondo della particella.

Se conoscete l’HTML, potete aggiungere del codice HTML per personalizzare il testo. In alternativa, è possibile fare clic su ‘Aggiungi media’ per inserire immagini o file dalla libreria multimediale di WordPress.

Di seguito sono riportate le impostazioni per l’animazione di sfondo delle particelle di WordPress. È possibile regolare la densità delle particelle, che controlla la distanza e la vicinanza delle particelle, il colore dei punti delle particelle e il colore dello sfondo. È anche possibile rendere lo sfondo trasparente.

Un aspetto negativo di questo plugin per WordPress è che non è possibile regolare la forma delle particelle come avviene con SeedProd. Si tratta quindi di un aspetto da tenere in considerazione se si desidera utilizzare questo plugin.

E il gioco è fatto!

Ecco un esempio di come appare lo sfondo animato da particelle utilizzando questo plugin per WordPress.

Opzione facoltativa: Aggiungere uno sfondo video a WordPress

Se volete aggiungere un effetto animato al vostro sito web ma non vi piacciono i metodi che vi abbiamo mostrato, vi consigliamo di aggiungere uno sfondo video.

Uno sfondo video offre più opzioni sul tipo di effetti animati che si possono avere sul sito web. Inoltre, è possibile fare in modo che il video venga riprodotto automaticamente in loop, in modo da dare l’impressione di essere animato.

Naturalmente, non consigliamo di caricare un intero video sul sito web. Questo rallenterà WordPress in modo significativo e frustrerà i visitatori.

È invece possibile incorporare un video di YouTube e utilizzarlo come sfondo animato a schermo intero.

Per maggiori informazioni, consultate la nostra guida su come add-on lo sfondo di un video YouTube a schermo intero in WordPress.

Gli sfondi animati rallentano i siti web?

Se non sono fatti bene, gli sfondi animati possono rallentare il vostro sito web. Ma ci sono modi per evitarlo.

Per gli sfondi particellari, il numero di particelle e la loro velocità di movimento possono influire sulla velocità di caricamento della pagina. Un numero maggiore di particelle e un movimento più veloce richiedono una maggiore potenza di elaborazione, che può rallentare il caricamento.

Per risolvere questo problema, potete provare diverse impostazioni per la densità e la velocità delle particelle per trovare quella che funziona meglio per il vostro sito web. Durante questo processo, è possibile eseguire test di velocità di WordPress per vedere gli effetti.

È anche una buona idea utilizzare gli sfondi animati solo nelle pagine in cui sono più importanti. Non è necessario utilizzarli ovunque, altrimenti potrebbero risultare noiosi.

Infine, per mantenere il vostro sito web veloce con uno sfondo particellare, assicuratevi di seguire le migliori pratiche per la velocità dei siti web. Per saperne di più, consultate la nostra guida definitiva su come rendere WordPress più veloce.

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere uno sfondo di particelle animate in WordPress. Potreste anche voler dare un’occhiata alla nostra guida su come ottenere feedback sul design di un sito web in WordPress e alla nostra scelta dei migliori builder di temi per WordPress.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.