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

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.

An explanation of static and dynamic content.

Overview dynamic content
1:36
Coming soon

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

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

Intro to Webflow CMS
2:02
Coming soon

CMS Collections

Coming soon

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

CMS Collections are content types with different structures in the Webflow CMS, like blog posts, authors, or help articles.

CMS collections
2:05
Coming soon

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

When you create Collections in Webflow, you can import Collection items via a CSV. This allows you to import hundreds or even thousands of items.

Import collection items
1:48
Coming soon

Designing with Collections

Coming soon

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.

Collection lists are one of the two ways to add and design dynamic content from a Collection.

Collection list
3:33
Coming soon

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.

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

Collection pages
3:03
Coming soon

Modifying Collections

Coming soon

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

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.

Modify a collection
2:05
Coming soon

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.

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.

Intro to the CMS Editor
2:22
Coming soon

CMS Collection Fields

Coming soon

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.

‍The plain text field is a Collection field that is best used for basic text that doesn't need formatting like headings, inline styles, or inline media.

Plain text field overview
0:52
Coming soon

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.

Rich text fields are used for long-form content you can format from the CMS panel in the Designer or the Editor.

Rich text field
1:16
Coming soon

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.

Use the image field to upload images in dynamic designs and template pages.

Image field
1:24
Coming soon

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.

The video field is a Collection field which allows you to dynamically insert videos in your designs and template pages.

Dynamically insert videos
0:39
Coming soon

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.

Use the email field to specify an email address for a Collection item.

Email field
0:47
Coming soon

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

Use the link field to dynamically add links to your designs.

Link field
1:26
Coming soon

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.

Use the phone field to specify a phone number for items in a Collection.

Phone field overview
0:43
Coming soon

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

The Number field is a Collection field used when the input is meant to be a numeric value.

Number field overview
1:27
Coming soon

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.

Use the Date/Time field to specify a date and time for Collection items.

Date/time field
1:38
Coming soon

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

The Switch field is a Collection field that is primarily used as a filtering tool. A switch is a field type which can have either of two values: Yes or No.

Switch field
0:58
Coming soon

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

Use the option field in Collections to give collaborators a list of predefined values to choose from.

Option field overview
1:25
Coming soon

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.

The color field is a Collection field that allows you and your Collaborators to specify a color for each Collection item using a color picker.

Color field
0:38
Coming soon

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.

Use reference fields to connect items from different Collections.

Reference field
1:11
Coming soon

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.

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

Multi-reference field
2:31
Coming soon

Advanced Dynamic Content

Coming soon

Learn how to filter and limit items in Collection lists.

Filter Collection lists
2:47
Coming soon

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.

Use conditional visibility to show or hide elements in a dynamic design and create unique designs for Collection items based on different criteria.

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

Learn more

Transcript

So many of our projects are all about content. And sometimes we have a lot of it. Back in the Stone Age, we'd have to configure all of this content by hand. That's what we mean by "static content." It stays just as we created it.

We'd get this perfectly-designed blog page exactly how we'd like it, and what do we do? We duplicate. And then we go in and change the content on our duplicated page. We just created another blog post.

But then what happens when we want to change part of our design? We want to add something new on each page? Well, that's fine. We just go back and change it on the other page, too. Except that's not how it works. Because this project has 400 blog post pages.

We've all been here. That's static content. We have to do everything by hand.

With dynamic content, the concept changes entirely. Dynamic content — whether it's a name or a color or a photo or a number or an email address — any content. It can be added or imported whenever to a database. And your design? No matter how perfect it is or how detailed you make it or how many pages you have? You just create it once. And you can pull anything from that database. So everything gets built out automatically. No more going back and updating everything one-by-one.

This works for anything you can imagine, because you can customize the database to have any kind of content you want. And you can get super granular with controlling and organizing your content. And with that, you can do blogs, and restaurant menus, and development projects, and team member pages, news sites, and fake news sites.

