Summary

Using a content management system (CMS) to power your website's content makes life a lot easier. And when you're ready, you can invite stakeholders to update content right on the live site. With Webflow CMS you can define, design, and publish powerful, dynamic websites — without hiring a developer or even looking at code. This course covers the basics and how to get the most out of your content with Webflow CMS.

Lessons in this course

Getting started

Coming soon

Overview dynamic content
1:36
Coming soon

Intro to Webflow CMS
2:02
Coming soon

CMS Collections

Coming soon

CMS collections
2:05
Coming soon

Import collection items
1:48
Coming soon

Designing with Collections

Coming soon

Collection list
3:33
Coming soon

Collection pages
3:03
Coming soon

Modifying Collections

Coming soon

Modify a collection
2:05
Coming soon

Intro to the CMS Editor
2:22
Coming soon

CMS Collection Fields

Coming soon

Plain text field overview
0:52
Coming soon

Rich text field
1:16
Coming soon

Image field
1:24
Coming soon

Dynamically insert videos
0:39
Coming soon

Email field
0:47
Coming soon

Link field
1:26
Coming soon

Phone field overview
0:43
Coming soon

Number field overview
1:27
Coming soon

Date/time field
1:38
Coming soon

Switch field
0:58
Coming soon

Option field overview
1:25
Coming soon

Color field
0:38
Coming soon

Reference field
1:11
Coming soon

Multi-reference field
2:31
Coming soon

Advanced Dynamic Content

Coming soon

Filter Collection lists
2:47
Coming soon

Conditional visibility
2:43
Coming soon

CMS & dynamic content

24
Lessons
Getting started

Getting started

Coming soon

Coming soon

Coming soon
CMS Collections

CMS Collections

Coming soon

Coming soon

Coming soon
Designing with Collections

Designing with Collections

Coming soon

Coming soon

Coming soon
Modifying Collections

Modifying Collections

Coming soon

Coming soon

Coming soon
CMS Collection Fields

CMS Collection Fields

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon

Coming soon
Advanced Dynamic Content

Advanced Dynamic Content

Coming soon

Coming soon

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

Overview dynamic content

In this video, we'll explain the differences between static and dynamic content, and learn why the latter is so useful for some of the most popular content types on the web, from blog posts to product pages.

Download assets
Clone this project
Learn more
Transcript

Intro to Webflow CMS

A CMS (content management system) is a tool for managing and publishing dynamic content. The website references that dynamic content on different pages. So anytime you or your client creates or changes content in the CMS, it updates all the pages where it’s referenced, instantly.

The Webflow CMS gives you full control over your content structure and how this content is designed throughout your project — all without you even touching a line of code.

In this video, we'll introduce some basic concepts behind the CMS, including:

  1. ‍Structuring content
  2. ‍Referencing content
  3. ‍Editing content
Download assets
Clone this project
Learn more
Transcript

CMS collections

A Collection is like a database—it's where content can be stored and dynamically referenced throughout a project. Different Collections signify different content types, and an individual piece of content within a Collection is called a Collection item.

In this lesson, we’ll cover:

  1. ‍Creating Collections
  2. ‍Adding Collection fields
  3. ‍Creating Collection items
  4. ‍Editing Collections
Download assets
Clone this project
Learn more
Transcript

Import collection items

Lesson info

When you create Collections in Webflow, you can enter your Collection items manually, or, import them directly into a Collection via a CSV. This allows you to import hundreds or even thousands of items from an external source.

In this video, we'll show you how to:

  1. Upload a CSV to a Collection
  2. Configure fields and preview Collection items
  3. ‍Import data
Download assets
Clone this project
Learn more
Transcript

Collection list

Collection lists are one of two ways to add and design dynamic content from a CMS collection or an Ecommerce Collection. You can add Collection lists to any type of page. The other way to add dynamic content is with Collection pages.

Download assets
Clone this project
Learn more
Transcript

Collection pages

Whenever you create a new item (e.g., blog post, help article, etc.) in a Webflow CMS Collection, a page is automatically created for it. Collection Pages work like templates — the layout and design of the Collection Page will apply to every Collection item's page.

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

In this video, we'll show you how to:

  1. Create a Collection Page
  2. Add and connect content
  3. Preview Collection Pages
  4. Link to a Collection Page

Plus, we'll show you the settings you can adjust for Collection Pages.

Download assets
Clone this project
Learn more
Transcript

Modify a collection

Once you’ve created a Collection, you can go back and edit Collection items, fields, and other settings — even after the project has been published.

This video will cover:

  1. Editing Collection settings
  2. Editing individual Collection items
  3. Bulk-editing Collection items
Download assets
Clone this project
Learn more
Transcript

Intro to the CMS Editor

