Cum să adăugați o bară de progres în postările dvs. WordPress (Metoda ușoară)

Conținutul de lungă durată este fantastic pentru SEO și pentru a oferi valoare cititorilor dvs., dar există o mică problemă: oamenilor le place să știe în ce se implică.

Când cineva ajunge la un tutorial de 3.000 de cuvinte, vrea să înțeleagă angajamentul său de la început. Barele de progres rezolvă acest lucru frumos, arătând cititorilor exact unde se află în conținutul dvs.

Le-am folosit pe site-ul nostru de abonament video WPBeginner pentru a arăta cât din curs au finalizat utilizatorii. În acest fel, studenții își pot urmări cu ușurință progresul de învățare și pot rămâne motivați să-și finalizeze pregătirea.

Partea cea mai bună? Nu aveți nevoie de abilități de codare sau de pluginuri costisitoare pentru a adăuga bare de progres pe site-ul dvs. WordPress. În acest ghid, vă vom arăta exact cum să le creați, pas cu pas.

Când să adăugați o bară de progres la postările WordPress

Există mai multe scenarii în care adăugarea unei bare de progres poate îmbunătăți articolele de pe blogul dvs. WordPress și le poate face mai de impact.

De exemplu, barele de progres sunt excelente pentru afișarea stării de finalizare a proiectelor.

Dacă aveți un blog care documentează proiecte pe termen lung, adăugarea barelor de progres poate oferi cititorilor o actualizare vizuală rapidă despre cât de departe ați ajuns.

Am folosit, de asemenea, bare de progres pe site-ul nostru de abonament video.

Acest lucru este pentru a ajuta utilizatorii noștri să vadă cât de mult au parcurs cursul.

Campaniile de strângere de fonduri pe site-ul dvs. WordPress pot beneficia, de asemenea, în mare măsură de barele de progres. Acestea oferă o reprezentare vizuală imediată a cât de aproape sunteți de atingerea obiectivului, ceea ce poate încuraja mai multe donații.

Pentru conținut educațional, barele de progres pot ilustra etapele de învățare sau complexitatea diferitelor subiecte. Acest lucru poate ajuta cititorii să vadă nivelul de dificultate al diferitelor subiecte pe care le acoperiți în postările dvs. de pe blog.

Dacă site-ul dvs. se concentrează pe subiecte de fitness sau sănătate, barele de progres pot fi utilizate pentru a afișa niveluri de intensitate a antrenamentului, bare de abilități, informații nutriționale sau progresul către obiectivele de sănătate.

În afară de asta, adăugarea unei bare de progres la postările despre statistici sau rezultatele sondajelor poate face datele mai ușor de digerat și mai captivante. În loc să listezi doar procente, poți reprezenta vizual datele cu bare de progres colorate.

Având în vedere acest lucru, am venit cu 2 moduri ușoare de a adăuga o bară de progres pe site-ul dvs. WordPress. Puteți utiliza linkurile rapide de mai jos pentru a sări la metoda preferată:

• Metoda 1: Adăugați o bară de progres cu un constructor de pagini (mai personalizabil)
• Metoda 2: Utilizați un plugin gratuit pentru bara de progres (rapid și ușor)
• Frequently Asked Questions: Adding Progress Bars in WordPress

Metoda 1: Adăugați o bară de progres cu un constructor de pagini (mai personalizabil)

O modalitate eficientă de a adăuga o bară de progres pe site-ul dvs. WordPress este să utilizați un page builder cu o funcție de bară de progres încorporată. Această abordare asigură că bara de progres se integrează perfect cu designul general al temei dvs.

Pentru această metodă, vom folosi Thrive Architect, un constructor de pagini puternic care oferă multe șabloane de teme diferite și o interfață drag-and-drop ușor de utilizat. Este o alegere excelentă atât pentru începători, cât și pentru utilizatorii experimentați care doresc o modalitate ușoară de a personaliza designul site-ului lor WordPress.

Cu toate acestea, țineți cont de faptul că această metodă implică schimbarea temei dvs.. Dacă sunteți mulțumit de tema curentă și nu doriți să o schimbați, ați putea prefera în schimb a doua metodă.