But that's the main difference. Static content: entering and tweaking things one-by-one. And dynamic content: you can reference your custom database. You get to control everything, but the content is built out automatically using your design.

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
Learn more

Transcript

The CMS is how we control and work with our dynamic content. In the Webflow CMS, the data structure is very straightforward, and we'll build from the bottom up:

At the very bottom, we have our content fields. These fields let us capture or input content – whether we're doing this one-by-one, or by importing a CSV with a ton of data. All that content is put in fields.

Of course, we're usually dealing with multiple items, each of them made up of these fields, and those items are all grouped together into a collection. A collection is the top-level container for our content.

So: if we have a collection of team members, each team member is an item. Each item (or team member) has fields of content.

That's the structure of the Webflow CMS.

Ready to use that collection in a project? Two ways to do that: we can use a Collection List, which lets us drop in collection content anywhere. And, of course, we have Collection Pages. Design one Collection Page, and your other collection items will follow suit — Collection Pages are automatically created for each collection item.

When you’re using collection lists or collection pages, they can be designed in any way to fit your brand.

You can change or add more content to your collection at any time. You can do this from the Designer, or, you can use the Editor. The Editor lets collaborators log in and access these collections, which makes it quick to add blog posts, employees, news. All of this plugging into the fields you created. Or, collaborators can edit content right on the live website. Press Publish from the Editor? And that content is now live.

Now. We've created detailed content for each aspect of the Webflow CMS, but here we've covered the basics:

We have collections, which contain each item made up of fields. We can use any of the content from these collections in our project, whether it's the Collection List element or Collection Pages. And we have the Editor: a powerful way for site owners to add or change content, and publish to bring that content live.

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
Learn more

Transcript

A Collection is like a database. It's where we can store all our content that can be used throughout our project dynamically. And even if you don't have content to start, creating a Collection gives us the option to use dummy content. So you can get right to designing and developing dynamically.

So. Let's create a Collection.

In any project, we can access the CMS from the Designer. As we already know, the content we put into a Collection — these items — the content is entered into fields.

When you go to create a Collection, you can use one of the presets, which give a good starting point, or build a Collection from scratch.

If you do that, you can really create anything. The fields are completely customizable and you have really granular control over the details. When we build from scratch, we can tailor the fields in our Collection to the content we're working with.

But for this example, let's use the Blog Posts preset.

And something to note as we're looking at this: these fields aren't HTML elements — they're simply fields where data is stored. Down the road, after we finish creating this Collection, we can bind this content to actual elements in our projects — we can use it almost anywhere.

We can give our Collection a name, we can customize the URL, and we can set up the fields. Now later on, we can add or change content from the Editor. So as you're setting up Collection fields, you'll see a preview on the right for each corresponding field: what the general layout will appear like when using the Editor. The Editor's the option we have available if we want other collaborators or clients to go in and add their own content.

Of course, you can add a new field, you can click in and edit an existing field (or even go to remove that field altogether), and you can sort your fields by grabbing the field name and dragging into place.

You can always come back later to change any of this — the only thing set in stone is the URL, so make sure it appears how you want it. When you're ready, press Create Collection.

And that's it. You just created a Collection. Actually we just created a Collection. But maybe you did, too.

Now you might have noticed that we clicked to add dummy items, which have now populated our Collection. Of course, we can add or import legitimate content, but dummy content lets us get going with design and development inside our project.

We cover a lot more of this in additional content, but this is a good starting point for creating and conFiguring a Collection in the Webflow CMS.

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
Learn more

Transcript

A lot of times, we'll have access to huge amounts of data: items that we want to feed right into a collection without having to create them manually. Wouldn't it be great if would could simply configure and import a CSV right into a collection? In this video lesson, we're going to configure and import a CSV right into a collection.

Whether you've exported your CSV, or you're typing out your CSV manually, an optional first step is to configure the CSV for import. Here in Google Sheets, we have a pretty straightforward spreadsheet.

We've included a header row (which lets us specify the type of content contained in each column). In other words, each of these columns represents a field type. Each row? Represents an item.

