Designing with content on your website

Updated 
March 21, 2016

Now that you’ve created your collections, and have added individual items to those collections, you can begin to display them on your website.

Adding CMS content to your site will happen in one of two ways - either by a Collection , or through a Dynamic Template Page. Content for each will be populated from the same collection, but can be displayed on your site in different ways.

Collection List

A Collection List, formerly called Dynamic List, allows you to add CMS content on static pages(like your Home Page, for example).

Step 1: Drag in a Collection List

The first thing to do is drag in the Collection List to the location on the page you want it to exist. You can do this by navigating to the page you would like to add the collection, and drag in the Collection List element from the add panel.

You can useCollection List on all pages of your site.

Step 2: Connect the Collection List to a Collection

Once you've dropped in the Collection List element, you will need to assign the list to an existing collection (if you have not created a collection yet, learn how to here) from the dropdown list.

Step 3: Adjust the Collection List Settings

Once you've selected the collection to pull from, you will have the ability to select the UI State and Layout, as well as filter and sort the items as you wish within the Settings Panel.

UI State

The UI State options are Items or Empty. Items is the defaulted option, and will show the items that you have within the collection, whereas the Empty option will not show these items and give the designer the opportunity to design for a circumstance if/when there is no data to be displayed for this list.

Layout

The default layout option has each item cover the full width of the parent element. You can change this to show the items in different layouts, such as 2 columns, 3 columns, 4 columns and 6 columns.

Collection Lists will respond automatically to different device sizes.

You can also filter, sort and limit the items in this list, which we’ll cover after we add the content in.

Step 4: Designing your content within a Collection List

This step is the most important - and the most fun! Now that you’ve established what content is populating the list, you may begin to add, bind and style elements within them.

For this example we’ll be using a standard blog layout, already populated with content we’ve created in our Blog Post collection.

You can begin to add regular elements as you would to any other portion of your website - simply drag, and drop. Once dropped in to your list, notice that the element will immediately populate for each of the items in the list.

Content that is not binded to your own data is referred to as Static Content.

Just as you would for any other elements on the page, you can also add classes to any elements within a Collection List. This will help you style each of the elements in a near unlimited amount of ways.

Now it’s time for the magic. Now it’s time to add in your content, which you can do in one of two ways - The first is using static content, like an image from your asset library or content that you type right in.

The more common way of adding content to Collection List, is by utilizing the content you’ve already created in the collection itself. This is done through a process called binding. In order to use content from your collection, you need to first bind each of the elements individually.

Webflow will only show fields that match the element type (like images or text)

To bind an item you may either double-click it, or click it once and navigate to the Settings Panel. You will be given an option to select from a dropdown the field you wish to use.

Notice that with each element, we are given a dropdown of content to select from - Webflow is smart enough to recognize the type of content (like text or an image), and give you options that match these parameters.

Step 5: Filtering Items Within a Collection List

You can filter items within your list in multiple ways. We cover this in more detail in the next lesson.

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.