{"id":6544,"date":"2021-10-03T09:44:46","date_gmt":"2021-10-03T07:44:46","guid":{"rendered":"https:\/\/lacolmenatecnologica.com\/anchor-links-in-elementor-to-navigate-within-the-same-page-in-wordpress\/"},"modified":"2026-09-02T19:41:53","modified_gmt":"2026-09-02T17:41:53","slug":"anchor-links-in-elementor-to-navigate-within-the-same-page-in-wordpress","status":"publish","type":"post","link":"https:\/\/lacolmenatecnologica.com\/en\/anchor-links-in-elementor-to-navigate-within-the-same-page-in-wordpress\/","title":{"rendered":"Anchor Links in Elementor to Navigate Within the Same Page in WordPress"},"content":{"rendered":"\n

What Is an Anchor in HTML?<\/h2>\n\n

An anchor is the destination link we specify when creating a hyperlink. These are links that take us to another web page, open an email, a phone number, download a file, or as we will see in this topic, take us to another point on the same page. Let’s look at an example: <\/p>\n\n

<a href=\"https:\/\/lacolmenatecnologica.com\/<\/mark>\">La Colmena Tecnol\u00f3gica<\/a><\/code><\/pre>\n\n
Result:<\/strong> La Colmena Tecnol\u00f3gica<\/a><\/p>\n\n
In this HTML code example we see how the text between the <a><\/strong> (opening) and <\/a><\/strong> (closing) tags will contain a hyperlink to the URL https:\/\/lacolmenatecnologica.com\/<\/em><\/span>. That is, when clicking on the text La Colmena Tecnol\u00f3gica<\/strong> the browser will send us to the destination we have specified in the href<\/strong> attribute. <\/p>\n\n
Of course we don’t need to know HTML to create a hyperlink with Elementor, but it doesn’t hurt to know it.<\/p>\n\n
Types of Anchors<\/h2>\n\n
In the following table you can see in green several types of anchors, some need a prefix such as email which must be preceded by mailto:<\/strong> or a phone number which must be preceded by tel:<\/strong>. To force the download of a file instead of viewing it, we must add the download<\/strong> attribute. <\/p>\n\n
Type<\/th>HTML Code<\/th><\/tr><\/thead>
URL or Link<\/a><\/td><a href=”https:\/\/lacolmenatecnologica.com\/<\/mark>“>Web page<\/a><\/td><\/tr>
Email<\/a><\/td><a href=”mailto:mario@lacolmenatecnologica.com<\/span><\/mark>“>Web page<\/a><\/td><\/tr>
Phone<\/a><\/td><a href=”tel:+34665123123<\/mark>“>Web page<\/a><\/td><\/tr>
Download File<\/a><\/td><a href=”https:\/\/lacolmenatecnologica.com\/AFI_grafico.pdf<\/mark>” download=”AFI Gr\u00e1fico”<\/mark>>Web page<\/a><\/td><\/tr>
Same Page<\/a><\/td><a href=”#inicio<\/mark><\/span>“>Web page<\/a><\/td><\/tr>
Anchor to Another Page<\/a> <\/td><a href=”https:\/\/lacolmenatecnologica.com\/nombre-de-la-pagina\/#inicio<\/mark><\/mark>“>Web page<\/a><\/td><\/tr><\/tbody><\/table><\/figure>\n\n
Adding a Link to the Same Page with Elementor<\/h2>\n\n
To add a link that goes to another point on the same page we will need to follow these steps.<\/p>\n\n
    \n
  1. Click on the widget you want to scroll to when clicking, it can be a section or any widget within the page we are editing. In this example we will use a section, so we click on its tab to select it  \"Elementor<\/li>\n\n\n\n
  2. Then in the left column we click on the Advanced<\/strong> tab.<\/li>\n\n\n\n
  3. In the Advanced<\/strong> section of the Advanced<\/strong> tab we enter an identification name in the CSS ID<\/strong> field.Recommendations for the CSS ID<\/strong> name:\n
      \n
    • Always write in lowercase.<\/li>\n\n\n\n
    • Replace spaces with hyphens or underscores, example: what_we_can<\/strong><\/li>\n\n\n\n
    • Use only alphabetic characters and numbers.<\/li>\n\n\n\n
    • Don’t get confused, the #<\/strong> sign is not necessary to put here, we will put it later in the hyperlink.<\/li>\n\n\n\n
    • This name is unique throughout the page, we should not use it again for other elements. An ID defines a single element. <\/li>\n<\/ul>\n<\/li>\n<\/ol>\n
      \n
      \"Define\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
        \n
      1. Now we will click on the element of our page where we want to add the hyperlink, so that when we click it scrolls to the section to which we have assigned the ID what_we_can<\/strong>. We can put this link in any widget that supports links or in text through the text editor. In this case we will use an Icon<\/strong> widget to add this link to the page itself.  <\/li>\n\n\n\n
      2. In the left column we click on the Content<\/strong> tab and enter the ID name in the Link<\/strong> field, now yes, preceded by the hash sign #<\/strong>. In this case: #what_we_can<\/strong> <\/li>\n<\/ol>\n
        \n
        \"Link\n\t\t\t\n\t\t\t\t\n\t\t\t<\/svg>\n\t\t<\/button><\/figure>\n<\/div>\n
          \n
        1. Once this is done we save and our link to the same page is complete.<\/li>\n<\/ol>\n\n
          We can put this same link in other widgets or texts on our page to link to that section. This type of link is usually used on pages whose content is extensive to make it easier for the user to access the content they need. In addition, we can also use the complete hyperlink on another page, as we see below, to open a different page and scroll to the point we want:  <\/p>\n\n
          https:\/\/lacolmenatecnologica.com\/#que_podemos<\/span><\/code><\/pre>\n\n
          We just need to add the ID preceded by the hash sign # at the end of the page URL. Now we can 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},"excerpt":{"rendered":"
          What Is an Anchor in HTML? An anchor is the destination link we specify when creating a hyperlink. These are links that take us to another web page, open an email, a phone number, download a file, or as we will see in this topic, take us to another point on the same page. Let’s […]<\/p>\n","protected":false},"author":4,"featured_media":6545,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_seopress_titles_title":"Create Elementor Anchor Links for One-Page Navigation","_seopress_titles_desc":"What Is an Anchor in HTML? An anchor is the destination link we specify when creating a hyperlink. These are links that take us to\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":[374],"tags":[385,386],"class_list":["post-6544","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-elementor","tag-web-design","tag-wordpress-customization"],"_links":{"self":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/comments?post=6544"}],"version-history":[{"count":1,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6544\/revisions"}],"predecessor-version":[{"id":6546,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/posts\/6544\/revisions\/6546"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media\/6545"}],"wp:attachment":[{"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/media?parent=6544"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/categories?post=6544"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lacolmenatecnologica.com\/en\/wp-json\/wp\/v2\/tags?post=6544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}