Cum să construiți o bară de progres pentru citire pentru postările dvs. de blog Divi (fără plugin)

Publicat: 2020-07-19

Adăugarea unei bare de progres a lecturii (sau a unui indicator de derulare) la șablonul dvs. de postare pe blog este o modalitate inteligentă de a prezenta progresul lecturii unui utilizator pentru un anumit articol. Ideea este de a afișa o bară de progres fixă în partea de sus a postării, care se corelează direct cu poziția de derulare a utilizatorului pe conținutul postării. Când utilizatorul ajunge la articol, bara de progres începe să se umple. Când utilizatorul ajunge la sfârșitul articolului, bara de progres este 100% plină.

În acest tutorial, vă vom arăta cum să creați o bară de progres pentru citirea postărilor de blog Divi, care este suficient de inteligentă pentru a ști când utilizatorul începe și termină (prin derulare) conținutul real al postării, nu întreaga pagină. Acest lucru va oferi o indicație mai exactă a progresului citirii.

Vă vom arăta cum să adăugați această bară de progres în lectură la șablonul implicit de postare de blog Divi sau la un șablon de postare personalizat utilizând Divi Theme Builder.

Să începem!

Trage cu ochiul

Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial. Observați cum este fixată bara de progres în partea de sus a șablonului de postare. Bara de progres începe să se umple odată ce utilizatorul ajunge la conținutul efectiv al postării / articolului și se termină când utilizatorul termină conținutul postării.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe desenele din acest tutorial, va trebui mai întâi să îl descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

V-ați abonat cu succes. Vă rugăm să verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în Divi Theme Builder, navigați la Divi Theme Builder.

Faceți clic pe pictograma de portabilitate.

În fereastra pop-up de portabilitate, selectați fila de import și alegeți fișierul de descărcare de pe computer.

Apoi faceți clic pe butonul de import.

După ce ați terminat, șablonul de secțiune va apărea în Divi Theme Builder.

Să trecem la tutorial, nu-i așa?

Partea 1: Importul șabloanelor premade

Pentru acest tutorial, vom folosi câteva șabloane premade din al șaselea pachet de constructori de teme. Vom importa șablonul de site implicit, care ne va oferi un antet global funcțional în care vom adăuga bara de informații despre postare. Și vom importa șablonul de postare pe blog pentru a ne testa rezultatele pe o postare live.

IMPORTANT: Cel mai bine ar fi să importați aceste șabloane pe un site de testare, astfel încât să nu deranjați un site live.

Importați șablonul de site implicit

În primul rând, va trebui să descărcați al patrulea pachet GRATUIT pentru Theme Builder pentru Divi. Apoi dezarhivați fișierul.

Din tabloul de bord WordPress, navigați la Divi> Theme Builder. Apoi faceți clic pe pictograma de portabilitate din partea dreaptă sus. În fereastra pop-up de portabilitate, selectați fila de import. Apoi alegeți fișierul JSON șablon de site implicit din folderul descărcat și faceți clic pe butonul de import. Aceasta va importa un nou șablon de site implicit cu antet și subsol global.

Importați șablonul de postare

Repetați acest proces pentru a importa șablonul de postare din același folder descărcat. Deschideți fereastra pop-up de portabilitate, alegeți fișierul post json șablon și faceți clic pe butonul de import. Acest lucru vă va oferi un șablon de postare atribuit tuturor postărilor de pe site-ul dvs., împreună cu antetul implicit un subsol.

Dezactivați Global în antetul șablonului de postare

Vom adăuga bara noastră de informații dinamice a postării în antetul șablonului de postare. Cu toate acestea, deoarece vrem bara de informații despre postare doar pe șablonul de postare, trebuie să dezactivăm globalul din antet, astfel încât bara noastră să nu fie adăugată la toate anteturile de pe întreg site-ul. Pentru a dezactiva global pe antetul global, deschideți meniul de setări de pe antetul global și selectați „Dezactivați global”.

bara de informații a postului dinamic divi

Acum antetul ar trebui să fie gri cu eticheta „Antet personalizat”. Odată gata, faceți clic pe pictograma de editare pentru a edita șablonul de aspect al antetului.

