Imaginez la possibilité de se déplacer instantanément là où vous voudriez vous trouver. Ce serait génial, non ? C’est ce que nous proposent les ancres. Elles permettent à l’internaute d’être redirigé vers une section d’une page. La personne n’a plus besoin de scroller pour atteindre le contenu. Nous allons donc voir dans ce tutoriel comment faire une ancre WordPress avec Elementor rapidement.
Comment faire une ancre dans Elementor ?
Tout d’abord, pour faire une ancre WordPress sur Elementor, il faut donner un identifiant à la section de destination. C’est la partie de votre page où vous voulez rediriger l’internaute. Ensuite, vous devez créer un lien vers cette section pour que le visiteur puisse l’atteindre en cliquant sur un lien ou un bouton. Voyons ces 2 étapes.
1/ Ajouter un nom à l’ID de la section de destination
Ouvrez votre article créé avec Elementor et sélectionnez la section que vous souhaitez atteindre. Pour cela, cliquez sur les petits points du bloc conteneur, comme le montre cette image :
Cliquez ensuite sur l’onglet « Avancé » situé dans la colonne de gauche comme indiqué sur la capture ci-dessous.
Indiquez ensuite un nom dans « ID de CSS » pour l’identifiant, sans espace. Vous pouvez mettre un tiret ou ne pas mettre d’espace entre les mots. Évitez aussi les caractères spéciaux et les accents. Le nom sera présent dans une URL (le lien). Comme ceci:
Profitez de l’occasion pour insérer un mot-clé correspondant à la section ou donnez simplement le même nom que le titre de la section. Ce n’est pas obligé, vous pouvez mettre le nom que vous voulez, mais ça permet d’avoir une ancre optimisée.
2/ Ajouter un lien vers cette section
Vous pouvez créer un lien sur un bouton, une image ou un texte pour que lorsque l’on clique dessus, on est redirigé vers la section de la page. Par exemple pour un texte, créez un nouveau paragraphe en insérant une phrase qui sera destinée à être cliquée comme le montre l’image ci-dessous. Ce sera votre ancre de lien Elementor.
Sélectionnez ensuite le texte à cliquable et cliquez sur l’icone « chaîne » pour indiquer le lien, comme ceci:
L’URL doit commencer par un dièse « # », suivi du nom exact que vous avez donné pour identifiant à votre section (ID de CSS). Dans mon exemple, j’ai mis comme ID de section le nom « section2 » et je retrouve donc ce même nom comme URL pour y accéder.