Cum să adăugați cu ușurință animații CSS în WordPress

De-a lungul anilor, am experimentat cu diferite moduri de a face site-urile WordPress mai interactive. Dacă doriți să atrageți atenția vizitatorilor, animațiile pot fi foarte eficiente.

Puteți folosi animații pentru a capta atenția unui vizitator și pentru a evidenția cel mai important conținut al unei pagini. Acest lucru poate, de asemenea, încuraja clienții să facă clic pe butoanele și linkurile dvs. de apel la acțiune.

Din fericire, este, de asemenea, ușor să configurați animații în WordPress, chiar dacă nu știți cum să scrieți cod.

În acest tutorial, vă vom arăta cum puteți adăuga cu ușurință animații CSS în WordPress.

De ce să adăugați animații CSS în WordPress?

Puteți utiliza animații CSS pentru a atrage atenția vizitatorului asupra diferitelor părți ale unei pagini. De exemplu, dacă aveți un magazin online, animațiile pot evidenția cele mai importante caracteristici ale unui produs sau cele mai bune puncte de vânzare. Acest lucru poate îmbunătăți experiența utilizatorului și poate crește vânzările.

Animațiile vor face, de asemenea, ca CTA-urile dvs. să iasă în evidență, ceea ce vă poate ajuta să atingeți un obiectiv specific, cum ar fi atragerea mai multor persoane să se aboneze la newsletterul dvs. prin e-mail.

Puteți adăuga animații CSS la foaia de stil a temei WordPress sau a temei copil. Cu toate acestea, acest lucru necesită mult timp și efort, iar dacă faceți o greșeală, poate strica designul site-ului dvs. web și chiar funcționalitatea acestuia.

Acestea fiind spuse, să vedem cum puteți adăuga cu ușurință animații CSS pe site-ul dvs. WordPress. Dacă preferați să săriți direct la o anumită metodă, atunci puteți folosi linkurile de mai jos:

• Metoda 1: Cum să animați ușor orice bloc WordPress (Rapid și ușor)
• Metoda 2: Cum să adăugați animații CSS la pagini personalizate (Recomandat)

Metoda 1: Cum să animați cu ușurință orice bloc WordPress (Rapid și ușor)

Cel mai simplu mod de a adăuga o animație CSS simplă este prin utilizarea Blocks Animation.

Acest plugin gratuit de animație vă permite să adăugați o animație de intrare oricărui bloc fără a fi nevoie să scrieți o singură linie de CSS. Are, de asemenea, o animație de scriere și un efect de tip ticker pe care îl puteți adăuga la text și numere.

Mai întâi, va trebui să instalați și să activați pluginul gratuit Blocks Animation. Dacă aveți nevoie de ajutor, atunci vă rugăm să consultați ghidul nostru pentru începători despre cum să instalezi un plugin WordPress.

La activare, deschideți orice pagină sau postare în editorul de blocuri WordPress. Apoi, pur și simplu faceți clic pe blocul pe care doriți să îl animați și selectați fila „Bloc” din meniul din dreapta.

Veți vedea că acest meniu are o secțiune nouă „Animații”.

Pur și simplu faceți clic pentru a extinde secțiunea „Animații” și veți vedea trei opțiuni diferite: Animații, Animații de numărare și Animații de tastare.

„Animațiile” sunt efecte scurte care rulează o dată la încărcarea paginii. Pentru a adăuga acest tip de animație de intrare pe blogul dvs. WordPress, faceți clic pe meniul derulant de lângă „Animație”.

Aceasta deschide un meniu unde puteți alege animația pe care doriți să o utilizați.

Editorul WordPress va afișa o previzualizare a animației, astfel încât să puteți încerca diferite opțiuni pentru a vedea ce arată cel mai bine.

În mod implicit, animația de intrare va fi redată imediat ce pagina se încarcă, dar puteți adăuga o întârziere dacă preferați. Dacă utilizați mai multe animații pe aceeași pagină, puteți chiar folosi întârzieri pentru a le decalaja, astfel încât să nu fie copleșitoare.

Pur și simplu deschideți meniul derulant „Întârziere” și alegeți un timp din listă.

Puteți, de asemenea, să faceți animația mai rapidă sau mai lentă folosind meniul derulant „Viteză”.

Pe măsură ce încercați diferite setări, puteți previzualiza animația în orice moment, făcând clic pe „Repetă animația”.

Pluginul are, de asemenea, „Animații de numărare” și „Animații de tastare”.

Animațiile de tastare vă permit să animați textul, în timp ce Animațiile de numărare adaugă un efect de contor numerelor. Aceste animații funcționează cu orice bloc Gutenberg care suportă text sau numere, deci le puteți folosi pentru a anima butoane, legende de imagini, titluri și multe altele.

