How do I create anchor links?

“How Do I Create Anchor Links in Elementor?” refers to setting up clickable links that navigate users to a specific section of the same page or a different page. Anchor links are particularly useful for creating navigation menus, table-of-contents, or one-page websites.

Steps to Create Anchor Links in Elementor

1. Add an Anchor to a Section

The first step is to set up an anchor on the page to mark the section you want to link to.

• Drag the “Menu Anchor” Widget:
  • Open the Elementor editor.
  • Locate the Menu Anchor widget in the Elementor panel.
  • Drag and drop it above the section or content you want to link to.

• Set an Anchor ID:
  • In the Menu Anchor Settings (left panel), give the anchor a unique ID (e.g., about-us or contact).
  • This ID will be used in the anchor link.

2. Create an Anchor Link

Once the anchor is set, you can create a clickable link to navigate to it.

• Edit a Button, Link, or Menu Item:
  • Select the element (e.g., a button, text link, or navigation menu) you want to turn into an anchor link.
  • Go to the Link field in the settings.

• Add the Anchor Link:
  • If the anchor is on the same page, use #anchor-id. For example:

3. Test the Anchor Link

• Save and preview your page.

• Click the anchor link to ensure it scrolls to the correct section.

Use Cases for Anchor Links

1. One-Page Websites:
   • Create smooth navigation for sections like “About Us,” “Services,” and “Contact.”
     
2. Table of Contents:
   • Link headings to their respective sections for easier navigation.
     
3. Call-to-Action Buttons:
   • Direct users to a form or specific part of the page.

Tips for Anchor Links in Elementor

1. Smooth Scrolling:
   • Elementor automatically adds smooth scrolling for anchor links, creating a seamless user experience.
     
2. Unique Anchor IDs:
   • Ensure each anchor ID is unique to avoid conflicts.
     
3. Responsive Design:
   • Test anchor links on different devices to ensure proper navigation.
     
4. Add Spacing for Fixed Headers:
   • If your page has a fixed header, the anchor section might appear hidden behind it. To fix this:
     • Add padding or margin to the section with the anchor.
     • Alternatively, use custom CSS to offset the scroll position.

Example for Anchor Link Setup

Adding a Menu Anchor:

<div id=”about-us”></div>
<section>
<h2>About Us</h2>
<p>Welcome to our website!</p>
</section>

Linking to the Anchor:

<a href=”#about-us”>Go to About Us</a>