Come aggiungere facilmente animazioni CSS in WordPress

Nel corso degli anni abbiamo sperimentato diversi modi per rendere più interattivi i siti web WordPress. Se volete catturare l’attenzione dei vostri visitatori, le animazioni possono essere molto efficaci.

È possibile utilizzare le animazioni per catturare l’attenzione del visitatore e mettere in evidenza i contenuti più importanti di una pagina. Questo può anche incoraggiare i clienti a fare clic sui pulsanti e sui link di invito all’azione.

Fortunatamente, è anche facile impostare le animazioni in WordPress, anche se non si sa come scrivere il codice.

In questo tutorial vi mostreremo come potete aggiungere facilmente animazioni CSS in WordPress.

Perché aggiungere animazioni CSS in WordPress?

È possibile utilizzare le animazioni CSS per attirare l’attenzione del visitatore su diverse parti di una pagina. Ad esempio, se avete un negozio online, le animazioni possono mettere in evidenza le caratteristiche più importanti di un prodotto o i suoi punti di forza. Questo può migliorare l’esperienza dell’utente e aumentare le vendite.

Le animazioni fanno risaltare le CTA e possono aiutarvi a raggiungere un obiettivo specifico, come ad esempio far iscrivere più persone alla vostra newsletter.

È possibile aggiungere animazioni CSS al foglio di stile del tema WordPress o del tema child. Tuttavia, questa operazione richiede molto tempo e fatica e, se si commette un errore, può compromettere il design e il funzionamento del sito web.

Detto questo, vediamo come aggiungere facilmente animazioni CSS al vostro sito WordPress. Se preferite passare direttamente a un metodo particolare, potete utilizzare i link sottostanti:

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

Il modo più semplice per aggiungere una semplice animazione CSS è utilizzare l’animazione a blocchi.

Questo plugin di animazione gratuito consente 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 si può aggiungere a testo e numeri.

Per prima cosa, è necessario installare e attivare il plugin gratuito Blocks Animation. Se avete bisogno di aiuto, consultate la nostra guida per principianti su come installare un plugin di WordPress.

Dopo l’attivazione, aprire una pagina o un post qualsiasi nell’editor di blocchi di WordPress. Quindi, è sufficiente fare clic sul blocco che si desidera animare e selezionare la scheda “Blocco” nel menu di destra.

In questo menu è presente una nuova sezione “Animazioni”.

È sufficiente fare clic per espandere la sezione “Animazioni” per visualizzare tre diverse opzioni: Animazioni, Animazioni di conteggio e Animazioni di digitazione.

Le “animazioni” sono brevi effetti che vengono riprodotti una volta al caricamento della pagina. Per aggiungere questo tipo di animazione d’ingresso al vostro blog WordPress, basta fare clic sul menu a discesa accanto a “Animazione”.

Si apre un menu in cui è possibile scegliere l’animazione che si desidera utilizzare.

L’editor di WordPress mostrerà un’anteprima dell’animazione, in modo da poter provare diverse opzioni per vedere quella che sembra migliore.

Di default, l’animazione di ingresso viene riprodotta non appena la pagina viene caricata, ma è possibile aggiungere un ritardo se si preferisce. Se si usano più animazioni sulla stessa pagina, si possono anche usare dei ritardi per scaglionarle in modo che non siano sovraccariche.

È sufficiente aprire il menu a tendina “Ritardo” e scegliere un orario dall’elenco.

È inoltre possibile rendere l’animazione più veloce o più lenta utilizzando il menu a tendina “Velocità”.

Mentre si provano le diverse impostazioni, è possibile visualizzare l’anteprima dell’animazione in qualsiasi momento facendo clic su “Riproduci animazione”.

Il plugin dispone anche di “Animazioni di conteggio” e “Animazioni di digitazione”.

Le animazioni di digitazione consentono di animare il testo, mentre le animazioni di conteggio aggiungono un effetto stile ticker ai numeri. Queste animazioni funzionano con qualsiasi blocco di Gutenberg che supporti testo o numeri, quindi si possono usare per animare pulsanti, didascalie di immagini, head e altro ancora.

Per aggiungere uno di questi effetti, evidenziare il testo o i numeri che si desidera animare. Quindi, fare clic sulla freccia verso il basso nella barra degli strumenti piccola.

Ora è possibile scegliere “Animazioni di conteggio” o “Animazioni di digitazione” dal menu a discesa.

