Website Building » Elementor » How do I link to an anchor in an Elementor?

How do I link to an anchor in an Elementor?

Last updated on December 22, 2022 @ 7:48 am

Anchors are the key to linking your content in Elementor. You can add an anchor to any text or element in your content. For this tutorial, we will use the “Menu Anchor” widget of Elementor for a “Button” and the “Top Menu” to be linked to specific blog content on a single page.

1. Elementor Menu Anchor Linked to a Button

To get started, go to the first point of contact, which is the button. Click on the button and add your preferred link in the “Link” section of the settings on the left menu. The link should have the format, #anchorname.

The next step is to add an anchor. To do this, select the “Menu Anchor” widget in the “Elementor” window and drag it above the content that you want to link to the button.

In the “ID of the Menu Anchor” section, input the anchor name that you created earlier.

NOTE: Take note that this is just the button link format without the “#” sign.

Once done, click on the “Update” button below to save your changes.

PRO TIP: If you are linking to an anchor in an Elementor, be sure to check that the anchor names between your elements match. Otherwise, the link will not work as expected.

2. Elementor Menu Anchor Linked to the Top Menu.

For the Top Menu, first, open the WordPress Dashboard, and on the left menu, go to Appearance > Menus.

In the “Menu structure” section, select the menu that you want to link to a blog content.

Then, in the drop-down menu that will appear, input a URL with the format, #anchorname.

NOTE: If the URL section is not there, add a new menu with the “Custom Link” option.

Once done, click on the “Save Menu” button below.

Now, go back to the page with the blog content to be linked. In the Elementor editor, select the “Menu Anchor” widget and drag it above the blog post that you want to link with the menu.

Input the anchor name that you created earlier in the “Menu structure” to the “ID of the Menu Anchor” section on the left.

NOTE: Again, note that this is the URL format without the “#” sign.

Once done, hit on “Update” to save your changes.

You can also preview the changes made by clicking on the “eye” icon beside the “Update” button.


Dale Leydon

Dale Leydon

Sysadmin turned Javascript developer. Owner of 20+ apps graveyard, and a couple of successful ones.