Come costruire una barra di avanzamento della lettura per i tuoi post sul blog Divi (senza plug-in)

L'aggiunta di una barra di avanzamento della lettura (o indicatore di scorrimento) al modello di post del blog è un modo intelligente per mostrare i progressi di lettura di un utente per un determinato articolo. L'idea è quella di visualizzare una barra di avanzamento fissa nella parte superiore del post che sia direttamente correlata alla posizione di scorrimento dell'utente sul contenuto del post. Quando l'utente raggiunge l'articolo, la barra di avanzamento inizia a riempirsi. Quando l'utente raggiunge la fine dell'articolo, la barra di avanzamento è piena al 100%.

In questo tutorial, ti mostreremo come creare una barra di avanzamento della lettura per i post del blog Divi che sia abbastanza intelligente da sapere quando l'utente inizia e termina (scorrendo) il contenuto effettivo del post, non l'intera pagina. Questo darà un'indicazione più accurata dell'avanzamento della lettura.

Ti mostreremo come aggiungere questa barra di avanzamento della lettura al modello di post del blog predefinito di Divi o a un modello di post personalizzato utilizzando Divi Theme Builder.

Iniziamo!

Sbirciata

Ecco una rapida occhiata al design che costruiremo in questo tutorial. Nota come la barra di avanzamento è fissata nella parte superiore del modello di post. La barra di avanzamento inizia a riempirsi quando l'utente raggiunge il contenuto effettivo del post/articolo e termina quando l'utente termina il contenuto del post.

Scarica il layout GRATUITAMENTE

Per mettere le mani sui disegni di questo tutorial, dovrai prima scaricarlo utilizzando il pulsante in basso. Per accedere al download dovrai iscriverti alla nostra mailing list Divi Daily utilizzando il modulo sottostante. Come nuovo abbonato, riceverai ancora più bontà Divi e un pacchetto Divi Layout gratuito ogni lunedì! Se sei già nell'elenco, inserisci semplicemente il tuo indirizzo email qui sotto e fai clic su download. Non sarai "riabbonato" o riceverai email extra.

Scarica i file

Scarica gratis

Iscriviti alla newsletter Divi e ti invieremo via email una copia dell'ultimo Divi Landing Page Layout Pack, oltre a tonnellate di altre incredibili risorse Divi gratuite, suggerimenti e trucchi. Seguici e diventerai un maestro Divi in ​​pochissimo tempo. Se sei già iscritto, digita il tuo indirizzo e-mail qui sotto e fai clic su download per accedere al pacchetto di layout.

SCARICA

Ti sei iscritto con successo. Controlla il tuo indirizzo e-mail per confermare la tua iscrizione e ottenere l'accesso ai pacchetti di layout Divi settimanali gratuiti!

Per importare il layout della sezione nel tuo Divi Theme Builder, vai a Divi Theme Builder.

Fare clic sull'icona della portabilità.

Nel popup della portabilità, seleziona la scheda di importazione e scegli il file di download dal tuo computer.

Quindi fare clic sul pulsante di importazione.

Una volta fatto, il modello di sezione apparirà nel Divi Theme Builder.

Passiamo al tutorial, vero?

Parte 1: importazione dei modelli predefiniti

Per questo tutorial, utilizzeremo un paio di modelli predefiniti dal nostro sesto pacchetto di creazione di temi. Importeremo il modello di sito Web predefinito che ci fornirà un'intestazione globale funzionante in cui aggiungeremo la barra delle informazioni del post. E importeremo il modello di post del blog per testare i nostri risultati su un post dal vivo.

IMPORTANTE: sarebbe meglio importare questi modelli su un sito di prova in modo da non rovinare un sito live.

Importa il modello di sito Web predefinito

Innanzitutto, dovrai scaricare il quarto pacchetto di creazione di temi GRATUITO per Divi. Quindi decomprimere il file.

Dal dashboard di WordPress, vai a Divi > Generatore di temi. Quindi fai clic sull'icona della portabilità in alto a destra. Nel popup della portabilità, seleziona la scheda di importazione. Quindi scegli il file JSON del modello di sito Web predefinito dalla cartella scaricata e fai clic sul pulsante di importazione. Verrà importato un nuovo modello di sito Web predefinito con un'intestazione e un piè di pagina globali.

