![You are currently viewing WordPress : Comment créer une Ancre avec Elementor [TUTORIEL]](https://www.webyneo.com/wp-content/uploads/tuto-wordpress-ancre-elementor.png)
Vous avez un site WordPress et vous rêvez de rediriger vos visiteurs exactement là où vous le souhaitez dans une page ou dans un article, mais la création d’une Ancre vous semble compliquée ?
Heureusement, Elementor a tout prévu et nous simplifie grandement la tâche !
Dans cet article, je vous explique tout et je vous montre comment créer très facilement une Ancre avec Elementor, vous n’avez ainsi qu’à vous laisser guider.
Pour commencer, qu'est-ce qu'une Ancre ?
Une Ancre c’est un système qui permet de rediriger vos lecteurs exactement là où vous le souhaitez dans une page ou dans un article.
Ils cliquent sur un lien et, hop, ils se retrouvent automatiquement à l’endroit voulu et peuvent poursuivre leur lecture, sans avoir à chercher cet emplacement par eux-mêmes.
Une Ancre est composée de deux parties :
- (1) Le lien (là où on clique pour se rendre quelque part)
- (2) L’ID (là où on pose l’ancre pour s’y rendre avec un identifiant (ID) pour la reconnaître)
Une Ancre c’est donc l’assemblage de ces deux éléments : le lien (1) et l’ID (2).
Dans quels cas utiliser une Ancre ?
On peut utiliser une Ancre dans plusieurs cas :
- Dans un élément du menu d’un site « One page », pour amener le lecteur à un endroit précis de la page d’accueil,
- Dans une même page pour pointer vers un élément plus bas dans le texte,
- Dans une page externe, pour amener le lecteur sur un endroit précis d’une autre page.
1 - Utiliser une Ancre dans un Menu one page
Certains sites sont ce qu’on appelle des sites « One page ». Ce qui veut dire que toutes les informations importantes du site se trouvent sur la page d’accueil.
On fait donc pointer les principaux éléments du menu sur cette page.
Pour que ce soit possible, on crée un lien (1) dans un élément du menu et un ID (2) à l’endroit qui nous intéresse, sur la page d’accueil.
2 - Utiliser une Ancre en Interne
On peut souhaiter créer une Ancre sur une même page, que ce soit pour créer un sommaire manuellement ou tout simplement pour permettre au lecteur de se rendre plus rapidement à un autre endroit de la page.
3 - Utiliser une Ancre en Externe
Enfin, on peut aussi avoir besoin de créer une Ancre qui pointe vers un endroit précis dans une autre page.
Ça permet de parler d’un élément qui se trouve dans un autre article ou une autre page et de rediriger le lecteur à l’endroit exact où se trouve cet élément.
C’est par exemple utilisé pour diriger vers un lexique ou un glossaire.
Comment intégrer une Ancre ?
Comme je vous l’ai dit plus haut, la création d’une Ancre se fait en deux parties :
- Le lien (là où on clique)
- L’ID (là où on pose l’ancre avec son ID pour indiquer que c’est là qu’on souhaite se rendre)
Pour bien faire les choses, on va les faire à l’envers : on commence par indiquer où on souhaite pointer, donc on commence par poser l’ID (2) à l’endroit souhaité et, ensuite, on créera le lien (1).
On fait ça dans cet ordre, car c’est plus pratique de d’abord créer l’identifiant (ID) puisqu’on va le recopier dans le lien.
1 - Insérer l'ID
Pour créer l’ID, on choisit la page (ou l’article) vers laquelle on souhaite diriger le visiteur et on la modifie avec Elementor.
Une fois qu’on est sur l’écran de modification, on se positionne là où on souhaite mettre l’ID et on cherche « Ancre de menu » dans les éléments à gauche.
On fait glisser l’élément à l’endroit où on souhaite diriger le visiteur. Plus précisément, on le glisse au-dessus de la partie souhaitée.
Dans mon cas, je souhaite que les visiteurs arrivent directement sur mon chapitre « Troisième Titre », donc je glisse l’ancre au-dessus de mon titre.
Maintenant, on choisit un ID.
Attention, un ID doit être simple : lettres alphabétiques, chiffres, tirets, sans accents ni espace.
Pour l’exemple, vu que je souhaite faire descendre mon lecteur jusqu’au chapitre « Troisième Titre », je crée l’ID : troisieme
Et voilà, on a donc notre ID positionné et prêt à recevoir de la visite. Maintenant on va créer le lien qui va pointer vers cet emplacement.
2 - Créer le lien
Il s’agit de créer un lien classique, mais avec une petite particularité supplémentaire.
En effet, pour indiquer qu’il faut trouver un emplacement spécifique dans une page, on utilise le symbole #.
Comme je vous le disais, pour le lien, on a trois possibilités : on peut le mettre dans un menu, sur la même page que l’ID ou sur une autre page.
Créer une ancre dans un menu
Pour faire pointer un élément du menu vers un endroit précis de la page d’accueil, il faut sortir de la page où on a inséré l’ID afin de revenir sur le tableau de bord et se rendre dans « Apparence » puis « Menus ».
Ensuite, il faut sélectionner votre menu principal.
Dans le menu de gauche, vous sélectionnez la section « Liens personnalisés ».
Dans la case pour l’URL, vous indiquez : l’url du site, un slash (une barre oblique pour créer une séparation) puis l’ID précédé du symbole #.
Dans le texte du lien, vous indiquez : le texte qui sera visible dans le menu.
Par exemple, sur le site https://www.clairelota.com je souhaite que l’élément du menu « L’autrice » pointe vers l’ID « autrice » qui se trouve sur ma page d’accueil, j’indique donc ceci :
https://www.clairelota.com/#autrice
On retrouve bien, dans l’ordre : l’url, le slash, le # et l’ID.
Quand c’est fait, vous cliquez sur le bouton « Ajouter au menu ».
L’élément se retrouve dans le menu :
Vous le positionnez où vous le souhaitez :
Et vous cliquez sur « Enregistrer le menu ».
Maintenant vous pouvez retourner à l’accueil de votre site pour tester votre ancre : vous cliquez sur l’élément dans le menu et vous voyez que vous êtes bien redirigé.e à l’emplacement souhaité sur la page d’accueil !
Créer une Ancre en interne, dans la même page ou article
On peut créer une ancre sur un bout de texte, sur une image ou sur un bouton.
Pour ça, on sélectionne l’élément qu’on souhaite rendre cliquable et, dans le lien à insérer, on entre notre ID précédé du symbole #.
Pour mon exemple, ça donne : #troisieme
On n’a pas besoin de préciser l’url puisqu’on reste sur la même page.
Insérer une ancre de lien sur un bout de texte :
Insérer une ancre de lien sur une image intégrée au texte :
Insérer une ancre de lien sur un élément image :
Puis :
Pour un bouton :
Créer une Ancre en externe, vers une autre page ou article
On fait exactement la même chose que pour un lien en interne, sauf qu’il faut aussi préciser sur quelle page on souhaite se rendre.
On va donc créer le lien sur la page souhaitée (qui peut se trouver sur un autre site) et, au lieu d’indiquer l’ID seul, on indique l’url de la page ou de l’article vers où on souhaite rediriger le visiteur, on y ajoute un « slash » puis notre ID précédé du #, ce qui donne pour mon exemple :
https://www.webyneo.com/article-demonstration/#troisieme
Comme ça, le visiteur se rendra sur la page indiquée et plus précisément à l’endroit où se trouve notre ID sur cette page.
Voilà, vous savez faire une ancre en interne, en externe ou dans un menu !
À retenir pour faire une bonne Ancre
Voici les éléments à retenir pour faire une bonne Ancre.
- Dans le lien, ne pas oublier le # devant l’ID et bien les coller,
- Dans un lien complet, ne pas oublier le « slash » (/) de séparation entre l’url et l’ID,
- L’ID doit être unique sur la page pour ne pas le confondre avec un autre si on en crée plusieurs,
- L’ID doit être simple : lettres alphabétiques, chiffres, tirets, sans accents ni espace,
- Copiez-collez votre ID plutôt que de le copier à la main dans le lien pour éviter toute erreur.
Si votre Ancre ne fonctionne pas, vérifiez ces éléments un par un pour trouver le problème.
Vous pouvez aussi suivre le tutoriel en vidéo, ça vous aidera peut-être à trouver plus facilement ce qui ne va pas !
Tutoriel vidéo "Comment créer une ancre avec Elementor"
Dans le cas où vous n’y arrivez toujours pas malgré tout, n’hésitez pas à me le signaler en commentaire de cet article et je vous aiderai à trouver la solution !
Bonsoir, j’ai intégré une ancre et elle ne fonctionne pas. J’ai un message « Safari ne parvient pas à trouver le serveur »
Safari ne peut pas ouvrir la page « tâche » car Safari ne peut trouver le serveur « xn--tche-boa »
Une autre ancre que j’ai créée également aujourd’hui ne réagit pas du tout.
Pouvez-vous m’aider. Merci.
Bonjour Annie,
Je ne travaille que sur PC, donc je ne connais pas le navigateur Safari et son fonctionnement.
Avez-vous la possibilité de tester sur un autre navigateur ? Ça permettra déjà de voir si l’ancre fonctionne bien. Ensuite, il restera à voir pourquoi ça ne fonctionne pas sur Safari précisément.
Si vous voulez m’envoyer la page sur laquelle vous testez l’ancre (si elle est publiée et non en brouillon) pour que je regarde si ça fonctionne de mon côté sur différents navigateurs PC, vous pouvez la poster ici ou me l’envoyer à l’adresse contact@webyneo.com pour qu’on regarde ça ensemble.
Gwenn.