Come aggiungere animazione al testo in WordPress

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

Tuttavia, abbiamo cercato di coprire entrambe le tecniche il più facilmente possibile. Se gestisci un sito WordPress, prenditi del tempo per leggere il blog e comprendere i processi. Seguire correttamente i passaggi e le istruzioni ti consentirà di personalizzare la tua animazione senza problemi.

Come aggiungere effetti di testo animati su 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 devi avere un'idea chiara di un testo animato e del suo ruolo; impariamo!

Che 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 anche ai tuoi articoli e titoli . Quando scegli di utilizzare un effetto di testo animato di fantasia, puoi creare vari effetti. Alcuni effetti sono semplici come la modifica del colore o della dimensione del testo , mentre altri sono animazioni dettagliate come testo lampeggiante o lampeggiante .

Il testo animato è leggermente diverso dal testo normale. Di solito, questo tipo di testo non si sposta da solo. Invece, ha un effetto che lo fa apparire come se si stesse muovendo sullo schermo. Pertanto, i testi fantasiosi aumentano le probabilità che le persone facciano clic sul contenuto, sui collegamenti o sull'apertura di e-mail .

Il ruolo dei testi animati nel tuo sito web

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

L' intestazione animata o una sezione dell'eroe con testi fantasiosi svolge i seguenti ruoli:

• Rende i tuoi progetti visivamente più interessanti.
• Evidenzia le offerte speciali e le 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

Utilizzo di un plug-in di WordPress

Il mercato odierno offre diversi tipi di plug-in per semplificare le attività di styling del testo. ElementsKit è un plug-in così potente e un componente aggiuntivo per il generatore di pagine Elementor. Con ElementsKit, avrai tutto sotto un unico cappuccio.

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

Accedi alla tua Dashboard -> Seleziona una pagina o un post -> Fai clic su Modifica con ElementsKit -> Cerca il widget di testo di animazione di ElementsKit -> Trascina e rilascia il widget

Sezione Contenuto

La parte è chiamata parte del testo di fantasia , contiene i seguenti campi:

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, qui avrai varie scelte.
• Reveal Duration (ms) : è possibile impostare la durata dell'animazione in millisecondi utilizzando la casella di opzione.
• Reveal Animation Delay (ms) – Regola qui il tempo di ritardo dell'animazione. Specifica che un'animazione può iniziare in un secondo momento, immediatamente dall'inizio o istantaneamente ea metà dell'animazione.

Contenuto

• Testo prefisso : è necessario scrivere qui il contenuto del prefisso che si desidera visualizzare. Significa che verrà scritto prima dell'animazione di fantasia.
• Liste fantasiose: aggiungi elementi qui per animazioni fantasiose.
• Testo suffisso : scrivi il contenuto del suffisso che desideri visualizzare. Quindi, verrà specificato dopo l'animazione di fantasia.

• Tag HTML del titolo : selezionare 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 testo fantasiosi : utilizza questo campo per regolare la tipografia, il colore e il riempimento.
• Cursore di fantasia : puoi dare al cursore un aspetto di fantasia con colore, larghezza e altezza utilizzando questo campo.

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

Applicazione dei CSS

Quando crei animazioni CSS in WordPress, tieni a mente le seguenti cose fondamentali ma importanti :

• Impostazione di un nome di animazione corretto: questo è il nome che verrà visualizzato su un elemento quando viene spostato da un'animazione CSS. Ad esempio, se si dispone di un pulsante con un'animazione denominata "fadeIn", questo sarebbe il valore da utilizzare per questa proprietà.
• Durata dell'animazione: questo è il numero di secondi che un'animazione impiegherà per essere completata. 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).
• Animation-timing-function: controlla come l'elemento si sposta da un punto all'altro in base a quanto tempo impiega per un determinato periodo di tempo (in millisecondi). Ad esempio, se imposti questa proprietà su easy-out, il tuo elemento inizierà a muoversi lentamente e quindi accelererà alla fine della sua durata prima di ricominciare dall'inizio.
• Animation-delay – Questo è un valore che specifica il numero di millisecondi da aggiungere al termine di un'animazione prima che ricominci (ad esempio, 1s).
• Animation-iteration-count – Questa è la quantità di tempo necessaria per riprodurre l'animazione. Usando la proprietà CSS puoi contare questa iterazione.
• Animations-direction – È l'ordine o la direzione in cui deve essere riprodotta un'animazione. Può essere normale, inverso, alternato e alternato-inverso.
• Animation-fill-mode – Questi valori specificano come deve essere visualizzato un elemento. Può essere prima e dopo l'applicazione di un'animazione.
• Conoscere @keyframes - Specifica le proprietà dell'animazione che cambiano nel corso e anche i valori che tali proprietà dovrebbero assumere. Per esempio:

 @keyframes example { 0% {background-color: red;} 25% {background-color: yellow;} 50% {background-color: blue;} 100% {background-color: green;} }

In genere, le percentuali vengono utilizzate per indicare i tempi dell'animazione. Il fotogramma chiave sopra mostra che il colore di sfondo dell'elemento si trasformerà del 25 percento dal rosso al giallo, attraverso l'animazione.

Tuttavia, from e to possono essere utilizzati rispettivamente al posto di 0% e 100% .

Creazione di un file animate.css

Devi prima creare un file separato con tutte le proprietà necessarie, nell'editor di testo in cui lavori. Puoi scegliere i fotogrammi chiave per qualsiasi animazione . Successivamente, devi metterli insieme a 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 { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

Ora per associare questo fotogramma chiave a una classe CSS abbiamo impostato un testo denominato MyAnimation. Quindi, subito dopo il codice sopra ora devi inserire il codice sotto nel file.

 .MyAnimation { animation-name: MyAnimation; }

Puoi trovare tutte le conoscenze di base sull'animazione CSS e fare pratica con i codici qui!

Puoi ripetere questa procedura per creare quante più animazioni possibili in base alle tue necessità. 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 tonnellate di 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 tag h1 ' MyAnimation '. Puoi modificare la durata dell'animazione modificando i "3" con un valore diverso . Puoi anche cambiare i colori cambiando i valori esadecimali. Dopo aver 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 del testo e il colore del testo modificando il file CSS. Puoi anche modificare il colore di sfondo e la dimensione dell'intestazione modificando il file CSS.

Caricamento del file animate.css sul sito WordPress

Dopo aver finito con il lavoro sul file, caricalo nella directory del tuo tema. Abbiamo suddiviso 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 chiamata css. Se lo ottieni, carica il tuo file animate.css o animate.min.css dal file Animate.css con la sottodirectory.

Tuttavia, se non si dispone della cartella della sottodirectory, è possibile crearne facilmente una nuova. Per questo, subito dopo aver caricato il file, fai 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 tuo tema attivo. Ora, devi aggiungere questo frammento 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'); }

Ricorda , 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 le classi CSS

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

Infine, 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 l'animazione class e la classe per la tua animazione nel tag dell'elemento -> Anteprima

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

Tuttavia, l'applicazione dei CSS può essere un po' difficile se non si ha alcuna idea di codifica. Pertanto, si consiglia di avvalersi dell'aiuto di esperti per creare animazioni CSS in WordPress. In alternativa, il testo animato di fantasia di ElementsKit è un widget intelligente che ti aiuta a progettare rapidamente qualsiasi animazione elegante. Con il widget, puoi trasformare i testi scelti in animazioni fantasiose.