The Webflow Editor makes editing the website, and publishing new content, really easy for your client or your team. The Webflow Designer is a powerful tool for building websites, and the Webflow Editor is a simplified interface that’s focused on editing website content. You can edit content right on the page, or in the panels below the page.

Download assets
Clone this project
Learn more
Transcript

Plain text field overview

The plain text field is a CMS field you can use in your Collections. This field is best used for basic textual content that doesn't need special formatting like headings, inline styles, or inline media like images or video. In this video, we'll explain how to add and use plain text fields in your Webflow CMS Collections.

Download assets
Clone this project
Learn more
Transcript

Rich text field

The rich text field is a CMS field used in Collections. Us it to give collaborators all the text formatting options they expect from a writing tool, including bold, italics, inline images, links, and more. In this video, we'll explain how to add and use rich text fields in your Webflow CMS Collections.

Download assets
Clone this project
Learn more
Transcript

Image field

The image field is a CMS field used in Collections that allows you and your collaborators to upload an image to your Collection items and use it in your designs. In this video, we'll show you how to use the image field.

Download assets
Clone this project
Learn more
Transcript

Dynamically insert videos

The video field is a CMS field used in Collections. It allows you to add videos via a link from third-party online video hosts Vimeo and YouTube.

Download assets
Clone this project
Learn more
Transcript

Email field

The email field is a CMS field used in Collections that lets you include an email address in a Collection item. You can use this email address to display the email as text or turn it into an active link so visitors can send an email with a click or a tap.

Download assets
Clone this project
Learn more
Transcript

Link field

The link field is a CMS field used in Collections to dynamically add links to your designs.

Download assets
Clone this project
Learn more
Transcript

Phone field overview

The phone field is a CMS field used in Collections. The phone field lets you and Collaborators capture and link to a phone number from Collection items. You can use this field to display a phone number as text or turn it into an active link so visitors can place a call with a click or a tap.

Download assets
Clone this project
Learn more
Transcript

Number field overview

The number field is a CMS field used in Collections, handy for displaying numeric values like statistics, prices, page counts, file sizes, and more.

Download assets
Clone this project
Learn more
Transcript

Date/time field

The date/time field is a CMS field used in Collections. This lets you and your Collaborators include a date and time in your Collections items, which is super handy for events of all kinds.

Download assets
Clone this project
Learn more
Transcript

Switch field

The switch field is a CMS field used in Collections, usually as a filtering tool. Like any toggle, it has two values: Yes or No. Collaborators can toggle a switch on or off to specify, for example, if a blog post “is featured.”

Download assets
Clone this project
Learn more
Transcript

Option field overview

The option field is a CMS field used in Collections. It gives collaborators a list of predefined values to choose from.

Download assets
Clone this project
Learn more
Transcript

Color field

The color field is a CMS field used in Collections. It allows you and your Collaborators to specify a color for each Collection item using a color picker. This color can be used to style the background color, text color, and border color of elements within a Collection list or a Collection page.

Download assets
Clone this project
Learn more
Transcript

Reference field

The Reference field is a Collection field that you can add to any of your Collections. This powerful field allows you to link to an item in a different Collection. You can then use the referenced item’s content in Collection Lists and Collection Pages. In this video, we'll discuss some common uses of the Reference field, then show you how to make the most of it in your designs. To reference multiple items from a different Collection, use the Multi-reference field.

Download assets
Clone this project
Learn more
Transcript

Multi-reference field

A multi-reference field is just like a reference field, except it allows you to reference more than one item. This is great for tagging systems, related content, and other instances where you want to connect one item to many others. In this video, we'll show you how to use this powerful field in your CMS-driven websites.

Download assets
Clone this project
Learn more
Transcript
Transcript

Conditional visibility

Conditional visibility is the most versatile way to show or hide elements, whether in a Collection list or on a Collection page, based on values in the Collection's fields. For example, you could use conditional visibility to make events that are now in the past no longer appear on your events page. In this video, we'll show you how to use conditional visibility on your Webflow sites, and introduce a couple more examples of conditional visibility in action.

Download assets
Clone this project
Learn more
Transcript

Requirements

  • Free (or premium) Webflow account — sign up
  • Chrome or Safari browser

Directed by

McGuire Brannon

Director of Education

Produced by

McGuire Brannon

Director of Education

Written by

McGuire Brannon

Director of Education

https://twitter.com/mcguirebrannon

Article by

Anna Kelian

Learning & Development Coach

Edited by

McGuire Brannon

Director of Education

Stacy Han

Video Producer

Designs by

-

Related courses

Be the first to get the newest lessons

We release 2 new lessons every week, always first on Webflow University.

Sign up to learn more about Webflow University releases, including lesson and course launches, certifications, sneak peaks, and Grímur's top secret tips for reversing time.

Shoot, something didn't work. Try again later, bud.