Les indicateurs de barre de progression peuvent ajouter une touche agréable à votre site Web, en stimulant l’UX avec une interaction utile (et amusante). Normalement, les barres de progression sont placées seules en haut de la page, sans lien avec le contenu réel de la page. L’utilisateur dispose simplement d’un indicateur visuel de l’endroit où il se trouve sur la page. Mais, aujourd’hui, nous allons porter cette fonctionnalité à un autre niveau.
Dans ce tutoriel, nous allons vous montrer comment combiner une barre de progression de défilement avec un menu de navigation fixe dans Divi. Cette conception est unique en ce sens que la barre de progression est en corrélation avec la largeur des boutons de menu. Et comme la largeur des boutons de menu est égale (en pourcentage) à la hauteur des sections de contenu défilant sur la page, chaque bouton sera rempli par la barre de progression de défilement au moment précis où l’utilisateur atteint la section correspondante du bouton. Et si cela ne suffit pas, nous ferons en sorte que chaque bouton soit également un lien d’ancrage vers les sections correspondantes, pour un bonus UX supplémentaire !
Ce design serait parfait pour amener un utilisateur sur une page de renvoi décrivant les étapes d’un processus. Vous verrez.
C’est parti !
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
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 d’importation.
Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devez effectuer les opérations suivantes :
- Si vous ne l’avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour modifier la page sur le front-end (constructeur visuel).
- Choisissez l’option « Build From Scratch ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Partie 1 : Création de la mise en page de la section plein écran
La section supérieure
Pour commencer, ajoutez une rangée d’une colonne à la section.
Avant d’ajouter un module, mettez à jour les paramètres de la rangée comme suit :
- Largeur : 100
- Largeur maximale : 100
- Padding : 0px haut, 0px bas
À l’intérieur de la rangée, ajoutez un module texte.
Ouvrez ensuite les paramètres du module de texte et collez le HTML suivant pour créer un titre coloré :
Let’sstarétait
Dans l’onglet Conception, mettez à jour l’alignement du texte en le centrant.
Mettez à jour les styles d’en-tête H2 suivants :
- Titre 2 Police : Roboto
- Taille du texte de l’en-tête 2 : 6vw
Ouvrez les paramètres de la section et mettez à jour la hauteur à 100vh (ou 100 % de la hauteur de la fenêtre). Cela permettra de s’assurer que la section est en plein écran. Ensuite, enlevez le rembourrage comme suit :
- Hauteur : 100vh
- Rembourrage : 0px haut, 0px bas
Pour vous assurer que la ligne/le contenu à l’intérieur de la section reste centré(e) verticalement dans la section, ajoutez le CSS personnalisé suivant à l’élément principal de la section :
display:flex ; flex-direction:column ; justify-content:center ;
Première section de l’étape
La section suivante de la mise en page sera la première des quatre étapes. Il s’agit également de la première section vers laquelle notre premier lien d’ancrage de menu défilera.
Pour créer la section de la première étape, dupliquez la section supérieure que nous venons de créer.
Ouvrez ensuite les paramètres de la section dupliquée et mettez à jour la couleur d’arrière-plan :
- Background Color : #222222
Ensuite, ouvrez les paramètres du texte et remplacez le texte du corps par ce qui suit :
Première étape…
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur
Changez l’alignement du texte en alignement gauche.
Ensuite, mettez à jour les éléments suivants :
- Couleur du texte de l’en-tête 2 : #00a4e0
- Largeur maximale : 40vh (ordinateur de bureau), 80vh (tablette)
- Alignement du module : centre
Voilà qui règle le problème de la section de l’étape 1.
Section de l’étape 2
Pour créer la section de l’étape 2, dupliquez la section de l’étape 1 que nous venons de créer.
Ouvrez les paramètres de la section et ajoutez un dégradé de fond par-dessus la couleur de fond comme suit :
- Couleur de fond du dégradé gauche : rgba(255,255,255,0.85)
- Couleur d’arrière-plan dégradé droite : rgba(255,255,255,255,0.85)
Mettez ensuite à jour la couleur de l’en-tête :
- Couleur du texte de l’en-tête 2 : #ee4266
La couleur de l’arrière-plan et de l’en-tête de cette section correspondra aux couleurs du bouton correspondant à cette section dans le menu que nous créerons ultérieurement.
Section de l’étape 3
Pour créer la section de l’étape 3, dupliquez la section de l’étape 2 et faites-la glisser vers le bas de la page.
Modifiez ensuite la couleur de l’en-tête de l’élément de texte.
- Couleur du texte de l’en-tête 2 : #26c485
Section de l’étape 4
Notre dernière étape est l’étape 4. Pour créer cette section, dupliquez la section de l’étape 2 et faites-la glisser vers le bas de la page.
Mettez ensuite à jour l’en-tête de l’élément de texte dans cette section.
- Couleur du texte de l’en-tête 2 : #2a1e5c
Résultat
Voici le résultat de notre mise en page jusqu’à présent.
Partie 2 : Création de la barre de progression de défilement et du menu
Dans la partie suivante, nous créons enfin la barre de progression de défilement et les boutons de menu. L’idée est d’ajouter une section fixe en haut de la page. À l’intérieur de cette section, nous allons créer une ligne contenant un module de séparation qui servira d’indicateur de la barre de progression. Au-dessus de la rangée contenant la barre de progression, nous allons ajouter une autre rangée qui contiendra nos boutons. Chaque bouton aura un arrière-plan transparent (ou semi-transparent) afin de révéler la barre de progression derrière lui au fur et à mesure que l’utilisateur fait défiler la page.
Pour commencer, créons la section fixe en haut de la page. Allez-y, créez une nouvelle section régulière et faites-la glisser vers le haut de la mise en page.
Ouvrez les paramètres de la section et supprimez le remplissage comme suit :
- Padding : 0px haut, 0px bas
Sous l’onglet avancé, mettez à jour les éléments suivants :
- Position : Fixe
- Z Index : 999
Cela permettra de s’assurer que la section reste fixe en haut de la fenêtre du navigateur pour faciliter la fonctionnalité des liens d’ancrage. Elle permet également de s’assurer que la section sort du flux normal du document/html et n’augmente pas la hauteur du document global. Cela nous permettra de faire en sorte que la barre de défilement atteigne la fin de chaque bouton exactement lorsque l’utilisateur atteint chaque section/étape de la page lors du défilement.
À l’intérieur de la section, ajoutez une rangée d’une colonne.
Ouvrez les paramètres de la ligne et mettez à jour les éléments suivants :
- Largeur de la gouttière : 1
- Largeur : 100
- Largeur maximale : 100
- Rembourrage : 0px haut, 0px bas
- Position : Absolute
Ouvrez les paramètres de la colonne et ajoutez le CSS personnalisé suivant à l’élément principal :
height : 100% ; display:flex ; align-items:center ;
Cela permet de s’assurer que la colonne a la même hauteur que la section. Elle permettra également aux modules d’avoir une hauteur de 100 %. C’est la clé pour s’assurer que la barre de progression remplit la section.
Pour créer la barre de progression, ajoutez un module de séparation à la colonne.
Mettez ensuite à jour les paramètres du diviseur comme suit :
- Afficher le séparateur : NO
- Couleur d’arrière-plan : #222222
REMARQUE : nous donnons ici à la barre de progression une largeur de 100 % pour que vous puissiez la voir dans le design. Nous augmenterons et diminuerons la largeur du séparateur/de la barre de progression avec JQuery.
Sous l’onglet avancé, ajoutez un ID CSS et donnez-lui une position absolue.
- ID CSS : scrollBar
- Position : Absolue
Ajout de l’indicateur de texte en pourcentage
Ensuite, nous allons ajouter un emplacement pour afficher le pourcentage de la position de défilement lorsque l’utilisateur fait défiler la page. Cela correspondra à la largeur de la barre de progression.
Sous le séparateur, ajoutez un module de texte.
Collez ensuite le HTML suivant dans le corps du texte :
.
Notre JQuery va écrire le texte du pourcentage dans ce HTML (entre les balises span). Vous ne pourrez rien voir maintenant.
Bien que le texte du pourcentage ne soit pas encore visible, nous devons quand même ajouter le stylisme suivant en prévision de son apparition.
- Police du texte : Roboto
- Style de la police du texte : TT
- Couleur du texte : #ffffff
- Taille du texte : 16px
- Padding : 0.8em haut, 0.8 bas, 15px gauche
Sous l’onglet avancé, donnez-lui une classe CSS personnalisée et désactivez-la sur téléphone et tablette.
- Classe CSS : et-progress-label
- Désactiver sur : Téléphone, tablette
Bien que nous n’ayons pas terminé, c’est un bon endroit pour ajouter notre code personnalisé nécessaire à l’affichage de la barre de progression et du pourcentage de défilement.
Pour ajouter le code, ajoutez un module de code sous le module de texte.
Collez ensuite le code suivant dans le champ de code en veillant à l’entourer des balises de script requises :
(function($) {
$(document).ready(function(){
var docHeight = $(document).height() ;
var winHeight = $(window).height() ;
var $scrollBar = $('#scrollBar') ;
var $progressLabel = $('.et-progress-label p span')
$scrollBar.css('width', 0) ;
$progressLabel.html('0%') ;
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop() ;
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100) ;
$scrollBar.css('width', (scrollPercentage + '%')) ;
$progressLabel.html( Math.round(scrollPercentage) + '%') ;
}) ;
}) ;
})( jQuery ) ;
Voilà qui règle le problème de la barre de progression et du texte du pourcentage. Passons maintenant au menu de navigation.
Construction des boutons de menu avec des liens d’ancrage
Nous sommes maintenant prêts à construire le menu de navigation, qui comprendra quatre boutons couvrant toute la largeur du navigateur. J’ai pensé qu’il serait intéressant que la barre de défilement remplisse chaque bouton lorsque l’utilisateur atteint la section correspondante à laquelle il est lié. Voici l’idée. Chaque bouton aura une largeur de 25% de la largeur totale du navigateur. Et comme nos quatre sections ont toutes la même hauteur (100vh), chacune des quatre sections représente 25% de la zone de défilement totale de la mise en page. Ainsi, la barre de progression atteindra l’extrémité de chaque bouton au moment précis où la section correspondante remplit la fenêtre d’affichage. Vous avez compris ? Si ce n’est pas le cas, j’espère que vous comprendrez mieux plus tard.
La ligne et la colonne
Pour créer les boutons de menu, nous devons d’abord créer une ligne à quatre colonnes sous la ligne contenant la barre de progression/diviseur.
Ouvrez les paramètres de la ligne et mettez à jour les éléments suivants :
- Largeur de la gouttière : 1
- Largeur : 100
- Largeur maximale : 100
- Rembourrage : 0px haut, 0px bas
Pour que les colonnes s’empilent sur les mobiles, nous devons ajouter le CSS personnalisé suivant à l’élément principal :
display:flex ; flex-wrap:nowrap ;
Bouton de l’étape 1
Pour créer le premier bouton, ajoutez un module de bouton dans la colonne la plus à gauche.
Mettez à jour le texte du bouton et l’URL du lien comme suit :
- Texte du bouton : Étape 1
- URL du lien du bouton : #one
(ce lien d’ancrage fera sauter la section avec l’ID CSS correspondant que nous ajouterons plus tard)
Ensuite, mettez à jour les styles des boutons comme suit :
- Alignement du bouton : Centre
- Taille du texte du bouton : 20px (ordinateur de bureau), 14px (tablette)
- Couleur d’arrière-plan du bouton : transparent
- Largeur de la bordure du bouton : 0px
- Rayon de la bordure du bouton : 0px
- Espacement des lettres du bouton : 0.2em
- Police du bouton : Roboto
- Style de la police des boutons : TT
- Rembourrage : 0.8em haut, 0.8em bas, 0 gauche, 0 droite
Pour que le bouton occupe toute la largeur de la colonne, ajoutez le CSS personnalisé suivant à l’élément principal :
display:block !important ; width : 100% ;
Bouton de l’étape 2
Pour créer le bouton de l’étape 2, dupliquez le bouton de la colonne 1 et faites-le glisser dans la colonne 2.
Mettez ensuite à jour les éléments suivants :
- Couleur du texte du bouton : #ee4266
- Couleur d’arrière-plan du bouton : rgba(255,255,255,0.85)
La couleur d’arrière-plan semi-transparente sera combinée avec la couleur noire de la barre de progression (derrière elle) pour correspondre à l’arrière-plan de la section correspondante de l’étape 2.
Ensuite, mettez à jour l’URL du lien du bouton avec ce qui suit :
Bouton de l’étape 3
Pour créer le bouton de l’étape 3, dupliquez le bouton de l’étape 1 (il a la même couleur de fond), et faites-le glisser dans la colonne 3.
Mettez ensuite à jour la couleur du texte du bouton :
- Couleur du texte du bouton : #26c485
Mettez ensuite à jour l’URL du lien du bouton comme suit :
Bouton de l’étape 4
Pour créer le bouton de l’étape 3, dupliquez le bouton de l’étape 2 (il a la même couleur de fond), et faites-le glisser dans la colonne 4.
Mettez ensuite à jour la couleur du texte du bouton :
- Button Text Color : #2a1e5c
Mettez ensuite à jour l’URL du lien du bouton comme suit :
Ajout des ID CSS de section correspondants pour les liens d’ancrage
Une fois que les boutons sont terminés et qu’ils ont tous leur URL de lien d’ancrage, nous pouvons ajouter les ID CSS de section correspondants à chaque section vers laquelle nous voulons que chaque bouton renvoie sur la page.
ID CSS de section de l’étape 1
Ouvrez les paramètres de la section de l’étape 1 et ajoutez l’identifiant CSS suivant :
ID CSS de la section de l’étape 2
Ouvrez les paramètres de la section de l’étape deux et ajoutez l’identifiant CSS suivant :
ID CSS de la section de l’étape trois
Ouvrez les paramètres de la section de l’étape trois et ajoutez l’identifiant CSS suivant :
ID CSS de la section de l’étape quatre
Ouvrez les paramètres de la section de l’étape quatre et ajoutez l’identifiant CSS suivant :
Résultat final
Réflexions finales
Ce menu à barre de progression est sans aucun doute une conception unique qui a le potentiel pour une variété d’applications. Nous espérons qu’il vous aidera à réaliser votre prochain projet. Et n’hésitez pas à explorer les innombrables variations de conception disponibles dans le constructeur Divi pour créer votre propre menu à barre de progression.
J’ai hâte d’avoir de vos nouvelles dans les commentaires.
