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 precaricatore o caricatore di pagina è un'animazione che vedi mentre aspetti che una pagina si carichi. Dice agli utenti che la pagina web è ancora in fase di preparazione e chiede loro di attendere pazientemente. Una volta terminato il caricamento, il precaricatore scompare e il visitatore può vedere la pagina web normalmente.

Ecco un esempio di questo elemento di progettazione WordPress:

Uno scenario in cui potresti voler aggiungere un'animazione di caricamento è se la tua pagina web contiene molte immagini di grandi dimensioni o incorporamenti video. In questo caso, il tempo di caricamento della pagina sarà più lungo del normale e vorrai che gli utenti rimangano abbastanza a lungo perché la pagina appaia completamente.

Se la tua pagina non ha molti elementi pesanti, allora è meglio concentrarsi sul miglioramento della velocità e delle prestazioni del tuo sito web. Potresti anche voler passare a un miglior provider di hosting WordPress.

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
• How to Add a Customizable Loading Animation With Safelayout Cute Preloader
• Frequently Asked Questions About WordPress Preloaders

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 da fare è installare e attivare il plugin WP Smart Preloader. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin per 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 WordPress, ma se preferisci, puoi usarla solo sulla tua homepage. Basta selezionare la casella ‘Mostra solo sulla Home Page’.

Se vuoi 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 WordPress o sito web 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 abbinarlo al tuo marchio, puoi dare un'occhiata a 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 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?

Un preloader di per sé non rende il tuo sito web più veloce. Il suo scopo è migliorare l'esperienza utente mascherando il processo di caricamento con un'animazione ordinata.

Per migliorare effettivamente la velocità del tuo sito, dovresti concentrarti su cose come la cache con WP Rocket, l'ottimizzazione delle tue immagini e l'utilizzo di un provider di hosting ad alte prestazioni.

I preloader sono dannosi per la SEO?

Se implementato correttamente, un preloader leggero non dovrebbe danneggiare la tua SEO. Tuttavia, un'animazione codificata male o pesante potrebbe rallentare il caricamento iniziale della pagina.

Questo può influire negativamente sui tuoi Core Web Vitals, che sono importanti per il posizionamento nei motori di ricerca. La chiave è mantenerlo semplice e veloce.

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 dello scorrimento.
• Come aggiungere 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 WordPress – Offri un'esperienza di navigazione più confortevole con questa popolare funzionalità.
• Modi per portare effetti di Halloween sul tuo sito WordPress – Rendi spettrale 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 potente prima impressione con sfondi video dinamici.
• Come aggiungere lo scorrimento infinito al tuo sito WordPress (guida passo passo) – Mantieni i visitatori coinvolti caricando senza problemi altri contenuti mentre scorrono.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere facilmente un'animazione di preloader 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 anche trovarci su Twitter e Facebook.