La navigation fluide au sein d'une page web représente un enjeu majeur pour offrir une expérience utilisateur optimale. Les ancres HTML constituent une solution technique élégante permettant de diriger vos visiteurs vers des sections précises de vos contenus, sans qu'ils aient à défiler manuellement. Cette fonctionnalité s'avère particulièrement précieuse pour les articles longs, les pages de vente détaillées ou les sites présentant une structure en une seule page. Dans cet article, nous explorerons les différentes méthodes pour créer des ancres dans WordPress, que vous utilisiez l'éditeur natif Gutenberg ou des constructeurs de pages populaires comme Divi et Elementor.
Créer une ancre avec l'éditeur de blocs Gutenberg
L'éditeur de blocs Gutenberg intègre nativement la possibilité de créer des ancres HTML sans nécessiter de connaissances approfondies en développement web. Cette approche visuelle simplifie considérablement le processus tout en maintenant la puissance technique des liens d'ancrage traditionnels. Un lien d'ancrage permet d'accéder en un clic à un contenu situé n'importe où sur votre site, facilitant ainsi la création de tables des matières interactives ou de menus pour sites one page. Les éléments essentiels comprennent une balise HTML, l'attribut href pour spécifier la cible du lien, et un identifiant unique pour l'élément cible.
Ajouter un identifiant dans les paramètres avancés du bloc
Pour définir une ancre avec Gutenberg, commencez par sélectionner le bloc où vous souhaitez que vos visiteurs arrivent après avoir cliqué sur le lien. Une fois le bloc sélectionné, dirigez-vous vers le panneau de droite qui affiche les paramètres du bloc. Vous y trouverez un onglet nommé Avancé qu'il convient d'ouvrir pour accéder aux options supplémentaires. Dans cette section, vous découvrirez un champ spécifiquement dédié à l'ancre HTML. Renseignez-y un identifiant unique qui respecte certaines règles importantes : il doit être composé uniquement de lettres et de chiffres sans accents, ne jamais commencer par un chiffre, et ne contenir aucun espace. Par exemple, des identifiants comme section-presentation ou partie2 sont parfaitement valides. Cet identifiant unique garantit que votre lien pointera exactement vers l'emplacement désiré sans confusion avec d'autres éléments de la page.
Créer un lien cliquable vers votre ancre
Une fois votre identifiant défini, l'étape suivante consiste à créer le lien hypertexte qui dirigera les visiteurs vers cette section. Sélectionnez le texte ou le bloc bouton qui servira de point de départ pour la navigation. Utilisez l'outil de création de lien dans Gutenberg en cliquant sur l'icône correspondante dans la barre d'outils. Dans le champ URL, saisissez le symbole dièse suivi immédiatement de l'identifiant que vous avez précédemment défini, par exemple #section-presentation. Ce format spécifique indique au navigateur qu'il s'agit d'un lien d'ancrage interne plutôt qu'une redirection vers une nouvelle page. Après validation, testez votre lien en mode prévisualisation ou directement sur la page publiée pour vérifier que le défilement s'effectue correctement vers la section ciblée. Cette méthode permet de créer des sommaires cliquables dans vos longs articles, améliorant ainsi considérablement la navigation interne et l'expérience utilisateur globale.
Insérer une ancre en modifiant directement le code HTML
Pour les utilisateurs plus à l'aise avec le code ou ceux qui souhaitent un contrôle total sur leur implémentation, la modification directe du HTML constitue une alternative puissante. Cette approche technique offre une flexibilité maximale et permet de comprendre précisément le fonctionnement des ancres au niveau du code source. Une ancre est un code HTML qui permet de créer un lien vers un endroit spécifique dans une page web, facilitant ainsi la création de sommaires, l'amélioration du référencement SEO, le marquage d'informations importantes et la création d'appels à l'action efficaces. Cette méthode universelle fonctionne indépendamment du thème ou des extensions installées sur votre site WordPress.
Passer en mode éditeur de code et ajouter un attribut id
Dans l'éditeur Gutenberg, accédez au mode éditeur de code en cliquant sur les trois points verticaux situés dans le coin supérieur droit, puis sélectionnez l'option Éditeur de code. Cette vue vous présente l'intégralité du contenu de votre page sous forme de balises HTML. Repérez l'élément précis où vous souhaitez positionner votre ancre, qu'il s'agisse d'un titre, d'un paragraphe ou de toute autre balise HTML. Ajoutez directement l'attribut id à cette balise en respectant la syntaxe suivante : si vous avez un titre de niveau deux, transformez-le en ajoutant l'identifiant entre guillemets après la balise d'ouverture. Par exemple, un titre devient un élément ancré lorsque vous y intégrez un identifiant unique. Assurez-vous que cet identifiant n'est utilisé qu'une seule fois sur l'ensemble de la page pour éviter les conflits. La création d'ancres en HTML implique donc l'ajout d'un attribut id à une balise HTML et la création d'un lien vers cet identifiant pour permettre la navigation rapide.
Relier votre ancre avec un lien hypertexte
Après avoir défini votre attribut id dans le code, revenez en mode visuel ou restez en mode code selon votre préférence. Localisez le texte ou l'élément qui servira de déclencheur pour votre lien d'ancrage. Créez un lien hypertexte classique en utilisant les balises appropriées avec l'attribut href, mais au lieu d'indiquer une URL complète, vous spécifierez uniquement le symbole dièse suivi de l'identifiant que vous avez précédemment créé. Cette syntaxe particulière avec le dièse indique au navigateur qu'il doit rechercher un élément possédant cet identifiant sur la page actuelle plutôt que de charger une nouvelle ressource. Il est également possible de créer un lien vers une ancre située sur une autre page en utilisant l'URL complète de la page suivie du nom de l'ancre. Cette technique s'avère particulièrement utile pour diriger les utilisateurs vers une section spécifique d'une page différente, par exemple depuis votre page d'accueil vers une partie précise de votre page de services. Les ancres peuvent également être utilisées dans le menu de WordPress pour diriger les utilisateurs vers une section spécifique d'une page, créant ainsi une expérience de navigation cohérente et intuitive.
Configurer des ancres avec le constructeur Divi
Le constructeur de pages Divi propose une interface visuelle sophistiquée qui simplifie grandement la création d'ancres tout en offrant des possibilités de personnalisation avancées. Cette méthode séduit particulièrement les utilisateurs qui privilégient une approche graphique sans sacrifier la puissance technique. Divi permet de créer des liens internes vers des sections spécifiques d'une même page ou d'une autre page, facilitant ainsi la navigation et améliorant le référencement de votre site. L'avantage principal réside dans l'intégration complète de cette fonctionnalité au sein de l'écosystème Divi, garantissant une compatibilité parfaite avec tous les modules et sections du constructeur.
Définir un ID CSS unique dans les paramètres avancés du module
Pour créer une ancre avec Divi, ouvrez d'abord les paramètres de la section, de la ligne ou du module qui constituera votre point d'arrivée. Cliquez sur l'icône d'engrenage pour accéder aux réglages complets de l'élément sélectionné. Naviguez ensuite vers l'onglet Avancé qui regroupe les options de personnalisation technique. Dans cet onglet, vous découvrirez une sous-section intitulée ID et classes CSS où se trouve spécifiquement le champ ID CSS. Renseignez dans ce champ un identifiant unique sans utiliser le symbole dièse, car Divi l'ajoutera automatiquement lors de la génération du code. Respectez les mêmes conventions de nommage que précédemment : utilisez uniquement des lettres et des chiffres sans accents, évitez de commencer par un chiffre et n'incluez aucun espace. Des identifiants comme temoignages-clients ou section3 fonctionneront parfaitement. L'identifiant est renseigné dans les réglages de la section ou du module, dans l'onglet avancé sous ID et classes CSS, permettant une organisation claire de vos ancres au sein de votre structure Divi.
Tester et valider vos liens d'ancrage sur la page
Après avoir défini votre ID CSS dans Divi, créez le lien qui pointera vers cette ancre. Sélectionnez un texte, un bouton ou tout autre module cliquable qui servira de déclencheur. Dans les paramètres de lien du module, que ce soit dans l'onglet Contenu pour un module Bouton ou dans les options de texte pour un module Texte, saisissez l'URL sous la forme du symbole dièse immédiatement suivi de l'identifiant CSS que vous avez créé. Divi possibilité de créer des liens sur du texte ou sur des modules entiers via l'onglet Lien, offrant ainsi une grande flexibilité dans la conception de votre navigation interne. Une fois le lien configuré, enregistrez vos modifications et prévisualisez votre page ou publiez-la pour effectuer des tests en conditions réelles. Cliquez sur votre lien d'ancrage et vérifiez que le défilement s'effectue correctement vers la section désirée avec une animation fluide. Si le lien ne fonctionne pas comme prévu, vérifiez que l'identifiant est bien unique sur la page et qu'il ne contient aucun caractère spécial non autorisé. Pour créer un lien vers une section dans une autre page, utilisez l'URL complète de la page cible suivie du symbole dièse et de votre ID CSS. Cette technique permet également de créer une table des matières manuelle en ajoutant un ID CSS à chaque section puis en créant une liste de liens pointant vers ces identifiants, améliorant ainsi considérablement la structure et la navigabilité de vos contenus longs. Les liens d'ancrage constituent un outil puissant pour créer des boutons de retour en haut de page, des menus pour sites one page, ou encore pour diriger l'attention des visiteurs vers des appels à l'action stratégiques positionnés à des emplacements précis de vos pages de conversion.