Structure and style Collection pages

Structure and style Collection pages that work like templates and automatically update your design.

This video features an old UI. Updated version coming soon!

While Collection Lists can go on any page and reference content from a Collection, we can also design and configure Collection pages. If we build a Collection page for one Collection item? Content automatically populates for every other item in the Collection. It's like magic in that it can save us hours and hours in the development process — and even more time as we add new content down the road.

Just like Collection Lists, we'll cover basic layout and binding content, but we're also going to cover linking to a Collection page from somewhere else in the project.

If we go to our Pages Panel and select our Collection page—

Actually, let's go back in time for a few moments. Before we made this video lesson. We went in and made a new Collection. We made a Blog Collection. And we filled it with dummy content. The point here is this: when we make a Collection, a Collection page...is automatically created.

Let's go back to the present. We're building this just as we'd build another page. Our navbar, our footer, sections, and headings and images, and paragraphs, and rich text elements. Now you might say "how did that get built so quickly?"

But the real question you should be asking is "how is this Collection page any different than a static page (a normal page in our project)" And the answer is: it isn't.

Just like a Collection List, elements dropped into a Collection page are static until we bind them to something else. So let's bind them to something else.

We can take any of our elements — like this one — and bind it to the relevant field. And it's not pulling from that field on one item. It's pulling from that field on all our items in that Collection. How do we prove that? The scientific method.

Or, we can — at any time — choose from our Collection items (in this case: blog posts) in the drop down. Visit any of those? And the content we just bound updates on all these pages.

But is this just for text? No. This is not just for text. This is for everything. We can get our background image from the Collection. We can select this button and get the URL from the Collection. And the text. We can get that, too.

And when we switch our Collection items using the dropdown? Each page has automatically been generated. Now 20 blog posts were created in the time it took us to design and develop one. We put Dale to the test to see how long it would take someone to duplicate and style each page one-by-one. Some say he's still working on it to this day.

Finally, let's talk about linking to these Collection pages.

Here's a static page. We have a Collection List we made for our featured blog posts. Let's drag a button right into our Collection List. And for fun, let's pull the button's background color from a color field we have in our Collection.

And now we'll simply go in under our Link Settings, and choose A Collection page. Which one? Current Blog Post. That'll link each button in these Collection items to the Collection page created for each Collection item. Or in English: these buttons will take you to the related blog post.

So. Collection pages? Automatically generated when you create a Collection. We covered the layout of a Collection page, we covered binding content to elements in that layout, and we covered linking to these Collection pages from elsewhere in our project.

Anytime you create a new item (e.g. blog post, help article, etc) in a Collection, a page is automatically created for it. Collection pages work like templates – the layout and design of the Collection page applies to all automatically generated item pages.

Collection pages are essentially templates for recurring pieces of content, such as blog posts, help articles, or even landing pages.

In this lesson

Creating a Collection page
Adding and connecting content
Previewing Collection pages
Linking to a Collection page
Collection Page Settings

Creating a Collection page

Once a Collection is created, a Collection page will automatically be created as well. You can select this Collection page by going to the Pages Panel, and choosing it under the Collection pages section. A purple icon next to the Collection page indicates that it’s a CMS-generated page.

The CMS collection pages section displays four page templates called, Authors, Blog posts, collections and projects.

Adding and connecting content

You can design and develop the Collection page just like any other static page—but the power of Collection pages comes when you want to bring in dynamic content into that design.

Adding static and dynamic elements

Just like with Collection lists, elements dropped into a Collection page are static until they are connected to a field from the Collection. You design a Collection page like any other page, but the page acts as a template for all the Collection items

You can connect different elements in your design to Collection fields by following these steps:

Select an element on the Collection page
Click the settings icon (or go to the Element Settings Panel — shortcut:D)
Check Get content from Collection
Open the dropdown and choose the collection field you want to get content from

Once an element is getting content from a field, it is not just for that one item. This field is connected to the element across all item’s pages in that Collection.

