Cum să adăugați animație la text în WordPress

Stilurile de text de lux captează rapid atenția spectatorilor. Proprietarii de site-uri WordPress întreabă adesea cum să adauge animație textului. Absolut, veți găsi mai multe metode de a vă proiecta textele site-ului WordPress. Puteți adăuga manual efecte HTML CSS care necesită puțin mai mult cod. Dar codarea este o modalitate excelentă de a adăuga animație personalizată site-ului dvs. Din nou, un plugin cu cel mai bun widget este relativ la îndemână, eficient și, de asemenea, popular .

Cu toate acestea, am încercat să acoperim ambele tehnici cât de ușor putem. Dacă rulați un site WordPress, faceți-vă timp pentru a citi blogul și a înțelege procesele. Urmând pașii și instrucțiunile în mod corespunzător, vă va permite să vă personalizați fără probleme propria animație.

Cum să adăugați efecte de text animat în WordPress

Efectele de text animate pot fi folosite pentru a adăuga fler și personalitate site-ului dvs. WordPress. În acest tutorial, vă vom arăta modalitățile de adăugare a acestor efecte; dar înainte de asta, trebuie să ai o idee clară despre un text animat și rolul acestuia; hai sa invatam!

Ce este un efect de text animat și cum apare?

Efectele de text animate sunt o modalitate excelentă de a adăuga puțină distracție și emoție articolelor și titlurilor dvs. Când alegeți să utilizați un efect de text animat de lux, puteți crea diverse efecte. Unele efecte sunt simple precum schimbarea culorii sau dimensiunii textului , în timp ce unele sunt animații detaliate, cum ar fi textul intermitent sau intermitent .

Textul animat este puțin diferit de textul obișnuit. De obicei, acest tip de text nu se mișcă de la sine. În schimb, are un efect care îl face să pară ca și cum se mișcă pe ecran. Așadar, textele de lux îi fac pe oameni mai probabil să facă clic pe conținut, linkuri sau e-mailuri deschise .

Rolul textelor animate pe site-ul dvs. web

Există diferite tipuri de efecte de text animat disponibile în temele WordPress, dar toate au aceeași funcționalitate de bază. Ele schimbă culoarea sau stilul textului și pur și simplu schimbă un stil de testare. De exemplu, puteți schimba un buton de „îndemn” cu un fundal roșu și text alb care spune „Clic aici!” când se dă clic pe.

Titlul animat sau o secțiune de erou cu texte fanteziste joacă următoarele roluri:

• Vă face desenele mai interesante din punct de vedere vizual.
• Evidențiați oferte speciale și informații importante.
• Face ca caracteristicile produsului dvs. să fie vizibile.
• Face un site web mai interactiv și promovează afacerea.

Cele mai ușoare modalități de a adăuga efecte de text animate

Folosind un plugin WordPress

Piața de astăzi vă oferă diferite tipuri de pluginuri pentru a ușura sarcinile de stilare a textului. ElementsKit este un plugin atât de puternic , precum și un supliment pentru generatorul de pagini Elementor. Cu ElementsKit, veți obține totul sub o singură capotă.

Textul animat fancy este un widget impresionant prezentat de ElementsKit pro.

Conectați- vă la tabloul de bord -> Selectați orice pagină sau postare -> Faceți clic pe Editați cu ElementsKit -> Căutați widgetul ElementsKit Fancy Animation Text -> Trageți și plasați widgetul

Secțiunea de conținut

Partea se numește partea Fancy Text , conține următoarele câmpuri:

Animaţie

• Stil de animație – Aici cele două opțiuni sunt Text sau SVG, ambele vă permit să faceți diferite stiluri de animație.
• Tip de animație – În funcție de tipul de animație, veți avea diferite opțiuni aici.
• Reveal Duration (ms) – Puteți seta durata animației în milisecunde folosind caseta de opțiuni.
• Reveal Animation Delay (ms) – Reglați aici timpul de întârziere a animației. Specifică că o animație poate începe mai târziu, imediat de la început, sau instantaneu și la jumătatea animației.

