CMS

Wat is een CMS?

​CMS = Content Management Systeem

• 🗄️ Centrale plek om data (= content) te beheren
• 🏞️ Maakt mogelijk om inhoud van een website aan te passen (teksten, foto’s, blogs,...)
• ❌ Geen code nodig om de inhoud te beheren

Recap

Wat is een CMS?

Een beetje alsof je alles zou bijhouden in een Excel file en automatisch deze data toont op je website.

Statisch vs. dynamisch

🧱 Statische content

• Handmatig toegevoegd
• Inhoud = vast
• Elk item apart gemaakt

✨ Dynamische content

• Gekoppeld aan CMS
• Automatisch geladen inhoud
• Één template voor meerdere pagina's

Vb: Over ons, contact, tijdelijke onepager ...

Vb: nieuwsberichten, blog, portfolio items, vacatures, Facebook profielpagina's,...

CMS Collection in Webflow

Collections
= verzameling van gelijkaardige soorten content

CMS Collection in Webflow

Collection item
= rij of record of entry uit één collection

Fields
Collection items bevatten fields
= verschillende soorten content​​

• ​Vb: plain text, rich text, image, number,...​

Collections overzicht
Hier nu één collectie, genaamd "New Collection"

Fields
"properties" die elk item in de collectie heeft

Collection item voorbeeld
Visueel voorbeeld van wat de content editor te zien zal krijgen

Demo

My favourite tv shows

CMS Collections

Collection aanmaken

• Standaard zijn er al een aantal fields:
  • ​Name = pagina title
  • Slug = stukje tekst in de URL
  • ID = unieke string
  • Date created = wordt ingevuld op moment van aanmaken entry
  • Date last edited = automatisch veld
  • Date last published = automatisch veld

• Klik bovenaan links op "+" in het CMS
• Je kan vertrekken van een collection template (en die aanpassen)

Custom fields toevoegen

• ​🔗 Overzicht van alle Field in Webflow
• Houd rekening met UX​:
  • Voeg beschrijving toe indien relevant
  • Duid aan of een veld verplicht is
  • Stel field-specifieke restricties in

⚡️ Jep, je kan het vergelijken met variables in JS!

Collection item toevoegen

• Voeg items toe via '+'-button rechts boven (of via import)

• of genereer automatisch x-aantal dummy-items om snel aan de slag te kunnen gaan

  💡 Handig om vlot je design te testen in verschillende scenario's!

= een entry aan een collection toevoegen

Oefening 1

• Maak een overzicht van je lievelingsseries
• Voorzie per item volgende verplichte velden:
  • Title: Plain text
  • Description: Plain text, multi-line, max 256 karakters
  • Score: Number, tussen 0 en 10 tot 1 decimaal na komma
  • Thumbnail: Image, geef een max width & max kb op
  • Review: Rich text, min 100 karakters
• Vul de collection op met 10 dummy series en 1 zelf ingevuld.

Collection List

Collection list toevoegen

​Collection list = Een element dat data uit je CMS Collection toont.

• Sleep een Collection List element in je canvas

• Selecteer de Collection die je wil gebruiken

• Er zijn 2 views die je kan stylen
  
   

  • Het effectieve overzicht van Collection List Items

  • Een empty state, indien er geen items zijn

Collection List Item

Elk item in je Collection List bevat:

💡 Je hoeft maar één item te linken & stylen. De andere items krijgen dezelfde styling.

• Alle content uit één record in je CMS
• Dynamische elementen die je kan koppelen

CMS fields koppelen

• Sleep een element in de Collection List

• Klik op het tandwiel ⚙️ of gebruik het link-icoon

• Kies welk field uit je Collection je eraan koppelt

Koppel het design dynamisch aan de inhoud:

Links creëren

• Voeg een Link Block toe in je Collection List Item

• Kies bij Link Settings
  Collection Page > Page > Current Collection

• Sleep in de Link Block je content
  vb: Image + Title

Maak dynamische links naar Collection Pages:

💡 Zo kan je een volledige card klikbaar maken en laten doorlinken naar een detailpagina.

Oefening 2

• Maak een Series Overzichtspagina.
• Koppel de velden: Titel, Thumbnail, Description, Link naar detailpagina

Collection lists stylen

Layouting

⚠️ De layout keuze in je collection list settings heeft invloed op de Visuele styling.

💡 Tip: selecteer de optie 'full width' en creëer via het Styling Panel een custom flexbox layout

Components in Collection Lists

1. Maak eerst een component met properties aan

2. Link de property met de dynamische data

Oefening 3

• Style het Series Overzicht a.d.h.v. minstens één component
• Style ook de empty state
• Test je styling met verschillende soorten content

Collection Page

Collection page

Pages > CMS Collection Pages > [jouw collectie]

• Automatisch gegenereerde template
• Wordt gemaakt voor elke Collection

Good to know: De slug wordt op Collectionniveau ingesteld

Data binding

= visueel koppelen van een CMS field aan een element

• Klik op het paarse bolletje
• Via tandwiel ⚙️ of Settings Panel

Oefening 4

• Bouw & style de detailweergave voor de Series Collection Page template
• Koppel alle fields correct 
• Test je styling met al je entries