De asemenea, Thrive Architect nu are o versiune gratuită. Acestea fiind spuse, puteți utiliza codul nostru de cupon Thrive Themes pentru a obține până la 50% reducere la prima achiziție.

Puteți afla mai multe despre platformă în recenzia noastră Thrive Architect.

Pasul 1: Instalați Thrive Theme Builder

Pentru a începe, va trebui să configurați Thrive Architect. Începeți prin a vă conecta la contul dvs. Thrive Themes și descărcând pluginul Thrive Product Manager.

După aceea, descărcați și instalați pluginul Thrive Product Manager. Puteți consulta ghidul nostru pentru începători despre cum să instalați un plugin WordPress pentru instrucțiuni pas cu pas.

În această etapă, continuați și faceți clic pe Product Manager în zona dvs. de administrare WordPress.

Odată ce ați făcut acest lucru, puteți face clic pe butonul „Autentificare în contul meu” pentru a conecta site-ul dvs. WordPress cu contul dvs. Thrive Themes.

Ar trebui să vedeți acum o listă cu toate produsele disponibile Thrive Themes din contul dvs.

Pur și simplu selectați „Thrive Architect” și bifați căsuța „Install Product”.

După aceea, să derulăm în jos la secțiunea „Thrive Theme Builder” și să bifăm căsuța „Install Theme”. Trebuie să facem acest lucru deoarece Thrive Architect funcționează cel mai bine cu o temă Thrive.

Apoi, faceți clic pe butonul „Instalați produsele selectate”.

Ar trebui să vedeți acum că managerul de produse Thrive configurează pluginurile Thrive Architect și Thrive Theme Builder.

Când s-a terminat, faceți clic pe „Mergi la tabloul de bord Theme Builder”.

În acest moment, poți pur și simplu să mergi mai departe și să alegi o temă WordPress.

De asemenea, puteți face clic pe butonul „Previzualizare” pentru a vedea cum arată tema înainte de a face clic pe „Alege” pe ea.

Cu tema configurată, ar trebui acum să ajungeți la Expertul de construire a temei.

Acest expert de onboarding te va ajuta să încarci propriul logo, să alegi culorile brandului pentru a le adăuga la tema ta și să configurezi diferitele structuri și șabloane ale temei tale.

Finalizați procesul de onboarding pentru a putea trece la următorul pas.

Pasul 2: Adăugați o bară de progres la postările dvs. WordPress

Să adăugăm acum o bară de progres la postările dvs. WordPress. Pentru a începe, deschideți editorul de blocuri pentru o postare nouă sau una existentă.

Apoi, introduceți titlul noului dvs. articol acolo. După aceea, faceți clic pe butonul „Lansează Thrive Architect”.

Acum, puteți folosi Thrive Architect pentru a crea conținutul postării dvs. de blog. Funcționează similar cu editorul de blocuri.

Adică, puteți pur și simplu să faceți clic pe butonul „+” și să trageți și să plasați orice element doriți în secțiunea care spune „Faceți clic pentru a adăuga text sau trageți și plasați elementul din panoul din dreapta”.

Iată un exemplu în care adăugăm un bloc de text folosind editorul:

Procesul de adăugare a unei bare de progres este în mare parte același. Pur și simplu faceți clic din nou pe butonul „+” și găsiți blocul „Bară de progres”.

După aceea, pur și simplu adăugați-l la postarea dvs.

Apoi, va apărea o fereastră pop-up, solicitându-vă să alegeți un design de bară de progres.

Există zeci de opțiuni din care puteți alege și le puteți schimba oricând mai târziu, dacă este necesar.

Odată ce ați făcut alegerea, veți reveni la interfața principală de editare.

Pasul 3: Personalizați bara de progres

În această etapă, ar trebui să vedeți o bară laterală în panoul din stânga cu opțiuni de personalizare pentru bara de progres.

Există multe setări de configurat și vom acoperi principalele pentru a arăta cum să modificați bara de progres.

În meniul Opțiuni principale, puteți schimba designul barei de progres de la unul simplu la unul cu Noduri. Nodurile sunt pictograme care arată unde vă aflați în progres. Am ales acest tip de design de dragul exemplului.

Puteți schimba, de asemenea, unde să plasați etichetele barei de progres, înălțimea barei și nivelul curent al barei de progres.