Conţinut

• Text prefix – Trebuie să scrieți aici conținutul prefixului pe care doriți să îl afișați. Înseamnă că va fi scris înainte de animația de lux.
• Liste fancy – Adăugați articole aici pentru animație fantastică.
• Text sufix – Scrieți conținutul sufixului pe care doriți să îl afișați. Deci, va fi specificat după animația fantezică.

• Etichetă HTML de titlu – Selectați aici eticheta HTML a conținutului.
• Link (Opțional) – Adăugați orice link dacă doriți ca utilizatorii să redirecționeze către orice altă locație.

Secțiunea de stil

• Textul titlului – Utilizați acest câmp pentru a regla alinierea titlului, tipografia, culoarea etc.
• Liste de texte fancy – Utilizați acest câmp pentru a regla tipografia, culoarea și umplutura.
• Cursor fancy – Puteți da cursorului un aspect fantezist cu culoare, lățime și înălțime folosind acest câmp.

După ce ați editat și aranjat toate declarațiile necesare, faceți clic pe Actualizare și vedeți modificările din partea frontală. Un exemplu este -

Aplicarea CSS

Când creați animații CSS în WordPress, țineți cont de următoarele lucruri de bază, dar importante :

• Setarea unui nume de animație corect – Acesta este numele care va fi afișat pe un element atunci când este mutat de o animație CSS. De exemplu, dacă aveți un buton cu o animație numită „fadeIn”, aceasta ar fi valoarea pe care ați folosi-o pentru această proprietate.
• Durata animației – Acesta este numărul de secunde pe care le va dura o animație pentru a se finaliza. Puteți, de asemenea, să setați acest lucru la niciunul sau 0 pentru a face o animație să dureze la nesfârșit sau până când se întâmplă altceva (cum ar fi o încărcare a paginii).
• Funcția de sincronizare a animației – Aceasta controlează modul în care elementul se mișcă dintr-un loc în altul în funcție de cât timp durează pentru o anumită perioadă de timp (în milisecunde). De exemplu, dacă setați această proprietate să se ușureze, atunci elementul dvs. va începe să se miște încet și apoi se va accelera la sfârșitul duratei sale înainte de a începe din nou la început.
• Animation-delay – Aceasta este o valoare care specifică ce număr de milisecunde ar trebui adăugat după ce o animație s-a terminat înainte de a începe din nou (de exemplu, 1s).
• Animation-iteration-count – Acesta este timpul de care aveți nevoie pentru a reda animația. Folosind proprietatea CSS, puteți număra această iterație.
• Direcția animațiilor – Este ordinea sau direcția în care ar trebui să fie redată o animație. Poate fi normal, invers, alternativ și alternativ-invers.
• Animation-fill-mode – Aceste valori specifică modul în care ar trebui să fie afișat un element. Poate fi înainte și după ce i s-a aplicat o animație.
• Cunoașterea @keyframes – Specifică proprietățile animației care se schimbă pe parcursul cursului și, de asemenea, valorile pe care trebuie să le ia acele proprietăți. De exemplu:

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

În general, procentele sunt folosite pentru a indica momentul animației. Cadrul cheie de mai sus demonstrează că culoarea de fundal a elementului se va transforma 25% din drum de la roșu la galben, prin animație.

Cu toate acestea, de la și până la pot fi utilizate în locul 0% și, respectiv, 100% .

Crearea unui fișier animate.css

Mai întâi trebuie să creați un fișier separat cu toate proprietățile necesare, în editorul de text în care lucrați. Puteți alege cadrele cheie pentru orice animație . Apoi, trebuie să le puneți împreună cu anumite clase CSS pentru a le aplica cu orice text de pe site-ul dvs. WordPress.