bara de informații a postului dinamic divi

Proiectarea barei de progres pentru citire

Adăugarea secțiunii și rândului

În editorul de aspect al antetului, creați o nouă secțiune obișnuită sub secțiunea curentă care deține antetul.

Apoi adăugați o coloană la secțiune.

Setări secțiune

Deschideți setările secțiunii și actualizați următoarele:

Căptușeală: 0 px sus, 0 px jos

Setări rând

După adăugarea setărilor secțiunii, deschideți setările pentru rând și actualizați următoarele:

culoarea fundalului: # 2b2b2b

Sub fila Proiectare, actualizați următoarele:

Lățimea jgheabului: 1
Lățime: 100%
Lățime maximă: 100%
Căptușeală: 0 px sus, 0 px jos

Crearea barei de derulare cu un modul divizor

Bara de progres va crește treptat în lățime pentru a ocupa containerul / rândul gol. Pentru a construi acest lucru, vom utiliza un modul divizor cu o culoare de fundal personalizată. Odată ce proiectăm divizorul în stilul în care dorim să arate bara de progres, vom adăuga codul necesar pentru a face ca divizorul să crească în lățime la momentul potrivit, în timp ce derulați pagina.

Adăugați un modul divizor

Creați un nou modul divizor în coloană.

Apoi dezactivați vizibilitatea separatorului. În schimb, vom adăuga o culoare de fundal pentru a servi ca culoare a barei de progres. Actualizați următoarele:

Show Divider: NU
Culoarea din stânga a gradientului de fundal: # ff4349
Culoarea dreaptă a gradientului de fundal: # fe7f47
Direcția gradientului: 90 grade

Sub fila Proiectare, actualizați înălțimea barei de progres:

înălțime: 20 px

Sub fila avansată, dați divizorului un ID CSS personalizat după cum urmează:

CSS ID: scrollBar

Vom avea nevoie de aceasta pentru a viza bara de derulare pentru funcționalitate cu jQuery mai târziu.

Adăugați eticheta contorului procentajului barei de progres

Pentru a adăuga eticheta contorului procentual al barei de progres, adăugați un modul text sub modulul divizor.

Apoi adăugați următorul HTML la conținutul corpului:

<p>Reading Progress: <span></span></p>

Etichetele span sunt importante aici, deoarece vom folosi jQuery pentru a completa etichetele span cu contorul procentual.

Sub fila Proiectare, actualizați următoarele:

Font text: Heebo
Greutatea fontului textului: Bold
Stil de text text: TT
Culoarea textului textului: #ffffff
Dimensiune text text: 13 px
Spațiere scrisoare text: 3 px
Înălțimea liniei de text: 1em

Apoi actualizați puțin căptușeala din stânga:

umplutură: 10 px stânga

Sub fila avansată, dați modulului text o poziție absolută în centrul coloanei / rândului. Acest lucru vă va asigura că nu ocupă spațiu real în document și că rămâne centrat vertical în bară.

Poziție: Absolută
Locație: Centrul din stânga

Înainte de a părăsi modulul text, adăugați o clasă CSS, astfel încât să o putem viza cu codul nostru jQuery.

Clasa CSS: et-progress-label

Adăugarea codului jQuery

Pentru a oferi barei de progres funcționalitatea magică de care are nevoie, trebuie să adăugăm codul jQuery necesar.

Pentru a face acest lucru, adăugați un nou modul de cod sub modulul text.

Apoi lipiți următorul cod:

<script>
(function($) {
    $(document).ready(function(){
        var winHeight = $(window).height();
        var $scrollBar = $('#scrollBar');
        var $progressLabel = $('.et-progress-label p span');   
        var $postContent = $('.et-post-content');
        $scrollBar.css('width', 0);
        $progressLabel.html('0%');
        $(window).scroll(function(){
            var postContentHeight = $postContent.height();          
            var postContentStartPosition = $postContent.offset().top;
            var winScrollTop = $(window).scrollTop();
            var postScrollTop = postContentStartPosition - winScrollTop;
            var postScrollableArea = postContentHeight - winHeight;
            var postScrollPercentage = Math.abs((postScrollTop/postScrollableArea)*100);
            if (postScrollTop > 0) {
                $scrollBar.css('width', 0);
                $progressLabel.html('0%');
            } else if (postScrollTop < 0 && postScrollTop > -postScrollableArea) {
                $scrollBar.css('width', (postScrollPercentage + '%'));
                $progressLabel.html( Math.round(postScrollPercentage) + '%');
            } else if (postScrollTop < -postScrollableArea) {
                $scrollBar.css('width', '100' + '%');
                $progressLabel.html('100%');
            }
        });
    });
})( jQuery );
</script>

Și pentru ultimul pas, trebuie să oferim secțiunii noastre o poziție fixă. Am salvat acest lucru pentru ultima dată, deoarece aceasta va ascunde secțiunea din spatele secțiunilor de mai sus care conțin conținutul antetului.

Deschideți setările secțiunii pentru secțiunea care conține bara de progres și actualizați următoarele:

Poziție: Fix
Indicele Z: 998

Apoi deschideți setările secțiunii de sus care conține conținutul antetului și actualizați indexul Z după cum urmează:

Indicele Z: 999

Acum bara de progres va fi ascunsă în spatele porțiunii superioare a antetului inițial. Apoi, când utilizatorul derulează mesajul în jos, îl veți vedea fixat în partea de sus a paginii.

Nu uitați să salvați modificările.

Adăugarea selectorului (Clasa CSS) la modulul Conținut de postare din șablonul de zonă de corp.

În acest moment, codul este scris pentru a recunoaște un element cu clasa „et-post-content” ca conținut principal al postării postării.

Deoarece utilizăm un șablon personalizat pentru corpul postării, trebuie să aplicăm acea clasă CSS Modulului de conținut de postare al șablonului, astfel încât codul nostru să poată calcula în mod adecvat progresul lecturii pe măsură ce utilizatorul derulează în jos pe post.

Pentru a face acest lucru, deschideți șablonul de zonă de corp al șablonului de postare în generatorul de teme.

Deschideți Setările modulului de conținut Post și adăugați următoarea clasă CSS:

Clasa CSS: et-post-content

Apoi salvați modificările.

După ce ați terminat, salvați modificările la aspect și la generatorul de teme.

bara de informații a postului dinamic divi

Rezultat final

Pentru a vedea rezultatul în acțiune, deschideți o postare live pe site-ul dvs. Asigurați-vă că postarea are suficient conținut, astfel încât să aveți loc pentru a derula pagina în jos.

Utilizarea barei de progres în citire pe șablonul de postare implicit al Divi (nu un șablon personalizat)

Dacă nu utilizați un șablon de corp personalizat pentru postare și doriți să adăugați bara de progres a citirii la șablonul implicit de postare de blog din Divi, tot ce trebuie să faceți este să actualizați o singură clasă CSS în cod.

Mai întâi, asigurați-vă că zona personalizată a corpului șablonului de postare a fost ștearsă.

Apoi deschideți aspectul șablonului de antet personalizat și actualizați modulul de cod înlocuind această linie de cod ...

 var $postContent = $('.et-post-content');

cu asta…

 var $postContent = $('.entry-content');

Clasa „entry-content” va viza div în șablonul de postare implicit care conține conținutul postării de blog (cu excepția titlului, a imaginii prezentate, a metadatelor de mai sus și a comentariilor de mai jos, care ar distorsiona lungimea reală a articolului).

Rezultat

Iată rezultatul unei postări folosind șablonul de postare implicit.

Gânduri finale

Această bară de progres este mult mai inteligentă decât indicatorul dvs. tipic de derulare, care arată progresul derulării pe întreaga pagină / document. Această bară vizează numai conținutul real al postării pe care utilizatorul îl va citi, oferind o descriere exactă a progresului lecturii. Acest lucru este minunat pentru acele bloguri care au tendința de a avea o copie lungă și comentarii. De asemenea, aș lucra excelent pentru cursurile online pentru a le oferi studenților acea motivație suplimentară de a continua!

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!