Come aggiungere animazioni al testo in WordPress

Gli stili di testo fantasiosi attirano rapidamente l'attenzione degli spettatori. I proprietari di siti Web WordPress spesso chiedono come aggiungere animazione al testo. Assolutamente sì, troverai diversi metodi per progettare i testi del tuo sito WordPress. Puoi aggiungere manualmente effetti CSS HTML che richiedono un po' più di codice. Ma la codifica è un ottimo modo per aggiungere animazioni personalizzate al tuo sito. Ancora, un plugin con il miglior widget è relativamente pratico, efficace e anche popolare.

Tuttavia, abbiamo cercato di coprire entrambe le tecniche nel modo più semplice possibile. Se gestisci un sito WordPress, prenditi del tempo per leggere il blog e comprendere i processi. Seguendo correttamente i passaggi e le istruzioni potrai personalizzare la tua animazione senza problemi.

Come aggiungere effetti di testo animati in WordPress

Gli effetti di testo animati possono essere utilizzati per aggiungere stile e personalità al tuo sito WordPress. In questo tutorial ti mostreremo come aggiungere questi effetti; ma prima bisogna avere le idee chiare su un testo animato e sul suo ruolo; impariamo!

Cos'è un effetto di testo animato e come appare?

Gli effetti di testo animati sono un ottimo modo per aggiungere un po' di divertimento ed eccitazione al tuo anche articoli e titoli. Quando scegli di utilizzare un effetto di testo animato fantasioso, puoi creare vari effetti. Alcuni effetti lo sono semplice come cambiare il colore o la dimensione del testo, mentre alcune sono animazioni dettagliate come testo lampeggiante o lampeggiante.

Il testo animato è leggermente diverso dal testo normale. Di solito questo tipo di testo non si muove da solo. Invece, ha un effetto che lo fa sembrare come se si stesse muovendo sullo schermo. Quindi, i testi fantasiosi rendono le persone più propense a farlo fare clic sul contenuto, sui collegamenti o aprire le e-mail.

Il ruolo dei testi animati nel tuo sito web

Esistono diversi tipi di effetti di testo animato disponibili nei temi WordPress, ma condividono tutti la stessa funzionalità di base. Cambiano il colore o lo stile del testo e cambiano semplicemente lo stile del test. Ad esempio, puoi modificare a pulsante "invito all'azione". con uno sfondo rosso e un testo bianco che dice "Clicca qui!" quando si fa clic su.

IL titolo animato o sezione eroi con testi fantasiosi interpreta i seguenti ruoli:

• Rende i tuoi progetti visivamente più interessanti.
• Evidenzia offerte speciali e informazioni importanti.
• Rende evidenti le caratteristiche del tuo prodotto.
• Rende un sito web più interattivo e promuove il business.

I modi più semplici per aggiungere effetti di testo animati

Utilizzando un plugin WordPress

Il mercato odierno offre diversi tipi di plugin per semplificare le attività di styling del testo. ElementsKit è un plugin così potente nonché componente aggiuntivo per il generatore di pagine Elementor. Con ElementsKit avrai tutto sotto un unico cofano.

Il testo animato fantasia è un widget impressionante presentato da ElementsKit pro. 

Accedere nella tua dashboard -> Seleziona una pagina o un post qualsiasi -> Fai clic su Modifica con ElementsKit -> Cerca widget di testo di animazione fantasia in ElementsKit -> Trascina e rilascia il widget

Sezione Contenuti

La parte si chiama Parte di testo fantasia, contiene i seguenti campi:

Sai perché ElementsKit è così popolare? 🤔
Controlla qui 👉 I siti web più importanti al mondo realizzati con ElementsKit

Animazione

• Stile di animazione – Qui le due opzioni sono Testo o SVG, entrambe consentono di creare diversi stili di animazione.
• Tipo di animazione – In base al tipo di animazione avrai varie scelte qui.
• Durata rivelazione (ms) – È possibile impostare la durata dell'animazione in millisecondi utilizzando la casella delle opzioni.
• Ritardo animazione rivelazione (ms) – Regola qui il tempo di ritardo dell'animazione. Specifica che un'animazione può iniziare più tardi, immediatamente dall'inizio o immediatamente e durante l'animazione.

Contenuto

