Come Aggiungere Facilmente Animazioni CSS in WordPress

Nel corso degli anni, abbiamo sperimentato diversi modi per rendere i siti web WordPress più interattivi. Se stai cercando di catturare l'attenzione dei tuoi visitatori, le animazioni possono essere molto efficaci.

Puoi utilizzare le animazioni per attirare l'attenzione di un visitatore ed evidenziare i contenuti più importanti di una pagina. Questo può anche incoraggiare i clienti a fare clic sui tuoi pulsanti e link di invito all'azione.

Fortunatamente, è anche facile impostare animazioni in WordPress, anche se non sai scrivere codice.

In questo tutorial, ti mostreremo come aggiungere facilmente animazioni CSS in WordPress.

Perché Aggiungere Animazioni CSS in WordPress?

Puoi utilizzare le animazioni CSS per attirare l'attenzione del visitatore su diverse parti di una pagina. Ad esempio, se hai un negozio online, le animazioni possono evidenziare le caratteristiche più importanti di un prodotto o i suoi punti di forza. Questo può migliorare l'esperienza utente e aumentare le vendite.

Le animazioni faranno anche risaltare i tuoi CTA, il che può aiutarti a raggiungere un obiettivo specifico, come convincere più persone a iscriversi alla tua newsletter via email.

Puoi aggiungere animazioni CSS al foglio di stile del tuo tema WordPress o del tema figlio. Tuttavia, ciò richiede molto tempo e impegno, e se commetti un errore, potrebbe compromettere il design e persino la funzionalità del tuo sito web.

Detto questo, vediamo come puoi aggiungere facilmente animazioni CSS al tuo sito WordPress. Se preferisci passare direttamente a un metodo particolare, puoi usare i link qui sotto:

• Metodo 1: Come animare facilmente qualsiasi blocco WordPress (veloce e facile)
• Metodo 2: Come aggiungere animazioni CSS a pagine personalizzate (consigliato)

Metodo 1: Come animare facilmente qualsiasi blocco WordPress (veloce e facile)

Il modo più semplice per aggiungere una semplice animazione CSS è utilizzare Blocks Animation.

Questo plugin di animazione gratuito ti permette di aggiungere un'animazione di ingresso a qualsiasi blocco senza dover scrivere una sola riga di CSS. Ha anche un'animazione di digitazione e un effetto stile ticker che puoi aggiungere a testi e numeri.

Innanzitutto, dovrai installare e attivare il plugin gratuito Blocks Animation. Se hai bisogno di aiuto, consulta la nostra guida per principianti su come installare un plugin WordPress.

Dopo l'attivazione, apri qualsiasi pagina o post nell'editor a blocchi di WordPress. Quindi, fai semplicemente clic sul blocco che desideri animare e seleziona la scheda 'Blocco' nel menu a destra.

Vedrai che questo menu ha una nuova sezione 'Animazioni'.

Fai semplicemente clic per espandere la sezione 'Animazioni' e vedrai tre diverse opzioni: Animazioni, Animazioni Conteggio e Animazioni Digitate.

Le 'Animazioni' sono brevi effetti che si riproducono una volta al caricamento della pagina. Per aggiungere questo tipo di animazione di ingresso al tuo blog WordPress, fai semplicemente clic sul menu a discesa accanto a 'Animazione'.

Questo apre un menu in cui puoi scegliere l'animazione che desideri utilizzare.

L'editor di WordPress mostrerà un'anteprima dell'animazione, così potrai provare diverse opzioni per vedere quale funziona meglio.

Per impostazione predefinita, l'animazione di ingresso verrà riprodotta non appena la pagina viene caricata, ma puoi aggiungere un ritardo se preferisci. Se utilizzi più animazioni sulla stessa pagina, puoi persino usare i ritardi per scaglionarle in modo che non siano opprimenti.

Apri semplicemente il menu a discesa 'Ritardo' e scegli un tempo dall'elenco.

Puoi anche rendere l'animazione più veloce o più lenta usando il menu a discesa 'Velocità'.

Mentre provi diverse impostazioni, puoi visualizzare in anteprima l'animazione in qualsiasi momento facendo clic su 'Riproduci animazione'.

Il plugin ha anche 'Animazioni conteggio' e 'Animazioni di digitazione'.

Le animazioni di digitazione ti consentono di animare il testo, mentre le animazioni di conteggio aggiungono un effetto stile contatore ai numeri. Queste animazioni funzionano con qualsiasi blocco Gutenberg che supporti testo o numeri, quindi puoi usarle per animare pulsanti, didascalie di immagini, titoli e altro ancora.

Per aggiungere uno di questi effetti, inizia evidenziando il testo o i numeri che desideri animare. Quindi, fai clic sulla freccia verso il basso nella piccola barra degli strumenti.

