Come aggiungere un'animazione di precaricamento a WordPress (Passo dopo passo)

Hai mai notato quell'icona o animazione che appare mentre un sito web si carica? Quella è un'animazione di precaricamento, ed è uno strumento utile che puoi usare nei tuoi progetti WordPress.

I precaricatori hanno uno scopo reale. Sui siti con molti contenuti, mantengono i visitatori impegnati durante quei secondi cruciali di caricamento, il che può ridurre i tassi di rimbalzo.

E per i siti aziendali, un precaricatore brandizzato può persino aggiungere un tocco professionale.

Se pensi che questo suoni complicato, non preoccuparti. Abbiamo ideato 2 metodi per aggiungere un'animazione di precaricamento in WordPress, adatti a utenti di tutti i livelli di abilità.

Perché aggiungere un'animazione di precaricamento in WordPress?

Un preloader è un'animazione che vedi mentre aspetti che una pagina venga caricata. Segnala agli utenti che il sito web sta funzionando e chiede loro di attendere pazientemente.

Una volta che il contenuto è pronto, il preloader scompare e il visitatore può navigare normalmente sul sito. Ecco un esempio di questo elemento di design di WordPress:

Potresti voler aggiungere un'animazione di caricamento se la tua pagina contiene immagini di grandi dimensioni o incorporamenti video. Poiché questi richiedono più tempo per essere caricati, un preloader mantiene gli utenti coinvolti in modo che non se ne vadano prematuramente.

Tuttavia, non dovresti usare i preloaders solo per nascondere prestazioni scadenti.

Detto questo, vediamo come puoi aggiungere facilmente un'animazione di caricamento della pagina al tuo sito WordPress. Utilizza semplicemente i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare:

Come aggiungere una semplice animazione di caricamento con WP Smart Preloader

Un modo semplice per aggiungere un'animazione di precaricamento in WordPress è utilizzare WP Smart Preloader.

Questo plugin è un'ottima scelta se desideri una soluzione rapida e semplice senza perderti in troppe impostazioni.

Questo perché ha 6 animazioni di precaricamento WordPress integrate che puoi utilizzare, e non devi configurare molte impostazioni per abilitare l'animazione.

La prima cosa che devi fare è installare e attivare il plugin WP Smart Preloader. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin di WordPress.

Dopo l'attivazione, vai su Impostazioni » WP Smart Preloader e quindi apri il menu a discesa ‘Smart Preloader’. Questo mostrerà tutte le diverse animazioni che puoi utilizzare.

Il plugin mostrerà un'anteprima dell'animazione scelta, in modo da poter selezionare diversi preloader per vedere quale ti piace di più.

Per impostazione predefinita, l'animazione apparirà su tutto il tuo sito web WordPress, ma se preferisci, puoi usarla solo sulla tua homepage. Basta selezionare la casella 'Mostra solo sulla Home Page'.

Se desideri creare la tua animazione CSS, digita semplicemente il tuo codice nella casella 'CSS personalizzato'.

Un'altra opzione è creare un'animazione HTML5 personalizzata aggiungendo codice alla casella ‘Animazione personalizzata’.

Dopo aver scelto un'animazione, scorri fino alla sezione ‘Durata di visualizzazione del caricatore’. Qui puoi cambiare per quanto tempo viene riprodotto il preloader. 

L'opzione predefinita è 1500 millisecondi o 1,5 secondi. Questo dovrebbe funzionare bene per la maggior parte dei siti, ma puoi digitare un numero diverso se lo desideri.

Per impostazione predefinita, l'animazione impiegherà 2500 millisecondi o 2,5 secondi per dissolversi completamente. Per cambiare questo, digita semplicemente un numero più grande o più piccolo nel campo ‘Caricatore da dissolvere’.

Quando sei soddisfatto di come è configurato il preloader, fai clic sul pulsante ‘Salva modifiche’ per memorizzare le tue impostazioni.

Ora puoi visitare il tuo blog o sito web WordPress per vedere il preloader in azione.

Come aggiungere un'animazione di caricamento personalizzabile con Safelayout Cute Preloader

Il primo plugin rende facile aggiungere un'animazione di caricamento in WordPress. Tuttavia, se desideri un maggiore controllo sul design per adattarlo al tuo marchio, puoi provare Safelayout Cute Preloader.

