A comprehensive database for everything WordPress related.

TOP
WPKlik Logo Newsletter

Sign up and receive a free copy of How to Create an online Store with WooCommerce (full guide)

How to Set Up Elementor Anchor Links the Easy Way

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:

How to Create Elementor Anchor Links in WordPress and Use Them on the Same Page

To set up an Elementor anchor link, simply find the Menu Anchor element in Elementor’s sidebar menu.

Menu Anchor shortcode

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.

Add Anchor

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.

Anchor Name

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…

Call anchor

…and this is where you can see what it looks like for a button.

Button anchor

Also Read…

How to Add Anchor Elementor Link to Another Page

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.

Add anchor link to another 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.

In Conclusion

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!

Newsletter

WordPress perfection at your fingertips.

If you enjoyed this article, feel free to subscribe to our newsletter using the form below. You can also follow us on Facebook and Twitter and subscribe to our YouTube channel for WordPress video tutorials.

Comments (3)

  • Armin Müller

    Hello together
    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

    reply
  • Tricia

    Thank you!! I tried for an hour on my own:( I did your steps in 2 minutes. You rock!!!

    reply

Leave a Reply