• What is an Anchor in HTML?
• Anchor types
• Adding a link to the same page with Elementor

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 same page. Let’s look at an example:

<a href="https://lacolmenatecnologica.com/">La Colmena Tecnológica</a>

Result: The Technology Hive

In this HTML code example we see how the text between the tags <to > (opening) and </to > (closing) will contain a hyperlink to the URL https://lacolmenatecnologica.com/ . That is to say, when clicking on the text La Colmena Tecnológica the browser will send us to the destination that we have specified in the href attribute.

Of course we don’t need to know HTML to create a hyperlink with Elementor, but it doesn’t hurt to know.

Anchor types

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 mailto: or a telephone that must be preceded by tel:. To force the download of a file instead of its display, we must add the download attribute.

Adding a link to the same page with Elementor

To add a link that goes to another point on the same page, follow these steps.

1. 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
2. Then in the left column click on the Advanced tab.
3. In the Advanced section of the Advanced tab we enter an identification name in the CSS ID field.
   Recommendations for the CSS ID name:
   • Always write in lower case.
   • Replace spaces with a hyphen or underscore, e.g.: que_podemos
   • Use only alphabetic characters and numbers.
   • Let’s not get confused, the # sign is not necessary to put it here, we will put it later in the hyperlink.
   • This name is unique in the whole page, we must not use it again for other elements. An ID defines a single element.

4. 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 que_podemos. 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 Icon widget to add this link to the page itself.
5. In the left column, in the Content tab, enter the name of the ID in the Link field, now preceded by the hash sign #. In this case: #what_we_can

6. Once this is done we save and we have our link to the same page finished.

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’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:

https://lacolmenatecnologica.com/#que_podemos

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.