Cum să afișați o animație cu numărătoare în WordPress

Există șanse ca site-ul dvs. web să aibă numere impresionante de împărtășit, cum ar fi numărul de clienți, anii de experiență, proiectele finalizate cu succes sau premiile câștigate.

Provocarea constă în a face vizitatorii să observe și să le pese de aceste realizări, în loc să le deruleze rapid. Aici excelează contoarele animate de numere.

Când statisticile dvs. cresc de la zero pe măsură ce vizitatorii ajung în acea secțiune, se creează o mini-celebrare a succesului dvs. Această mișcare atrage atenția și face ca realizările dvs. să pară mai semnificative și mai de încredere.

Prin experiența noastră în optimizarea site-urilor WordPress pentru un angajament mai bun, am descoperit că adăugarea acestor animații este mai ușoară decât cred majoritatea oamenilor.

Vă vom arăta exact cum să le adăugați folosind 2 metode simple.

Înainte de a adăuga o animație de numărare a numerelor în WordPress… 📊

Înainte de a intra în „cum”, să analizăm rapid unde funcționează cel mai bine aceste contoare animate pe site-ul dvs. WordPress:

• Secțiuni eroine pe pagina de pornire pentru a prezenta realizări majore
• Pagini de produs pentru a evidenția ratele de satisfacție a clienților
• Pagini Despre pentru a afișa etapele companiei
• Pagini de destinație pentru a sublinia dovada socială
• Secțiuni de prețuri pentru a afișa baza de clienți sau economiile

Din experiența noastră, am constatat că plasarea strategică este la fel de importantă ca și animația în sine. De exemplu, OptinMonster folosește eficient un contor numeric pentru a afișa sesiunile lunare de vizitatori optimizate, plasându-l exact acolo unde potențialii clienți iau deciziile.

Adăugarea și personalizarea unui contor numeric în WordPress necesită de obicei editarea codului. Acest lucru poate fi dificil pentru începătorii care nu știu cum să scrie cod.

Acestea fiind spuse, să vedem cum puteți afișa un contor animat de numere în WordPress. Vom acoperi 2 metode simple folosind un constructor de site-uri premium și un plugin gratuit.

Puteți face clic pe linkurile de mai jos pentru a sări la secțiunea preferată:

• Opțiunea 1: Creați o pagină de destinație cu animație de numărare a numerelor cu un constructor de pagini
• Opțiunea 2: Adaugă o animație rapidă de numărare pe orice pagină folosind un plugin
• Bonus: Adăugarea unui fundal animat captivant 🌟

Opțiunea 1: Creați o pagină de destinație cu animație de numărare a numerelor cu un constructor de pagini

Dacă construiți o pagină de destinație și doriți control complet asupra modului în care arată și funcționează contoarele dvs. numerice, un constructor de pagini este cea mai bună opțiune.

Am testat zeci de constructori de pagini WordPress de-a lungul anilor, iar SeedProd se remarcă în mod constant prin opțiunile sale extinse de personalizare, în special pentru elementele dinamice precum contoarele de numere.

Pentru mai multe informații, poți consulta recenzia noastră detaliată despre SeedProd.

Primul lucru pe care va trebui să îl faceți este să instalați și să activați SeedProd. Dacă aveți nevoie de ajutor, consultați ghidul nostru despre cum să instalați un plugin WordPress.

După activare, SeedProd vă va cere să introduceți cheia de licență. Puteți găsi cheia de licență în zona contului dvs. și în e-mailul de confirmare a achiziției.

Apoi, va trebui să accesați SeedProd » Pagini de destinație din panoul de administrare WordPress.

SeedProd îți permite să creezi pagini de destinație personalizate, proiectate profesional, inclusiv o pagină de tip „în curând”, pagină de mod de întreținere, pagină de conectare și pagină 404.

Apăsați butonul „Adăugați o pagină de destinație nouă”.

După aceea, puteți selecta un șablon SeedProd pentru pagina dvs. de destinație și puteți afișa contorul animat de numere.

Pur și simplu treceți cu mouse-ul peste un șablon și faceți clic pe butonul portocaliu cu bifă.

Acum se va deschide o fereastră pop-up. Introduceți doar un nume de pagină și o adresă URL a paginii.

După aceea, faceți clic pe butonul „Salvează și începe editarea paginii”.

Aceasta va lansa constructorul drag-and-drop SeedProd.

Apoi, puteți edita șablonul paginii dvs. adăugând blocuri diferite sau făcând clic pe elementele existente pe pagină.

Pentru a adăuga o numărătoare animată, pur și simplu trageți blocul Contor din meniul din stânga și plasați-l pe șablon.

