Creating Collection Pages

March 21, 2016

Collection Pages are the second method of displaying CMS content on your website (aside from Collection List). They are created automatically for each collection that you create, however, will remain as blank pages until content is added and designed.

Designing a Collection Page

To get to your Collection Pages, formerly called Collection Template Pages, simply navigate to the Pages panel on the left hand-side of the Designer - here you will see them at the very bottom.

A Collection Page is created automatically for each Collection.

At first, the template page will be blank - since there hasn't been any content added to the page. The first step is to do just that!

Adding content is the same as anywhere else in Webflow - simply drag and drop elements from the Add Panel, and style them using the Style Tab.

Binding Content on Collection Pages

Binding your content on a Collection Pages is exactly the same process as covered in the previous lesson - simply double click the item you wish to bind, or click once and navigate to the Settings Tab.

You will now have the option to get the content from a field in your collection. The best part? You only need to do this once for all of your collection items.

For example, when we bind this background image to an Image Field in our collection, each Blog Post will utilize their own unique background image to fill the space.

In this case we have a field labled Hero Image that is being used as the background image.

Linking to Collection Pages

Collection Pages can be easily linked to within the Link Settings panel. When you are clicked on a linkable object (like a link block, button or text link), navigate to the Settings Tab. Here you will see a purple page that will allow you to select from a list of your collections.

Webflow is also smart enough to know that if you are referring to a link that is within a Collection Lists or Collection Pages, you are wanting to link to that item's specific collection template page. For example, if a link block within our blog post thumbnail would be linked directly to that blog post's specific collection page.

Mat Vogels is a designer located in Denver, Colorado. After graduating from the University of Colorado, Mat jumped straight into the world of tech, working at companies such as PaySimple and Webflow as both a designer and marketer. Everything changed after Webflow's capabilities allowed him to jump headfirst in to the competitive world of freelance, creating entire brand and web experiences for dozens of companies. With the experiences of working with a wide range of companies, Mat thrives off teaching others how they too can supercharge their entire web creation process with the latest tools (like Webflow) and a broad range of the latest design techniques and approaches.