Elementor Anchor Link Set

Setting anchor links in Elementor is a great way to improve navigation on your website and provide a seamless experience for users. Anchor links are particularly useful on long pages where they allow users to jump directly to specific sections. In this article, we will show you how to set anchor links in Elementor easily and effectively.

How to set an anchor link in Elementor

Method 1: Assign CSS ID directly in the element

  1. Select element
    Select the Elementor element to which the anchor link should jump.
  2. Assign CSS ID
    Go to the element settings, navigate to the “Advanced” tab and enter a unique ID under “CSS ID”, e.g. infos.
  3. Set link
    • Select text or button
      Highlight the text or select the button that should lead to the anchor link.
    • Add link
      Enter the ID of the menu anchor in the link field, e.g. #infos.
  4. Save changes
    Save your changes and publish the page.

Method 2: Using the menu anchor widget

  1. Open widget selection
    Open the Elementor editor and select the page on which you want to set an anchor link.
  2. Add menu anchor widget
    Drag the “Menu anchor” widget from the widget bar to the area of the page that you want to use as an anchor target.
  3. Assign ID
    Give the menu anchor a unique ID, e.g. kontakt.
  4. Set link to anchor:
    • Select text or button: Highlight the text or select the button that should lead to the anchor link.
    • Add link: Enter the ID of the menu anchor in the link field, e.g. #kontakt.
  5. Save changes
    Save your changes and publish the page.

Further options for setting anchor links

Anchor links in the navigation

  1. Edit menu entries: Go to your WordPress dashboard and navigate to “Design” > “Menus”.
  2. Add individual links: Add a new menu item and enter the URL of the anchor, e.g. #kontakt.
  3. Save menu: Save the menu to apply the changes.

Anchor links in text editors

  1. Open the text editor: Open the Elementor text editor or another text editor on your WordPress site.
  2. Insert HTML code: Insert HTML code to set the anchor, e.g. <a id="kontakt"></a>.

Anchor links in other widgets

  1. Edit widget: Select the widget in which you want to set the anchor.
  2. Advanced menu: Go to the “Advanced” tab and enter the anchor ID under “CSS ID”.

Tips and tricks

Optimal placement

Use anchor links strategically to increase user-friendliness. Place them on the most important sections of your site, such as contact forms, services or special offers.

Unique IDs

Assign unique and meaningful IDs to avoid confusion and make it easier to maintain your website.

Test the links

Make sure that all anchor links work correctly by testing the page in different browsers and devices.

Conclusion

Setting anchor links in Elementor is a simple and effective way to improve the navigation of your website. With the above steps and tips, you can make your website more user-friendly and offer users a better experience. If you need further assistance or would like to optimize your website, do not hesitate to contact us at beSIRIOus.

FAQ

An anchor link is a link that leads users to a specific section on the same page. This is particularly useful on long pages to improve navigation and provide users with a seamless experience.

There are two main methods:

  • Assign CSS ID directly in the element: Select the desired element, enter a CSS ID under “Advanced” and set the link to this ID.
  • Use the menu anchor widget: Drag the menu anchor widget onto the page, assign an ID and set the link to this ID.

The quickest method is to assign a CSS ID directly in the element. This allows you to set anchor links without additional widgets or complex settings.

Yes, you can use anchor links in the navigation by going to “Design” > “Menus” in the WordPress dashboard, adding an individual link and entering the URL of the anchor.

Check whether the CSS ID is correct and unique. Make sure that the link contains the correct ID (with #). Test the site in different browsers and devices to make sure there are no compatibility issues.