• Qu’est-ce qu’une ancre en HTML ?
• Types d’ancrage
• Ajouter un lien vers la même page avec Elementor

Qu’est-ce qu’une ancre en HTML ?

L’ancre est le lien cible que nous spécifions lorsque nous créons un lien hypertexte. Il s’agit de liens qui permettent d’accéder à une autre page web, d’ouvrir un e-mail, un téléphone, de télécharger un fichier ou, comme nous allons le voir dans cette rubrique, de se rendre à un autre endroit de la même page. Prenons un exemple :

<a href="https://lacolmenatecnologica.com/">La Colmena Tecnológica</a>

Résultat : La ruche technologique

Dans cet exemple de code HTML, nous voyons comment le texte entre les balises <à > (ouverture) et </à > (fermeture) contiendra un lien hypertexte vers l’URL https://lacolmenatecnologica.com/ . En d’autres termes, lorsque vous cliquez sur le texte La Colmena Tecnológica, le navigateur vous envoie à la destination que vous avez spécifiée dans l’attribut href.

Bien sûr, il n’est pas nécessaire de connaître le langage HTML pour créer un lien hypertexte avec Elementor, mais cela ne fait pas de mal de le savoir.

Types d’ancrage

Dans le tableau suivant, vous pouvez voir en couleur verte plusieurs types d’ancres, certaines d’entre elles nécessitant un préfixe comme l’email qui doit être précédé de mailto : ou un téléphone qui doit être précédé de tel :. Pour forcer le téléchargement d’un fichier au lieu de son affichage, l’attribut download doit être ajouté.

Ajouter un lien vers la même page avec Elementor

Pour ajouter un lien vers un autre point de la même page, procédez comme suit.

1. Nous cliquons sur le widget que nous voulons faire défiler lorsque nous cliquons, il peut s’agir d’une section ou de n’importe quel widget dans la page que nous sommes en train d’éditer. Dans cet exemple, nous allons utiliser une section, nous cliquons donc sur son onglet pour la sélectionner.
2. Dans la colonne de gauche, cliquez sur l’onglet Avancé.
3. Dans la section Avancé de l’onglet Avancé, nous entrons un nom d’identification dans le champ CSS ID.
   Recommandations pour le nom de l’ ID CSS:
   • Il faut toujours écrire en minuscules.
   • Remplacer les espaces par un trait d’union ou un trait de soulignement, par exemple : que_podemos
   • N’utilisez que des caractères alphabétiques et des chiffres.
   • Ne nous méprenons pas, le signe # n’est pas nécessaire ici, nous le mettrons plus tard dans l’hyperlien.
   • Ce nom est unique pour toute la page, il ne faut pas le réutiliser pour d’autres éléments. Un identifiant définit un élément unique.

4. Nous allons maintenant cliquer sur l’élément de notre page où nous voulons ajouter l’hyperlien, de sorte que lorsque nous cliquerons dessus, il se déplacera vers la section à laquelle nous avons attribué l’ID que_podemos. Nous pouvons placer ce lien dans n’importe quel widget qui supporte les liens ou dans un texte via l’éditeur de texte. Dans ce cas, nous allons utiliser un widget Icône pour ajouter ce lien à la page elle-même.
5. Dans la colonne de gauche, sous l’onglet Contenu, saisissez le nom de l’identifiant dans le champ Lien, désormais précédé du signe dièse #. Dans ce cas : #what_we_can

6. Une fois cela fait, nous sauvegardons et nous avons notre lien vers la même page terminé.

Nous pouvons placer ce même lien dans d’autres widgets ou textes de notre page afin qu’ils renvoient à cette section. Ce type de lien est souvent utilisé sur des pages au contenu étendu afin de permettre aux utilisateurs d’accéder plus facilement au contenu dont ils ont besoin. En outre, nous pouvons également utiliser l’intégralité du lien hypertexte sur une autre page, comme indiqué ci-dessous, afin d’ouvrir une autre page et de faire défiler les pages jusqu’au point souhaité :

https://lacolmenatecnologica.com/#que_podemos

Il suffit d’ajouter l’ID précédé du signe dièse # à la fin de l’URL de la page. Nous pouvons maintenant utiliser cette ancre sur n’importe quelle autre page pour amener l’utilisateur non seulement à une page, mais aussi à l’endroit précis de cette page que nous voulons.