How to Create Anchor Links in Elementor

Anchor links in Elementor let users jump to specific sections of a page, improving navigation and enhancing user experience. This tutorial explains how to add, use, and customize anchor links in WordPress using Elementor.

What is an Anchor Link in Elementor?

Anchor links, also known as jump links, allow users to click and scroll directly to a section of the same page. In Elementor, this is achieved using the Menu Anchor widget.

How to Add an Anchor in Elementor

To set up a destination for your anchor link, you'll need to insert a Menu Anchor widget in Elementor. This widget acts as a marker that your link will jump to.

Insert the Menu Anchor widget

1. Open the WordPress page you want to edit with Elementor.
2. In the left panel, search for the Menu Anchor widget.
3. Drag and drop it into the section where you want users to scroll to.

Configure the anchor ID

4. Click the Menu Anchor widget to open its settings.
5. Enter a short, unique ID in the field labeled "Anchor ID". Example: about-section.
6. Click Update to save your page.

Place the anchor widget just above the content you want to link to for better alignment during scroll.

How to Create Anchor Links in Elementor

After placing your anchor, the next step is to link to it from buttons, text, or other widgets. This allows users to click and be taken directly to the anchored section.

Link from a button or text

1. Select a widget like a button, image, or text block that you want to turn into a link.
2. In the Link field, type the anchor using a hashtag, e.g., #about-section.
3. Preview the page and click the link to test the scroll action.

Link from another section of the same page

Repeat the same steps—just use the anchor ID starting with # when setting any internal link on the same page.

Link from a navigation menu

1. Go to Appearance > Menus in the WordPress dashboard.
2. Use the Custom Links section to add a new item.
3. Set the URL as the anchor link (e.g., #about-section) and add a label like "About".
4. Add to Menu and save changes.

Using Anchor Links in Navigation Menus

For one-page websites or internal page navigation, you can add anchor links directly to WordPress menus:

1. Go to Appearance > Menus in WordPress dashboard.
2. Click Custom Links.
3. Enter the anchor (e.g., #features) in the URL field and label it.
4. Add to Menu and Save.

Best Practices for Anchor Link Navigation

To create a smooth and user-friendly anchor link experience in Elementor, it's important to follow a few best practices. Proper anchor usage not only improves navigation but also boosts accessibility and page flow:

• Use clear and concise anchor names. Keep anchor IDs short, lowercase, and relevant (e.g., “features” instead of “section1”). This improves readability and helps with linking consistency.
• Place anchors just before the section's title or heading. Position the Menu Anchor widget directly above the section’s heading so that the content appears immediately after scrolling. This ensures the user sees the correct context after clicking a link.
• Test all links for smooth scrolling and proper positioning. After adding anchors and links, preview your page and test navigation. Confirm that scrolling is smooth and that the section isn’t hidden behind sticky headers or navigation bars.

Troubleshooting Anchor Link Issues

Anchor links in Elementor usually work well, but a few common problems may cause them to misbehave. Below are typical issues and how to resolve them effectively:

Link doesn’t scroll: Double-check that the Menu Anchor widget’s ID matches exactly with the link’s destination (e.g., #about matches about). Anchor IDs are case-sensitive and must not include spaces.

Scroll position is off: If the page scrolls but the target content is partially hidden (usually behind a sticky header), add top padding to the target section or apply a scroll offset using Elementor’s motion effects or custom CSS. This improves visibility after scrolling.

Anchor not found: Avoid using special characters, punctuation, or spaces in anchor IDs. Stick to alphanumeric characters and dashes (e.g., team-section) to ensure compatibility across browsers and themes.

Useful Links

How to Use the Elementor Menu Anchor Widget – Official Elementor documentation explaining how to insert and configure the Menu Anchor widget, ID restrictions, and smooth internal page navigation.

90+ Top widgets to Achieve Your Goals with Elementor!

Elfsight created dozens of useful widgets to make your website more attractive and boost its performance in so many ways. Try these no-code solutions for free on Elementor!

Conclusion

Anchor links are a simple but powerful tool to enhance Elementor page navigation. Whether you’re building a landing page or full website, knowing how to add an anchor link in WordPress Elementor helps users navigate more effectively and smoothly.