Let's download this as a CSV — or if we're using Excel we can Save as... and choose from our File Format dropdown: CSV. Or if we're in Numbers, we can go to Export...CSV.

That's configuring a CSV. Most of the time, the Webflow CMS is going to be able to parse and import your content without manual configuration. But let's go in and drag the CSV right inside. We instantly get a good preview of what's happening with the content. First, we're making sure that the top row is a header. It doesn't need to be, maybe it's an item.

And once we continue, we can get even more specific regarding the following: not importing this content, creating a new field (if we want to create a field using this header...and choosing the field type from the dropdown), or mapping this content to an existing field (if we've already configured this field in our collection).

Over to the right, we have our item preview, and we can switch through the different items that we're importing. We can even click the dropdown and get super specific.

And when we're done? Just import...and that's it! We've imported these items right into our collection.

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.

Learn more

Transcript

Collection lists are one of the two main ways we can design and develop with content from a collection. Here's a sample collection we created for a group of team members. From any page in our project, we can access the Collection List right from the Elements panel, and drag it right onto the Canvas.

We want to quickly cover three aspects of a collection list: the basic layout, binding to a collection (this is super powerful), and collection list settings.

Let's do basic layout.

We're dragging the collection list and dropping it right on the Canvas. So we have a bunch of empty purple boxes. And though we're just getting started, we can choose our collection from the dropdown, and we can play around with layout options.

Regardless of the layout we choose, if we go to Preview, we'll see the current design: literally nothing's there. Let's go back out of Preview. There's nothing there because we haven't referenced any of our content.

Since our collection list gives us access to anything from a collection, we can drop an element right into any collection item in our collection list. Let's make this heading an H3, but it could be any text element.

And we can bind that element right to a specific field from our collection. This is just getting the name from our team members. And that's it. We're looking at the content — we have an H3 for each of our items in the collection list.

Let's keep going. We can drag in an image element. And when we're dropping these elements in, they're static. They're static until we bind them to something from a collection. And when we do? Each item in our collection list is referencing the relevant field.

All we're doing is dragging in normal elements (static elements) and binding them to specific fields in our collection.

We can, of course, add styles to any of these. And as we're adjusting here, we can see that changes in a collection list are done in lockstep. That is: changing anything in one collection item affects the others. That's by design. If we drag in a div block to wrap and style the content in each item? Those changes are happening in all our collection items.

There's still a major advantage to using classes — that is: while everything's done in lockstep in this collection list, we might want other collection lists on other pages throughout our project. Of course, classes will empower us make style changes project-wide.

And we're accelerating here (quite a bit) so you don't have to sit through each and every frame, but the idea here is that you can bind dynamic content to static elements in a collection list.

That's binding. Let's look at our settings.

We can select our Collection List Wrapper element (or our Collection List element) and adjust our layout at any time.

Our collection list settings also let us add filters. Filters empower us to show only the collection items we want — collection items that match one or more criteria.

We can also choose all sorts of options related to sort order — how we want the collection items to be sorted. Maybe based on when the collection item was updated: newest to oldest.

If we go back into the CMS and into our collection? And we go inside one of our items to make a change? Of course, we know that'll affect how recently this item has been updated.

Which means back in our collection list, we'll see that Dale is displayed first. We're sorting based on when the collection list was updated. Newest to oldest.

We can also put limits on the number of collection items displayed. This will only display the number of items specified here.

So. Collection lists. We can drop them in anywhere. They give us access to anything from a collection. We can choose our layout, we can bind collection content to elements inside the list, and we can, of course, configure our settings to tell the collection list how to sort and display the items in our design.

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.

Learn more

Transcript

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.

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
Learn more

Transcript

Once a collection has been created, or even down the road once your project has been completed and published, you can go in at any time and make a number of changes to a collection or any of the items inside.

We'll quickly cover modifying collection settings, making changes to individual items inside our collection, and even changing multiple items at once.

Let's do collection settings.

From the CMS, we can go into our collection. From our collection we can access Settings. We can change the name, do all the other stuff you'd expect here. But here's something that's really practical, especially if we're iterating on this while working with collaborators.

We can modify the label on each field — but we can also add or modify the help text to make everything really clear. Or we can re-sort our fields to change the order.

When we're done? We can save.

Let's go in and change collection items. We can do this from the Editor, too, but for now, let's go into our collection root, and click to select a specific item. Modify content? We can do this on each item individually. Just like before, when we're done? We can save.

That's modifying individual items. Finally, let's make changes on multiple items.

This is really practical when we're sorting the content we want displayed or featured in our project...or even in the CMS. We can show or hide our fields here using the pin icon.

We can even go in and select multiple items at once. We can mark these as Draft (maybe they're not ready for primetime). We could go back in and select other items. Of course, we can archive these (pull them from our project but keep them accessible from the CMS in the Designer and the Editor). Or, we can go back in one more time and select a couple of those items we just archived, and unarchive them so they publish again.

Want something more permanent? We can select a few of these and delete. Or, if you've just had it and want to start from scratch? Or maybe you've been using dummy content and you're ready to start with real content? You can delete everything.

So. We can go in at any time and modify our collection settings, we can change content for individual items, and we can select and modify multiple items at once.

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.

Learn more

Transcript

The Editor is an interface we can use to access and edit the contents of a published site. It's what collaborators (like clients, customers) — it's where anyone can log in and get access.

If you're in a Webflow project, you can visit the Editor from the Designer over to the left, or from the Project Settings over to the right. Or, you (and any collaborators) can visit using the URL through your browser. Just add edit? Except, it's now become obvious: the question mark is at the beginning of edit. Let's try that again: just add question mark edit.

Back in our project, from our Project Settings, we can go right on over to Editor. We can add and configure permissions for our collaborators, and even control branding. We can add custom branding for our organization, or a client's organization. We can do that from Project Settings.

Three brief things to note about the Editor:

#1: You can literally manipulate content on the page. Want to change some text inside a heading? You can go in and change some text inside a heading. Want to replace this image used in the image element here? You can go in and replace the image.

This applies to content in your project (we're switching back over here to the Designer) in which, on any editable element, we've gone over to our Element Settings panel and checked "Collaborators can edit this element." What does it mean when that's checked? It means collaborators can edit this element. If it's unchecked, they'll still see it in the Editor but it won't be editable.

#2: second thing to note. If you've created one or more collections, collaborators can access them. They can go into any collection. And they can click to modify an existing collection item — like a blog post — or, let's cancel out of that, they can of course create a new item — in this case a new blog post.

On the top-right, if any collaborator wants to come back to this post later — if they don't want it to publish even if we publish other changes — they can check "Draft."

That's editing collections.

#3 — the final thing we want to mention here — is that changes in the Editor? These aren't updating in real-time. The content you're changing won't go live until you or a collaborator publish the project — whether through The Editor here, or through the Designer.

Speaking of the Designer, if we're visiting the Editor from our Project? We can get back to it at any time by switching right back over.

That's the Editor. Actually, this is the Designer. That's the Editor.

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.

Learn more

Transcript

Plain Text is usually short-form text that you're planning to use or style in a project. It's important to note that Plain Text isn't an actual HTML element. Instead, this text is plain and un-styled: it will become bound to whatever element you specify. For instance:

A Plain Text field can have this text in it. We can use that text anywhere we want inside a Collection List or a Collection Page. Here's a heading: let's get the text from that Plain Text field. Hey, look: it worked perfectly. Here's a button: let's get the text from that same Plain Text field. Another success.

Plain Text can be bound — essentially it can feed into anything you want. This can include headings, and paragraphs, and links, and text blocks for things like category tags, and those little sale banners people like to put in the corners of product images.

Plain Text: any time you need a block of unformatted text to use in an element.

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.

Learn more

Transcript

If a Plain Text field is for creating short-form, unformatted text, a Rich Text field is for long-form content that you can format from the CMS in the Designer, or from the Editor.

Rather than continue talking, let's continue talking while looking at how we can add and format rich content inside a Rich Text field.

Right now we're in the Editor. And we have an extraordinary amount of freedom here to create and format our content. When would we use this?

Blog posts. Articles. Anytime we need sectioned-off content. Biographies. Anything really. And we can control the styling for the rich text content — each kind of element (like headings, lists) — we can do this in the Designer using the Rich Text Element. That way collaborators can focus on content — and that content conforms to your design.

So the goal — or the question becomes this: how do we have a Rich Text Element in our project get the Rich Text content from our collection? Well, we drag a Rich Text Element into our project, and we get the Rich Text content from our collection. We cover the Rich Text Element itself in separate content we've created, so if you want a crash course on working with Rich Text inside the Designer, we highly recommend checking that out.

Rich Text field: Perfect for long-form text, or any time you want collaborators to have the ability to format this type of content.

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.

Learn more

Transcript

The Image field. To say it's life-changing in the context of CMS is hyperbole. But not really. Here's why:

You might be thinking to yourself, "isn't this just a field that lets someone upload an Image? And to make it work, don't I choose an element and pull that Image to set it as a background Image?" Well, yes. That is one potential and frankly amazing use of the Image field.

But what about here? Fairly good-looking blog previews [Collection List]. Great content, meaningful words . The top div block here has a nice heading. Let's select that div and head over to the Element Settings Panel. And right here, we have access to this wonderful little checkbox: Get background Image. Bind it to the Image field? Now our div block is using those Images from our collection in the background.

But we can also bind directly to an Image element. Like a profile picture. Or an icon.

So the Image field can be used to bring in an Image for use in an Image element, like a profile picture or an icon, and we can use them as background Images just like we'd manually configure background Images on static content.

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.

Learn more

Transcript

The Video field is straightforward: from here, we can paste in any link to a YouTube or Vimeo Video. This can be done, of course, in the CMS — or by a collaborator or client in the Editor.

So how do we implement? On the Canvas, we can drag in a Video element from the Elements panel into any Collection List or Collection Page. And when we do that, we can get the Video right from our collection — we can bind it right to the Video field.

Of course, we can format this just as we'd format the element if it was using a static YouTube link. In this case, the Video link that's used here is bound to the Video field in the item that's being referenced.

That's the Video field.

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.

Learn more

Transcript

Email is one of those concepts rooted dramatic theory, going back to Aristotle's Poetics. Today, it's commonly used to contact team members, customer service, sales departments — you name it. And just like a Link field, an Email field can be used in elements that accept links.

If a collection contains an Email field, you can access it under the Link Settings on any link. Simply choose Get Email from the collection.

But check this out: we can type in a standard subject line, or we can even automatically pull text from a Plain Text field to appear in the Email subject.

Either way, our link will now trigger an Email using the Email address for the corresponding collection item.

But we're going to take this one step further. Some of our blog post authors here have emails listed, so obviously this works fine, but some of them don't. Let's add a condition. And we're using conditional visibility so that we only show this link block — if the email field has been set. (If the author has an email listed).

And just like that, the email link blocks for Claus and Astrid have disappeared. So we're only showing email links for those who have emails set. And that's the email field.

Link field

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

Learn more

Transcript

A Link (from a Link field) can be used in any number of ways throughout a project. Obviously, we use it to enter Links. But we can bind this content — this Link from each Collection item — to any number of elements like: Normal Buttons, Link Blocks, 3D Buttons, Text Links, Animated Buttons, and of course...Impossible-to-select Buttons

With any of these kinds of elements selected (here's a button), we can simply get the URL right from our Collection. Of course, we also have the option to open the URL in a new tab.

The second Collection option here is to get the actual text for our Link (our button) from our Collection as well. This is a great opportunity to use the Plain Text field. And that plain text will replace the text inside the button if you'd like to use it.

But what's really great is how we can use the actual presence of a Link to show something specific. Let's say we have an organization and a good number of people in our organization have Facebook pages. A number of people don't. We'd only want to show the Facebook Link if they actually have a Facebook page.

We can add and configure a Facebook Link for everyone who has one — and bind that Link to the appropriate field. But here's the mind blowing moment: We can add a condition. We can say "Hey, the element is visible when...the Link (that Facebook Link) is set." So only team members who have a Link added will actually show up with the little Facebook icon. Super powerful.

So. Links: Great for buttons and text Links and Link blocks — they can Link you to any URL you enter.

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.

Learn more

Transcript

The Phone field lets us capture and link to a phone number from items inside a collection. This can be implemented in any number of ways, but it's particularly useful when creating a Phone link which works on devices that can place calls.

So here's how to set it up:

1. Add the Phone field to your collection

2. Select any element that lets you set a link

3. Under the Link Settings, choose Phone Number

4. Get the Phone number from the Phone field you just created.

This will make sure that the Phone number related to the relevant collection item is triggered with the link.

And that's it! That's using the Phone field from the CMS.

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.

Learn more

Transcript

The Number field is one of those magic fields that does way more than most people think. Yes, it's true: you can only put Numbers inside (integers, decimals...). But the magic isn't so much the field itself; it's how we can use these Numbers to accomplish a ton of work inside our projects.

What do we normally use Numbers for in a collection? Things like ratings, or rankings, or prices, or populations, quantities, season Numbers, episode Numbers, magic Numbers. We get the point.

Of course, we can bind any type of text inside a project to this field. But another really powerful way to use Numbers is in sorting.

If we've rated items on a scale from 1 to 5 and we want to show the highest-rated items first? We can sort that way.

But what about this? Filters? What if we only want to show items in a Collection List that have a rating of 4 or higher? If we're using integers, we can simply add a filter where we specify that the Number — our rating — is greater than 3. That means anything that's 4 or 5 on that rating will show up on our list. What about going back in and changing it to less than 4? Now only the items rated 3 and below are showing up. Or, maybe we only want to show the best-rated items. We could specify that we want the Number to equal 5. Now only items rated 5 show up.

So. Numbers can do a lot. Similar to a Plain Text field, we can enter Numbers and decimals. But we can also use these Numbers to sort. And create filters and sorting rules that let us organize and display selected content in our projects.

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.

Learn more

Transcript

When we add a date and time field to a collection, there's an option when we're creating the field: and that's to include a time picker.

And of course, we can use the field to manually enter a date and time. Now once we grab that info, we can use it inside collection pages or collection lists.

Here's a collection page for a blog. Let's select this text block, click in, and bind the element to the date and time field we created. And get this: there are tons of options for formatting we can select from when we bind a date and time field to an element on the page.

You can also use multiple text elements to achieve some pretty cool effects here. For instance, you can bind one of them to the day (on top), and one of them to the month on the next one down (all we're doing is, under format, selecting the format that matches the type of date we want to display), and then you can bind another one — on the third text block — to the year — so this way we have three separate styles for day, month, and year. Let's close that out.  

Additionally, let's select one of the blog post collection items — and  we can head on over to the Element Settings panel, and use our date and time field to configure a filter. Right now, we're using our date and time field to show items released in the last 12 months.

Let's narrow that parameter a little bit, and we'll even exclude anything released today. Press save, and the collection list updates.

Of course, we can sort by date and time as well. Simply add — and our date and time field is selected — and we can select from the dropdown to sort from newest to oldest, so all our new content shows up first.

So. We can capture the date and time, and use this content for display, or for filtering and sorting items in Collection Lists.

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

Learn more

Transcript

Switches are extremely useful when you're looking to filter elements based on something binary. An on or off or yes or no option.

Is this film black and white?

Is this company a non-profit?

Is this blog post featured?

This concept can be extended indefinitely. And when you add a filter? Simply select the Switch, and specify whether you're looking to display items that have the Switch on, or those that have the Switch off. The result of this filter is displaying only the results that fit this new Switch.

We can also create a Switch called "Show contact form" and go into our Collection Page? We can actually select an entire element inside — for our sign up div block — and set conditional visibility. We can go in and set a condition that shows this div block only if "Show contact form" is Switched on.

So. Switches. The word sounds odd the more you say it. The field is a powerful and straightforward way to work with dynamic content.

Option field overview

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

Learn more

Transcript

The option field is built for any number of options you can select from a dropdown. Things like selecting from blog categories. Or choosing a preferred language. Setting a location — like what continent you're on. It's also great if you need to get info regarding gender, or maybe the department someone works in. Or something that contains fixed numbers. Or even number ranges like how many employees. And of course, we can do coffee sizes. And no, 31 ounces is not a typo.

A couple ways to practically use this. Number one: on the Canvas here, we can bind a text element to this field, getting the option text from the collection.

Of course, number two: we can also use a filter to display Collection List items based on the option we selected. In Filters, we'll add a filter. And when we select our option field from the dropdown, there are two approaches to doing this:

Equals or Does Not Equal will check against the Option field for a particular selection. And Is Set or Is Not Set simply looks for whether an option has been set in this field at all.

Now if we find ourselves adding options that like to stick together? Maybe we want to link a color to each blog category? We could just create a collection for blog categories. And instead of an option field, we could use a reference or multi-reference field.

But option fields are nice for giving us multiple, preset options which we can bind to text elements and use to filter content (or even create conditions) in a Collection List.

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.

Learn more

Transcript

Color is one of the most versatile fields on the planet. And it's not because you have over a billion options when you include color and opacity; it's because you can use this field for almost anything.

When you set a color in a collection item, we can pull that color in our project.

See this text? We can get the text color straight from our collection. Just select a color field, and that's it.

See this button? We can set its background color. Same method here. Pulls right from each collection item.

And the border color on all these different Collection Item buttons? That's just as simple: we can do the same exact thing border color. Oh look, they're unique and amazing.

With the color field, we can set a color on an item and use that color anywhere in a project.

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.

Learn more

Transcript

A Reference field is really simple and enormously powerful. The simple part is that it lets us reference fields from an item in another collection.

Why is that important? If we have a blog collection, we already know that a collection list or collection page gives us access to the items in that collection. A reference field? This lets us grab content from another collection.

And here's the powerful part: We have two collections in our project (Blog Posts and Authors). When we write a blog post, we don't want to have to do the bio, and the picture, and the name for that matter — each and every time we write a new blog post. These are all fields which we could create and populate in our Authors collection.

Back in our Blog Posts collection? When we add a Reference field? We're simply granting access to the Authors collection. And when we're creating a blog post? The Reference field will let us select the author in that collection.

And how do we build with this? We still build using our Blog Posts collection, but because we're referencing the Authors collection, we can build with those fields as well.

So. Reference fields. With them, we can reference fields from items in another collection.

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.

Learn more

Transcript

A Multi-Reference field (which is short for multi-item reference field) does just that. Instead of a Reference field, which lets us pick one item from another collection, a Multi-Reference lets us pick multiple items.

So we have our blog posts. And we have our author at the top of each post. Now Helen is known throughout the industry for hogging the limelight. However, in a new initiative, we decided to credit other contributors to our blog posts.

So we have a little spot on the bottom for contributors. This is all static content right now — it's just the design. Nothing's been added yet from our collection.

Let's go into the CMS, into our Blog Posts collection, and, of course, Settings. All we have to do? Is click multi-reference. We can name the field Contributors, we can add some clarifying help text so anyone else using the CMS or the Editor knows what to do, but the important part here is that we point our multi-reference field to our Authors collection. Here's why:

If we save, and then go into our any of our items, like this blog post (by Helen), we can now see our multi-reference field. And all we have to do? Is choose from the list — the other authors who contributed to this post. Once we've done that, let's save.

Now we've only done this on one post so far, we can go back and fill the rest in later. So we're going to build this using the blog post we just configured.

Let's drag in a collection list so we can list the contributors. And from the Collection dropdown, we can see our brand-new field right there.

Notice how the authors already show up in the list. And from here, this is just like a normal collection list. Let's go over to our Elements panel and grab a heading. We can drag it right into any item, and of course, we'll get the text from our collection.

Our authors are showing up just fine. Warp speed. Actually we're just changing the velocity of the footage we captured so you don't have to watch us tweak every detail.

Alright Dale, let's take it down to normal. Dale. Dale! Okay, we're fast-forwarding through the entire— can we? Thank you, Dale.

So we just finished setting up our contributors in this collection list. And if we go back into the CMS? And we add contributors to another item in our collection? Another blog post? We have our multi-reference field from which we can select our contributors. We can add as many as we'd like.

And once we're done, let's save. And then go back to our collection page. And from the item dropdown, let's pick that blog post we just configured. And at the bottom? We have all our contributors showing up in the collection list.

And that's it! Multi-reference fields give us access to multiple items in another collection.

Filter Collection lists

Learn more

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.

Learn more

Transcript

Despite the nine-syllable mouthful, conditional visibility is really straightforward, and it's a great way to show or hide entire elements (and their children), based upon an item’s content inside a collection.

Now, we all know that wasn't nine syllables. It was 47. We meant conditional visibility.

Here's a collection page. And here's a section element with content inside. And we love this section. But we only want this section to show up on certain pages.

Let's go on over and create a condition. The element (and its children) is only visible when...

And from the dropdown, we can make the selection.

We're only showing this section when the Work Category is Portraits. We don't want this section showing up to advertise portrait photography if the page is about shooting Landscape Architecture, Residential Interiors, Commercial Exteriors, or Dr. Who Cosplay. But we do want it showing up if someone's reading about portraits.

So by doing this — by setting up this condition — we've made it so the section only appears on pages that have the Portraits category set. We can see that the section won't show up if the category isn't set to Portraits. When we hit another page that has its category set to Portraits? The section displays perfectly.

This doesn't just apply to pages. Here in this collection list containing team members, we want to add an email link. That's fine. Let's go over and drag in a text link.

Let's double click to rename this "Email Me" so we can link this to each team member's email.

Of course, we can get our URL from the Email field in our collection. But we actually have a problem: some team members don't have emails listed.

Wouldn't it be great if we could only show this element on team members who have emails set?

We'll keep this text link selected and go over to do just that. Add a condition, stating that the element is visible when...an email...is set. We only want to show this element if we set an email on that team member.

And just like that, all the work was done for us. We didn't have to go manually hunting through every last team member.

Now Joan's the team leader here and she doesn't want people emailing her directly because she's putting out fires all day and email is a distraction. And Dan still uses AOL so we're not even listing that. So what can we do here?

Well, we can drag in a static text link. This time we can double-click to edit, and even change the text to "Contact our team" — and then go over to set the link to send an email. This way people can still click "Contact our team" instead of seeing blank space where the email should be.

The reason we're demoing this is to show that we can create a condition here on this static element — it's just a text link pointing to an email.

Let's go over and add a condition. This time, we'll make sure to show this text link when an email is not set.

And that's it! We've used conditional visibility to control the visibility of these elements (or in the case of that section, an element and its children) based on the conditions we specified.

Requirements

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

Related courses

Related courses

Notes:

  • The main video will get replaced with javascript after the site loads either from the browser's url if there's a videoUrl there, otherwise from the first video in the nav
  • We should pick some default video so people who have javascript turned off load some webflow video instead of wistia example currently there. do that in the embed with the iframe ^
  • The embed at the bottom of the page has some configurable options at the top of that code block. eg: you can tweak what the urls look like, but once this launches don't change them
  • Right now the classes used in the side nav can be edited by adding an element there with those classes. If you'd rather edit the css for those directly in the code you can add a css block in a new html embed at the top of this page for that, if doing that consider changing their names to not conflict with classes edited in the designer