După aceea, puteți selecta blocul Contor pentru a-l personaliza în continuare.

De exemplu, există opțiuni pentru a schimba numerele de început și de sfârșit ale contorului, pentru a introduce un prefix și un sufix numeric și pentru a edita titlul.

Apoi, puteți comuta la fila „Avansat” din setările blocului Contor din stânga.

Aici veți găsi mai multe opțiuni pentru a schimba stilul, schema de culori, spațierea, fontul și multe altele pentru blocul dvs. Contor.

Apoi, faceți clic pe comutatorul „Salvare” din partea de sus.

Acum puteți alege „Publicare” din meniul derulant.

Pentru a vedea contorul animat de numere în acțiune, accesați blogul dvs. WordPress.

Așa arăta pe site-ul nostru demo.

Opțiunea 2: Adaugă o animație rapidă de numărare pe orice pagină folosind un plugin

Uneori, un page builder poate fi prea mult atunci când tot ce aveți nevoie este un simplu contor de numere. Aici intervine pluginul Counter Number. Este o soluție gratuită și ușoară care face un singur lucru și îl face bine: vă permite să adăugați animații numerice oriunde pe site-ul dvs. folosind shortcode-uri simple.

Mai întâi, va trebui să instalați și să activați pluginul Counter Number. Pentru mai multe detalii, consultați ghidul nostru despre cum se instalează un plugin WordPress.

După activare, puteți accesa Contoare » Toate contoarele din tabloul de bord WordPress și faceți clic pe butonul „Adăugare contor nou”.

După aceea, puteți introduce un titlu pentru numărul contorului dvs.

În versiunea gratuită, puteți selecta doar șablonul de design simplu.

Apoi, puteți adăuga detalii pentru numărul contorului. Există opțiuni pentru a edita titlul contorului, a selecta o pictogramă și a introduce valoarea numărului contorului.

Puteți adăuga oricâte numere de contor doriți, făcând clic pe butonul „Adaugă o nouă casetă de contor” din partea de jos.

Pe lângă asta, obțineți mai multe opțiuni de personalizare din panoul din dreapta.

De exemplu, pluginul vă permite să schimbați culoarea titlului contorului, culoarea numerelor, dimensiunea pictogramei, dimensiunea fontului, familia de fonturi și multe altele.

După ce ați făcut modificările, derulați înapoi în partea de sus și publicați numărătorul.

Apoi, puteți accesa Contoare » Toate contoarele din tabloul de bord WordPress.

Copiați pe rând scurtcodul pentru contor. Acesta va arăta cam așa:

[COUNTER_NUMBER id=41]

Ulterior, puteți plasa acest element de design WordPress oriunde pe site-ul dvs., de la postări și pagini la bare laterale.

Pur și simplu adăugați o nouă postare sau pagină sau editați una existentă. Odată ce sunteți în editorul de conținut, faceți clic pe semnul „+” și adăugați un bloc Shortcode.

Apoi, puteți lipi scurtcodul contorului numeric în bloc.

De aici, previzualizează și publică pagina sau postarea ta pentru a vedea în acțiune numărătoarea animată.

Bonus: Adăugarea unui fundal animat captivant 🌟

După ce v-ați îmbunătățit site-ul cu contoare de numere captivante, recomandăm să-i ridicați atractivitatea vizuală cu un fundal animat.

Acest element face pagina dvs. mai interactivă și captează atenția publicului imediat ce ajunge. În plus, conferă un aspect de înaltă calitate fără a vă supraîncărca conținutul.

O modalitate simplă de a adăuga un fundal animat este utilizarea bibliotecii particle.js. Această bibliotecă JavaScript ușoară permite efecte vizuale uimitoare cu particule personalizabile.

Le puteți ajusta dimensiunea, culoarea, forma și mișcarea, iar acestea răspund la interacțiunile utilizatorului, cum ar fi mișcările mouse-ului sau clicurile.

La WPBeginner, am găsit funcția de fundal cu particule încorporată a SeedProd impresionantă. Cu SeedProd, integrarea particle.js în paginile dvs. este ușoară și nu necesită codare.

Oferă diverse stiluri de animație și puteți crea efecte de particule personalizate pentru a se potrivi perfect temei dvs. Pentru a aprofunda această metodă, consultați ghidul nostru detaliat despre cum să adăugați un fundal animat în WordPress.

Sperăm că acest articol v-a ajutat să învățați cum să afișați o animație de numărare în WordPress. Puteți consulta, de asemenea, tutorialul nostru despre cum să adăugați un fundal animat în WordPress și selecția noastră expertă a celor mai bune constructori de teme WordPress pentru a vă proiecta tema perfectă.

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.