Coborând în panou, veți găsi opțiuni pentru a schimba etichetele nodurilor.

Pentru a le modifica, faceți clic pe pictograma „Editare” cu creionul de lângă etichetă.

Acum, pur și simplu tastați noua etichetă.

Odată terminat, faceți clic pe pictograma „Salvare”.

Ceea ce este grozav la Thrive este că vă permite să personalizați fiecare altă parte a barei de progres, astfel încât să o puteți proiecta așa cum doriți.

Pentru a vedea aceste opțiuni de personalizare în acțiune, puteți pluti peste unul dintre elementele din bara de progres și faceți clic pe el.

Aici am selectat partea barei de progres care arată progresul incomplet.

Acum, un nou set de opțiuni a apărut în bara laterală din stânga.

Dacă faceți clic pe meniul derulant „Stil curent” din partea de sus, puteți schimba părți specifice ale barei, cum ar fi etichetele de progres, pictogramele, nodurile și multe altele.

Asigurați-vă că explorați fiecare parte pentru a vedea ce puteți personaliza.

Să încercăm câteva exemple. Pentru a dezactiva animația dungilor de bomboane în bara de fundal, selectați „Fundal cu linii grupate” în meniul Stiluri curente.

Apoi, dezactivați butonul „Animație dungă de bomboane”.

Dacă doriți să schimbați pictogramele din interiorul nodurilor de progres, comutați la „Pictograme de progres” în meniul derulant Stil curent.

După aceea, în meniul „Stare” din partea de sus, selectați „Normal”.

Ar trebui să vedeți acum câteva setări pentru schimbarea pictogramelor barei de progres.

Aici, faceți clic pe „Schimbă pictograma”.

Thrive Architect are multe pictograme în biblioteca sa pentru diverse industrii. Acestea fiind spuse, asigură-te că pictograma pe care o alegi este potrivită pentru o bară de progres.

Odată ce ați făcut alegerea, faceți clic pe „Selectați”.

Pentru a schimba stilul pictogramei, pur și simplu apasă pe butonul „Change style”.

De aici, veți vedea câteva modele predefinite de pictograme pe care le puteți alege.

Pentru a schimba aspectul etichetei de progres, comutați la opțiunea „Etichetă de progres” din meniul derulant „Stilizare curentă”.

Aici veți vedea câteva opțiuni pentru a personaliza culoarea etichetei, evidențierea, formatarea și așa mai departe.

Odată ce ești mulțumit de cum arată bara de progres, apasă pe „Save Work” pentru a-ți salva modificările.

Asigură-te că îți previzualizezi postarea blogului pe mobil, desktop și tabletă, astfel încât totul să arate grozav.

Iată cum arată al nostru pe site-ul nostru demo:

Alternativă: Adăugați o bară de progres circulară

Thrive Architect are, de asemenea, un alt tip de bară de progres în colecția lor de blocuri numit contor de umplere. Blocul Contor de Umplere arată ca o bară de progres circulară, ceea ce este excelent pentru afișarea statisticilor.

Pentru a-l adăuga, pur și simplu faceți clic pe butonul „+” din bara laterală dreaptă și găsiți elementul „Fill Counter”. Apoi, trageți-l și plasați-l oriunde pe postare.

Odată ce îl adăugați, veți vedea câteva opțiuni pentru a personaliza contorul de umplere.

În principal, puteți schimba dimensiunea contorului de umplere, procentul de umplere, culorile și dacă valoarea procentuală ar trebui să corespundă valorii prezentate vizual în contor.

Puteți, de asemenea, să faceți clic pe numărul din contorul de umplere pentru a-i schimba aspectul.

Simțiți-vă liber să modificați culorile, tipul de font, vizibilitatea pe diferite dispozitive și multe altele.

Dacă doriți să schimbați textul de sub procent, faceți clic pe textul în sine.

După aceea, puteți introduce o descriere pentru contorul de umplere.

Nu uitați să salvați munca atunci când ați terminat.

Alternativă: Nu ești fan Thrive Architect? Constructorul de pagini SeedProd are, de asemenea, un bloc pentru bara de progres pe care îl poți adăuga la tema ta sau la paginile personalizate.

Pentru mai multe informații despre cum să utilizați SeedProd, consultați ghidul nostru despre cum să creați o temă WordPress personalizată.

