{"id":34736,"date":"2021-10-03T09:44:46","date_gmt":"2021-10-03T07:44:46","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/elementor-academy-temas\/anchor-in-elementor-links-to-own-page\/"},"modified":"2023-03-30T12:22:38","modified_gmt":"2023-03-30T10:22:38","slug":"anchor-in-elementor-links-to-own-page","status":"publish","type":"elementor-adedemy","link":"https:\/\/lacolmenatecnologica.com\/en\/elementor-academy-temas\/anchor-in-elementor-links-to-own-page\/","title":{"rendered":"Anchor in Elementor links to own page"},"content":{"rendered":"\n<ul class=\"wp-block-advgb-summary advgb-toc alignnone\"><li class=\"toc-level-1\"><a href=\"#inicio\">What is an Anchor in HTML?<\/a><\/li><li class=\"toc-level-1\"><a href=\"#tipos-de-ancla-04956743-628a-4bdd-ba0e-2fa31dd52c76\">Anchor types<\/a><\/li><li class=\"toc-level-1\"><a href=\"#anadir-un-enlace-a-la-misma-pagina-con-elementor-59fe820b-b4bb-4981-a65a-2ff5aeab9003\">Adding a link to the same page with Elementor<\/a><\/li><\/ul>\n<h2 class=\"wp-block-heading\" id=\"inicio\">What is an Anchor in HTML?<\/h2>\n\n<p>The anchor is the target link that we specify when we create a hyperlink. They are links that take us to another web page, open an email, a phone, download a file or as we are going to see in this topic, take us to another point on the same page. Let&#8217;s look at an example:<\/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>Result:<\/strong> <a href=\"https:\/\/lacolmenatecnologica.com\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">The Technology Hive<\/a><\/p>\n\n<p>In this HTML code example we see how the text between the tags <strong>&lt;to<\/strong> <strong>&gt; (opening) and<\/strong> <strong>&lt;\/to<\/strong> <strong>&gt; (closing) will contain a hyperlink to the URL<\/strong> <span class=\"has-inline-color has-ast-global-color-0-color\">\n  <em>https:\/\/lacolmenatecnologica.com\/<\/em>\n<\/span>. That is to say, when clicking on the text <strong>La Colmena Tecnol\u00f3gica<\/strong> the browser will send us to the destination that we have specified in the <strong>href<\/strong> attribute.<\/p>\n\n<p>Of course we don&#8217;t need to know HTML to create a hyperlink with Elementor, but it doesn&#8217;t hurt to know.<\/p>\n\n<h2 class=\"wp-block-heading\" id=\"tipos-de-ancla-04956743-628a-4bdd-ba0e-2fa31dd52c76\">Anchor types<\/h2>\n\n<p>In the following table you can see in green color several types of anchors, some of them need a prefix such as the e-mail that must be preceded by <strong>mailto:<\/strong> or a telephone that must be preceded by <strong>tel:<\/strong>. To force the download of a file instead of its display, we must add the <strong>download<\/strong> attribute.<\/p>\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>Type<\/th><th>HTML code<\/th><\/tr><\/thead><tbody><tr><td><a href=\"https:\/\/lacolmenatecnologica.com\/en\/\" target=\"_blank\" rel=\"noreferrer noopener\">URL or link<\/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\">E-mail address<\/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\">Phone<\/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\">Download file<\/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\">Same 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\">Anchor to another 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\">Adding a link to the same page with Elementor<\/h2>\n\n<p>To add a link that goes to another point on the same page, follow these steps.<\/p>\n\n<ol class=\"wp-block-list\"><li>We click on the widget we want to move to when we click, it can be a section or any widget within the page we are editing. In this example we are going to use a section, so we click on its tab to select it  <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=\"Elementor section selector\"\/><\/li><li>Then in the left column click on the <strong>Advanced<\/strong> tab.<\/li><li>In the <strong>Advanced<\/strong> section of the <strong>Advanced<\/strong> tab we enter an identification name in the <strong>CSS ID<\/strong> field.<br\/>Recommendations for the<strong> CSS ID<\/strong> name:<ul><li>Always write in lower case.<\/li><li>Replace spaces with a hyphen or underscore, e.g.: <strong>que_podemos<\/strong><\/li><li>Use only alphabetic characters and numbers.<\/li><li>Let&#8217;s not get confused, the <strong>#<\/strong> sign is not necessary to put it here, we will put it later in the hyperlink.<\/li><li>This name is unique in the whole page, we must not use it again for other elements. An ID defines a single element.<\/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>Now we will click on the element of our page where we want to add the hyperlink, so that when we click on it, it will move to the section to which we have assigned the ID <strong>que_podemos<\/strong>. We can put this link in any widget that supports links or in a text through the text editor. In this case we are going to use an <strong>Icon<\/strong> widget to add this link to the page itself.<\/li><li>In the left column, in the <strong>Content<\/strong> tab, enter the name of the ID in the <strong>Link<\/strong> field, now preceded by the hash sign <strong>#<\/strong>. In this case: <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=\"Link to the same page with 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>Once this is done we save and we have our link to the same page finished.<\/li><\/ol>\n<p>We can put this same link in other widgets or texts of our page so that they link to that section. This type of link is usually used in pages with extensive content to facilitate the user&#8217;s access to the content he\/she needs. In addition we can also use the complete hyperlink in another page, as we see below, to open a different page and scroll to the point we want:<\/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>All we have to do is add at the end of the page URL the ID preceded by the hash sign #. We can now use this anchor on any other page to take the user not only to a page, but also to the specific point on that page that we want.<\/p>\n","protected":false},"featured_media":31593,"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-34736","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\/en\/author\/"},"uagb_comment_info":0,"uagb_excerpt":"What is an Anchor in HTML? The anchor is the target link that we specify when we create a hyperlink. They are links that take us to another web page, open an email, a phone, download a file or as we are going to see in this topic, take us to another point on the&hellip;","_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy\/34736","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/elementor-adedemy"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/elementor-adedemy"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/31593"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=34736"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}