Can i link collection card button to specific static page in webflow

Community resources
1

Here is my link…Webflow - Jairos_Adventure

2

Yes. Check under button settings.

image

3

Thank you very much for answering my question, but surprisingly all the buttons point to 10 Days migration page, I want each button to point to its own specific static page…what can I do

4

Webflow does not offer a “smart” way for a collection item to link to a static page on your site, so you have to use absolute URLs.

Just add a Link field into your collection, and then in that field for each item, you’ll put the full path to the page you want it to go to, even though it’s on your site already…

e.g.
https:// YOUR DOMAIN NAME /10-days-wildebeest-migration-safari

5

but at the moment it is using webflow.io domain, how will it be if I export it to my own domain, the path will remain the same???

6

No unfortunately you will have to change all of them if you change that domain name.

That requirement for absolute URLs is is a limitation of Webflow’s CMS ( no ability to store relative link URLs, or for to link to specific known pages ), combined with Webflow’s Link elements, which can only CMS-bind to CMS URL fields. ( no ability to bind them to a text field ).

For the most part I think these decisions were made to protect designers, as well as some history around how and when the CMS was integrated into Webflow’s platform. There are definitely some gaps around that integration, like the fact than an exported static site contains no CMS content at all. In short, the CMS doesn’t seem to “know anything” about the site it’s in, including the pages it could link to.

If you want to go around those limitations, you can use script to fix your link hrefs, or you can put an HTML Embed where your buttons are.

  • Create a text field in your CMS, let’s call it Tour Relative Link
  • Put in your tour links, e.g. /10-days-wildebeest-migration-safari but only the relative portion, starting with the /.
  • Put an HTML embed where your button is, and paste in your button code…
<a href="/10-days-wildebeest-migration-safari" class="read-more-safari w-button">Read More</a>

Now in that HREF attribute, you’ll embed your field using the + Field option in the top right of the HTML Embed code window. You’ll add your Tour Relative Link, and it will look something like this;

<a href="/{{ tour-relative-link }}" class="read-more-safari w-button">Read More</a>

That should work fine, but you will no longer see your button in the designer, only on the published site.

7

Also, the Webflow Wishlist is where you can help prioritize these things for the Webflow devs. Add your votes.

https://wishlist.webflow.com/ideas/WEBFLOW-I-512