In this tutorial, we learn how to use the Menu Anchor Widget. This helpful widget allows you to create pages with internal smooth scrolling.
This tutorial will cover:
✔ How to insert the Menu Anchor widget into your website
✔ Linking to a Menu Anchor from a button
✔ Linking to a Menu Anchor from a menu
✔︎ And much more!
Hey there, it’s Ash from Elementor.
In this tutorial, we will learn how to use the Menu Anchor Widget. A useful widget which provides the ability to create a smooth scrolling section within your page.
This feature is really useful when creating one page websites or if you just need a visually pleasing way to navigate to another section within your page.
So, if you’re ready, let’s get started.
In this video on how to use the Menu Anchor Widget I will demonstrate two use cases. The first we’ll link to the anchor widget from a button within the page and the second we’ll link to it from the menu.
To get started let’s search for the menu anchor widget.
Scrolls to section…
We would like our page to scroll to this section, so this is where we’re going to drop our widget.
Notice how a grey box appears. It’s important to note that on our live website this element has no styling applied, meaning it has no height and will not be seen. The grey box you can see is for editing purposes only.
With the Menu Anchor selected you can see we only have one option available, the ID.
The ID of the Menu Anchor allows us to specify a unique name for the widget.
It’s a good idea to name your Menu Anchor something that is relevant to the section you are applying it to. In our instance we’re going to call it “donate”.
Now that we have inserted our Menu Anchor Widget into our page we are ready to link to it.
Scroll to the top of the page and locate the button. Let’s select the button and in the Link field we are going to type
#donate
If we now save and preview our page you can see the Menu Anchor Widget in action.
Shows demo of anchor widget working…
The next step is to apply the same action to our menu.
Let’s switch back to our dashboard and head over to the WordPress menu area.
Type CMD + E on Mac, or CTRL + E on Windows to bring up the Elementor finder.
In the field, type “menu” and select.
Ensure you have the correct menu selected and then navigate your way to ‘Custom Links’.
In the URL field we’ll type #donate
And in the Link Text field we’ll type “Donate”.
Now, let’s add this new link to your menu and move it to the required position.
When finished, save your menu and head back to the Elementor editing screen for your page.
Again, we can use the Elementor keyboard shortcut here by typing CMD + E on Mac or CTRL + E on Windows.
You’ll now see that the new menu item has appeared, and if we preview our page and select ‘donate’ in the menu, it will automatically scroll to the desired section.
