Introduction to the Webflow CMS

A content management system (CMS) is a platform where dynamic content is stored and managed on a website. Dynamic content, which refers to content that changes, can be incorporated into the site design. Any updates or changes made to the content in the CMS by you or a team member will be instantly reflected on all pages where it’s used.

This tutorial will cover:

1. The process of organizing dynamic content in the CMS
2. Integrating dynamic content within your website
3. Modifying dynamic content

Organizing Dynamic Content in the CMS

The initial step involves creating a Collection. A Collection stores dynamic content in Collection items, allowing you to reference this content across your website.

Each Collection is designated to store a specific type of content. For example, you can establish Collections for blog posts, team members, job listings, recipes, or any other content you prefer. Each Collection consists of Collection items – representing individual instances like a single team member in a “Team members” Collection.

Collections offer an efficient method of storing and managing consistent content structure.

Defining Collection Fields

When setting up a Collection, you determine the structure for each Collection item within it. For instance, when creating a Collection for “team members,” you might include fields for name, picture, and email. Each type of content corresponds to a Collection field – for instance, a plain text field for names, an image field for pictures, and an email field for addresses.

It’s possible to update or delete Collection fields, as well as the content within them, at any point.

Explore more about utilizing Collection fields for organizing Collections.

Creating Content

Once the Collection fields are in position, you can commence creating Collection items. Each Collection item serves as a distinct segment of content within the Collection.

For example, following the creation of your “Team members” Collection, you can start inputting content for each team member. Within each Collection item (i.e., each team member), you’ll complete the predefined Collection fields (such as name, picture, and email address).

Pro tip: For importing numerous Collection items simultaneously, consider using a CSV file.

Learn further about creating and structuring Collections.

Incorporating Dynamic Content in Your Website

After forming your Collection structure and adding Collection items, you can include that dynamic content on your website. This can be achieved through two methods: utilizing a Collection list or designing a Collection page.

Displaying Collections

Using the Collection list element, you can showcase dynamic Collection content on any page of your site, including static pages like the homepage. It allows you to specify which items are displayed, apply filters or conditional visibility based on field values, and organize the content.

Designing Collection Pages

For each Collection item in your Collection, a Collection page is automatically generated. Consider a Collection page as a universal design template for all Collection items – the design you craft on the Collection page is applied to each item in your Collection.

When customizing a Collection page, you can integrate dynamic content by referencing Collection fields. Any changes made to the design or dynamic references of a Collection page will reflect across all Collection pages associated with items in that Collection.

Note: Elements placed on a Collection page remain static until they are linked to Collection fields.

Modifying Dynamic Content

Content within your Collection can be altered or expanded at any moment. This can be executed from either the Designer or the Editor.