Step one on the left, select the settings icon on the H1 text element. Step two on the right, the choose heading type settings panel displays H1 through H6 buttons, a learn more message with a Ok, got it button, a check box for the CMS Get text from a collection called Blog posts with a dropdown menu and a show all settings button.

Pro tip
Static elements have blue outlines and dynamic elements, or elements that have data coming from the CMS, have purple outlines on the canvas.

Previewing and switching Collection pages

When you're editing a Collection page, it appears as if you're editing only one of the items in the Collection. In fact, you’re editing all other pages simultaneously because you’re editing a template.

You can switch the content in the page to any Collection item using the dropdown in the top bar. You can go to a specific page by typing the name of the page in the search bar at the top of the Collection pages dropdown or in the Quick find bar.

The blog posts template collection page displays a dropdown to select between 6 different pages.

Helpful shortcut keys
Holding Shift+Option (Shift+Alt on Windows) and pressing the left and right arrows on your keyboard will switch collection items to the next or previous item in the list.

Three collection items displaying the process of switching from one to another.

Linking to Collection pages

You can link to a Collection page from other Collection pages or from a Collection list. Follow these steps to link from a Collection list:

Add a Collection list
Connect it to a Collection
Add a button, or any other link element to the Collection list
With the link element selected, click the gear icon (or go to Element Settings Panel)
Choose the purple Collection page link option
Choose Current Item

This will link each button in the Collection list to its respective Collection page created for each item.

Pro tip
You can also connect any link element to a link field in the URL field type of your link settings.

Collection Page Settings

In the Collection page settings, you can set the SEO meta title & description, Open Graph title & description, RSS, and custom code for your Collection page templates. However, unlike static pages settings, Collection page settings can have dynamic values, meaning they result in unique information for each Collection item page.

You can access the Collection page settings through the settings icon that appears when you hover over a Collection page template in the Pages Panel.

A settings icon is highlighted on a Blog post template page under the CMS collection pages section.

Dynamic SEO Settings

You can define a template for the page titles and descriptions using Collection fields. And, you can see how they'll look in search engine results pages (SERPs) in a preview box.

Learn more: Setting meta title and description

The SEO settings panel displays a search result preview, a title tag with a Name field added and a meta description input field with a blog post summary field.

Dynamic Open Graph Settings

Here, you can set the information that will be presented when sharing links to Collection pages on Facebook, Twitter, LinkedIn, Pinterest, and Google+. Using Collections fields will create a template for each page, resulting in unique Open Graph information for each page.

Learn more: Setting Open Graph settings

The Open Graph Settings panel displays an image preview, an input field for a title, a check box for Same as SEO title tag, an input field for a description and a check box for Same as SEO meta description and a drop down menu for the open graph image.

RSS Feed Settings

You can enable an RSS 2.0 feed for a Collection in the Collection page settings. This publishes a feed that RSS reader users can subscribe to and get updates when you publish new Collection items.

Here you can define the feed settings. You can use Collection fields to create a dynamic template for RSS channel title, description, and other settings. You can also see a preview of the feed right in the page settings. Then, ‍you can copy the RSS URL to use with other apps, or even add a link to it on your website.

Learn more: RSS feeds

Custom code

You can add custom code and scripts to the <head> or </head><body> tag of a Collection page template. This will apply to all Collection pages. And if this code contains any information that you would like to have a unique value per Collection item page, then, you can replace that value in the code with a Collection field. Simply, select the value, and click on the purple </body> + Add Field located at the upper right of the custom code text field.

Need to know
Custom code and scripts will only appear on the published site.

The Custom Code settings panel displays an Inside <head> tag input area and a Before </body> tag input area.

Try Webflow — it's free

Thanks for the feedback! This will help us improve our content.

Reach out to our community

Contact the support team

Something went wrong while submitting the form. Please contact support@webflow.com

Discover our courses related to this lesson and learn more!