Créer des ancres pour améliorer l’expérience utilisateur
Dans ce nouveau tuto WordPress Divi, je vous montre comment réaliser des liens d’ancrage (anchor links) sur votre site Divi WordPress. Créer des ancres de liens sur une page web longue est intéressant et améliore l’expérience utilisateur en facilitant la navigation. En effet, vous pouvez créer une table des matières des sujets abordés en entête, ainsi vos visiteurs pourront accéder en un clic directement à la partie, à la section qui les intéresse. De plus, cette bonne pratique améliorera votre SEO.
Dans cette vidéo, je vous montre comment créer 4 types d’ancres :
– à partir de texte
– à partir d’un bouton
– à partir d’un élément du menu
– à partir du texte ou du bouton d’une page vers la partie précise d’une autre page.
Dans ce tuto, nous utiliserons le thème Divi d’Elegant Themes et son excellent Visual Builder !
Définir la cible du lien d’ancrage
Vous pouvez définir la cible du lien d’ancrage sur la section, la rangée ou le module. A vous de voir selon la précision d’affichage que vous souhaitez obtenir.
Dans notre tutoriel, nous ciblerons une section, mais pour la rangée ou le module, la procédure est la même. Pour cela rendez-vous dans les paramètres. Pour nous ce sera ici ceux de la section. Choisir ensuite l’onglet « Avancé » puis dans « ID et classe CSS » et dans « ID CSS », entrer votre mot cible (1 seul mot). Pour nous ce sera ici « ancre1 ». Sauvegarder ensuite vos changements.
Lien d’ancrage à partir de texte
Ouvrir ensuite les paramètres d’un module texte par exemple. Dans l’onglet « Contenu », sélectionner les mots du texte à lier, cliquer sur le maillon du menu, puis dans le pop-up « Insert Link » dans « URL » reporter le nom de votre cible précédé d’un #. Pour nous ce sera ici #ancre1. Sauvegarder vos changements, enregistrer votre page et quitter le Visual Builder pour tester votre lien.
Lien d’ancrage à partir d’un bouton
Même procédure que précédemment sauf qu’il faut se rendre dans les paramètres du module « Bouton ». Dans l’onglet « Contenu » puis « Lien » saisir le même le mot cible précédé d’un #.
Lien d’ancrage à partir d’un élément du menu
Pour cela, il faut se rendre dans le menu WordPress de gauche dans « Apparence > Menu » et ici dans la colonne de gauche, cliquer sur « Liens personnalisés ». Dans URL entrer le mot cible précédé d’un #. Dans notre cas ce sera toujours #ancre1
Dans « Texte du lien » entrer le mot qui figurera dans votre menu et qui déclenchera le lien. Vous pourrez ensuite réorganiser ce lien personnalisé comme une page classique de votre menu par simple « Glisser / Déposer ».
Lien d’ancrage à partir de texte ou d’un bouton d’une page vers la partie précise d’une autre page
Pour cette dernière manière de procéder, ce sera exactement pareil que pour le texte ou le bouton sauf que dans URL, il faudra renseigner l’adresse complète de la page à atteindre suivie d’un /#votre mot cible. Pour nous ce sera toujours ici /#ancre1.
