Elementor Complete Guide to Adding Anchor Links: 3 Easy Steps to Jumping Page Regions

In web design, creating a smooth browsing experience is one of the key ways to engage visitors and improve interaction. Adding an Anchor Link is a useful tool to achieve this goal. If you are using Elementor, then adding anchor links will become very easy.

Anchor links allow visitors to jump directly to a specified section of a page by clicking a button or link. This approach saves time and also prompts more interaction and click-through behavior.

This tutorial will provide you with a detailed step-by-step guide showing the complete method of adding anchor links in Elementor. Please read on.

What is an anchor link in a web page?

Principles of Anchor Links in Web Pages

Anchor links are a special type of hyperlink that allows visitors to jump to a specific area of the same web page. Simply put, anchor links are like boat anchors.

The purpose of an anchor is to keep the boat somewhere in the water, to avoid drifting and to allow it to move freely around the anchor's range.

Anchor links work the same way. When a visitor clicks on an anchor link, they are redirected to a specific content area on the page instead of going to another page. This process saves loading time and also helps visitors find what they want to see faster and stay on the current page.

Adding Anchor Links in Elementor (3 Easy Steps)

in the event that Elementor The plugin is already installed on your site, then you can start creating anchor tags immediately. If you're still not sure how to install it, check out our previous Elementor installation tutorial.

Next, follow the steps below:

Step 1: Select Edit Page in Elementor

Click "Edit with Elementor" in the top menu and the page will be loaded into Elementor's visual editor.

Step 2: Search and add "Menu Anchor" anchor tag

Type "Menu Anchor" in the search bar on the left and you will see a widget called "Menu Anchor". This is the component needed to create an anchor link.

Step 3: Adding Anchor Links with the Menu Anchor Widget

Once you have found the Menu Anchor component, drag and drop it over the area of the page you wish to jump to. For example, if you want the user to jump to the "Prices" area, place this component in front of that area.

Then, enter the name of the anchor in the "ID" field of the component, for example "prices".

Next, choose a button or text to use as a link to jump to an anchor point when clicked.

For example, select the "Get Started" button as the anchor jump button:

Scroll to the top of the page and click the "Get Started" button. In the link field of the button, clear the existing link and fill in "#prices" as the jump target.

Click "Save".

When you return to the page, click on the button to jump to the "Price" area.

Adding Anchors to the WordPress Menu

This method is much simpler.

Start by adding an anchor to an area. For example, if you want to add an anchor to the "Frequently Asked Questions (FAQ)" area to set the jump:

Go to Elementor, drag and drop Menu Anchor in front of the FAQ area and enter "faq" in the ID field and click Save.

Then do the following:

come (or go) back WordPress Backstage;
Go to Appearance > Menu;
Click on "Customize Link";

exist URL Enter "#faq" in the link text as "FAQ";

Click "Add to menu" and save.

Once saved, go to the front end of the site and click on "FAQ" in the menu to be redirected to the FAQ area.

Elementor Add Anchor Link FAQs

Here are some FAQ notes about adding anchor links in Elementor:

1. What is an anchor link?

An anchor link is a link that allows a page to jump to a certain part of this page.

2. How do I link to a specific part of a page in Elementor?

Select the block you want to jump to and click "Edit Block";
Open the Advanced settings;
increase CSS ID, e.g. "First";
Select the button or text to jump to;
Enter "#First" in the link to the button or text.

3. How to add anchor links manually in WordPress?

Select a button or text and enter "# Anchor Name" in the link;
Find the Jump Target block and open the Advanced settings;
Set the ID to the name of the anchor you set (without adding "#").

4. How to manually add an anchor link in HTML?

utilization <a href="#目标ID">Jump Text</a> to set the anchor link;
In the target area HTML Tagged with id="Target ID"e.g. <div id="faq">The

5. How do I add a link to an image in Elementor?

Select the target image;
Find "Links" in the "Content" settings;
Select "Custom Link";
Fill in the target link address.

final conclusion

You now have a complete method for setting up anchor links in Elementor. It's important to remember that anchor links are not something to be added randomly, but are an integral part of the important jump functions on a page. It is recommended that you identify the most critical areas of the page and then set up the jump paths with the appropriate text or buttons.

Contact Us
Can't read the tutorial? Contact us for a free answer! Free help for personal, small business sites!	Customer Service
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) E-mail: info@361sale.com
④ Working hours: Monday to Friday, 9:30-18:30, holidays off