Importa il modello di post

Ripeti questo processo per importare il modello di post dalla stessa cartella scaricata. Apri il popup di portabilità, scegli il file json del modello di post e fai clic sul pulsante di importazione. Questo ti darà un modello di post assegnato a tutti i post del tuo sito, insieme all'intestazione predefinita e un piè di pagina.

Disabilita Global nell'intestazione del modello di post

Aggiungeremo la nostra barra delle informazioni sui post dinamici all'intestazione del modello di post. Tuttavia, poiché vogliamo la barra delle informazioni del post solo sul modello del post, dobbiamo disabilitare il globale sull'intestazione in modo che la nostra barra non venga aggiunta a tutte le intestazioni a livello di sito. Per disabilitare il globale nell'intestazione globale, apri il menu delle impostazioni nell'intestazione globale e seleziona "Disabilita globale".

Ora l'intestazione dovrebbe essere grigia con l'etichetta "Intestazione personalizzata". Una volta pronto, fai clic sull'icona di modifica per modificare il modello di layout dell'intestazione.

Progettare la barra di avanzamento della lettura

Aggiunta della sezione e della riga

All'interno dell'editor del layout dell'intestazione, crea una nuova sezione regolare sotto la sezione corrente che contiene l'intestazione.

Quindi aggiungi una colonna alla sezione.

Impostazioni della sezione

Apri le impostazioni della sezione e aggiorna quanto segue:

• Imbottitura: 0px in alto, 0px in basso

Impostazioni riga

Dopo aver aggiunto le impostazioni della sezione, apri le impostazioni per la riga e aggiorna quanto segue:

• colore di sfondo: #2b2b2b

Nella scheda Progettazione, aggiorna quanto segue:

• Larghezza grondaia: 1
• Larghezza: 100%
• Larghezza massima: 100%
• Imbottitura: 0px in alto, 0px in basso

Creazione della barra di scorrimento con un modulo divisore

La barra di avanzamento crescerà gradualmente in larghezza per occupare il contenitore/riga vuoto. Per costruirlo, utilizzeremo un modulo divisore con un colore di sfondo personalizzato. Una volta progettato il divisore in stile come vogliamo che appaia la barra di avanzamento, aggiungeremo il codice necessario per aumentare la larghezza del divisore al momento giusto mentre si scorre la pagina.

Aggiungi modulo divisore

Crea un nuovo modulo divisore all'interno della colonna.

Quindi disabilitare la visibilità del divisore. Aggiungeremo invece un colore di sfondo che funge da colore della barra di avanzamento. Aggiorna quanto segue:

• Mostra divisore: NO
• Colore sfondo sfumato sinistro: #ff4349
• Colore di sfondo sfumato a destra: #fe7f47
• Direzione gradiente: 90 gradi

Nella scheda Progettazione, aggiorna l'altezza della barra di avanzamento:

• altezza: 20px

Nella scheda Avanzate, assegna al divisore un ID CSS personalizzato come segue:

• ID CSS: scrollBar

Avremo bisogno di questo per indirizzare la barra di scorrimento per la funzionalità con jQuery in seguito.

Aggiungi etichetta contatore percentuale barra di avanzamento

Per aggiungere l'etichetta del contatore della percentuale della barra di avanzamento, aggiungi un modulo di testo sotto il modulo divisore.

Quindi aggiungi il seguente codice HTML al contenuto del corpo:

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

I tag span sono importanti qui perché useremo jQuery per popolare i tag span con il contatore percentuale.

Nella scheda Progettazione, aggiorna quanto segue:

• Carattere del testo: Heebo
• Peso del carattere del testo: grassetto
• Stile del carattere del testo: TT
• Colore del testo del testo: #ffffff
• Dimensione del testo del testo: 13 px
• Spaziatura delle lettere del testo: 3px
• Altezza riga di testo: 1em

Quindi aggiorna un po 'il padding sinistro:

• imbottitura: 10px a sinistra

