Comment créer des liens actifs sur le défilement pour les sites Web Divi d'une page

Dans le didacticiel d'aujourd'hui, nous allons vous montrer comment styliser vos liens de navigation verticaux de sorte qu'au fur et à mesure qu'un visiteur fait défiler la page, le lien de menu correspondant à la section dans laquelle ils se trouvent soit mis en surbrillance. C'est un joli petit effet qui ajoute un peu d'interactivité entre votre conception Web et le comportement de l'utilisateur. Cette méthode fonctionne particulièrement bien si vous créez un site Web d'une page.

Pour ceux qui ont du mal à imaginer cet effet dans leur esprit, nous avons fourni un aperçu ci-dessous.

Résultat

Jetons un coup d'œil au résultat final que vous pourrez obtenir après avoir suivi cet article :

Comme vous pouvez le voir, le lien actif en surbrillance change automatiquement lorsque l'utilisateur fait défiler les sections de la page (ainsi qu'au clic).

Inspiration

Nous avons trouvé notre inspiration pour cet article sur le site Web de Filmschool Berlin que nous avons mentionné comme exemple dans notre article sur la navigation verticale. Un lecteur dans les commentaires de cet article a demandé que nous leur montrions comment créer l'effet de lien actif de défilement et nous y sommes donc !

Comment créer des liens actifs sur le défilement pour les sites Web Divi d'une page

Abonnez-vous à notre chaîne Youtube

Pour commencer : téléchargez le plug-in The Page Scroll to ID

Pour réaliser cette conception, nous allons commencer par utiliser le plugin gratuit et bien noté Page Scroll to ID que vous pouvez trouver ici. Cliquez sur le bouton « Télécharger » et enregistrez le fichier ZIP du plugin dans un endroit où vous pouvez le trouver immédiatement.

Télécharger et activer la page Faites défiler jusqu'au plugin ID

La prochaine chose que vous devrez faire est d'aller dans votre tableau de bord WordPress > Plugins > Ajouter un nouveau > Sélectionnez le fichier ZIP que vous venez de télécharger et téléchargez-le.

Après cela, n'oubliez pas d'activer également le plugin.

Activer la navigation verticale