Se queste opzioni sono disattivate, accertarsi di aver evidenziato il contenuto giusto. Ad esempio, non sarà possibile selezionare “Conta animazione” se si è evidenziato solo il testo.

Dopo aver aggiunto l’animazione, è possibile utilizzare i menu a discesa nel piccolo popup per modificare la velocità e aggiungere un ritardo facoltativo.

Ad esempio, nell’immagine seguente si utilizza un ritardo di un secondo.

Quando siete pronti a rendere attiva l’animazione CSS, fate clic sul pulsante “Pubblica” o “Aggiorna” per applicare le animazioni al vostro sito. Ora, se visitate il vostro sito WordPress, vedrete l’animazione dal vivo.

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

Se volete aggiungere semplici animazioni ai blocchi integrati di WordPress, allora Blocks Animation è una buona scelta. Tuttavia, se volete davvero catturare l’attenzione dei visitatori, trattenere le persone sul vostro sito web e ottenere maggiori conversioni, vi consigliamo di utilizzare SeedProd.

SeedProd è il miglior plugin di page builder che consente di creare bellissime landing page, pagine di vendita, una home page e molto altro ancora utilizzando un semplice editor drag-and-drop.

È inoltre dotato di un blocco “Titolo animato” che si può utilizzare per creare titoli animati rotanti e in evidenza.

Nonostante il nome, è possibile utilizzare il blocco Titolo animato per animare qualsiasi testo, compreso un invito all’azione, un sottotitolo o qualsiasi altro testo che si desidera enfatizzare.

SeedProd è inoltre dotato di oltre 40 animazioni di ingresso che si possono aggiungere a qualsiasi blocco, comprese immagini, testo, pulsanti, video e altro ancora.

È anche possibile animare intere sezioni e colonne con pochi clic. In questo modo, è possibile creare pagine animate coinvolgenti in pochi minuti.

Se utilizzate le animazioni per ottenere maggiori conversioni e vendite, SeedProd si integra con WooCommerce. Inoltre, supporta molti dei principali servizi di email marketing che potreste già utilizzare per promuovere il vostro sito web.

Come configurare il costruttore di pagine SeedProd

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

Al momento dell’attivazione, è necessario inserire la chiave di licenza.

Queste informazioni si trovano nel proprio account sul sito web di SeedProd. Dopo aver aggiunto la chiave di licenza, è sufficiente fare clic su “Verifica chiave”.

Creare un design di pagina personalizzato

Per iniziare, andate su SeedProd ” Pagine di destinazione e cliccate su “Aggiungi una nuova pagina di destinazione”.

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

SeedProd è dotato di oltre 350 bellissimi template organizzati in diverse categorie, come i modelli di pagina 404 e le pagine di ringraziamento personalizzate di WooCommerce.

In questa guida vi mostreremo come creare una pagina di vendita con testo animato e animazioni d’ingresso, ma i passaggi saranno simili indipendentemente dal tipo di pagina creata.

È sufficiente fare clic su una scheda per visualizzare i diversi modelli di quella categoria.

Quando si trova un modello che si desidera utilizzare, basta passarci sopra il mouse e fare clic sull’icona del segno di spunta.

In tutte le nostre immagini utilizziamo il modello “Zen Sales Page”, ma potete utilizzare qualsiasi modello.

Successivamente, è necessario dare un titolo alla pagina.

SeedProd crea automaticamente un URL basato sul titolo della pagina, ma è possibile modificarlo in qualsiasi modo. Ad esempio, l’aggiunta di parole chiave pertinenti a un URL può spesso migliorare la SEO di WordPress e aiutare la pagina a comparire nei risultati di ricerca pertinenti.

Per saperne di più, consultate la nostra guida su come effettuare la ricerca di parole chiave per il vostro blog WordPress.

Quando siete soddisfatti del titolo e dell’URL, fate clic su “Salva e inizia a modificare la pagina”.

In questo modo viene caricato l’editor di pagine di SeedProd per il trascinamento.

A destra, viene visualizzata un’anteprima live del design della pagina, con alcune impostazioni a sinistra.

SeedProd è dotato di molti blocchi che potete aggiungere al vostro design, compresi quelli che vi permettono di aggiungere pulsanti di condivisione sociale, video, moduli di contatto e altro ancora.

Per ulteriori informazioni, consultare la nostra guida su come creare una pagina personalizzata in WordPress.

