Comment créer une barre de progression de lecture pour vos articles de blog Divi (sans plugin)

L'ajout d'une barre de progression de lecture (ou indicateur de défilement) à votre modèle de publication de blog est un moyen intelligent de présenter la progression de la lecture d'un utilisateur pour un article donné. L'idée est d'afficher une barre de progression fixe en haut de la publication qui est directement corrélée à la position de défilement de l'utilisateur sur le contenu de la publication. Lorsque l'utilisateur atteint l'article, la barre de progression commence à se remplir. Lorsque l'utilisateur atteint la fin de l'article, la barre de progression est pleine à 100 %.

Dans ce tutoriel, nous allons vous montrer comment créer une barre de progression de lecture pour les articles de blog Divi qui est suffisamment intelligente pour savoir quand l'utilisateur commence et termine (en faisant défiler) le contenu réel de l'article, pas la page entière. Cela donnera une indication plus précise de la progression de la lecture.

Nous allons vous montrer comment ajouter cette barre de progression de lecture au modèle de publication de blog par défaut de Divi ou à un modèle de publication personnalisé à l'aide de Divi Theme Builder.

Commençons!

Aperçu

Voici un aperçu rapide de la conception que nous allons construire dans ce tutoriel. Remarquez comment la barre de progression est fixée en haut du modèle de publication. La barre de progression commence à se remplir une fois que l'utilisateur atteint le contenu réel de la publication/de l'article et se termine lorsque l'utilisateur a terminé le contenu de la publication.

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page de la section dans votre Divi Theme Builder, accédez au Divi Theme Builder.

Cliquez sur l'icône de portabilité.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur.

Cliquez ensuite sur le bouton importer.

Une fois cela fait, le modèle de section apparaîtra dans le Divi Theme Builder.

Passons au tutoriel, voulez-vous ?

Partie 1 : Importation des modèles prédéfinis

Pour ce didacticiel, nous allons utiliser quelques modèles prédéfinis de notre sixième pack de création de thèmes. Nous allons importer le modèle de site Web par défaut qui nous donnera un en-tête global fonctionnel où nous ajouterons la barre d'informations de publication. Et nous allons importer le modèle de publication de blog pour tester nos résultats sur une publication en direct.

IMPORTANT : Il serait préférable d'importer ces modèles sur un site de test afin de ne pas gâcher un site en direct.

Importer le modèle de site Web par défaut

Tout d'abord, vous devrez télécharger le quatrième pack GRATUIT de création de thèmes pour Divi. Décompressez ensuite le fichier.

Depuis le tableau de bord WordPress, accédez à Divi > Générateur de thèmes. Cliquez ensuite sur l'icône de portabilité en haut à droite. Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation. Choisissez ensuite le fichier JSON du modèle de site Web par défaut dans le dossier téléchargé et cliquez sur le bouton importer. Cela importera un nouveau modèle de site Web par défaut avec un en-tête et un pied de page globaux.

Importer le modèle de publication

Répétez ce processus pour importer le modèle de publication à partir du même dossier téléchargé. Ouvrez la fenêtre contextuelle de portabilité, choisissez le fichier json du modèle de publication et cliquez sur le bouton d'importation. Cela vous donnera un modèle de publication attribué à toutes les publications de votre site, ainsi qu'un en-tête par défaut et un pied de page.

Désactiver Global sur l'en-tête du modèle de publication

Nous allons ajouter notre barre d'informations de publication dynamique à l'en-tête du modèle de publication. Cependant, étant donné que nous voulons que la barre d'informations de publication soit uniquement sur le modèle de publication, nous devons désactiver global sur l'en-tête afin que notre barre ne soit pas ajoutée à tous les en-têtes à l'échelle du site. Pour désactiver global sur l'en-tête global, ouvrez le menu de configuration sur l'en-tête global et sélectionnez « Désactiver global ».

Maintenant, l'en-tête doit être gris avec l'étiquette « En-tête personnalisé ». Une fois prêt, cliquez sur l'icône de modification pour modifier le modèle de mise en page d'en-tête.

Conception de la barre de progression de lecture

Ajout de la section et de la ligne

Dans l'éditeur de mise en page d'en-tête, créez une nouvelle section régulière sous la section actuelle contenant l'en-tête.

Ajoutez ensuite une colonne à la section.

Paramètres de section

Ouvrez les paramètres de la section et mettez à jour les éléments suivants :

• Remplissage : 0px en haut, 0px en bas

Paramètres de ligne

Une fois les paramètres de section ajoutés, ouvrez les paramètres de la ligne et mettez à jour les éléments suivants :

• couleur de fond : #2b2b2b

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %
• Remplissage : 0px en haut, 0px en bas

Création de la barre de défilement avec un module diviseur

La barre de progression augmentera progressivement en largeur pour occuper le conteneur/la ligne vide. Pour construire cela, nous utiliserons un module diviseur avec une couleur d'arrière-plan personnalisée. Une fois que nous avons conçu le diviseur comme nous voulons que la barre de progression ressemble, nous ajouterons le code nécessaire pour que le diviseur augmente en largeur au bon moment tout en faisant défiler la page.

Ajouter un module diviseur

Créez un nouveau module diviseur à l'intérieur de la colonne.

Désactivez ensuite la visibilité du diviseur. Nous allons ajouter une couleur d'arrière-plan pour servir de couleur de barre de progression à la place. Mettez à jour les éléments suivants :

