{"id":6957,"date":"2021-10-03T09:44:46","date_gmt":"2021-10-03T07:44:46","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/liens-dancrage-dans-elementor-pour-naviguer-au-sein-dune-meme-page-dans-wordpress\/"},"modified":"2026-09-02T22:53:15","modified_gmt":"2026-09-02T20:53:15","slug":"liens-dancrage-dans-elementor-pour-naviguer-au-sein-dune-meme-page-dans-wordpress","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/fr\/liens-dancrage-dans-elementor-pour-naviguer-au-sein-dune-meme-page-dans-wordpress\/","title":{"rendered":"Liens d’ancrage dans Elementor pour naviguer au sein d’une m\u00eame page dans WordPress"},"content":{"rendered":"\n

Qu’est-ce qu’une ancre ou Anchor en HTML ?<\/h2>\n\n

L’anchor ou ancrage est le lien de destination que nous sp\u00e9cifions lorsque nous cr\u00e9ons un hyperlien. Ce sont des liens qui nous m\u00e8nent vers une autre page web, ouvrent un e-mail, un t\u00e9l\u00e9phone, t\u00e9l\u00e9chargent un fichier ou, comme nous allons le voir dans ce sujet, nous m\u00e8nent vers un autre point d’une m\u00eame page. Voyons un exemple : <\/p>\n\n

<a href=\"https:\/\/lacolmenatecnologica.com\/<\/mark>\">La Colmena Tecnol\u00f3gica<\/a><\/code><\/pre>\n\n
R\u00e9sultat :<\/strong> La Colmena Tecnol\u00f3gica<\/a><\/p>\n\n
Dans cet exemple de code HTML, nous voyons comment le texte qui se trouve entre les balises <a><\/strong> (ouverture) et <\/a><\/strong> (fermeture) contiendra un hyperlien vers l’URL https:\/\/lacolmenatecnologica.com\/<\/em><\/span>. C’est-\u00e0-dire qu’en cliquant sur le texte La Colmena Tecnol\u00f3gica<\/strong>, le navigateur nous enverra vers la destination que nous aurons sp\u00e9cifi\u00e9e dans l’attribut href<\/strong>. <\/p>\n\n
Bien entendu, nous n’avons pas besoin de conna\u00eetre le HTML pour cr\u00e9er un hyperlien avec Elementor, mais il est utile de le savoir.<\/p>\n\n
Types d’ancre<\/h2>\n\n
Dans le tableau suivant, vous pouvez voir en vert plusieurs types d’ancres, certaines n\u00e9cessitent un pr\u00e9fixe comme l’e-mail qui doit \u00eatre pr\u00e9c\u00e9d\u00e9 de mailto:<\/strong> ou un t\u00e9l\u00e9phone qui doit \u00eatre pr\u00e9c\u00e9d\u00e9 de tel:<\/strong>. Pour forcer le t\u00e9l\u00e9chargement d’un fichier au lieu de sa visualisation, nous devrons ajouter l’attribut download<\/strong>. <\/p>\n\n
Type<\/th>Code HTML<\/th><\/tr><\/thead>
URL ou lien<\/a><\/td><a href=\u00a0\u00bbhttps:\/\/lacolmenatecnologica.com\/<\/mark>\u00ab\u00a0>Page web<\/a><\/td><\/tr>
Adresse e-mail<\/a><\/td><a href=\u00a0\u00bbmailto:mario@lacolmenatecnologica.com<\/span><\/mark>\u00ab\u00a0>Page web<\/a><\/td><\/tr>
T\u00e9l\u00e9phone<\/a><\/td><a href=\u00a0\u00bbtel:+34665123123<\/mark>\u00ab\u00a0>Page web<\/a><\/td><\/tr>
T\u00e9l\u00e9charger un fichier<\/a><\/td><a href=\u00a0\u00bbhttps:\/\/lacolmenatecnologica.com\/AFI_grafico.pdf<\/mark>\u00a0\u00bb download=\u00a0\u00bbAFI Gr\u00e1fico\u00a0\u00bb<\/mark>>Page web<\/a><\/td><\/tr>
M\u00eame page<\/a><\/td><a href=\u00a0\u00bb#inicio<\/mark><\/span>\u00ab\u00a0>Page web<\/a><\/td><\/tr>
Ancre vers une autre page<\/a> <\/td><a href=\u00a0\u00bbhttps:\/\/lacolmenatecnologica.com\/nombre-de-la-pagina\/#inicio<\/mark><\/mark>\u00ab\u00a0>Page web<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n
Ajouter un lien vers la m\u00eame page avec Elementor<\/h2>\n\n
Pour ajouter un lien qui m\u00e8ne vers un autre point de la m\u00eame page, nous devrons suivre ces \u00e9tapes.<\/p>\n\n
    \n
  1. Cliquez sur le widget vers lequel vous souhaitez vous d\u00e9placer lors du clic, il peut s’agir d’une section ou de n’importe quel widget au sein de la page que nous \u00e9ditons. Dans cet exemple, nous allons utiliser une section, nous cliquons donc sur son onglet pour la s\u00e9lectionner  \"Sélecteur<\/li>\n\n\n\n
  2. Ensuite, dans la colonne de gauche, cliquez sur l’onglet Avanc\u00e9<\/strong>.<\/li>\n\n\n\n
  3. Dans la section Avanc\u00e9<\/strong> de l’onglet Avanc\u00e9<\/strong>, saisissez un nom d’identification dans le champ ID de CSS<\/strong>.Recommandations pour le nom d’ID de CSS :<\/strong>\n
      \n
    • Toujours \u00e9crire en minuscules.<\/li>\n\n\n\n
    • Remplacer les espaces par un tiret du milieu ou du bas, exemple : que_podemos<\/strong><\/li>\n\n\n\n
    • Utiliser uniquement des caract\u00e8res alphab\u00e9tiques et des chiffres.<\/li>\n\n\n\n
    • Ne nous trompons pas, le signe #<\/strong> n’est pas n\u00e9cessaire ici, nous le mettrons ensuite dans l’hyperlien.<\/li>\n\n\n\n
    • Ce nom est unique dans toute la page, nous ne devons pas l’utiliser \u00e0 nouveau pour d’autres \u00e9l\u00e9ments. Un ID d\u00e9finit un \u00e9l\u00e9ment unique. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
      \n
      \"Définir\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
        \n
      1. Maintenant, nous cliquerons sur l’\u00e9l\u00e9ment de notre page o\u00f9 nous souhaitons ajouter l’hyperlien, afin que lorsque nous cliquons, il se d\u00e9place vers la section \u00e0 laquelle nous avons attribu\u00e9 l’ID que_podemos<\/strong>. Nous pouvons placer ce lien dans n’importe quel widget qui accepte les liens ou dans un texte via l’\u00e9diteur de texte. Dans ce cas, nous allons utiliser un widget d’Ic\u00f4ne<\/strong> pour ajouter ce lien vers la page elle-m\u00eame.  <\/li>\n\n\n\n
      2. Dans la colonne de gauche, dans l’onglet Contenu<\/strong>, saisissez le nom de l’ID dans le champ Lien<\/strong>, cette fois-ci, pr\u00e9c\u00e9d\u00e9 du signe di\u00e8se #<\/strong>. Dans ce cas : #que_podemos<\/strong> <\/li>\n<\/ol>\n
        \n
        \"Lien\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
          \n
        1. Une fois cela fait, nous enregistrons et notre lien vers la m\u00eame page est termin\u00e9.<\/li>\n<\/ol>\n\n
          Nous pouvons placer ce m\u00eame lien dans d’autres widgets ou textes de notre page pour qu’ils renvoient vers cette section. Ce type de liens est g\u00e9n\u00e9ralement utilis\u00e9 dans les pages dont le contenu est \u00e9tendu pour faciliter l’acc\u00e8s de l’utilisateur au contenu dont il a besoin. De plus, nous pouvons \u00e9galement utiliser l’hyperlien complet dans une autre page, comme nous le voyons ci-dessous, pour ouvrir une page diff\u00e9rente et se d\u00e9placer vers le point que nous souhaitons :  <\/p>\n\n
          https:\/\/lacolmenatecnologica.com\/#que_podemos<\/span><\/code><\/pre>\n\n
          Il suffit d’ajouter \u00e0 la fin de l’URL de la page l’ID pr\u00e9c\u00e9d\u00e9 du signe di\u00e8se #. Nous pouvons maintenant utiliser cette ancre dans n’importe quelle autre page pour mener l’utilisateur non seulement vers une page, mais \u00e9galement vers le point pr\u00e9cis de cette page que nous souhaitons. <\/p>\n","protected":false},"excerpt":{"rendered":"
          Qu’est-ce qu’une ancre ou Anchor en HTML ? L’anchor ou ancrage est le lien de destination que nous sp\u00e9cifions lorsque nous cr\u00e9ons un hyperlien. Ce sont des liens qui nous m\u00e8nent vers une autre page web, ouvrent un e-mail, un t\u00e9l\u00e9phone, t\u00e9l\u00e9chargent un fichier ou, comme nous allons le voir dans ce sujet, nous m\u00e8nent […]<\/p>\n","protected":false},"author":4,"featured_media":6958,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Liens d\u2019ancrage Elementor : naviguez sur WordPress","_seopress_titles_desc":"Qu'est-ce qu'une ancre ou Anchor en HTML ? L'anchor ou ancrage est le lien de destination que nous sp\u00e9cifions lorsque nous cr\u00e9ons un hyperlien. Ce sont des liens qui nous m\u00e8nent \u00e0\u2026","_seopress_robots_index":"","_seopress_robots_follow":"","_seopress_robots_imageindex":"","_seopress_robots_snippet":"","_seopress_robots_primary_cat":"none","_seopress_robots_breadcrumbs":"","_seopress_robots_freeze_modified_date":"","_seopress_robots_custom_modified_date":"","_seopress_robots_canonical":"","_seopress_social_fb_title":"","_seopress_social_fb_desc":"","_seopress_social_fb_img":"","_seopress_social_fb_img_attachment_id":0,"_seopress_social_fb_img_width":0,"_seopress_social_fb_img_height":0,"_seopress_social_twitter_title":"","_seopress_social_twitter_desc":"","_seopress_social_twitter_img":"","_seopress_social_twitter_img_attachment_id":0,"_seopress_social_twitter_img_width":0,"_seopress_social_twitter_img_height":0,"_seopress_redirections_value":"","_seopress_redirections_enabled":"","_seopress_redirections_enabled_regex":"","_seopress_redirections_logged_status":"both","_seopress_redirections_param":"","_seopress_redirections_type":301,"_seopress_analysis_target_kw":"","_seopress_news_disabled":"","_seopress_video_disabled":"","_seopress_video":[],"_seopress_pro_schemas_manual":[],"_seopress_pro_rich_snippets_disable_all":"","_seopress_pro_rich_snippets_disable":[],"_seopress_pro_schemas":[],"footnotes":"","_bricks_page_content_2":[],"_bricks_page_header_2":[],"_bricks_page_footer_2":[]},"categories":[400],"tags":[431,428],"class_list":["post-6957","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-conception-web","tag-personnalisation-de-wordpress"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6957","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/comments?post=6957"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6957\/revisions"}],"predecessor-version":[{"id":6959,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/posts\/6957\/revisions\/6959"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/6958"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=6957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/categories?post=6957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/tags?post=6957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}