Cum se afișează bara de progres de citire în WordPress cu elementor

O bară de progres de lectură este un indicator vizual pe un site web care arată cititorilor cât de departe au defilat prin pagină sau postarea pe ecran. Acest lucru afișează de obicei o bară subțire care se umple pe măsură ce cititorii progresează, parcurgând pagina. Este un instrument simplu, dar eficient, pentru bloguri și site-uri web grele de conținut.

Un studiu recent privind implicarea utilizatorilor sugerează că indicii vizuali pot crește timpul petrecut pe o pagină cu până la 20%, făcând conținutul să se simtă mai gestionabil . În același mod, bara de progres poate ajuta utilizatorii să -și urmărească călătoria de lectură, ceea ce poate stimula satisfacția și îi poate încuraja să exploreze mai multe.

Cu Elementar, este ușor să adăugați o bară de progres de lectură la WordPress. Așadar, în acest articol, vom acoperi un ghid pas cu pas despre modul de afișare a barei de progres de citire în WordPress cu Elementar.

Beneficiile afișării barei de progres a cititorului în WordPress

Adăugarea unei bare de progres de lectură pe un site WordPress oferă mai multe beneficii. Acest lucru nu numai că îmbunătățește experiența utilizatorului, ci și implicarea. Aruncați o privire la câteva avantaje cheie ale adăugării barei de progres de lectură în WordPress de mai jos.

• Îmbunătățește implicarea utilizatorilor

O bară de progres de lectură poate menține cititorii motivați arătând vizual cât de departe au progresat printr -o postare. Acest lucru încurajează utilizatorii să continue să citească, în special pentru conținut de formă lungă. Aruncați o privire la câteva puncte rapide despre cum să îmbunătățiți implicarea utilizatorilor pe site -ul dvs. web.

• Îmbunătățește claritatea de navigație

Pentru articole sau tutoriale îndelungate, o bară de progres oferă o indicație clară a cât de mult rămâne conținut. Acest lucru îi ajută pe utilizatori să ghicească dacă au timp să termine sau nu.

• Reduce ratele de respingere

Oferind un indiciu vizual care descompune conținutul într -o călătorie următoare, o bară de progres poate face ca postările lungi să pară mai puțin copleșitoare. Acest lucru poate scădea remarcabil de rate de respingere. Iată un ghid cu privire la modul de reducere a ratei de respingere a WordPress.

• Îmbunătățește apelul estetic

O bară de progres bine concepută adaugă un apel modern la site-ul dvs. Puteți personaliza aspectul Barului de Progress pentru a se potrivi pentru a se potrivi cu brandul site -ului dvs. pentru a crea un aspect lustruit.

• Acceptă capacitatea de utilizare mobilă

Pe dispozitivele mobile, în care defilarea se poate simți nesfârșită, o bară de progres oferă un sentiment de control și context. Îi asigură pe utilizatori că progresează prin postare sau pagină.

Cum se afișează bara de progres de citire în WordPress cu elementor

În acest tutorial pas cu pas, vă vom ghida prin procesul de adăugare și personalizare a unei bare de progres de lectură pe site-ul dvs. WordPress folosind Elementar și versiunea gratuită a HappyAddons. Dar vă puteți întreba - de ce HappyAddons și ce este asta ?

De fapt, HappyAddons este un binecunoscut addon al pluginului elementar. Este livrat cu multe caracteristici și widget -uri resurse pentru a depăși limitările Elementar. Bara de progres de citire este una dintre. Și vestea bună este că funcția de bară de progres de lectură este complet gratuită de utilizat.

Pre-cerințe pentru adăugarea barei de progres pentru lectură

• Element
• Happyaddons

Asigurați -vă că pluginurile sunt instalate și activate pe site -ul dvs. După ce sunt gata pe site -ul dvs., începeți să urmați pașii explicați în tutorialul de mai jos.

Pasul 01: Activați caracteristica barei de progres de citire

Accesați tabloul de bord WordPress și navigați la HappyAddons> Caracteristici .

Când veniți la pagina de funcții , localizați opțiunea Bare de progres de lectură . Comutați pentru a activa funcția.

Pasul 02: Deschideți o pagină cu Elementar

Acum, pentru a configura funcția de bare de progres de citire, deschideți o pagină cu element.

Pasul 03: Accesați setările site -ului Elementar

Faceți clic pe pictograma Hamburger din colțul din stânga sus al panoului Elementar.

Accesați opțiunea Setări site făcând clic pe ea.

Prin defilarea panoului Elementar, localizați bara de progres de citire și faceți clic pe acesta .

Comutați pentru a activa opțiunea Bara de progres de lectură .

Pasul 04: Configurați opțiunea Bara de progres de citire

După ce ați activat opțiunea Bara de progres de citire, veți primi numeroase opțiuni pentru a configura funcția.

# Selectați unde să afișați bara de progres

Puteți alege să afișați bara de progres pe întregul site, adică pe toate postările și paginile. Sau, puteți alege să -l afișați selectiv.

Dacă doriți să -l afișați atât pe postări, cât și pe pagini, selectați -le în caseta de lângă afișare.

# Selectați un tip de bară de progres