Metoda 2: Utilizați un plugin gratuit pentru bara de progres (rapid și ușor)

Această metodă este cea mai bună dacă nu doriți să utilizați un page builder și aveți nevoie doar de un plugin simplu și gratuit pentru bare de progres WordPress.

Pentru aceasta, vom folosi pluginul gratuit Ultimate Blocks, care adaugă o mulțime de blocuri Gutenberg suplimentare editorului dvs. WordPress.

Marele avantaj al acestui plugin este că blocul de bară de progres este disponibil gratuit. Acestea fiind spuse, puteți face upgrade la versiunea pro a pluginului pentru a obține mai multe blocuri Gutenberg și opțiuni de personalizare.

Puteți afla mai multe despre plugin în recenzia noastră Ultimate Blocks.

Mai întâi, instalați și activați pluginul WordPress pe site-ul dvs. web. Odată terminat, puteți deschide editorul de blocuri pentru a crea o nouă postare sau a edita una existentă.

Acum, faceți clic pe butonul „+” oriunde pe pagină și selectați blocul „Bară de progres”.

Acum ați adăugat cu succes un bloc de bară de progres la postarea dvs. Să personalizăm mai departe acest element de design WordPress pentru a se potrivi nevoilor dvs.

Dacă priviți bara laterală cu setările blocului din dreapta, veți vedea câteva opțiuni de personalizare. În fila „General”, puteți schimba poziția procentuală a barei de progres de la partea de sus la interior sau la partea de jos a barei.

Puteți, de asemenea, să dezactivați sau să activați designul „Dungă” și să schimbați valoarea pentru progresul curent.

Apoi, puteți personaliza Setările Numărului.

Aici, am ales să nu afișăm procentajul numeric, deoarece nu îl considerăm util pentru exemplul nostru.

Dar dacă alegeți spectacolul, atunci puteți schimba prefixul numărului (un simbol care apare înaintea numărului, cum ar fi un semn minus) și sufixul numărului (un simbol care apare după număr, cum ar fi un semn de monedă).

Urmează Controlul Responsiv.

Deoarece barele de progres pot ocupa spațiu în articolul dvs., este posibil să doriți să o ascundeți atunci când articolul este vizualizat de pe un ecran mai mic, cum ar fi pe dispozitive mobile sau tablete.

Doriți să faceți bara de progres mai interactivă? Luați în considerare adăugarea unei animații de intrare. Când activați această funcție, bara de progres va apărea cu un efect animat pe măsură ce vizualizatorul derulează în jos spre ea.

De asemenea, puteți alege un stil de animație și puteți seta perioada de întârziere, astfel încât bara de progres să apară la momentul potrivit.

Să trecem la fila „Stil”, unde puteți personaliza designul barei de progres.

În partea de sus, puteți schimba designul dintr-o bară de progres liniară într-una circulară sau semicirculară. De asemenea, puteți adăuga o rază la bordură pentru designul barei, astfel încât să arate mai mult circular decât rectangular și ascuțit.

Aici, am decis să rămânem la bara de progres de tip linie.

Dar așa arată barele de progres circulare și semi-circulare:

Derulând în jos, puteți schimba grosimea barei de progres, astfel încât aceasta să iasă și mai mult în evidență.

S-ar putea să doriți, de asemenea, să schimbați culoarea barei de progres, a barei de fundal și a etichetei barei de progres pentru a se potrivi designului site-ului dvs.

Un alt element pe care îl puteți schimba este spațierea interioară și marginile barei de progres.

Ambele setări controlează, în esență, spațiul dintre bara de progres și celelalte blocuri care o înconjoară.

Puteți crește valoarea pentru ambele dacă nu doriți ca bara de progres să fie prea aproape de celelalte blocuri de deasupra sau de dedesubtul ei.

Apoi, este posibil să doriți să adăugați o etichetă sau o descriere barei de progres, astfel încât cititorii să obțină mai mult context din vizual.

Deasupra barei de progres, pur și simplu tastați un text. S-ar putea să doriți, de asemenea, să schimbați alinierea și stilul textului folosind setările din bara de instrumente a blocului.

