CMS & dynamic content

Start off the year with a 21-day portfolio challenge

Beginner - Intermediate
40min

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.

Learn how to use Webflow CMS to build completely custom websites powered by dynamic content, and define your content's structure and style.

Pause the background video
Webflow is free for students and educators
Learn more & apply

Summary

Course progress

Nice job, we did some time travel into the future and it is looking amazing!

0
%

Completed

0
of
24

Lessons done

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.

The challenge

Challenge
Day
Be a website hero
01
The ultimate navbar
02
Magical CMS layout
03
Formulate leads and science
04
Virtual shoes for your site
05
Hello, it's responsiveness
06
Show off your project pages
07
Project pages working everywhere, anywhere
08
The optimum contact page
09
Show us your contact page
10
Test your Open Graph settings
11
Shine a light
12
Bring your portfolio to life
13
Lost, but never forgotten
14
Password-protected
15
Practice accessibility
16
Share your design in progress
17
Ready, set, publish!
18
Portfolio verification
19
Update your CMS
20
Showcase your portfolio
21

Ready to get certified?

Test your web design and development knowledge learned in the Webflow 101 course. Challenge yourself with questions about the principles of the web, like the box model, HTML and CSS.

Go to Webflow 101 exam

The challenge

Challenge
#
Site Build: Hero
01
Site Build: Navigation
02
Site Build: Logos
03
Site Build: Cards
04
Site Build: Form
05
Site Build: Footer
06
Site Build: Responsiveness
07
Site Build: Publishing the site
08

Check out the new Figma to Webflow plugin

Ready to get certified?

Once you’ve completed the Webflow Expert Certification Course, you’re all set to take the next step in becoming a Webflow Expert. Please note: passing the Expert exam does not guarantee entry into the Webflow Expert program.

Go to Webflow Experts exams

Course outline

Getting started
CMS Collections
Designing with Collections
Modifying Collections
CMS Collection Fields
Advanced Dynamic Content

CMS & dynamic content

24
Lessons
Getting started
Getting started
CMS Collections
CMS Collections
Designing with Collections
Designing with Collections
Modifying Collections
Modifying Collections
CMS Collection Fields
CMS Collection Fields
Advanced Dynamic Content
Advanced Dynamic Content
No items found.

Intro to dynamic content

An explanation of static and dynamic content.

Transcript
Read the full article
Read the full article

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
Transcript
Read the full article
Read the full article

CMS Collections

A ​​CMS Collection is a grouping of content types with a customizable structure in the Webflow CMS, like blog posts, authors, or help articles.

Transcript
Read the full article
Read the full article

Collection list

Use a Collection list to add a Collection’s dynamic content to your site.

Transcript
Read the full article
Read the full article

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.

Transcript
Read the full article
Read the full article

Modify a Collection

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

Transcript
Read the full article
Read the full article

Import collection items

Use a CSV file to import thousands of Collection items or just a select few into your Webflow site in one go.

Transcript
Read the full article
Read the full article

Intro to the CMS Editor

The Editor lets you update and add content in a simple interface, which is great for clients or teammates who don't need the complexity of the Designer.

Transcript
Read the full article
Read the full article

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.

Transcript
Read the full article
Read the full article

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.

Transcript
Read the full article
Read the full article

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.

Transcript
Read the full article
Read the full article

Video field

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.

Transcript
Read the full article
Read the full article

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.

Transcript
Read the full article
Read the full article

Link field

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

Transcript
Read the full article
Read the full article

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.

Transcript
Read the full article
Read the full article

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.

Transcript
Read the full article
Read the full article

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.

Transcript
Read the full article
Read the full article

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.”

Transcript
Read the full article
Read the full article

Option field overview

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

Transcript
Read the full article
Read the full article

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.

Transcript
Read the full article
Read the full article

Reference field

Use reference fields to connect items from different Collections.

Transcript
Read the full article
Read the full article

Multi-reference field

A multi-reference field lets you associate one item with multiple items from another Collection, which is great for tagging and categorization.

Transcript
Read the full article
Read the full article

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.

Transcript
Read the full article
Read the full article

Requirements

  • Free (or premium) Webflow account — sign up
  • Chrome or Safari browser
Clone this project
Use this version to clone the completed project
Clone this project
Blank pages without hitting page limits
Go to Webflow 101 exam

Related courses

There's more coming

We're rolling out more lessons very shortly. Sign up to get early access to additional Webflow lessons and courses.

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