How to Set Up Elementor Anchor Links the Easy Way
Elementor anchor links are very easy to set up. What are they, though?
Simply put, an anchor link is a link which does not lead you off the page you are on, but instead to a different section of the page. They are especially useful for navigating long sections of text. On the other note, anchor links are used for creating a Table of contents. Table of contents is an important part of longer articles since it allows easy navigation through text, plus it’s beneficial for SEO. Although a Table of contents can be created with Menu anchor element, there is an easier method as well. We recommend you to try Qi addons for the Elementor Table of Contents widget since it provides a fast and simple way for creating and customizing the Table of contents. Plus, it’s completely free.
So if you think your pages would benefit from this kind of on-page linking, and if you are using Elementor page builder, you are in luck. Your page editor (free version, too) has a special element perfectly fit for the purpose – the Elementor Menu Anchor element.
Now, let’s get down to practicalities, in this text we’ll show you:
To set up an Elementor anchor link, simply find the Menu Anchor element in Elementor’s sidebar menu.
Next, you need to drag the element to where you want the link to lead. An anchor can be set up anywhere on the page. It will not be visible to users, but you will be able to find and configure it.
Once placed, name the anchor. An anchor can be named anything, provided that it is an unspaced combination of letters and digits. You may use upper or lower case. You may not use spaces, but dashes ( – ) and underscores ( _ ) are allowed. So, “anchor name” is not a valid anchor name, while “anchorname”, “anchor-name”, and “anchor_name” are.
What you then need to do is set up the anchor’s link. Any element which can carry a link can link to the anchor: text, image, button, menu… While a regular link generally consists of a full URL, linking to an anchor looks a little different.
First, choose an element which you wish to link to the anchor. A link is set up in your chosen element’s link field by inputting the anchor’s name preceded by #, as in #anchorname, or, in the example below, #best. In the image below you can see what it looks like for a paragraph…
…and this is where you can see what it looks like for a button.
An anchor link is a link that leads to a specific place on one page. It contains the URL of the page itself plus an anchor to a specific part. You can create as many Elementor anchor links that lead to a specific part of one page as you want, and you can do it on every page.
You can also see the anchor links on this page, we added a menu anchor element to create a Table of Contents at the beginning. However, although this is the most common application of anchor links, we can use them on other pages as well. For example, if we are writing a text and want to link it to a specific part on another page, what we need to do is create an anchor on the part we want to link to, in the way we described above. So, when we use Elementor anchor links, instead of putting a link to the desired page, we put a more specific link – a URL link with an anchor (#anchor) that jumps to a specific part of the page.
Let’s not forget that the Menu Anchor Elementor element is also used for creating one page WordPress websites. So, if you weren’t sure what this element could be used for, now you have all the necessary information to create a great website.
Not only does this simple and elegant function make your web page easily navigable, you can also use this function to point your visitors to where you want them to go, such as a newsletter subscription section, shop, or a map to your premises. With Elementor, setting up anchor links is visual and easy. If you prefer or are used to some other WP editors, don’t worry, it’s easy to add anchor links with any other editor too.
We hope this article was helpful. If you liked it, feel free to check out some of these articles as well!
I made a site with OceanWP and defined several anchors on different pages. From some sub-menus I tried to jump to these anchors. It does not work properly. Then I found the information on the Elementor Help Center: “Menu Anchors are only supported when used on the same page. Link anchors on different pages may not work properly and are not supported.”
How can I solve this problem?
Thank you very much for you help and best regards – Armin
Hi, thanks for writing in!
We have never encountered this problem ourselves, so our guess it’s one of these two possibilities: either you haven’t linked properly (take another look at that part), or there’s a bug with the theme. Otherwise, everything should work normally, without issues.
Let us know if you need anything else.
Thank you!! I tried for an hour on my own:( I did your steps in 2 minutes. You rock!!!