Pentru a adăuga oricare dintre aceste efecte, începeți prin a evidenția textul sau numerele pe care doriți să le animați. Apoi, faceți clic pe săgeata în jos din bara de instrumente mică.

Acum puteți alege „Animații de numărare” sau „Animații de tastare” din meniul derulant.

Dacă aceste opțiuni sunt dezactivate (gri), asigurați-vă că ați selectat conținutul corect. De exemplu, nu veți putea selecta „Animație de numărare” dacă ați selectat doar text.

După adăugarea animației, puteți utiliza meniurile derulante din micul pop-up pentru a schimba viteza și a adăuga o întârziere opțională.

De exemplu, în imaginea următoare, folosim o întârziere de o secundă.

Când sunteți gata să faceți animația CSS live, faceți clic pe butonul „Publicare” sau „Actualizare” pentru a aplica animațiile pe site-ul dvs. Acum, dacă vizitați site-ul dvs. WordPress, veți vedea animația live.

Metoda 2: Cum să adăugați animații CSS la pagini personalizate (Recomandat)

Dacă doriți să adăugați animații simple blocurilor WordPress încorporate, atunci Blocks Animation este o alegere bună. Cu toate acestea, dacă doriți să atrageți cu adevărat atenția vizitatorului, să păstrați oamenii pe site-ul dvs. și să obțineți mai multe conversii, atunci vă recomandăm să utilizați SeedProd.

SeedProd este cel mai bun plugin de creare a paginilor care vă permite să creați pagini de destinație, pagini de vânzări, o pagină de pornire și multe altele, folosind un editor simplu de tip drag-and-drop.

De asemenea, vine cu un bloc „Titlu animat” pe care îl puteți folosi pentru a crea titluri animate rotative și evidențiate.

În ciuda numelui, puteți utiliza blocul Titlu animat pentru a anima orice text, inclusiv un apel la acțiune, un subtitlu sau orice alt text pe care doriți să îl evidențiați.

SeedProd vine, de asemenea, cu peste 40 de animații de intrare pe care le poți adăuga oricărui bloc, inclusiv imagini, text, butoane, videoclipuri și multe altele.

Puteți chiar anima secțiuni și coloane întregi cu doar câteva clicuri. În acest fel, puteți crea pagini animate captivante în câteva minute.

Dacă utilizați animații pentru a obține mai multe conversii și vânzări, atunci SeedProd se integrează cu WooCommerce. De asemenea, suportă multe dintre cele mai bune servicii de marketing prin e-mail pe care s-ar putea să le utilizați deja pentru a vă promova site-ul web.

Cum să configurezi constructorul de pagini SeedProd

Primul lucru pe care trebuie să-l faceți este să instalați și să activați SeedProd. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, trebuie să introduceți cheia de licență.

Puteți găsi aceste informații în contul dvs. pe site-ul SeedProd. După adăugarea cheii de licență, faceți clic pe „Verificați cheia”.

Crearea unui design de pagină personalizat

Pentru a începe, accesați SeedProd » Pagini de destinație și faceți clic pe „Adăugați o pagină de destinație nouă”.

Pe ecranul următor, vi se va cere să alegeți un șablon.

SeedProd vine cu peste 350 de șabloane frumoase, organizate în diferite categorii, cum ar fi șabloane de pagină 404 și pagini personalizate de mulțumire WooCommerce.

Pentru acest ghid, vă vom arăta cum să creați o pagină de vânzări cu text animat și animații de intrare, dar pașii vor fi similari, indiferent de tipul de pagină pe care o creați.

Pur și simplu faceți clic pe orice filă pentru a vedea șabloanele diferite din acea categorie.

Când găsiți un șablon pe care doriți să îl utilizați, pur și simplu treceți mouse-ul peste el și apoi faceți clic pe pictograma bifă.

Folosim șablonul „Zen Sales Page” în toate imaginile noastre, dar puteți folosi orice șablon.

Apoi, trebuie să dați un titlu paginii.

SeedProd va crea automat un URL bazat pe titlul paginii, dar îl puteți schimba cu orice doriți. De exemplu, adăugarea de cuvinte cheie relevante la un URL poate îmbunătăți adesea SEO WordPress și poate ajuta pagina să apară în rezultatele căutării relevante.

Pentru a afla mai multe, vă rugăm să consultați ghidul nostru despre cum să faci cercetare de cuvinte cheie pentru blogul tău WordPress.

Când sunteți mulțumit de titlu și URL, faceți clic pe „Salvați și începeți editarea paginii”.

Aceasta va încărca editorul de pagini drag-and-drop SeedProd.

În dreapta, veți vedea o previzualizare live a designului paginii, cu unele setări în stânga.

SeedProd vine cu multe blocuri pe care le puteți adăuga la designul dvs., inclusiv blocuri care vă permit să adăugați butoane de partajare socială, videoclipuri, formulare de contact și multe altele.