HappyAddons vă permite să alegeți dintre trei tipuri de bare de progres - orizontal, vertical și cerc . Deci, alegeți oricare dintre ele, faceți clic pe opțiunea derulantă de lângă tip .

Veți vedea opțiunile. Alegeți un tip pe care îl doriți. Pentru tutorial, vom merge cu tipul orizontal.

# Selectați o poziție pentru bara de progres

Puteți afișa bara de progres, fie în partea de sus, fie în partea de jos. Deci, alegeți unde doriți să o afișați din opțiunea de poziție de lângă ea.

Pe măsură ce am defilat pagina, puteți vedea că apare o bară de progres în partea de sus a paginii.

# Stilizează bara de progres

Din același panou Elementar, puteți personaliza înălțimea, culoarea barei de progres, culoarea de fundal și procentul de instrumente al caracteristicii barei de progres.

Sper că puteți face singur această personalizare.

Pasul 05: Previzualizați bara de progres

După ce ați terminat, accesați frontendul site -ului dvs. Verificați dacă bara de progres funcționează bine sau nu prin defilarea ecranului.

Astfel, puteți adăuga cu ușurință bara de progres de lectură la WordPress folosind pluginurile Elementar și HappyAddons.

Cum arată bara de progres vertical

Mai sus, v -am arătat procesul de creare a unei bare de progres orizontale. În același mod, puteți activa și afișa bara de progres vertical pe site -ul dvs. După ce îl activați, bara de progres va arăta ca cea prezentată în videoclipul atașat mai jos.

Cum arată bara Circle Progress

Aici, din nou, urmând același proces, puteți afișa bara de progres Circle pe site -ul dvs. WordPress, configurat stilizarea și setările sale. Puteți viziona cum arată pe frontend din videoclipul atașat mai jos. Bara de progres Circle apare în colțul din dreapta sus.

Ce altceva poți face cu HappyAddons?

După ce aveți HappyAddons, nu numai că puteți depăși deficiențele Elementar, ci și să vă bucurați de multe caracteristici și widget -uri mai interesante. Aruncați o privire la ce puteți face mai mult cu pluginul HappyAddons.

o. Folosiți un constructor de teme

Constructorul de teme Happyaddons vă permite să personalizați fiecare aspect al pieselor șablonului site -ului dvs. WordPress, inclusiv anteturi, subsoluri, pagini unice, postări unice și pagini de arhivă. Vestea excelentă este că funcția de constructor de teme este complet gratuită de utilizat, ceea ce este o caracteristică premium în Elementar. Verificați cum să accesați HappyAddons Theme Builder.

b. Îmbunătățiți site -urile WooCommerce

Happyaddons Pro oferă o suită puternică de widget -uri WooCommerce pentru a îmbunătăți designul și funcționalitatea magazinului de comerț electronic. Widget -uri WooCommerce pe care le oferă HappyAddons sunt grilă de produse, carusel de produse, grilă de categorii de produse, carusel de categorii de produse, un singur produs, mini cărucior, coș, checkout și bara de transport.

C. Conținut creativ de artizanat

Happyaddons oferă peste 130 de widget -uri și două duzini de funcții interesante pentru a face un site web extrem de interesant. Folosindu -le, puteți evidenția informații valoroase pe site -ul dvs. într -un mod extrem de creativ, care arată atât bun, cât și atrăgător pentru utilizatori.

D. Creați postări/pagini infografice

HappyAddons permite crearea de postări și pagini în stil infografic atrăgător vizual folosind widget-uri precum graficul de bare, bara de abilități, diagramele interactive și grila post. Drept urmare, puteți afișa comparații precum rezultatele vânzărilor sau sondajului cu culori și etichete personalizabile. Aflați cum să creați o pagină web infografică cu Elementar.

e. Paste de copiere cu domenii încrucișate

Caracteristica Paste de copiere cu domenii încrucișate în Happyaddons Pro vă permite să copiați widget-uri, secțiuni sau pagini întregi dintr-un domeniu și să le lipiți în altul, păstrând toate stilurile și setările. Acesta este un economisitor de timp pentru dezvoltatori sau agenții care gestionează mai multe site-uri.

În plus față de toate acestea, veți avea o bibliotecă de șabloane resurse, chat live, documentație cuprinzătoare și o listă de redare a tutorialului YouTube pentru a face călătoria dvs. de design web cu HappyAddons extrem de plăcută.

Gânduri finale!

Sper că v -a plăcut acest tutorial. Am scris în mod constant din ce în ce mai multe postări de blog bazate pe tutorial pe site-ul nostru web pentru a face călătoria dvs. de design web fără cod mai utilă și mai eficientă. Pe măsură ce ați citit întreaga postare, în mod evident, aveți o idee despre ce puteți face mai mult cu pluginul HappyAddons.

Dacă aveți atât Elementar, cât și HappyAddons pe site -ul dvs., puteți face o magie reală. Puteți verifica recenzii despre HappyDdons pe WordPress.org și alte site -uri de recenzie pentru a explora cât de mult sunt satisfăcuți utilizatorii noștri. După toate acestea, dacă aveți întrebări în minte, puteți lăsa un comentariu mai jos sau puteți da o lovitură în caseta noastră de chat de asistență.