Per iniziare, procedi con l'installazione e l'attivazione del plugin nella tua area di amministrazione di WordPress. Per maggiori dettagli, consulta la nostra guida su come installare un plugin di WordPress.

Una volta che il plugin è attivo, vai su Impostazioni » Safelayout Preloader per iniziare a configurarlo.

Passaggio 1: Abilita il Preloader e scegli un preset

Innanzitutto, devi attivare il preloader e decidere dove apparirà sul tuo sito.

Puoi iniziare nella scheda ‘Preset’ per scegliere un design predefinito. Se ti piace uno, fai semplicemente clic sul pulsante ‘Cambia impostazioni in questo preloader’ sotto il modello.

Successivamente, passa alla scheda ‘Impostazioni di visualizzazione’.

Qui, devi selezionare la casella ‘Abilita Safelayout Cute Preloader’ per assicurarti che il plugin funzioni.

Quindi, usa il menu a discesa ‘Visualizza su’ per scegliere dove mostrare il preloader. Per questo tutorial, sceglieremo ‘Sito web completo’.

In questa schermata, puoi anche impostare la durata dell'animazione.

• Tempo di caricamento minimo: Questo imposta il tempo minimo durante il quale il preloader sarà visibile. È utile se vuoi assicurarti che la tua animazione brandizzata sia sempre vista almeno per un momento, anche se la tua pagina si carica istantaneamente.
• Tempo di caricamento massimo: Questo imposta il tempo massimo durante il quale il preloader sarà visibile. Questo funge da rete di sicurezza, nascondendo automaticamente il preloader in modo che gli utenti non rimangano bloccati a guardarlo se la tua pagina incontra un errore di caricamento.

Puoi anche scegliere di visualizzare un pulsante ‘Chiudi’ dopo alcuni secondi. Una volta apportate le modifiche, fai semplicemente clic su ‘Salva modifiche’.

Passaggio 2: Personalizza l'animazione principale

Ora puoi progettare l'aspetto dell'animazione stessa. Questo include lo sfondo, l'icona principale e una barra di avanzamento opzionale.

Per prima cosa, vai alla scheda ‘Sfondo’.

Qui puoi scegliere un effetto di animazione, cambiare il colore di sfondo e regolarne l'opacità.

Se non desideri uno effetto di sfondo speciale, seleziona semplicemente 'Nessuno sfondo'.

Successivamente, fai clic sulla scheda ‘Barra di avanzamento’.

Una barra di avanzamento è un ottimo modo per mostrare ai visitatori che la pagina si sta caricando.

Puoi scegliere una forma e poi personalizzarne il colore, la posizione e le dimensioni.

Se non ne desideri uno, scegli semplicemente 'Nessuna barra di avanzamento'.

Dopodiché, vai alla scheda 'Icona'.

Questa è la grafica animata principale, come un cerchio che gira.

Puoi scegliere un'icona e poi cambiarne le dimensioni, il colore e lo stile di animazione. Se ritieni che un'icona sia eccessiva con le altre impostazioni, puoi selezionare 'Nessuna icona'.

Ricorda di fare clic sul pulsante 'Salva modifiche' al termine della personalizzazione di ogni scheda.

Passaggio 3: Aggiungi il tuo branding e testo

Infine, puoi aggiungere il tuo logo e testo personalizzato per far sì che il preloader corrisponda perfettamente al tuo brand.

Vai alla scheda 'Immagine del brand' e seleziona la casella 'Mostra brand' per aggiungere il tuo logo.

Quindi, fai clic sul pulsante 'Libreria multimediale' per caricare l'immagine del tuo logo.

Puoi quindi regolare la posizione e i margini del logo in modo che si adatti bene agli altri elementi.

Successivamente, diamo un'occhiata alla scheda 'Contatore'.

Questa impostazione mostra una percentuale dallo 0% al 100% per indicare lo stato di avanzamento del caricamento. Puoi abilitarla e personalizzarne la posizione, il colore e la dimensione del carattere.

Infine, vai alla scheda 'Testo'. Per impostazione predefinita, il preloader mostra il testo 'Caricamento...', ma puoi cambiarlo con qualcosa di più creativo.

Semplicemente seleziona la casella 'Mostra testo', scrivi il tuo messaggio e personalizzane il carattere, il colore e la posizione.

Una volta terminato, fai clic sul pulsante 'Salva modifiche'.