Ora puoi scegliere 'Animazioni di conteggio' o 'Animazioni di digitazione' dal menu a discesa.

Se queste opzioni sono disattivate (grigie), assicurati di aver evidenziato il contenuto corretto. Ad esempio, non sarai in grado di selezionare 'Animazione di conteggio' se hai evidenziato solo testo.

Dopo aver aggiunto l'animazione, puoi utilizzare i menu a discesa nel piccolo popup per modificare la velocità e aggiungere un ritardo opzionale.

Ad esempio, nell'immagine seguente, stiamo utilizzando un ritardo di un secondo.

Quando sei pronto per rendere live l'animazione CSS, fai clic sul pulsante 'Pubblica' o 'Aggiorna' per applicare le animazioni al tuo sito. Ora, se visiti il tuo sito web WordPress, vedrai l'animazione in azione.

Metodo 2: Come aggiungere animazioni CSS a pagine personalizzate (consigliato)

Se desideri aggiungere semplici animazioni ai blocchi integrati di WordPress, allora Blocks Animation è una buona scelta. Tuttavia, se vuoi davvero catturare l'attenzione del visitatore, mantenerlo sul tuo sito web e ottenere più conversioni, allora ti consigliamo di utilizzare SeedProd.

SeedProd è il miglior plugin per la creazione di pagine che ti permette di creare bellissime landing page, pagine di vendita, una home page e altro ancora utilizzando un semplice editor drag-and-drop.

Viene fornito anche con un blocco 'Animated Headline' che puoi utilizzare per creare titoli animati rotanti ed evidenziati.

Nonostante il nome, puoi usare il blocco Animated Headline per animare qualsiasi testo, inclusa una call to action, un sottotitolo o qualsiasi altro testo che desideri enfatizzare.

SeedProd viene fornito anche con oltre 40 animazioni di ingresso che puoi aggiungere a qualsiasi blocco, incluse immagini, testo, pulsanti, video e altro.

Puoi persino animare intere sezioni e colonne con pochi clic. In questo modo, puoi creare pagine animate coinvolgenti in pochi minuti.

Se stai usando animazioni per ottenere più conversioni e vendite, allora SeedProd si integra con WooCommerce. Supporta anche molti dei migliori servizi di email marketing che potresti già utilizzare per promuovere il tuo sito web.

Come configurare il Page Builder SeedProd

La prima cosa da fare è installare e attivare SeedProd. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.

Dopo l'attivazione, devi inserire la tua chiave di licenza.

Puoi trovare queste informazioni nel tuo account sul sito web di SeedProd. Dopo aver aggiunto la chiave di licenza, fai semplicemente clic su ‘Verifica chiave’.

Crea un design di pagina personalizzato

Per iniziare, vai su SeedProd » Pagine di destinazione e fai clic su ‘Aggiungi nuova pagina di destinazione’.

Nella schermata successiva, ti verrà chiesto di scegliere un modello.

SeedProd offre oltre 350 splendidi modelli organizzati in diverse categorie, come modelli di pagina 404 e pagine di ringraziamento WooCommerce personalizzate.

Per questa guida, ti mostreremo come creare una pagina di vendita con testo animato e animazioni di ingresso, ma i passaggi saranno simili indipendentemente dal tipo di pagina che crei.

Fai semplicemente clic su una scheda qualsiasi per vedere i diversi modelli all'interno di quella categoria.

Quando trovi un modello che desideri utilizzare, passaci sopra il mouse e fai clic sull'icona del segno di spunta.

Stiamo utilizzando il modello 'Zen Sales Page' in tutte le nostre immagini, ma puoi usare qualsiasi modello.

Successivamente, devi dare un titolo alla pagina.

SeedProd creerà automaticamente un URL basato sul titolo della pagina, ma puoi cambiarlo come preferisci. Ad esempio, l'aggiunta di parole chiave pertinenti a un URL può spesso migliorare il tuo SEO di WordPress e aiutare la pagina ad apparire nei risultati di ricerca pertinenti.

Per saperne di più, consulta la nostra guida su come fare ricerca di parole chiave per il tuo blog WordPress.

Quando sei soddisfatto del titolo e dell'URL, fai clic su 'Salva e inizia a modificare la pagina'.

Questo caricherà l'editor di pagine drag-and-drop di SeedProd.

Sulla destra, vedrai un'anteprima live del design della pagina, con alcune impostazioni sulla sinistra.

SeedProd viene fornito con molti blocchi che puoi aggiungere al tuo design, inclusi blocchi che ti consentono di aggiungere pulsanti di condivisione social, video, moduli di contatto e altro.

Per maggiori informazioni, consulta la nostra guida su come creare una pagina personalizzata in WordPress.

