{"id":34719,"date":"2021-10-03T09:44:46","date_gmt":"2021-10-03T07:44:46","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/lancre-dans-elementor-renvoie-a-sa-propre-page\/"},"modified":"2023-03-30T12:22:40","modified_gmt":"2023-03-30T10:22:40","slug":"lancre-dans-elementor-renvoie-a-sa-propre-page","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/fr\/elementor-academy-temas\/lancre-dans-elementor-renvoie-a-sa-propre-page\/","title":{"rendered":"L&#8217;ancre dans Elementor renvoie \u00e0 sa propre page"},"content":{"rendered":"\n<ul class=\"wp-block-advgb-summary advgb-toc alignnone\"><li class=\"toc-level-1\"><a href=\"#inicio\">Qu&#8217;est-ce qu&#8217;une ancre en HTML ?<\/a><\/li><li class=\"toc-level-1\"><a href=\"#tipos-de-ancla-04956743-628a-4bdd-ba0e-2fa31dd52c76\">Types d&#8217;ancrage<\/a><\/li><li class=\"toc-level-1\"><a href=\"#anadir-un-enlace-a-la-misma-pagina-con-elementor-59fe820b-b4bb-4981-a65a-2ff5aeab9003\">Ajouter un lien vers la m\u00eame page avec Elementor<\/a><\/li><\/ul>\n<h2 class=\"wp-block-heading\" id=\"inicio\">Qu&#8217;est-ce qu&#8217;une ancre en HTML ?<\/h2>\n\n<p>L&#8217;ancre est le lien cible que nous sp\u00e9cifions lorsque nous cr\u00e9ons un lien hypertexte. Il s&#8217;agit de liens qui permettent d&#8217;acc\u00e9der \u00e0 une autre page web, d&#8217;ouvrir un e-mail, un t\u00e9l\u00e9phone, de t\u00e9l\u00e9charger un fichier ou, comme nous allons le voir dans cette rubrique, de se rendre \u00e0 un autre endroit de la m\u00eame page. Prenons un exemple :<\/p>\n\n<pre class=\"wp-block-code\"><code>&lt;a href=\"<span style=\"color:#23a455\" class=\"has-inline-color\">https:\/\/lacolmenatecnologica.com\/<\/span>\"&gt;La Colmena Tecnol\u00f3gica&lt;\/a&gt;<\/code><\/pre>\n\n<p><strong>R\u00e9sultat :<\/strong> <a href=\"https:\/\/lacolmenatecnologica.com\/fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">La ruche technologique<\/a><\/p>\n\n<p>Dans cet exemple de code HTML, nous voyons comment le texte entre les balises <strong>&lt;\u00e0<\/strong> <strong>&gt; (ouverture) et<\/strong> <strong>&lt;\/\u00e0<\/strong> <strong>&gt; (fermeture) contiendra un lien hypertexte vers l&#8217;URL<\/strong> <span class=\"has-inline-color has-ast-global-color-0-color\">\n  <em>https:\/\/lacolmenatecnologica.com\/<\/em>\n<\/span>. En d&#8217;autres termes, lorsque vous cliquez sur le texte <strong>La Colmena Tecnol\u00f3gica<\/strong>, le navigateur vous envoie \u00e0 la destination que vous avez sp\u00e9cifi\u00e9e dans l&#8217;attribut <strong>href<\/strong>.<\/p>\n\n<p>Bien s\u00fbr, il n&#8217;est pas n\u00e9cessaire de conna\u00eetre le langage HTML pour cr\u00e9er un lien hypertexte avec Elementor, mais cela ne fait pas de mal de le savoir.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"tipos-de-ancla-04956743-628a-4bdd-ba0e-2fa31dd52c76\">Types d&#8217;ancrage<\/h2>\n\n<p>Dans le tableau suivant, vous pouvez voir en couleur verte plusieurs types d&#8217;ancres, certaines d&#8217;entre elles n\u00e9cessitant un pr\u00e9fixe comme l&#8217;email qui doit \u00eatre pr\u00e9c\u00e9d\u00e9 de <strong>mailto :<\/strong> ou un t\u00e9l\u00e9phone qui doit \u00eatre pr\u00e9c\u00e9d\u00e9 de <strong>tel :<\/strong>. Pour forcer le t\u00e9l\u00e9chargement d&#8217;un fichier au lieu de son affichage, l&#8217;attribut <strong>download<\/strong> doit \u00eatre ajout\u00e9.<\/p>\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Type<\/th><th>Code HTML<\/th><\/tr><\/thead><tbody><tr><td><a href=\"https:\/\/lacolmenatecnologica.com\/fr\/\" target=\"_blank\" rel=\"noreferrer noopener\">URL ou lien<\/a><\/td><td>&lt;a href=<span style=\"color:#23a455\" class=\"has-inline-color\">&#8220;https:\/\/lacolmenatecnologica.com\/&#8221;<\/span>&gt;Website&lt;\/a&gt;<\/td><\/tr><tr><td><a href=\"mailto:mario@lacolmenatecnologica.com\">Adresse \u00e9lectronique<\/a><\/td><td> &lt;a href=<span style=\"color:#23a455\" class=\"has-inline-color\"><span style=\"color:#23a455\" class=\"has-inline-color\">&#8220;mailto:mario@lacolmenatecnologica.com<\/span><\/span><span style=\"color:#23a455\" class=\"has-inline-color\"><\/span>&#8220;&gt;Website&lt;\/a&gt; <\/td><\/tr><tr><td><a href=\"tel:+34665123123\">T\u00e9l\u00e9phone<\/a><\/td><td> &lt;a href=<span style=\"color:#23a455\" class=\"has-inline-color\">&#8220;tel:+34665123123<\/span>&#8220;&gt;Website&lt;\/a&gt;  <\/td><\/tr><tr><td><a download=\"AFI Gr&#xE1;fico\" href=\"https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2020\/12\/AFI_grafico_2020_es.pdf\">T\u00e9l\u00e9charger le fichier<\/a><\/td><td> &lt;a href=<span style=\"color:#23a455\" class=\"has-inline-color\">&#8220;https:\/\/lacolmenatecnologica.com\/AFI_grafico.pdf&#8221;<\/span> <span style=\"color:#ff0000\" class=\"has-inline-color\">download=&#8221;AFI Graph&#8221;<\/span>&gt;Website&lt;\/a&gt;   <\/td><\/tr><tr><td><a href=\"#inicio\">M\u00eame page<\/a><\/td><td> &lt;a href=<span style=\"color:#23a455\" class=\"has-inline-color\">&#8220;#home<\/span><span style=\"color:#23a455\" class=\"has-inline-color\"><\/span>&#8220;&gt;Website&lt;\/a&gt; <\/td><\/tr><tr><td><a href=\"https:\/\/lacolmenatecnologica.com\/#inicio\" target=\"_blank\" rel=\"noreferrer noopener\">Ancrage \u00e0 une autre page<\/a> <\/td><td> &lt;a href=<mark style=\"background-color:rgba(0, 0, 0, 0);color:#23a455\" class=\"has-inline-color\">&#8220;https:\/\/lacolmenatecnologica.com\/nombre-de-la-pagina\/#inicio<\/mark><mark style=\"background-color:rgba(0, 0, 0, 0);color:#23a455\" class=\"has-inline-color\"><\/mark>&#8220;&gt;Website&lt;\/a&gt; <\/td><\/tr><\/tbody><\/table><\/figure>\n<h2 class=\"wp-block-heading\" id=\"anadir-un-enlace-a-la-misma-pagina-con-elementor-59fe820b-b4bb-4981-a65a-2ff5aeab9003\">Ajouter un lien vers la m\u00eame page avec Elementor<\/h2>\n\n<p>Pour ajouter un lien vers un autre point de la m\u00eame page, proc\u00e9dez comme suit.<\/p>\n\n<ol class=\"wp-block-list\"><li>Nous cliquons sur le widget que nous voulons faire d\u00e9filer lorsque nous cliquons, il peut s&#8217;agir d&#8217;une section ou de n&#8217;importe quel widget dans la page que nous sommes en train d&#8217;\u00e9diter. Dans cet exemple, nous allons utiliser une section, nous cliquons donc sur son onglet pour la s\u00e9lectionner.  <img decoding=\"async\" width=\"90\" height=\"21\" class=\"wp-image-16379\" style=\"width: 90px;\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/08\/selector-de-seccion-elementor.png?strip=all&quality=92&webp=92&avif=92&resize=90%2C21\" alt=\"S&#xE9;lecteur de section Elementor\"\/><\/li><li>Dans la colonne de gauche, cliquez sur l&#8217;onglet <strong>Avanc\u00e9<\/strong>.<\/li><li>Dans la section <strong>Avanc\u00e9<\/strong> de l&#8217;onglet <strong>Avanc\u00e9<\/strong>, nous entrons un nom d&#8217;identification dans le champ <strong>CSS ID<\/strong>.<br\/>Recommandations pour le nom de l&#8217;<strong> ID CSS<\/strong>:<ul><li>Il faut toujours \u00e9crire en minuscules.<\/li><li>Remplacer les espaces par un trait d&#8217;union ou un trait de soulignement, par exemple : <strong>que_podemos<\/strong><\/li><li>N&#8217;utilisez que des caract\u00e8res alphab\u00e9tiques et des chiffres.<\/li><li>Ne nous m\u00e9prenons pas, le signe <strong>#<\/strong> n&#8217;est pas n\u00e9cessaire ici, nous le mettrons plus tard dans l&#8217;hyperlien.<\/li><li>Ce nom est unique pour toute la page, il ne faut pas le r\u00e9utiliser pour d&#8217;autres \u00e9l\u00e9ments. Un identifiant d\u00e9finit un \u00e9l\u00e9ment unique.<\/li><\/ul><\/li><\/ol>\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/id_de_css.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img fetchpriority=\"high\" decoding=\"async\" width=\"355\" height=\"524\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/id_de_css.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"\" class=\"wp-image-17539\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/id_de_css.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 355w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/id_de_css-203x300.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 203w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/id_de_css.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=71 71w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/id_de_css.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=142 142w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/id_de_css.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=284 284w\" sizes=\"(max-width: 355px) 100vw, 355px\" \/><\/a><\/figure>\n<ol class=\"wp-block-list\" start=\"4\"><li>Nous allons maintenant cliquer sur l&#8217;\u00e9l\u00e9ment de notre page o\u00f9 nous voulons ajouter l&#8217;hyperlien, de sorte que lorsque nous cliquerons dessus, il se d\u00e9placera vers la section \u00e0 laquelle nous avons attribu\u00e9 l&#8217;ID <strong>que_podemos<\/strong>. Nous pouvons placer ce lien dans n&#8217;importe quel widget qui supporte les liens ou dans un texte via l&#8217;\u00e9diteur de texte. Dans ce cas, nous allons utiliser un widget <strong>Ic\u00f4ne<\/strong> pour ajouter ce lien \u00e0 la page elle-m\u00eame.<\/li><li>Dans la colonne de gauche, sous l&#8217;onglet <strong>Contenu<\/strong>, saisissez le nom de l&#8217;identifiant dans le champ <strong>Lien<\/strong>, d\u00e9sormais pr\u00e9c\u00e9d\u00e9 du signe di\u00e8se <strong>#.<\/strong> Dans ce cas : <strong>#what_we_can<\/strong><\/li><\/ol>\n<figure class=\"wp-block-image aligncenter size-full\"><a href=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/enlace-a-la-misma-pagina.jpg?strip=all&quality=92&webp=92&avif=92&w=2560\"><img decoding=\"async\" width=\"353\" height=\"541\" src=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/enlace-a-la-misma-pagina.jpg?strip=all&quality=92&webp=92&avif=92\" alt=\"Lien vers la m&#xEA;me page avec Elementor\" class=\"wp-image-17540\" srcset=\"https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/enlace-a-la-misma-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 353w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/enlace-a-la-misma-pagina-196x300.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92 196w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/enlace-a-la-misma-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=70 70w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/enlace-a-la-misma-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=141 141w, https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/enlace-a-la-misma-pagina.jpg?strip=all&amp;quality=92&amp;webp=92&amp;avif=92&amp;w=282 282w\" sizes=\"(max-width: 353px) 100vw, 353px\" \/><\/a><\/figure>\n<ol class=\"wp-block-list\" start=\"6\"><li>Une fois cela fait, nous sauvegardons et nous avons notre lien vers la m\u00eame page termin\u00e9.<\/li><\/ol>\n<p>Nous pouvons placer ce m\u00eame lien dans d&#8217;autres widgets ou textes de notre page afin qu&#8217;ils renvoient \u00e0 cette section. Ce type de lien est souvent utilis\u00e9 sur des pages au contenu \u00e9tendu afin de permettre aux utilisateurs d&#8217;acc\u00e9der plus facilement au contenu dont ils ont besoin. En outre, nous pouvons \u00e9galement utiliser l&#8217;int\u00e9gralit\u00e9 du lien hypertexte sur une autre page, comme indiqu\u00e9 ci-dessous, afin d&#8217;ouvrir une autre page et de faire d\u00e9filer les pages jusqu&#8217;au point souhait\u00e9 :<\/p>\n\n<pre class=\"wp-block-code\"><code>https:\/\/lacolmenatecnologica.com\/<span style=\"color:#23a455\" class=\"has-inline-color\">#que_podemos<\/span><\/code><\/pre>\n\n<p>Il suffit d&#8217;ajouter l&#8217;ID pr\u00e9c\u00e9d\u00e9 du signe di\u00e8se # \u00e0 la fin de l&#8217;URL de la page. Nous pouvons maintenant utiliser cette ancre sur n&#8217;importe quelle autre page pour amener l&#8217;utilisateur non seulement \u00e0 une page, mais aussi \u00e0 l&#8217;endroit pr\u00e9cis de cette page que nous voulons.<\/p>\n","protected":false},"featured_media":31594,"template":"","meta":{"_seopress_robots_primary_cat":"","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","_uag_custom_page_level_css":"","site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}}},"class_list":["post-34719","elementor-adedemy","type-elementor-adedemy","status-publish","has-post-thumbnail","hentry"],"uagb_featured_image_src":{"full":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/ancla-en-elementor-enlaces-a-la-propia-pagina.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,false],"thumbnail":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/ancla-en-elementor-enlaces-a-la-propia-pagina-150x150.jpg?strip=all&quality=92&webp=92&avif=92",150,150,true],"medium":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/ancla-en-elementor-enlaces-a-la-propia-pagina-300x150.jpg?strip=all&quality=92&webp=92&avif=92",300,150,true],"medium_large":["https:\/\/lacolmenatecnologica.com\/wp-content\/uploads\/2021\/10\/ancla-en-elementor-enlaces-a-la-propia-pagina-768x383.jpg",768,383,true],"large":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/ancla-en-elementor-enlaces-a-la-propia-pagina.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true],"1536x1536":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/ancla-en-elementor-enlaces-a-la-propia-pagina-1536x766.jpg?strip=all&quality=92&webp=92&avif=92",1536,766,true],"2048x2048":["https:\/\/e6xg7yg7k87.exactdn.com\/wp-content\/uploads\/2021\/10\/ancla-en-elementor-enlaces-a-la-propia-pagina.jpg?strip=all&quality=92&webp=92&avif=92",1901,948,true]},"uagb_author_info":{"display_name":"La Colmena Tecnol\u00f3gica","author_link":"https:\/\/lacolmenatecnologica.com\/fr\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"Qu&#8217;est-ce qu&#8217;une ancre en HTML ? L&#8217;ancre est le lien cible que nous sp\u00e9cifions lorsque nous cr\u00e9ons un lien hypertexte. Il s&#8217;agit de liens qui permettent d&#8217;acc\u00e9der \u00e0 une autre page web, d&#8217;ouvrir un e-mail, un t\u00e9l\u00e9phone, de t\u00e9l\u00e9charger un fichier ou, comme nous allons le voir dans cette rubrique, de se rendre \u00e0 un&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy\/34719","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media\/31594"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/fr\/wp-json\/wp\/v2\/media?parent=34719"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}