Pentru mai multe informații, vă rugăm să consultați ghidul nostru despre cum să creați o pagină personalizată în WordPress.

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

Pentru a adăuga text animat pe pagină, găsiți blocul Titlu animat și trageți-l pe designul paginii dvs.

Există două moduri de a vă anima titlul. În primul rând, stilul „Evidențiat” adaugă o animație de formă textului dvs., cum ar fi un cerc sau un zigzag subliniat.

Puteți folosi această animație pentru a atrage atenția asupra unui anumit cuvânt sau expresie din titlu. Acest lucru poate face titlul mai ușor de citit și de înțeles, evidențiind cel mai important conținut. Este, de asemenea, o modalitate excelentă de a atrage atenția asupra unui apel la acțiune.

Stilul Evidențiat are, de asemenea, câteva forme de tăiere.

Puteți folosi tăieturi pentru a crea efecte interesante și atrăgătoare, sau pur și simplu puteți adăuga puțină distracție designului dumneavoastră.

Pentru a crea o animație de evidențiere, deschideți meniul derulant „Stil” și selectați „Evidențiat”.

Apoi, deschideți meniul derulant „Formă” și alegeți o formă. Când faceți clic pe o formă, SeedProd va afișa o previzualizare a acelei animații, astfel încât să puteți încerca diferite forme pentru a vedea care vă place cel mai mult.

SeedProd are, de asemenea, un stil de animație „Rotativ”, care adaugă un efect de tranziție textului.

Adesea, textul animat este primul lucru pe care îl privesc vizitatorii atunci când se încarcă o pagină, deci este o modalitate excelentă de a evidenția cea mai importantă bucată de text.

Pentru a crea o animație de tranziție, pur și simplu deschideți meniul derulant „Stil” și faceți clic pe „Rotire”.

Puteți apoi deschide meniul derulant „Animație” și alege tipul de tranziție pe care doriți să îl utilizați, cum ar fi estompare, zoom sau derulare. Din nou, SeedProd va reda animația în editorul de pagină, astfel încât să puteți încerca diferite efecte pentru a vedea care vă place mai mult.

Indiferent dacă creați o animație „Evidențiată” sau „Rotativă”, puteți adăuga text înainte și după textul animat.

Pur și simplu tastați în câmpurile „Înainte de titlu” și „După titlu”. În câmpul „Text”, adăugați cuvântul sau expresia pe care doriți să o animați.

Dacă doriți să animați întregul titlu, atunci pur și simplu lăsați câmpurile „Înainte de titlu” și „După titlu” goale.

În mod implicit, SeedProd va reda animația în buclă, ceea ce unii vizitatori ar putea găsi deranjant.

Pentru a reda animația o singură dată, faceți clic pentru a dezactiva comutatorul „Buclă infinită”.

În mod implicit, animația va rula timp de 1200 milisecunde după o întârziere de 8000 milisecunde.

Pentru a utiliza valori diferite, tastați în câmpurile „Durată” și „Întârziere”. De exemplu, puteți face animația mai rapidă utilizând o durată mai scurtă.

De asemenea, ați putea dori să stilizați textul. De exemplu, puteți modifica dimensiunea fontului și alinierea.

Când sunteți mulțumit de aspectul titlului animat, faceți clic pe butonul „Salvați” pentru a salva modificările.

Adăugați animații de intrare în WordPress

Animațiile de intrare rulează atunci când pagina se încarcă pentru prima dată, deci sunt o modalitate excelentă de a atrage atenția vizitatorului.

De asemenea, le puteți folosi pentru a evidenția conținutul pe care vizitatorii ar trebui să-l privească mai întâi. De exemplu, dacă aveți o piață online, atunci ați putea anima imaginea de erou a produsului sau bannerul care vă anunță vânzarea de Black Friday.

În editorul SeedProd, faceți clic pe conținutul pe care doriți să îl animați și apoi selectați fila „Avansat” din meniul din stânga.

Puteți apoi să faceți clic pentru a extinde secțiunea „Efecte de animație”.

După aceea, alegeți pur și simplu o animație din meniul derulant „Animație de intrare”.

Acum puteți adăuga animații de intrare la orice bloc, secțiune sau coloană, pur și simplu urmând același proces descris mai sus.

Publicați animațiile CSS în WordPress

Când sunteți mulțumit de modul în care este configurată pagina, faceți clic pe meniul derulant de pe butonul „Salvare” și selectați „Publicare”.

Acum puteți vizita această pagină pentru a vedea animațiile CSS în direct.

Sperăm că acest articol v-a ajutat să învățați cum să adăugați animații CSS în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să adăugați un fundal animat în WordPress sau elementele cheie de design WordPress de care are nevoie orice site web.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.