Link field

Use the link field to dynamically add links to your designs.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

The link field is a Collection field that lets you dynamically add links to your designs — for example, to create registration links to third-party event services (e.g., Eventbrite) or links to social media. Link fields are typically connected to text links or buttons and can be used to filter Collection lists, or to show specific elements using conditional visibility in Collection lists or on Collection pages.

Pro tip: You can add inline links with the rich text field.

In this lesson, you’ll learn:

  1. How to create a link field
  2. How to connect link fields to text and links
  3. How to filter a Collection list with the link field
  4. How to set conditional visibility with the link field

How to create a link field

You can create a link field in any new or existing Collection. Go to your Collection settings, click Add new field, and choose Link. To add content to a link field, select a Collection item in the CMS and enter any valid URL to this field. You can use relative links (e.g., “/about-us”) in the link field.

How to connect link fields to text and links

You can connect link fields to text elements in Collection lists or on Collection pages to dynamically display the URL as text. To connect a link field to a text element:

  1. Select the text element (e.g., text block) on the canvas
  2. Go to Element settings panel > “Element” settings
  3. Check the Get text from “Collection” checkbox
  4. Choose the link field from the dropdown

You can also connect a link field to any link element, including buttons, in Collection lists or on Collection pages, to create a dynamic link. To connect a link field to a link element:

  1. Select the link element (e.g., link block, button) on the canvas
  2. Go to Element settings panel > Link settings
  3. Check the Get URL from “Collection” checkbox
  4. Choose the link field from the dropdown

You can remove connected link fields from text and link elements by unchecking the Get URL from “Collection” or Get text from “Collection” checkbox(es) in the Element settings panel.

How to filter a Collection list with the link field

To filter your Collection list using a link field:

  1. Select the Collection list you want to filter on the canvas
  2. Go to Element settings panel > Collection list settings > Filters
  3. Click the “plus” icon to create a filter
  4. Choose the link field from the first dropdown
  5. Choose a rule (e.g., Equals, Does not equal, etc.) from the second dropdown
  6. (Optional) Specify the value if needed
  7. Click Save

Filter rules

You can use the following filter rules with link fields:

  • Equals — looks for Collection items with a URL equal to the URL you specify for this rule
  • Does not equal — looks for Collection items with a URL that isn’t equal to the URL you specify for this rule
  • Is set — looks for Collection items that have any URL set for this link field
  • Is not set — looks for Collection items that don’t have any URL set for this link field

Learn more about filtering Collection lists.

How to set conditional visibility with the link field

You can set conditional visibility to show or hide individual elements in a Collection list or on a Collection page using the link field.

For example, if you have a Collection of people and want to list their portfolio sites, but know that they don’t all have portfolio sites, you can create a link to each person’s portfolio site that appears only when a portfolio site link is set.

To create this condition, you’ll need to add a link field to your Collection (e.g., “Portfolio site”), add portfolio site links for each person who has one in their corresponding Collection item, and design an element to serve as the link to their portfolio. Then:

  1. Select the link element on the canvas
  2. Go to Element settings panel > Link settings
  3. Check the Get text from “Collection” checkbox
  4. Choose the link field from the dropdown
  5. Go to Element settings panel > Conditional visibility
  6. Click the “plus” icon
  7. Choose the link field (e.g., “Portfolio site”) from the first dropdown
  8. Choose Is set in the second dropdown
  9. Click Save

Learn more about conditional visibility.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top