Come aggiungere testo animato a WordPress

Per aggiungere del testo animato alla pagina, trovare il blocco Titolo animato e trascinarlo nel design della pagina.

Esistono due modi per animare il titolo. In primo luogo, lo stile ‘Evidenziato’ aggiunge un’animazione di forma al testo, come un cerchio o uno zigzag sottolineato.

È possibile utilizzare questa animazione per attirare l’attenzione su una particolare parola o frase all’interno del titolo. In questo modo è possibile rendere il titolo più facile da leggere e da capire, evidenziando il contenuto più importante. È anche un ottimo modo per attirare l’attenzione su un invito all’azione.

Lo stile Evidenziato presenta anche alcune forme di barratura.

Le barrature possono essere utilizzate per creare effetti interessanti e accattivanti, oppure possono semplicemente aggiungere un po’ di divertimento al vostro disegno.

Per creare un’animazione evidenziata, basta aprire il menu a tendina ‘Stile’ e selezionare ‘Evidenziato’.

Quindi, aprire il menu a tendina “Forma” e scegliere una forma. Quando si fa clic su una forma, SeedProd mostra un’anteprima dell’animazione, in modo da poter provare diverse forme per vedere quella che piace di più.

SeedProd dispone anche di uno stile di animazione ‘Rotating’, 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 la parte di testo più importante.

Per creare un’animazione di transizione, basta aprire il menu a tendina ‘Stile’ e fare clic su ‘Rotazione’.

Si può quindi aprire il menu a tendina ‘Animazione’ e scegliere il tipo di transizione che si desidera utilizzare, ad esempio dissolvenza, zoom o roll. Anche in questo caso, SeedProd riprodurrà l’animazione all’interno dell’editor di pagina, in modo da poter provare diversi effetti per vedere quale si preferisce.

Indipendentemente dalla creazione di un’animazione ‘Evidenziata’ o ‘Rotante’, è possibile aggiungere del testo prima e dopo il testo animato.

È sufficiente digitare nei campi “Prima del titolo” e “Dopo il titolo”. Nel campo ‘Testo’, aggiungere la parola o la frase che si desidera animare.

Se si desidera animare l’intero titolo, è sufficiente lasciare vuoti i campi “Prima del titolo” e “Dopo il titolo”.

Per impostazione predefinita, SeedProd riproduce l’animazione in loop, cosa che alcuni visitatori potrebbero trovare fastidiosa.

Per riprodurre l’animazione una sola volta, fare clic per disattivare l’interruttore “Loop infinito”.

Per impostazione predefinita, l’animazione viene riprodotta per 1200 millisecondi dopo un ritardo di 8000 millisecondi.

Per utilizzare valori diversi, digitare nei campi ‘Durata’ e ‘Ritardo’. Ad esempio, è possibile rendere l’animazione più veloce utilizzando una durata più breve.

Si può anche decidere di dare uno stile al testo. Ad esempio, è possibile modificare la dimensione e l’allineamento dei caratteri.

Quando si è soddisfatti dell’aspetto del titolo animato, fare clic sul pulsante “Salva” per memorizzare le modifiche.

Aggiungere animazioni d’ingresso in WordPress

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

Potete anche usarli per evidenziare i contenuti che i visitatori dovrebbero guardare per primi. Ad esempio, se avete un mercato online, potreste animare l ‘immagine principale del prodotto o il banner che pubblicizza la vendita del Black Friday.

Nell’editor di SeedProd, è sufficiente fare clic sul contenuto che si desidera animare e selezionare la scheda “Avanzate” nel menu di sinistra.

È quindi possibile fare clic per espandere la sezione “Effetti di animazione”.

A questo punto, è sufficiente scegliere un’animazione dal menu a tendina “Animazione d’ingresso”.

È ora possibile aggiungere animazioni di ingresso a qualsiasi blocco, sezione o colonna, semplicemente seguendo la stessa procedura descritta in precedenza.

Pubblicare le animazioni CSS in WordPress

Quando si è soddisfatti della configurazione della pagina, fare clic sul menu a discesa del pulsante “Salva” e selezionare “Pubblica”.

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

Speriamo che questo articolo vi abbia aiutato a capire come aggiungere animazioni CSS in WordPress. Potreste anche voler consultare la nostra guida su come add-on uno sfondo animato in WordPress o gli elementi chiave del design di WordPress di cui ogni sito web ha bisogno.

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