hloween 2021
HappyAddons halloween deal
How to add anchor in elementor

How to Add Anchor Link in Elementor (Step by Step Guide)

Are you searching for the simplest way to add anchor links to your landing pages? Well, you are getting very close to a viable solution.

Building web pages become smarter and flexible with a drag and drop page builder like Elementor. So when it comes to creating anchor tags, Elementor is way handier than any similar WordPress plugins.

Therefore, in this step by step tutorial, we will show you how to set up anchor links in Elementor so that you can scroll down to a specific section on your page after clicking on a button/link. It will turn your web pages more user friendly and converting. Keep reading.

How Anchor Link Works in Your Web Pages

Page builder

What does an anchor do for a ship? It helps the ship to float in a specific water surface. Keep it safe from cast away. Hence, it can circle around the anchor in any direction within the limits of the anchor shackle.

The same thing happens with the anchor links. When visitors click your anchor tag, it directs them to a specific section on your landing page. Not to another page, not to a different section.

Anchor links are necessary. By clicking an anchor tag, your visitor can jump to a certain part of your web page in a moment. The process saves time and can inspire visitors to perform desired actions. Moreover, it keeps them stay on the same page.

However, let’s get on with the process of creating an anchor with Elementor.

How to Add Anchor in Elementor Page Builder (3-Easy Steps)

If you already have installed Elementor on your website, you are ever ready to start creating the anchor tags. However, in case you don’t know the installation method, get help from our guide on how to install Elementor.

Well, let’s follow through the steps on how to add an anchor in Elementor.

Step 1: Select the Page in Elementor Editor

how to add anchor in elementor

Login to your WordPress site. Go to the page you want to add anchor links. On the top menu bar, click on “Edit with Elementor”. Your web page will be open for customization in the Elementor editor.

Step 2: Search for the Menu Anchor to Add Anchor Tag

search for menu to add acnhor in elementor

After you’ve chosen to edit your page with Elementor, you will be redirected to the above page. It is the Elementor editor. On the left sidebar, type only “anchor”. Therefore, you will find the Menu Anchor Widget. It will help you to create your desired anchor link.

Step 3: Start to Add Anchor Link with Menu Anchor Widget

What you need to do is drag and drop the Menu Anchor to the sections of your page where you want to add an anchor tag.

For example, you want to add an anchor in your pricing section. Here’s what you should do.

start to add anchor in elementor

Scroll down to the pricing section of your page in the editor. Drag the Menu Anchor widget and drop it above the pricing.

Now that you have drag the widget above your selected section, you need to write the name of this section in the widget’s content area.

drag and drop menu anchor widget

Hence. write the name as “Prices” in the ID field, as you want your visitors to jump in the pricing.

Now, which element or text should you choose to link? It’s your wish. Select an anchor text or tab, or even choose an element from your WordPress menu to redirect the visitors.

However, here we have selected the get started button so that you can understand easily.

choose the anchor text

So, scroll up to your page. Click on the “Get Started” button. You will see the button link in the link filled. Here, erase the button link, and put your anchor link with a hashtag, just like “#prices” (as your anchor is the pricing section). Now, hit “Save”.

Therefore, visit your landing page again. Click on your Anchor button. You will jump to the pricing at once.

How to Add Anchor in Elemntor with WordPress Menu

It’s even easier than the earlier process. To add an anchor in a WordPress menu, you need to create the anchor first.

For example, you want to create an anchor to your FAQ section. So, let’s go to your FAQ section. Drag the “Menu Anchor” widget above it.

add acnhor in wordpress menu

Put the word “faq” in the ID field. And save it.

Then go to your WordPress menu. Click on the custom link.

Save Menu

In the URL field, write “#faq” and put the link text name as “FAQ”. Then click on “Add to Menu. And finally, hit “Save Menu”.

click on faq

Now go back to your landing page. Hit the FAQ from your menu. Promptly you will be taken to your FAQ section.

Final Thoughts

So, that’s all you need to create an anchor link if you have Elementor. Hence, remember some key tips. You just can’t add anchor links randomly. It’s a great tool to increase user response to your web pages. So you should find out which sections are most important to you. Then also select the perfect anchor text that matches your anchor.

Therefore, Elementor is open to third-party tools. You can integrate the Happy Addons widget to bring more power in your web design with Elementor. You can start for absolutely free.

Well, tell us now. Do you find it easier to add anchor links in Elementor?

Subscribe to Our Newsletter

Share this post

Share on facebook
Share on twitter
Share on linkedin

Related Post

13 Responses

  1. Hi!
    Thank you for all those details! It helped a lot!
    Is there a way to add an anchor link to a section on another page?
    Thank you!!

      1. Hi, I have the same question. I am wanting to link from one page to an anchor on another page. These instructions aren’t working for that; the link only takes me to the top of the other page, not the anchor.

  2. HEY, I am having problems linking the menu button to the section I want to get. it is not working. I tried everything. is it something else I can try..?

    1. Hi Havind,
      This Is Gobinda from The Business Team of HappyAddons,
      The possible solution, please increase the z-index value of the menu widget,(1000) should be on the top of everything.
      If it’s not working then please clean all of your caches. If it exists, then it could be a plugin conflict. Here I have an article on that, WordPress Plugin And Theme Conflicts: How to Find and What to Do
      By finding the conflicting plugin you can solve the issue. And don’t forget to share the update here.
      Thanks and regards,
      Product Co-Ordinator of HappyAddons.

  3. Hi, you just have to specify the page URL of the desired page and put the menu anchor ID with # symbol

  4. Hey, this advice for link to a section on another page looks very helpful, but I dont get it: “you just have to specify the page URL of the desired page and put the menu anchor ID with # symbol”
    E.g. if my ID is lessons. On the same page I direct to it with link #lessons. And from another page? Can you give an example with the URL please?

    1. Hi Andrea,

      Good day,

      Gobinda here from team HappyAddons. Thanks for stopping by. Sorry for your inconvenience.

      Here I made a short clip for you based on your situation. I hope this will help you to use the Menu anchor widget and as well as you can set different page links to different pages.

      Product Coordinator | HappyAddons

  5. @gtarafdar it doesnt answer my question tho, but thanks for your effort anyway. I found out myself already and share for others in case somebody needs it:

    you need to do this – as said above: “you just have to specify the page URL of the desired page and put the menu anchor ID with # symbol”

    Which, to give an example, means this (steps 1. and 2. are based on the tutorial explained above):

    1. I have 2 pages: a Main page www. dancing. com and a page called Dancing lessons with url www. dancing. com/dancing-lessons

    2. On the page Dancing lessons i create an anchor link, where the ID is ballet and it takes me to a section with link #ballet

    3. Now I want to bring website visitors to this particular section (#ballet) also from the Main page. So on the Min page i create a button or whatever, use the Elementor tool Wrapper link again, but this time, instead of simply writing #ballet there, I will include the other page url as well. Together it has to be like this: www. dancing. com /dancing-lessons/#ballet

    4. Done

    Hope this saves some time to someone who is also learning on the go:))

    1. HI @Andrea, Thanks a lot for your detailed hand note. We are thankful to you. Actually, I missed your point earlier. Now it’s clear. And your suggested way is the perfect one. Thanks for your effort to share it with us.

Leave a Reply

Your email address will not be published. Required fields are marked *

Share via
Copy link
Powered by Social Snap