• Testo del prefisso – Devi scrivere qui il contenuto del prefisso che desideri visualizzare. Significa che verrà scritto prima dell'animazione fantasiosa.
• Elenchi fantasiosi – Aggiungi elementi qui per animazioni fantasiose.
• Testo del suffisso – Scrivi il contenuto del suffisso che desideri visualizzare. Quindi, verrà specificato dopo l'animazione di fantasia.

• Tag HTML del titolo – Seleziona qui il tag HTML del contenuto.
• Collegamento (facoltativo) – Aggiungi qualsiasi collegamento se desideri che gli utenti vengano reindirizzati a qualsiasi altra posizione.

Sezione Stile

• Testo dell'intestazione – Utilizza questo campo per regolare l'allineamento dell'intestazione, la tipografia, il colore, ecc.
• Elenchi di testi fantasiosi – Utilizza questo campo per regolare la tipografia, il colore e la spaziatura.
• Cursore fantasia – Puoi dare al cursore un aspetto elegante con colore, larghezza e altezza utilizzando questo campo.

Dopo aver modificato e applicato uno stile a tutte le istruzioni richieste, fai clic su Aggiorna e visualizza le modifiche dal front-end. Un esempio è –

Applicazione dei CSS

Quando crei animazioni CSS in WordPress, mantieni quanto segue cose basilari ma importanti in mente:

• Impostazione del nome corretto per l'animazione – Questo è il nome che verrà visualizzato su un elemento quando viene spostato da un'animazione CSS. Ad esempio, se hai un pulsante con un'animazione denominata "fadeIn", questo sarà il valore da utilizzare per questa proprietà.
• Durata dell'animazione – Questo è il numero di secondi necessari per completare un'animazione. Puoi anche impostarlo su nessuno o 0 per far durare un'animazione indefinitamente o finché non accade qualcos'altro (come il caricamento di una pagina).
• Funzione di temporizzazione dell'animazione – Controlla il modo in cui l'elemento si sposta da un punto all'altro in base al tempo impiegato per un determinato periodo di tempo (in millisecondi). Ad esempio, se imposti questa proprietà su "facile-out", il tuo elemento inizierà a muoversi lentamente per poi accelerare alla fine della sua durata prima di ricominciare dall'inizio.
• Ritardo animazione – Si tratta di un valore che specifica il numero di millisecondi da aggiungere al termine di un'animazione prima che venga riavviata (ad esempio, 1 s).
• Conteggio iterazioni dell'animazione – Questa è la quantità di tempo necessaria per riprodurre l'animazione. Usando la proprietà CSS puoi contare questa iterazione.
• Direzione delle animazioni – È l'ordine o la direzione in cui deve essere riprodotta un'animazione. Può essere normale, inverso, alternato e alternato-inverso.
• Modalità di riempimento dell'animazione – Questi valori specificano come deve essere visualizzato un elemento. Può essere prima e dopo l'applicazione di un'animazione.
• Conoscere i @keyframe – Specifica le proprietà dell'animazione che cambiano nel corso e anche i valori che tali proprietà dovrebbero assumere. Ad esempio: 

Esempio di @keyframe { 0% {colore di sfondo: rosso;} 25% {colore di sfondo: giallo;} 50% {colore di sfondo: blu;} 100% {colore di sfondo: verde;} }

Generalmente, le percentuali vengono utilizzate per indicare la tempistica dell'animazione. Il fotogramma chiave sopra dimostra che il colore di sfondo dell'elemento si trasformerà del 25% da rosso a giallo, attraverso l'animazione.

Tuttavia, da e per può essere utilizzato al posto di 0% e 100%, rispettivamente.

Un segmento "timeline" gioca un ruolo importante per attirare l'attenzione dei clienti e influenzarli a visitare il tuo sito web! Leggi di più 👉 Qui!

Creazione di un file animati.css

Devi prima creare un file separato con tutte le proprietà necessarie, nell'editor di testo in cui lavori. Puoi scegliere il fotogrammi chiave per qualsiasi animazione. Successivamente, devi metterli insieme con particolari classi CSS da applicare a qualsiasi testo sul tuo sito WordPress.

Inizia scrivendo un semplice codice nel tuo file CSS. Un codice di esempio per un testo di animazione potrebbe essere simile a:

