Have you always wondered how you can achieve the functionality of scrolling down to a specific section on your page after clicking on a button/link?
It's such a cool effect that will make your pages more user friendly and they can convert better as well.
That scroll to section effect is achieved by what we call 'anchoring.'
But first, let us talk about how the concept of 'anchoring' came to be
What is an anchor?
An anchor is a device, usually of metal, attached to a ship or boat by a cable or chain and lowered to the seabed to hold the vessel in a particular place.
By digging into the sea bottom of the sea, the anchor keeps the ship or boat stable, keeping it safe from being a castaway.
Hence, the ship or boat 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 page, not to another page.
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.
How to Add Anchors Using Elementor (3-Easy Steps)
Didn`t understand the video? Or perhaps you prefer reading to watching videos?
Well, let’s explain using the written word.
Step 1: Select the Page in Elementor Editor
Login to your website. Go to the page you want to add anchor links.
On the top menu bar, click on “Edit with Elementor”.
Your page will be open for customization in the Elementor editor.
Step 2: Search for the Menu Anchor to Add Anchor Tag
In the search box at the top left, just type 'anchor' and you will be able to select the anchor widget.
Step 3: Start to Add Anchor Link with Menu Anchor Widget
What you need to do next is simply to 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.
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 dragged the widget and positioned it above your selected section, you need to write the name of this section in the widget’s content area.
Now, write the name as “Prices” in the ID field, since you want your visitor to jump or scroll down smoothly to the pricing section.
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, in the picture below we have selected the get started button so that you can understand easily.
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.
Easy right?