Odată ce sunteți mulțumit de aspectul barei de progres, faceți clic pe „Publicați” sau „Actualizați” în editorul de blocuri.

De asemenea, este posibil să doriți să vizualizați postarea pe mobil, desktop și tabletă pentru a vă asigura că bara de progres arată corect pe toate dispozitivele.

Gata! Ați adăugat cu succes o bară de progres la postările dvs. WordPress.

Iată cum arată bara noastră de progres pe site-ul nostru demo:

Întrebări frecvente: Adăugarea barelor de progres în WordPress

Iată câteva întrebări frecvent puse de cititorii noștri despre barele de progres:

1. Când ar trebui să folosesc o bară de progres de citire vs. o bară de progres statică?

Recomandăm utilizarea unei bare de progres de lectură atunci când doriți să mențineți cititorii implicați în postări lungi. Aceasta se umple pe măsură ce derulează, arătând cât din articol au citit.

Acest lucru funcționează bine pentru tutoriale, ghiduri sau postări de blog unde doriți să reduceți ratele de respingere.

O bară de progres statică este mai bună pentru urmărirea unui obiectiv fix, cum ar fi progresul strângerii de fonduri, finalizarea proiectului sau nivelurile de competență. Aceste bare nu se mișcă pe măsură ce utilizatorul derulează, ci afișează un procent sau o valoare prestabilită, cum ar fi „60% complet” sau „300 USD din 500 USD strânși”.

Dacă scopul dvs. este să creșteți implicarea în timpul lecturii, alegeți o bară bazată pe derulare. Dacă doriți să afișați progresul sau realizările, alegeți una statică.

2. Care sunt cele mai bune practici atunci când utilizați bare de progres?

Iată câteva sfaturi pentru a face bara de progres mai eficientă:

• Păstrați-l simplu – O bară subțire și discretă funcționează cel mai bine și nu distrage atenția de la conținutul dvs.
• Potriviți-vă brandingul – Personalizați culoarea și dimensiunea pentru a se potrivi stilului site-ului dvs.
• Alegeți locul potrivit – Majoritatea cititorilor se așteaptă să-l găsească în partea de sus a ecranului.
• Testați pe mobil – Unele bare pot arăta neîndemânatic pe ecrane mici. Dezactivați dacă este necesar.
• Opțional: Adăugați timpul de citire – Ajută la stabilirea așteptărilor privind durata postării.

O bară de progres curată și bine plasată poate îmbunătăți experiența utilizatorului fără a încetini lucrurile.

3. Adăugarea unei bare de progres va încetini site-ul meu?

Majoritatea pluginurilor moderne pentru bara de progres sunt ușoare și nu vor afecta în mod vizibil viteza site-ului dvs.

Cu toate acestea, pluginurile prost codate sau supraîncărcate pot afecta performanța, în special pe mobil. Pentru a fi în siguranță:

• Folosește pluginuri de încredere cu recenzii bune.
• Testați viteza site-ului dvs. după instalare.
• Dezactivați bara pe mobil dacă afectează timpul de încărcare.

Atâta timp cât sunteți atent la alegerea plugin-ului, adăugarea unei bare de progres nu va dăuna SEO și poate chiar crește implicarea.

Elemente de design bonus pentru site-ul dvs. WordPress

Doriți să adăugați alte elemente vizuale pe site-ul dvs. WordPress? Consultați aceste articole de mai jos:

• Cum să adaugi litere mari la începutul paragrafelor în postările WordPress
• Cum să adaugi un widget cu cronometru în WordPress
• Cum să adăugați un ticker de știri derulant în WordPress
• Cum să adăugați un fundal animat în WordPress
• Cum să afișați o animație cu numărătoare în WordPress
• Moduri de a aduce efecte de Halloween pe site-ul dvs. WordPress
• Cum să adăugați testimoniale rotative în WordPress
• Cum să adăugați casete de caracteristici cu pictograme în WordPress
• Cum să adăugați un videoclip YouTube ca fundal pe tot ecranul în WordPress

Sperăm că acest tutorial v-a ajutat să învățați cum să adăugați o bară de progres la postările dvs. WordPress. De asemenea, ați putea dori să consultați selecția noastră de experți a celor mai bune constructoare de teme WordPress și ghidul nostru despre cum să editați un site WordPress.

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.