How to Add Anchor Link in WordPress using Elementor Menu Anchor widget?

Anchors Link are a navigation process that helps you to navigate to a specific section of the same page, or to another page. Menu anchor links not only make your web page easily navigable but also provide visitors with a better user experience. This function will direct your visitors to a specific place where you want them to go, such as a small section of a blog, a shop page, a subscription form, etc.

The default Table of Content of WordPress can allow you to create a simple anchor link system to direct visitors to a place on the same page. So if you want to do more customization with WordPress menu custom link, you should use a plugin or widget like the Elementor menu anchor widget that will make the setting up anchor links process more visual and easier. In this article, I will cover some background on anchor text and anchor links and show you how to create anchor link in WordPress with Elementor menu anchor widget.

What is Anchor Link?

Menu anchor or anchor menu is a particular word or group of words that are linked and redirects your visitors to a specific part of an article, a page, another page of your website. It is also considered a ‘table of content’. Links instantly take you to a specific part of an article, a page, an external page, or a pricing section. The link that is inserted into it is called Anchor Link.

An anchor link works as a ship anchor. It helps you to drive visitors to the place you want them to arrive.

When visitors click your anchor text, they can jump to a certain part of your site in a moment. This will inspire visitors to perform desired actions, keeps them stay longer on your web page, and reduce the bounce rate of your site.

Benefits of Using an Anchor Link

There are a lot of advantages that you can obtain if using suitable anchor links on your WordPress site. The most outstanding benefits are listed below:

• The first benefit you can get if using a anchor link is the improvement of the user experience. Custom anchor link can help visitors explore your web page faster and more easily.
• With menu anchor links, you may share direct links to various part (a page section, or a whole page, or any specific section in your site) within a page.
• Using menu anchor links also help you with SEO. If there are relevant link anchor (jump menu) in your article, there are high chances for them to appear on the search engine results pages (SERPs).
• Anchor navigation can also help you enhance the Click through rate (CTR), which is one of the most important factors show that your content is useful and you can take advantage of it to increase SEO ranking and get more organic traffics.

In addition to the pros above, custom menu anchor can also be used for other purposes, for example, a “return to top” anchor link that lets visitors immediately back to the top page.

How to Create an Anchor Link in WordPress?

There are many ways to create an anchor link, in this article, we will show you how to create a WordPress menu anchor with the Elementor menu anchor widget. This widget of Elementor allows you to create a page with smooth scrolling navigation in a WordPress website internally.

There will be 3 ways to create and add Elementor menu anchor in WordPress mentioned in this tutorial:

• Add Anchor Links to the same Page
• Add Anchor Links to another Page
• Add Anchor Links to the WordPress menu

Now, let’s get started!

Add Anchor Links to the same Page using the Elementor Menu Anchor Widget

Step 1: Create an Elementor menu anchor

First, select the Page in Elementor Editor

Just go to your WordPress dashboard, choose an available page you want to edit or create a new page, then click on the Edit with Elementor button.

Here, I will choose a WooCommerce shop page to add the Elementor menu anchor.

The second step is to search for the Menu Anchor widget on the left side of the Elementor editor.

Then add it to the page you are editing, just above the section where you want a connection to appear.

After that, you need to write the name of this section in the ID of menu anchor.

Step 2: Connect anchor menu link with the anchor text

Now, select an anchor text, button, or tab from your WordPress site to redirect the visitors.

In this example, I created a button named More Products on the cart page for you to understand more easily.

To link this button with the Elementor menu anchor I have created, copy the ID of the menu anchor, paste it in the Link section of the anchor text. Remember to put it right after the # icon.

Finally, click Update to save your changes.

Now, you can visit the shop page frontend and check the WordPress anchor menu you have set. When users click on the ‘More products’ button, they will immediately be taken to the anchor menu custom link I have created before.

I have finished adding Elementor Anchor Links to the same Page. Let’s move to another part: adding an anchor link to another page in WordPress.

Add Anchor Links to another Page using the Elementor Menu Anchor Widget

You can generate as many Elementor anchor links that lead to a specific part of one page as you want, and you can do it on every page of your WordPress site. In case, you want to link a text in a page/ a blog of your site to a specific part on another page, just refer to the process below.

Step 1: Create an Elementor menu anchor

What we need to do is create an anchor on the section you want to link to as the way I presented above.

In this process, I will create an Elementor anchor menu for the featured products on the shop page.

Step 2: Add the Elementor anchor link to the place you want in your WordPress site

Unlike using the general URL of a page, when using Elementor anchor link, you need to put a more specific link that includes: the target URL/#anchor ID

For example, I will insert the anchor link I created above to the text “Shop now” on a blog. The link will be URL/#featured-products

It is time to check the result. When visitors click on the Shop now text, they will be navigated directly to the featured products section of the shop page.

Add Elementor Anchor link to WordPress Menu using the Elementor Menu Anchor Widget

In this part, I will choose the home page and edit it with Elementor

Then, we will proceed to the detailed steps.

Step 1: Create an Elementor menu anchor

Like the process above, the first step is to create a menu anchor in Elementor. Here, I will create 2 Elementor menu anchors for the home page.

The first menu anchor is for the New Arrivals section. I name its ID as “new-items“

The first menu anchor is for the Our Blog section. I name its ID as “blog”

Step 2: Include the Elementor anchor link to the WordPress menu

Navigate to your WordPress dashboard, click on Appearance > Menus

Looking for the Custom Link section.

I’ve created 2 menu anchors so in this example, I will include both of them to the WordPress menu section.

In here, you copy the anchor menu ID that you created earlier, paste it in the URL box (after the # icon). You also need to type in the Link Text.

Repeat this step to add the menu anchor “Blog” to your menu list. And after adding all menu anchors, you will see them on the list of Menu. Here, you can further customize your WordPress menu as you wish. Once finishing, remember to hit the Save Menu button to update your changes.

You have done the process of adding WordPress menu link to anchor. Now, you can go to your home page and take a look at the menu. Clicking on the New Items element, you will be driven to the New arrivals section, hitting on the Blog element, you will be taken down to the Our Blog section of the page.

Final thoughts

Your website will rank higher in search engines faster if you use anchor links. If search engines discover relevant content links in your anchor text, your blog, page, or website will swiftly rise in the rankings. Anchor links also have a positive effect on user experience.

So the Elementor menu anchor widget is an ideal solution for those who use WordPress sites built with Elementor and wish to create anchor links. However, while creating anchor links, you should just link the related content to each other. If you use irrelevant anchor links, your site will be penalized and may not show up in the search results.