Come aggiungere testo animato a WordPress

Per aggiungere del testo animato alla pagina, trova il blocco Titolo animato e trascinalo sul design della tua pagina.

Ci sono due modi per animare il tuo titolo. Innanzitutto, lo stile 'Evidenziato' aggiunge un'animazione di forma al tuo testo, come un cerchio o uno zigzag sottolineato.

Puoi usare questa animazione per attirare l'attenzione su una parola o una frase particolare all'interno del titolo. Questo può rendere il tuo titolo più facile da leggere e capire evidenziando i contenuti più importanti. È anche un ottimo modo per attirare l'attenzione su una call to action.

Lo stile Evidenziato ha anche alcune forme di barratura.

Puoi usare le barrature per creare effetti interessanti e accattivanti, oppure puoi semplicemente aggiungere un po' di divertimento al tuo design.

Per creare un'animazione Evidenziata, apri semplicemente il menu a discesa 'Stile' e seleziona 'Evidenziato'.

Successivamente, apri il menu a discesa 'Forma' e scegli una forma. Quando fai clic su una forma, SeedProd mostrerà un'anteprima di quell'animazione, così potrai provare diverse forme per vedere quale ti piace di più.

SeedProd ha anche uno stile di animazione 'Rotante', che aggiunge un effetto di transizione al testo.

Spesso, il testo animato è la prima cosa che i visitatori guardano quando una pagina viene caricata, quindi è un ottimo modo per evidenziare il testo più importante.

Per creare un'animazione di transizione, apri semplicemente il menu a discesa 'Stile' e fai clic su 'Rotante'.

Puoi quindi aprire il menu a discesa 'Animazione' e scegliere il tipo di transizione che desideri utilizzare, come dissolvenza, zoom o rotazione. Ancora una volta, SeedProd riprodurrà l'animazione all'interno dell'editor di pagine, così potrai provare diversi effetti per vedere quale preferisci.

Indipendentemente dal fatto che tu stia creando un'animazione 'Evidenziata' o 'Rotante', puoi aggiungere testo prima e dopo il testo animato.

Digita semplicemente nei campi 'Prima dell'intestazione' e 'Dopo l'intestazione'. Nel campo 'Testo', aggiungi la parola o la frase che desideri animare.

Se desideri animare l'intera intestazione, lascia vuoti i campi 'Prima dell'intestazione' e 'Dopo l'intestazione'.

Per impostazione predefinita, SeedProd riprodurrà l'animazione in loop, cosa che alcuni visitatori potrebbero trovare fastidiosa.

Per riprodurre l'animazione una sola volta, fai clic per disattivare l'interruttore 'Loop infinito'.

Per impostazione predefinita, l'animazione verrà riprodotta per 1200 millisecondi dopo un ritardo di 8000 millisecondi.

Per utilizzare valori diversi, digita nei campi ‘Durata’ e ‘Ritardo’. Ad esempio, puoi rendere l’animazione più veloce utilizzando una durata inferiore.

Potresti anche voler stilizzare il testo. Ad esempio, puoi cambiare la dimensione del carattere e l’allineamento.

Quando sei soddisfatto dell’aspetto del titolo animato, fai clic sul pulsante ‘Salva’ per memorizzare le tue modifiche.

Aggiungi animazioni di ingresso in WordPress

Le animazioni di ingresso vengono riprodotte al caricamento della pagina, quindi sono un ottimo modo per catturare l’attenzione del visitatore.

Puoi anche usarle per evidenziare il contenuto su cui i visitatori dovrebbero concentrarsi per primi. Ad esempio, se hai un marketplace online, potresti animare l'immagine principale del prodotto o il banner che pubblicizza la tua svendita del Black Friday.

All’interno dell’editor di SeedProd, fai semplicemente clic sul contenuto che desideri animare e quindi seleziona la scheda ‘Avanzate’ nel menu a sinistra.

Puoi quindi fare clic per espandere la sezione ‘Effetti animazione’.

Dopodiché, scegli semplicemente un’animazione dal menu a discesa ‘Animazione di ingresso’.

Ora puoi aggiungere animazioni di ingresso a qualsiasi blocco, sezione o colonna semplicemente seguendo lo stesso processo descritto sopra.

Pubblica le tue animazioni CSS in WordPress

Quando sei soddisfatto di come è impostata la pagina, fai clic sul menu a discesa del pulsante ‘Salva’ e seleziona ‘Pubblica’.

Ora puoi visitare questa pagina per vedere le animazioni CSS dal vivo.

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere animazioni CSS in WordPress. Potresti anche voler consultare la nostra guida su come aggiungere uno sfondo animato in WordPress o gli elementi di design chiave di WordPress di cui ogni sito web ha bisogno.

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