WordPress Navigation Menu with Anchor Link (Elementor Menu Anchor Widget) Tutorial

Create a WordPress Navigation Menu With Anchor Link - Elementor Menu Anchor Menu Widget

In this tutorial I will explain how you can easily add an Anchor link to a WordPress navigation menu with the Elementor Menu Anchor widget.

Table of Contents

WordPress Anchor Links explained

In WordPress, an “anchor link” typically refers to a hyperlink that directs visitors to a specific section or location within the same page or a different page on the website.

This type of link is often used for creating smooth navigation within lengthy articles or pages. Anchor links are also known as “page jumps” or “internal links.”

They are especially useful for long-form content, allowing readers to jump directly to relevant sections without scrolling.

Why Use Anchor Links in WordPress?

Improved User Experience: Anchor links make it easier for readers to navigate through lengthy articles, providing a more seamless and enjoyable experience.

Content Organization: They help organize your content, making it more accessible and user-friendly.

Call-to-Action Placement: Strategic use of anchor links enables you to place calls-to-action or important information at the beginning or end of your content, improving engagement.

In this tutorial I’ve explained how you can add an anchor link with Elementor on a page.

Select Elementor Menu Anchor Widget

The first steps are the same, so you need to add the Menu Anchor widget to a page or post by dragging the widget.

drag Elementor Menu anchor widget

 In the ID field you can enter a name for the anchor link. For this example, I’ve used “testtutorial” After that’s done you need to click on the Update button to save the changes.

Enter ID of menu anchor

Go to WordPress Menus Settings

Now you can go back to the WordPress menu and go to Appearance in the left menu and click on the Menus option.

Navigate to WordPress menus settings

Create a Custom Link in WordPress menu

The next step is to go to the Custom Links settings and in the URL field you can enter the URL followed by an # and the name for the Anchor link as you have used in the Elementor widget.

So for this example it would be https://websitelearninglab/#testtutorial

Now click on Add to Menu and don’t forget to save the settings by clicking on the Save Menu button.

Create custom link with ID for menu anchor widget Elementor

If you now go to the website and click on the link in the menu on any given page or post it will direct visitors to the location were the Elementor Menu Anchor widget points to.

Tips for effective use

Be Descriptive: Choose anchor names that reflect the content of the section, making it easy for users to understand where the link leads.

Test Responsiveness: Ensure your anchor links work seamlessly across different devices and screen sizes.

Strategic Placement: Consider placing anchor links in a table of contents at the beginning of your article for quick navigation

You can watch the video tutorial on YouTube via this link.

Mastering anchor links in WordPress is a simple yet powerful way to enhance your website’s user experience.

Start using anchor links in your WordPress posts and see the positive impact on your audience’s navigation experience. Happy linking!