Use the link field to dynamically add links to your designs.
A Link (from a Link field) can be used in any number of ways throughout a project. Obviously, we use it to enter Links. But we can bind this content — this Link from each Collection item — to any number of elements like: Normal Buttons, Link Blocks, 3D Buttons, Text Links, Animated Buttons, and of course...Impossible-to-select Buttons
With any of these kinds of elements selected (here's a button), we can simply get the URL right from our Collection. Of course, we also have the option to open the URL in a new tab.
The second Collection option here is to get the actual text for our Link (our button) from our Collection as well. This is a great opportunity to use the Plain Text field. And that plain text will replace the text inside the button if you'd like to use it.
But what's really great is how we can use the actual presence of a Link to show something specific. Let's say we have an organization and a good number of people in our organization have Facebook pages. A number of people don't. We'd only want to show the Facebook Link if they actually have a Facebook page.
We can add and configure a Facebook Link for everyone who has one — and bind that Link to the appropriate field. But here's the mind blowing moment: We can add a condition. We can say "Hey, the element is visible when...the Link (that Facebook Link) is set." So only team members who have a Link added will actually show up with the little Facebook icon. Super powerful.
So. Links: Great for buttons and text Links and Link blocks — they can Link you to any URL you enter.
The link field is a Collection field that lets you dynamically add links to your designs. Link fields are usually connected to link elements like text links or buttons to become active links. You can even choose to display the URLs as text. Link fields can also be used to filter Collection Lists or show specific elements using conditional visibility in your Collection Lists or on Collection Pages.
Common uses
In this lesson, we'll show you how to:
A link field can be added to a new or existing Collection. In Collection settings, click New Field and then choose the Link field.
And as with any field, you can specify if the field is required or not.
You or your Collaborators can select a Collection Item in the CMS and add any valid URL to this field.
The link field can be connected to any text element.
You can also access the Inner Text Settings by selecting the text element and either clicking the settings icon next to the element label on the canvas, or by going to the Settings panel (D).
You can remove the connection by unchecking the Get text from checkbox in the Inner Text Settings.
You can also connect a link field to any link element, including a button. To create a dynamic link:
You can also pull the text for a button from a plain text field or from the link field.
You can also access the Link Settings by selecting the text element and either clicking the settings icon next to the element label on the canvas or by going to the Settings panel (D).
You can remove the connection by unchecking the Get URL from and/or Get text from checkbox(es) in the Settings panel.
To filter your Collection List using a link field:
The filter rules that you can use with the link field and values are:
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 Facebook profiles, but know that they don't all have Facebook pages, you can:
Now, you can set the following condition to ensure that the button is visible on the page only when a Facebook page link is set.
Something went wrong while submitting the form. Please contact support@webflow.com
Got a lesson suggestion? Let us know
Need more help? Want to report a bug? Contact support
Have feedback on the feature? Submit feature feedback