• Afficher le diviseur : NON
• Couleur d'arrière-plan du dégradé de gauche : #ff4349
• Dégradé de fond à droite : #fe7f47
• Direction du gradient : 90 degrés

Sous l'onglet Conception, mettez à jour la hauteur de la barre de progression :

• hauteur: 20px

Sous l'onglet avancé, attribuez au diviseur un identifiant CSS personnalisé comme suit :

• ID CSS : barre de défilement

Nous en aurons besoin pour cibler la barre de défilement pour les fonctionnalités avec jQuery plus tard.

Ajouter une étiquette de compteur de pourcentage de barre de progression

Pour ajouter l'étiquette du compteur de pourcentage de la barre de progression, ajoutez un module de texte sous le module de séparation.

Ajoutez ensuite le code HTML suivant au contenu du corps :

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

Les balises span sont importantes ici car nous utiliserons jQuery pour remplir les balises span avec le compteur de pourcentage.

Sous l'onglet Conception, mettez à jour les éléments suivants :

• Police du texte : Heebo
• Poids de la police de texte : gras
• Style de police de texte : TT
• Texte Couleur du texte : #ffffff
• Taille du texte : 13px
• Espacement des lettres du texte : 3px
• Hauteur de la ligne de texte : 1 em

Ensuite, mettez un peu à jour le rembourrage de gauche :

• rembourrage : 10 pixels restants

Sous l'onglet avancé, attribuez au module de texte une position absolue au centre de la colonne/ligne. Cela garantira qu'il n'occupe pas d'espace réel dans le document et qu'il reste centré verticalement dans la barre.

• Position : Absolu
• Emplacement : Centre gauche

Avant de quitter le module de texte, ajoutez une classe CSS afin que nous puissions la cibler avec notre code jQuery.

• Classe CSS : et-progress-label

Ajout du code jQuery

Pour donner à la barre de progression la fonctionnalité magique dont elle a besoin, nous devons ajouter le code jQuery nécessaire.

Pour ce faire, ajoutez un nouveau module de code sous le module de texte.

Collez ensuite le code suivant :

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

Et pour la dernière étape, nous devons donner à notre section une position fixe. Nous avons gardé cela pour la fin car cela masquera la section derrière les sections ci-dessus contenant le contenu de l'en-tête.

Ouvrez les paramètres de la section contenant la barre de progression et mettez à jour les éléments suivants :

• Poste : fixe
• Indice Z : 998

Ensuite, ouvrez les paramètres de la section supérieure contenant le contenu de l'en-tête et mettez à jour l'index Z comme suit :

• Indice Z : 999

Désormais, la barre de progression sera initialement masquée derrière la partie supérieure de l'en-tête. Ensuite, lorsque l'utilisateur fait défiler la publication, vous la verrez fixée en haut de la page.

N'oubliez pas de sauvegarder les modifications.

Ajout du sélecteur (classe CSS) au module de contenu de publication dans le modèle de zone de corps.

À l'heure actuelle, le code est écrit pour reconnaître un élément avec la classe "et-post-content" comme contenu principal de la publication.

Étant donné que nous utilisons un modèle personnalisé pour le corps de la publication, nous devons appliquer cette classe CSS au module de contenu de publication du modèle afin que notre code puisse calculer correctement la progression de la lecture lorsque l'utilisateur fait défiler la publication.

Pour ce faire, ouvrez le modèle de zone de corps du modèle de publication dans le générateur de thème.

Ouvrez les paramètres du module de contenu de publication et ajoutez la classe CSS suivante :

• Classe CSS : et-post-content

Ensuite, enregistrez les modifications.

Une fois cela fait, enregistrez les modifications apportées à la mise en page et au générateur de thème.

Résultat final

Pour voir le résultat en action, ouvrez une publication en direct sur votre site Web. Assurez-vous que la publication a suffisamment de contenu pour qu'il y ait de la place pour faire défiler la page.

Utilisation de la barre de progression de lecture sur le modèle de publication par défaut de Divi (pas un modèle personnalisé)

Si vous n'utilisez pas de modèle de corps personnalisé pour la publication et que vous souhaitez ajouter la barre de progression de lecture au modèle de publication de blog par défaut dans Divi, il vous suffit de mettre à jour une seule classe CSS dans le code.

Tout d'abord, assurez-vous que la zone de corps personnalisée du modèle de publication a été supprimée.

Ensuite, ouvrez la mise en page du modèle d'en-tête personnalisé et mettez à jour le module de code en remplaçant cette ligne de code…

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

avec ça…

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

La classe "entry-content" ciblera le div dans le modèle de publication par défaut qui contient le contenu de la publication de blog (à l'exclusion du titre, de l'image vedette, des métadonnées ci-dessus et des commentaires ci-dessous qui fausseraient la longueur réelle de l'article).

Résultat

Voici le résultat d'une publication utilisant le modèle de publication par défaut.

Dernières pensées

Cette barre de progression de lecture est beaucoup plus intelligente que votre indicateur de défilement typique qui montre la progression du défilement de la page/du document entier. Cette barre cible uniquement le contenu réel de la publication que l'utilisateur va lire, donnant une description précise de la progression de la lecture. C'est idéal pour les blogs qui ont tendance à avoir de longs textes et commentaires. Je travaillerais aussi très bien pour les cours en ligne pour donner à ces étudiants cette motivation supplémentaire pour continuer !

J'ai hâte de vous entendre dans les commentaires.

À votre santé!