How can I link to an anchor link on a different page in Webflow without using absolute paths?

Published on
September 22, 2023

To link to an anchor link on a different page in Webflow without using absolute paths, you can follow these steps:

  1. Create an anchor link on the destination page:
  • Open the destination page in the Webflow Designer.
  • Select the element where you want to create the anchor link.
  • Click on the settings icon (gear icon) for that element.
  • In the settings panel, under the "ID Attribute" section, enter a unique ID for the element.
  • Save and publish your changes.
  1. Link to the anchor link from the source page:
  • Open the source page in the Webflow Designer.
  • Select the element (such as a button or text) that you want to use as the link.
  • In the settings panel, click on the link icon.
  • In the link settings, choose "Page" as the link type.
  • Select the destination page from the dropdown menu.
  • In the URL field, enter the relative URL of the destination page followed by # and the ID of the anchor link. For example: /destination-page#anchor-id
  • Save and publish your changes.

By using the steps above, you can create a link to an anchor link on a different page in Webflow without resorting to absolute paths. This allows you to maintain flexibility in your project structure and avoid potential issues that may arise from absolute linking.

Example:
Let's assume you have two pages: home and about. On the about page, you have an element with the ID attribute set to team. To link to the team section on the about page from the home page, you would set the URL of the link on the home page to /about#team.

Note: Make sure to include the leading slash / before the URL path to ensure the link works correctly.

Additional Questions:

  1. How do I create an anchor link in Webflow?
  2. Can I use anchor links within the same page in Webflow?
  3. What are absolute paths and when should they be used in Webflow?