E il gioco è fatto! L'animazione del tuo preloader dovrebbe ora apparire in base alle tue configurazioni. Puoi visualizzare il tuo sito su dispositivi mobili, desktop o tablet per vederlo in azione.

Ecco come appare il nostro:

Domande frequenti sui preloader di WordPress

Nel corso degli anni, molti lettori ci hanno chiesto informazioni sull'utilizzo dei preloader. Ecco le risposte ad alcune delle domande più comuni.

I preloader influiscono sulla velocità del sito web?

No, un preloader non rende il tuo sito web più veloce. È puramente uno strumento visivo per intrattenere i visitatori mentre il browser scarica i tuoi contenuti.

Per migliorare effettivamente la velocità del tuo sito, dovresti concentrarti sulla cache, sull'ottimizzazione delle immagini e sull'utilizzo di un provider di hosting veloce.

I preloader sono dannosi per la SEO?

Se implementati correttamente, vanno bene. Tuttavia, devi prestare attenzione ai Core Web Vitals di Google, in particolare al Largest Contentful Paint (LCP).

Se il tuo preloader rimane sullo schermo troppo a lungo, Google potrebbe pensare che il tuo contenuto principale non sia ancora stato caricato. Questo può danneggiare il tuo posizionamento. Si consiglia di mantenere la durata dell'animazione tra 1,5 e 2 secondi.

Il mio preloader non smette di girare. Come posso risolvere?

Se il tuo preloader si blocca, è spesso causato da un conflitto con un plugin di cache. Plugin come WP Rocket hanno spesso una funzione 'Ritarda l'esecuzione di JavaScript'.

Questa funzione impedisce l'esecuzione del codice del preloader, quindi non riceve mai il segnale che la pagina ha finito di caricarsi. Per risolvere questo problema, devi escludere i file del plugin preloader dalle impostazioni di ritardo JavaScript nel tuo plugin di caching.

Posso usare un preloader solo su pagine specifiche?

Sì, assolutamente. La maggior parte dei plugin per preloader ti consente di scegliere dove appare l'animazione.

Puoi abilitarlo su tutto il sito, solo sulla homepage o anche su post e pagine specifici in cui ti aspetti tempi di caricamento più lunghi.

Qual è la differenza tra un preloader e una splash page?

Un preloader viene riprodotto mentre il tuo contenuto viene caricato e scompare automaticamente.

Una splash page è una schermata introduttiva separata che richiede all'utente di fare clic su un link o un pulsante per accedere al sito web principale.

Generalmente sconsigliamo l'uso di splash page perché creano un passaggio aggiuntivo per i visitatori e possono avere un impatto negativo sul tuo tasso di rimbalzo e sulla SEO.

Altri trucchi per WordPress per coinvolgere i visitatori del tuo sito web

Aggiungere un'animazione di precaricamento è solo uno dei tanti modi per migliorare il tuo sito WordPress. Se stai cercando idee più creative per catturare il tuo pubblico, abbiamo quello che fa per te:

• Come aggiungere un effetto parallasse a qualsiasi tema WordPress – Crea profondità e interesse visivo con questa tecnica di illusione di scorrimento.
• Come aggiungere facilmente fiocchi di neve che cadono nel tuo blog WordPress – Delizia i tuoi visitatori con un tocco di magia invernale sul tuo sito.
• Come aggiungere facilmente la modalità scura al tuo sito web WordPress – Offri un'esperienza di navigazione più confortevole con questa popolare funzionalità.
• Modi per portare effetti di Halloween sul tuo sito WordPress – Spaventa il tuo sito con questi trucchi divertenti e festosi di Halloween.
• Come aggiungere uno sfondo animato in WordPress – Fai una dichiarazione audace con sfondi in movimento accattivanti.
• Come aggiungere un video di YouTube come sfondo a schermo intero in WordPress – Crea una prima impressione potente con sfondi video dinamici.
• Come aggiungere lo scorrimento infinito al tuo sito WordPress (guida passo passo) – Mantieni i visitatori coinvolti caricando senza interruzioni altri contenuti mentre scorrono.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere facilmente un'animazione di precaricamento al tuo sito WordPress. Potresti anche voler dare un'occhiata alle nostre scelte esperte dei migliori page builder drag-and-drop in WordPress e alla nostra guida completa su come modificare un sito WordPress.

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