Webflow CMS lets you build dynamic content pages from structured Collections. Set up a Collection, add fields, then bind them to a Collection List element or a dynamic template page. Filtering and sorting are configured in the Collection List's Element Settings panel — no code required for most use cases.
How Webflow CMS Works: Collections, Lists, and Dynamic Pages
Webflow CMS is a structured content system built directly into the Designer. Instead of hardcoding blog posts, team members, or product cards, you define a Collection (a content schema), add items to it, and then display those items using a Collection List element — which automatically repeats a template layout for each item. Dynamic pages (template pages) give every CMS item its own URL. This tutorial covers the full workflow: creating a Collection, binding data to elements, filtering and sorting list output, and configuring dynamic template pages.
Prerequisites
- Webflow site on a CMS plan or higher (CMS features are not available on Basic)
- At least one page in your project to place the Collection List
- A content model in mind — know what fields each item needs before building
Step-by-step guide
Create a new Collection
Create a new Collection
Open the CMS panel via the top navigation bar (look for the 'CMS' tab between Pages and Assets in the context bar). Click 'Create New Collection'. Give the Collection a name (e.g., 'Blog Posts') — Webflow auto-generates the slug. Choose a prebuilt template or click 'Start from scratch'. The Collection is created with a Name field by default.
Expected result: A new Collection appears in the CMS panel with a Name field. Webflow auto-creates an empty dynamic template page accessible via Pages panel > CMS Collection Pages.
Add fields to the Collection
Add fields to the Collection
Inside the Collection editor, click 'Add field'. Choose the appropriate field type from the sidebar (Plain Text, Rich Text, Image, Switch, Option, Reference, etc.). For a blog post: add a Rich Text field for body content, an Image field for the thumbnail, a Switch field named 'Featured', and an Option field for category. Give each field a clear name — this becomes the binding label in the Designer. Click 'Save Field' after each. When done, click 'Save Collection'.
Expected result: The Collection schema shows all your fields. You can now add items via CMS panel > your Collection > 'Add Item', or via the CMS Editor on the published site.
Add a Collection List element to a page
Add a Collection List element to a page
Navigate to the page where you want to display the list. Open the Add Elements panel (A key or '+' icon, left toolbar). Under the CMS section, drag a 'Collection List' onto the canvas. In the Element Settings panel (D key, right toolbar), the Collection List settings panel opens automatically. Under 'Data source', click the dropdown and select your Collection. The list immediately populates with placeholder items.
Expected result: A Collection List Wrapper appears on the canvas containing a Collection List with one Collection Item — the template for all items. An Empty State element and a Pagination element are also added below.
Design the Collection Item layout and bind fields
Design the Collection Item layout and bind fields
Click into the Collection Item inside the Collection List. Add the elements that make up one card or list row — for example: an Image element for the thumbnail, a Heading for the title, a Text element for a description excerpt, and a Text Link for a read-more link. To bind a field: select an Image element > Element Settings (D) > Image source > click the purple lightning bolt / CMS icon > choose your Image field. For a text element: select it > Element Settings (D) > under 'Get text from' > choose a text field. For a background image: Style Panel (S) > Backgrounds > the image layer > click the purple 'Get from CMS' icon.
Expected result: The Collection Item now shows real content pulled from your CMS items. Each item in the list repeats the same layout with different data.
Configure filtering to show only specific items
Configure filtering to show only specific items
Select the Collection List Wrapper or Collection List element. In Element Settings (D), scroll to 'Filter'. Click 'Add filter'. Choose a field from the dropdown — for example, the 'Featured' Switch field. Set the condition to 'is On'. Click 'Apply'. You can stack multiple filters — all conditions use AND logic. To filter by a Reference field (e.g., show only items in a specific category), choose the Reference field > 'is' > select the target item.
Expected result: The Collection List displays only items matching your filter conditions. The item count updates in the Designer to reflect the filtered total.
Set sort order and item limits
Set sort order and item limits
With the Collection List selected, open Element Settings (D). Under 'Sort order', click 'Add sort rule'. Choose a field (e.g., 'Published On' Date field) and direction (Newest First). Add a secondary sort if needed. Scroll down to 'Limit items' — toggle it on to cap the list at a specific number (e.g., 6 for a homepage preview). Set 'Skip' to offset the starting item. For paginated full lists, scroll to 'Paginate items', toggle on, and set items per page (max 100).
Expected result: The list shows the correct number of items in the correct order. If pagination is enabled, Previous/Next buttons appear below the list and can be styled in the Style Panel.
Set up the dynamic template page
Set up the dynamic template page
Open the Pages panel (P key). Under 'CMS Collection Pages', click on the template page for your Collection (e.g., 'Blog Posts Template'). This page uses a single-item layout — it displays one item at a time based on the URL slug. Add your layout elements here: a large Heading, a Rich Text element for body, an Image element. Bind each to the appropriate CMS field the same way as in the Collection List (Element Settings > purple CMS icon). In the Pages panel, click the settings gear next to the template page > set dynamic meta title and description using field tokens (e.g., 'Name | My Site').
Expected result: Previewing any CMS item's URL (e.g., /blog-posts/my-first-post) shows the correct data for that specific item. Each item has a unique, crawlable URL.
Complete working example
1WEBFLOW CMS DYNAMIC CONTENT — VISUAL STEPS SUMMARY231. CREATE COLLECTION4 CMS tab (top bar) → Create New Collection → Name it → Add fields5 Field types: Plain Text, Rich Text, Image, Switch (boolean), Option, Reference, Multi-Reference6 Save Collection782. ADD COLLECTION LIST TO PAGE9 Add Panel (A) → CMS → Collection List → drag onto canvas10 Element Settings (D) → Data source → select your Collection11123. BIND FIELDS TO ELEMENTS (inside Collection Item)13 Text element → Element Settings (D) → Get text from → choose field14 Image element → Element Settings (D) → Image source → purple CMS icon → choose field15 Background → Style Panel (S) → Backgrounds → image layer → purple 'Get from CMS' icon16174. FILTERING18 Collection List selected → Element Settings (D) → Filter → Add filter19 Choose field → set condition → Apply20 Multiple filters = AND logic (no native OR)21225. SORTING23 Element Settings (D) → Sort order → Add sort rule → field + direction24 Stack multiple rules for secondary sorts25266. LIMITS & PAGINATION27 Element Settings (D) → Limit items → set count + skip offset28 Paginate items → toggle on → set items per page (max 100)29307. DYNAMIC TEMPLATE PAGE31 Pages panel (P) → CMS Collection Pages → click template page32 Add elements → bind to CMS fields same as step 333 Page settings → SEO → set dynamic meta title/description using field tokensCommon mistakes
Why it's a problem: Placing elements outside the Collection Item wrapper and trying to bind them to CMS fields
How to avoid: CMS binding is only available for elements inside a Collection Item (in a Collection List) or on a dynamic template page. Use the Navigator panel (Z) to confirm your element is nested inside 'Collection Item', not above 'Collection List Wrapper'.
Why it's a problem: Using OR logic with a single Collection List filter and getting no results
How to avoid: Webflow filters use AND logic only. For OR scenarios, add a second Collection List with different filter rules and style both lists to appear as one. Or use Finsweet CMS Filter for client-side OR filtering.
Why it's a problem: Expecting more than 100 items to show without enabling pagination
How to avoid: Without pagination, Collection Lists display a maximum of 100 items. Select the Collection List → Element Settings (D) → toggle 'Paginate items' on and set items-per-page to 100 to expose all items across pages.
Why it's a problem: Setting a filter on a nested Collection List and seeing all items regardless
How to avoid: Nested Collection Lists (a list inside another list's item) reference the parent item's Multi-Reference field as the data source. In Element Settings → Data source, select the Multi-Reference field from the parent Collection, not the Collection itself.
Best practices
- Plan your Collection schema before creating it — field types cannot be changed after creation
- Use the Switch field (boolean) for featured/draft/active flags rather than text-based status fields
- Always set a fallback in the Empty State element — it renders when no items match the filter
- Bind the OG image on dynamic template pages to your CMS Image field for correct social sharing
- Use Curated Collection Lists (available May 2025) when you need manual ordering that ignores sort rules
- Keep Collection List item counts under 100 per list — use pagination for larger datasets to avoid performance issues
- Use Multi-Reference fields (not plain text) for tags and categories so they remain filterable and linkable
Still stuck?
Copy one of these prompts to get a personalized, step-by-step explanation.
I'm building a website in Webflow with a CMS Collection called [Collection Name] that has these fields: [list your fields and types]. I want to display items in a Collection List on [page name] with these filters: [describe filter logic]. The dynamic template page should show [describe layout]. Walk me through the exact Webflow Designer steps including which panels to use and how to bind each field.
In Webflow, I have a [Collection Name] Collection. On my [page name], I want a Collection List showing only [filter condition, e.g. 'featured items'] sorted by [field and direction], limited to [number] items. Each item card should show [field 1], [field 2], and [field 3]. How do I set up the filter, sort, and CMS bindings in Webflow's Element Settings and Style panels?
Frequently asked questions
Can I use Webflow CMS on the Basic plan?
No. CMS Collections require a CMS plan or higher (Business, Enterprise). The Basic plan includes a static site with 150 pages but no CMS functionality. You can build the Collection schema on a free workspace, but you cannot publish CMS content until the site is on a paid plan that includes CMS.
How do I display more than 100 items in a Collection List?
The maximum items per Collection List without pagination is 100. To display more, select the Collection List → Element Settings (D) → toggle 'Paginate items' on → set items per page up to 100. Webflow adds Previous/Next pagination controls automatically. For client-side infinite scroll or load-more without page navigation, use Finsweet CMS Load.
Why can't I see my CMS binding options (no purple icon)?
CMS binding only appears on elements that are inside a Collection Item (within a Collection List) or placed on a dynamic template page. If you're on a static page with elements outside a Collection List, no CMS binding will be available. Use the Navigator panel (Z) to confirm your element's position in the hierarchy.
Can I connect one Collection List to multiple Collections?
No — each Collection List can only connect to one Collection at a time. To display items from multiple Collections on the same page, add multiple Collection Lists, each bound to a different Collection. You can style them identically to make the output appear unified.
Talk to an Expert
Our team has built 600+ apps. Get personalized help with your project.
Book a free consultation