Avant d'entrer dans les paramètres du plugin Page Scroll to ID, nous allons d'abord activer la navigation verticale (et la navigation fixe à l'étape suivante). Si vous êtes sur votre tableau de bord WordPress, accédez à Apparence > Personnaliser > En-tête et navigation > Format d'en-tête > Et activez la navigation verticale.

Activer la navigation fixe

Passons à autre chose, activons la navigation fixe de votre site Web. Cela est nécessaire car le but de l'utilisation des liens actifs sur le défilement est que les visiteurs voient dans quelle section ils se trouvent, quand ils y sont. Si vous êtes sur votre tableau de bord WordPress, allez dans Divi > Options du thème > Et activez la barre de navigation fixe dans l'onglet Général.

Faites défiler la page jusqu'aux paramètres du plug-in ID

Pour cette partie, nous allons revenir au plugin qui a été récemment mis en ligne. Une fois que vous avez activé le plugin, vous devrez utiliser les bons paramètres. Pour accéder aux paramètres, cliquez sur "Paramètres" juste en dessous du nom du plugin.

Une fois que vous avez fait cela, vous remarquerez les différentes options qui vous aident à déterminer comment les liens actifs se comporteront sur votre site Web. Pour l'exemple que nous avons créé, nous utilisons les paramètres suivants :

• Activer sur les liens de menu WordPress : Oui
• Durée de défilement : 200 millisecondes
• Durée de défilement à réglage automatique : Oui
• Lissage de l'animation de défilement : Linéaire
• Défilez toujours en douceur lorsque vous atteignez la fin de la page/du document : Oui
• Arrêter le défilement de la page avec la molette de la souris ou le glissement tactile : Oui
• Mise en page : automatique
• Autoriser un seul élément en surbrillance à la fois : Oui
• Garder l'élément actuel en surbrillance jusqu'à ce que le suivant apparaisse : Oui
• Surligner par la prochaine cible : Oui
• Ajoutez la valeur de hachage du lien cliqué à la barre d'URL/d'adresse du navigateur : Oui
• Faire défiler de/vers différentes pages : Oui
• Délai de 0 millisecondes pour le défilement vers la cible lors du chargement de la page
• Empêcher d'autres scripts de gérer les liens du plugin (si possible) : Oui
• Normaliser les cibles de point d'ancrage : Oui

Ajouter un identifiant CSS et une classe aux sections

La prochaine chose que vous devrez faire est d'attribuer les différents identifiants CSS et la classe CSS de défilement de page sur ID aux différentes sections de votre page. Pour cela, ouvrez les paramètres de chacune de vos sections et allez dans l'onglet Avancé. Dans l'onglet Avancé, décidez des différents identifiants CSS que vous souhaitez utiliser pour vos sections. Sachez que, pour que cela fonctionne, vous devrez attribuer un identifiant CSS différent à chacune des sections de votre page.

Dans cet exemple, nous utilisons 'home' comme premier identifiant CSS. La classe CSS, cependant, est la même pour chacune des sections et vous aide à lier la section au plugin Page Scroll to ID. Le nom de la classe CSS est 'ps2id'.

Ajouter un identifiant aux éléments de menu

Ensuite, il est temps de créer les éléments de menu et de s'assurer qu'ils sont conformes aux sections et au plugin Page Scroll to ID. Si vous êtes sur votre tableau de bord WordPress, accédez à Apparence > Menus . Si vous avez déjà un menu principal, vous pouvez travailler sur celui-ci. Sinon, vous pouvez taper le titre et créer un nouveau menu. N'oubliez pas d'en faire un menu principal.

Utiliser des liens personnalisés

Ensuite, vous aurez besoin de liens personnalisés pour obtenir les résultats souhaités. Commencez par ajouter un premier lien personnalisé. Ajoutez votre site Web suivi du premier ID de section dans le champ du lien, comme indiqué dans la capture d'écran ci-dessous.

Activer les classes CSS

La prochaine chose que vous devrez faire, si vous ne l'avez pas déjà fait dans le passé, est d'activer les classes CSS pour vos éléments de menu. Pour ce faire, cliquez sur l'option "Options d'écran" dans le coin droit. Une fois les possibilités apparues, activez les classes CSS.

Utiliser le défilement de la page jusqu'à la classe CSS d'identification

Une fois que vous avez activé les classes CSS pour vos éléments de menu, vous pouvez continuer et lier manuellement la classe Page Scroll to ID à chacun des éléments de menu. La classe CSS est la même que celle que nous avons utilisée pour attribuer des identifiants à nos sections, à savoir 'ps2id'.

Faire des modifications d'apparence

Vous pouvez apporter toutes sortes de modifications à votre menu principal, même lorsque vous utilisez cette méthode. Pour vous montrer comment effectuer les modifications, nous allons recréer notre exemple de navigation verticale.

Remarque : Comme mentionné dans l'introduction de cet article, vous ne pourrez pas voir les modifications que vous avez apportées pendant que vous prévisualisez la page. Vous devez d'abord publier la page et la visualiser dans son mode en direct pour remarquer les résultats.

Personnalisateur de thème

Commencez par accéder au Personnalisateur de thème > En-tête et navigation > Menu principal et apportez les modifications suivantes à l'apparence de votre menu principal :

• Masquer l'image du logo : Oui
• Hauteur maximale du logo : 83
• Marge supérieure du menu : 0
• Taille du texte : 14
• Espacement des lettres : -1
• Police : Lato Light
• Style de police : majuscules
• Couleur du texte : #FFFFFF
• Couleur du lien actif : #FFFFFF
• Couleur d'arrière-plan : rgba(255,255,255,0)
• Couleur d'arrière-plan du menu déroulant : rgba(255,255,255,0)

Options de thème CSS personnalisé

Pour changer le style de lien actif, nous devrons ajouter du code CSS personnalisé. Si vous êtes sur votre tableau de bord WordPress, allez dans Divi > Options du thème > Faites défiler l'onglet Général et collez les lignes de code CSS suivantes dans la case CSS personnalisée :

#top-menu .current-menu-item a.mPS2id-highlight{
background: black;
border-top: 1px solid #FFFFFF;
border-bottom: 1px solid #FFFFFF;
padding-top: 15px;
}

En plus de cela, nous avons également utilisé un menu transparent qui se chevauche, que nous avons traité plus en détail dans cet article. Pour appliquer également ces modifications CSS à votre site Web, copiez et collez également les lignes de code CSS suivantes dans la zone CSS personnalisée :

@media (min-width: 981px) {
.et_vertical_nav #et-main-area, .et_vertical_nav #top-header {
margin-left: 0px !important;
}
.container {
margin-left: 3% !important;
}
.et_vertical_nav #page-container #main-header {
box-shadow: none !important;
}
}

Résultats

Après avoir suivi toutes les étapes de cet article, vous devriez pouvoir obtenir ce résultat final :

Vous pouvez, bien sûr, modifier le style selon vos propres préférences (ou l'utiliser également pour la navigation supérieure).

Dernières pensées

Dans ce didacticiel, nous vous avons montré comment créer un menu de navigation vertical interactif pour les pages d'une page. Nous vous avons montré comment utiliser le plugin Page Scroll to ID en combinaison avec le thème Divi pour obtenir facilement le résultat que vous souhaitez obtenir. Dans un prochain article, nous y reviendrons et vous montrerons comment styliser de manière créative les liens actifs que vous utilisez grâce à cette méthode. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image présentée par Yurlick / shutterstock.com