Începeți prin a scrie un cod simplu în fișierul dvs. CSS. Un exemplu de cod pentru un text de animație poate arăta ca-

 ```@keyframes MyAnimation { from { opacity: 0; transform: rotate(20deg); animation-duration: 3s; } to {opacity: 1;} transform: rotate(0deg); } }

Acum, pentru a lega acest cadru cheie la o clasă CSS, am setat un text numit MyAnimation. Deci, imediat după codul de mai sus, acum trebuie să puneți codul de mai jos în fișier.

 .MyAnimation { animation-name: MyAnimation; }

Puteți găsi toate cunoștințele de bază ale animației CSS și puteți exersa codurile aici!

Puteți repeta această procedură pentru a crea cât mai multe animații în funcție de nevoia dvs. Apoi, salvați fișierul ca animate.css. Alternativ, puteți descărca fișierul Animate.css . Este un fișier foarte apreciat care conține cadrele cheie și clasele CSS pentru o mulțime de modele de animație populare. Mai mult, utilizarea fișierului vă va reduce durerea de a codifica animația complexă.

Codul de mai sus va anima textul etichetei dvs. h1 „ MyAnimation ”. Puteți modifica durata animației schimbând „3s” la o altă valoare . De asemenea, puteți schimba culorile prin modificarea valorilor hexadecimale. Odată ce ați salvat fișierul CSS, puteți face modificări suplimentare la aspectul site-ului dvs. web, puteți edita fișierul CSS. Puteți modifica fontul, dimensiunea textului și culoarea textului prin editarea fișierului CSS. De asemenea, puteți modifica culoarea de fundal și dimensiunea antetului prin schimbarea fișierului CSS.

Încărcarea fișierului animate.css pe site-ul WordPress

După ce ați terminat cu fișierul, încărcați-l în directorul temei dvs. Am împărțit întregul proces în trei pași,

Pasul 1

Accesați site-ul folosind File Transfer Protocol (FTP) -> Alegeți clientul FTP (FileZilla, WinSCP, Cyberduck, etc.) -> Selectați acreditările necesare în contul dvs. de găzduire.

Pasul 2

Acces la directorul public_html -> Navigați la wp-content -> Teme -> Selectați folderul temei active sau secundare

Pasul 3

Acum, căutați un subdirector numit css. Dacă îl primiți, încărcați fișierul animate.css sau animate.min.css din fișierul Animate.css cu subdirectorul.

Cu toate acestea, dacă nu aveți folderul subdirector, puteți crea cu ușurință unul nou. Pentru asta, imediat după încărcarea fișierului faceți o editare simplă pentru a crea noul fișier și este gata.

Apelați foaia de stil Animate prin functions.php

Veți găsi fișierul functions.php în folderul temei dvs. active. Acum, trebuie să adăugați acest fragment de cod pentru a apela Foaia de stil 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'); }

Rețineți , dacă ați folosit fișierul animate.min.css din Animate.css, va trebui să scrieți animate.min.css în linia finală în loc de animate.css. După salvarea tuturor modificărilor, accesați tabloul de bord WordPress.

Aplicați animații folosind clase CSS

Deci acum este posibil să aplicați orice clasă doriți în fișierul animate.css pentru a vedea diferite efecte de animație în postări și pagini. De asemenea, fișierul Animate.css vă permite să faceți referire la o listă completă a tuturor.

În cele din urmă, Selectați o postare sau o pagină în Editorul clasic -> Comutați la editorul de text -> Sau faceți clic pe pictograma cu trei puncte din bara de instrumente bloc dacă este un Editor de bloc -> Selectați Editați ca HTML-> Adăugați animația clasa și clasa pentru animația dvs. la eticheta element -> Previzualizare

Acestea sunt două tehnici eficiente pentru a adăuga text animat pe site-ul dvs. și vă pot ajuta să vă faceți site-ul mai captivant și mai atrăgător din punct de vedere vizual . Folosind una dintre aceste tehnici, puteți adăuga mișcare și interes paginilor dvs.

Cu toate acestea, aplicarea CSS poate fi puțin dificilă dacă nu aveți idee despre codificare. Prin urmare, este recomandat să luați ajutor de la experți pentru a crea animații CSS în WordPress. În mod alternativ, textul animat elegant ElementsKit este un widget inteligent care vă ajută să creați rapid orice animație elegantă. Cu widget-ul, puteți transforma textele alese în animații de lux.