Table of Contents
In this WPDesigns article, we will discuss how to Add menu anchors in Elementor.
Do you want to add menu anchor links to your website using Elementor in the easiest way possible? So, you’re on your way to finding a suitable solution!
With a drag-and-drop page builder like Elementor, creating web pages becomes faster, smarter and more versatile. Elementor is much more user-friendly than related WordPress plugins when it comes to building menu anchor tags.
The Menu Anchor Widget in Elementor
Creating a Menu Anchor in Elementor Using a Widget
You can add Menu Anchors in several ways in Elementor, this first way we will show you how to do using the Elementor Menu Anchor Widget. Click this Menu Anchor embed as a hyperlink to skip to the CSS ID!
Go to your WordPress > Dashboard > Pages > Edit with Elementor to open the page. Then use the left-hand site’s widget search bar to search for menu anchor. You can either search visually or type “anchor” into the widget search bar.
Go to your dashboard and then Elementor to open the page. Then use the left-hand site’s widget search bar to search for menu anchor. After that, simply drag and drop the menu anchor widget to the desired position.
The ID of Menu Anchor can be placed under anchor on the left-hand side. Give it a name, and that’s all there is to it. (Please note that the ID link only accepts the following characters: A-Z, a-z, 0-9, _, -).
Creating a Menu Anchor Link With the CSS ID
Go to your dashboard and then open the page with Elementor to add an anchor link using css id. After that, select the widget where you want to add the anchor connection, as for any section by right-clicking on it and selecting Edit section.
Then go to the advanced tab and enter an id in the css id field. Then, in the button or menu link, set the id with # (for example, css id = about; Setup-link = #about).
Linking the Menu Anchor
Once you have entered your Menu Anchor using either the CSS ID or the Elementor widget by adding it into the “The ID of the Menu Anchor” you can now link it to the hyperlink, button, or image.
The page menu anchor is essentially added in the place that you would normally add a hyperlink.
You can now link this page menu anchor, to do this you will need to add a hash symbol before # it then add the text exactly as it is presented in the text box.
For example, if you have used the CSS ID of “About”; you will need to set the link as “#About”. You can then save or update the link and it will slide to the page or position on the page you linked it to.
Having a problem? Click this page anchor
Possible Problems (& Solutions)
When setting up your page anchor there are several common issues that may arise and there is generally an easy solution. If you do not find your solution here feel free to send a message and explain the issue and we can see if we can help you.
Page Anchor not working
You may find that your page anchor does… nothing! If this is the case then make sure to check that every thing is correct. The original link should not have a # next to it, only the place that is clickable and that will go the link. If there is a capital letter in one and not the other, if there is a spelling mistake, if there is a # or if there is a # missing on the clickable link then nothing will happen as it is not correctly linked.
Page Anchor not changing page
You added a link on one page and put the link on another, the link however does not go to the desired page.
This one is generally an easy fix, you will need to enter in the rest of the URL into the link box or menu item.
For example, if it changes page, it needs to have the page website address before. If linking to “FAQs” on another page, then this would need the URL before it – https://wpdesigns.co.uk/contact/#FAQs
Need to Get to The Top Quickly?
A page anchor can help with that!
