Qu’est-ce qu’une ancre ou Anchor en HTML ?
L’anchor ou ancrage est le lien de destination que nous spécifions lorsque nous créons un hyperlien. Ce sont des liens qui nous mènent vers une autre page web, ouvrent un e-mail, un téléphone, téléchargent un fichier ou, comme nous allons le voir dans ce sujet, nous mènent vers un autre point d’une même page. Voyons un exemple :
<a href="https://lacolmenatecnologica.com/">La Colmena Tecnológica</a>Résultat : La Colmena Tecnológica
Dans cet exemple de code HTML, nous voyons comment le texte qui se trouve entre les balises <a> (ouverture) et </a> (fermeture) contiendra un hyperlien vers l’URL https://lacolmenatecnologica.com/. C’est-à-dire qu’en cliquant sur le texte La Colmena Tecnológica, le navigateur nous enverra vers la destination que nous aurons spécifiée dans l’attribut href.
Bien entendu, nous n’avons pas besoin de connaître le HTML pour créer un hyperlien avec Elementor, mais il est utile de le savoir.
Types d’ancre
Dans le tableau suivant, vous pouvez voir en vert plusieurs types d’ancres, certaines nécessitent un préfixe comme l’e-mail 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 sa visualisation, nous devrons ajouter l’attribut download.
| Type | Code HTML |
|---|---|
| URL ou lien | <a href= »https://lacolmenatecnologica.com/« >Page web</a> |
| Adresse e-mail | <a href= »mailto:mario@lacolmenatecnologica.com« >Page web</a> |
| Téléphone | <a href= »tel:+34665123123« >Page web</a> |
| Télécharger un fichier | <a href= »https://lacolmenatecnologica.com/AFI_grafico.pdf » download= »AFI Gráfico »>Page web</a> |
| Même page | <a href= »#inicio« >Page web</a> |
| Ancre vers une autre page | <a href= »https://lacolmenatecnologica.com/nombre-de-la-pagina/#inicio« >Page web</a> |
Ajouter un lien vers la même page avec Elementor
Pour ajouter un lien qui mène vers un autre point de la même page, nous devrons suivre ces étapes.
- Cliquez sur le widget vers lequel vous souhaitez vous déplacer lors du clic, il peut s’agir d’une section ou de n’importe quel widget au sein de la page que nous éditons. Dans cet exemple, nous allons utiliser une section, nous cliquons donc sur son onglet pour la sélectionner
- Ensuite, dans la colonne de gauche, cliquez sur l’onglet Avancé.
- Dans la section Avancé de l’onglet Avancé, saisissez un nom d’identification dans le champ ID de CSS.
Recommandations pour le nom d’ID de CSS :- Toujours écrire en minuscules.
- Remplacer les espaces par un tiret du milieu ou du bas, exemple : que_podemos
- Utiliser uniquement des caractères alphabétiques et des chiffres.
- Ne nous trompons pas, le signe # n’est pas nécessaire ici, nous le mettrons ensuite dans l’hyperlien.
- Ce nom est unique dans toute la page, nous ne devons pas l’utiliser à nouveau pour d’autres éléments. Un ID définit un élément unique.
- Maintenant, nous cliquerons sur l’élément de notre page où nous souhaitons ajouter l’hyperlien, afin que lorsque nous cliquons, il se déplace vers la section à laquelle nous avons attribué l’ID que_podemos. Nous pouvons placer ce lien dans n’importe quel widget qui accepte les liens ou dans un texte via l’éditeur de texte. Dans ce cas, nous allons utiliser un widget d’Icône pour ajouter ce lien vers la page elle-même.
- Dans la colonne de gauche, dans l’onglet Contenu, saisissez le nom de l’ID dans le champ Lien, cette fois-ci, précédé du signe dièse #. Dans ce cas : #que_podemos
- Une fois cela fait, nous enregistrons et notre lien vers la même page est terminé.
Nous pouvons placer ce même lien dans d’autres widgets ou textes de notre page pour qu’ils renvoient vers cette section. Ce type de liens est généralement utilisé dans les pages dont le contenu est étendu pour faciliter l’accès de l’utilisateur au contenu dont il a besoin. De plus, nous pouvons également utiliser l’hyperlien complet dans une autre page, comme nous le voyons ci-dessous, pour ouvrir une page différente et se déplacer vers le point que nous souhaitons :
https://lacolmenatecnologica.com/#que_podemosIl suffit d’ajouter à la fin de l’URL de la page l’ID précédé du signe dièse #. Nous pouvons maintenant utiliser cette ancre dans n’importe quelle autre page pour mener l’utilisateur non seulement vers une page, mais également vers le point précis de cette page que nous souhaitons.