Nella scheda Avanzate, assegna al modulo di testo una posizione assoluta al centro della colonna/riga. Ciò assicurerà che non occupi spazio effettivo nel documento e rimanga centrato verticalmente all'interno della barra.

• Posizione: Assoluta
• Posizione: Centro Sinistra

Prima di lasciare il modulo di testo, aggiungi una classe CSS in modo che possiamo indirizzarlo con il nostro codice jQuery.

• Classe CSS: et-progress-label

Aggiunta del codice jQuery

Per dare alla barra di avanzamento la magica funzionalità di cui ha bisogno, dobbiamo aggiungere il codice jQuery necessario.

Per fare ciò, aggiungi un nuovo modulo di codice sotto il modulo di testo.

Quindi incolla il seguente codice:

<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>    

E per l'ultimo passaggio, dobbiamo dare alla nostra sezione una posizione fissa. L'abbiamo salvato per ultimo perché nasconderà la sezione dietro le sezioni sopra che contengono il contenuto dell'intestazione.

Apri le impostazioni della sezione per la sezione contenente la barra di avanzamento e aggiorna quanto segue:

• Posizione: fissa
• Indice Z: 998

Quindi apri le impostazioni della sezione superiore contenente il contenuto dell'intestazione e aggiorna l'indice Z come segue:

• Indice Z: 999

Ora la barra di avanzamento sarà inizialmente nascosta dietro la parte superiore dell'intestazione. Quindi, quando l'utente scorre il post, lo vedrai fisso nella parte superiore della pagina.

Non dimenticare di salvare le modifiche.

Aggiunta del selettore (Classe CSS) al modulo del contenuto del post nel modello dell'area del corpo.

In questo momento il codice è scritto per riconoscere un elemento con la classe "et-post-content" come contenuto principale del post.

Poiché stiamo utilizzando un modello personalizzato per il corpo del post, dobbiamo applicare quella classe CSS al modulo di contenuto del post del modello in modo che il nostro codice possa calcolare adeguatamente l'avanzamento della lettura mentre l'utente scorre il post.

Per fare ciò, apri il modello dell'area del corpo del modello di post nel generatore di temi.

Apri le impostazioni del modulo di post contenuto e aggiungi la seguente classe CSS:

• Classe CSS: et-post-content

Quindi salvare le modifiche.

Una volta fatto, salva le modifiche al layout e al generatore di temi.

Risultato finale

Per vedere il risultato in azione, apri un post live sul tuo sito web. Assicurati che il post abbia abbastanza contenuti in modo che ci sia spazio per scorrere la pagina verso il basso.

Utilizzo della barra di avanzamento della lettura sul modello di post predefinito di Divi (non un modello personalizzato)

Se non stai utilizzando un modello di corpo personalizzato per il post e desideri aggiungere la barra di avanzamento della lettura al modello di post del blog predefinito in Divi, tutto ciò che devi fare è aggiornare una singola classe CSS nel codice.

Innanzitutto, assicurati che l'area del corpo personalizzata del modello di post sia stata eliminata.

Quindi apri il layout del modello di intestazione personalizzato e aggiorna il modulo di codice sostituendo questa riga di codice...

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

con questo…

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

La classe "entry-content" avrà come target il div nel modello di post predefinito che contiene il contenuto del post del blog (esclusi il titolo, l'immagine in primo piano, i metadati sopra e i commenti sotto che distorcerebbero la lunghezza effettiva dell'articolo).

Risultato

Ecco il risultato di un post che utilizza il modello di post predefinito.

Pensieri finali

Questa barra di avanzamento della lettura è molto più intelligente del tipico indicatore di scorrimento che mostra l'avanzamento dello scorrimento dell'intera pagina/documento. Questa barra si rivolge solo al contenuto effettivo del post che l'utente leggerà, fornendo una rappresentazione accurata dell'avanzamento della lettura. Questo è ottimo per quei blog che tendono ad avere testi e commenti lunghi. Lavorerei benissimo anche per i corsi online per dare a quegli studenti quella motivazione in più per andare avanti!

Non vedo l'ora di sentirti nei commenti.

Saluti!