```@keyframes MyAnimation { from { opacità: 0; trasformazione: ruota (20 gradi); durata dell'animazione: 3s; } in {opacità: 1;} trasformazione: rotazione(0deg); } }

Ora per associare questo fotogramma chiave a una classe CSS abbiamo impostato un testo denominato La mia animazione. Quindi, subito dopo il codice sopra devi inserire il codice seguente nel file.

.MyAnimation { nome-animazione: MyAnimation; }

Puoi trovare tutte le conoscenze di base sull'animazione CSS ed esercitarti codici qui!

Puoi ripetere questa procedura per creare quante più animazioni possibili in base alle tue esigenze. Quindi, salva il file come animate.css. In alternativa, puoi scaricare il file Animate.css. È un file molto apprezzato che contiene i fotogrammi chiave e le classi CSS per tantissimi progetti di animazione popolari. Inoltre, l'utilizzo del file ridurrà la fatica di codificare l'animazione complessa.

Il codice sopra animerà il testo del tuo etichetta h1 'La mia animazione'. Puoi modificare la durata dell'animazione modificando il file “3s” su un valore diverso. Puoi anche cambiare i colori modificando i valori esadecimali. Una volta salvato il file CSS, puoi apportare ulteriori modifiche all'aspetto del tuo sito web, puoi modificare il file CSS. Puoi modificare il carattere, la dimensione e il colore del testo modificando il file CSS. Puoi anche modificare il colore dello sfondo e la dimensione dell'intestazione modificando il file CSS.

Caricamento del file animate.css sul sito WordPress

Una volta terminato il lavoro sul file, caricalo nella directory del tema. Abbiamo diviso l'intero processo in tre fasi,

Passo 1

Vai al sito utilizzando File Transfer Protocol (FTP) -> Scegli il client FTP (FileZilla, WinSCP, Cyberduck, ecc.) -> Seleziona le credenziali necessarie nel tuo account di hosting.

Passo 2

Accedi alla tua directory public_html -> Vai a wp-content – > Temi -> Seleziona la cartella del tema attivo o figlio

Passaggio 3

Ora cerca una sottodirectory denominata css. Se lo ottieni, carica il tuo file animate.css o animate.min.css dal file Animate.css con la sottodirectory. 

Tuttavia, se non disponi della cartella della sottodirectory, puoi crearne facilmente una nuova. Per questo, subito dopo aver caricato il file, esegui una semplice modifica per creare il nuovo file e il gioco è fatto.

Chiama il foglio di stile Animate tramite Functions.php

Troverai il file Functions.php nella cartella del tema attivo. Ora, devi aggiungere questo snippet di codice per chiamare il foglio di stile Animate:

add_action('wp_enqueue_scripts', 'wpb_animate_styles'); function wpb_animate_styles() { wp_enqueue_style( 'animate-css', get_stylesheet_directory_uri() . '/css/animate.css', '3.5.0', 'all'); }

Ricordare, se hai utilizzato il file animate.min.css da Animate.css, dovrai scrivere animate.min.css nella riga finale invece di animate.css. Dopo aver salvato tutte le modifiche, vai alla dashboard di WordPress.

Applicare animazioni utilizzando classi CSS

Quindi ora è possibile applicare qualsiasi classe desideri nel file animate.css per vedere diversi effetti di animazione nei post e nelle pagine. Inoltre, il file Animate.css ti consente di fare riferimento a un elenco completo di tutti.

Finalmente, Seleziona un post o una pagina nell'editor classico -> Passa all'editor di testo -> Oppure fai clic sull'icona a tre punti dalla barra degli strumenti del blocco se si tratta di un editor a blocchi -> Seleziona Modifica come HTML-> Aggiungi la classe animata e la classe per la tua animazione nel tag elemento -> Anteprima

Queste sono due tecniche efficaci per aggiungere testo animato al tuo sito e possono aiutarti a creare il tuo sito più coinvolgente e visivamente accattivante. Utilizzando una di queste tecniche, puoi aggiungere movimento e interesse alle tue pagine.

Tuttavia, applicare i CSS può essere un po' difficile se non hai alcuna idea di programmazione. Pertanto, si consiglia di avvalersi dell'aiuto di esperti per creare animazioni CSS in WordPress. In alternativa, il testo animato fantasia di ElementsKit è un widget intelligente che ti supporta nella progettazione rapida di qualsiasi animazione elegante. Con il widget puoi trasformare i testi scelti in fantasiose animazioni.