Introductie tot content management systems
CONTENT MANAGEMENT
Warm-up
Analyse van een bestaande website
- Cluster gelijkaardige pagina's in FigJam
- Benoem de gemeenschappelijke onderdelen
Uitgebreide uitleg op Canvas
Statische vs. dynamische websites
Statische websites
- Vaste HTML & CSS per pagina
- Inhoud zit vast in de pagina
- Pagina's staan klaar op de server
- Aanpassingen gebeuren handmatig
👉 Snel & eenvoudig, maar onpraktisch bij veel pagina's
Dynamische websites
- Scheiding tussen lay-out (template) & inhoud (database/CMS)
- Pagina's worden live opgebouwd als je ernaar surft
👉 Beheerbaar zonder kennis van design/code
Dynamische websites
De pagina lay-out ligt vast en de header is fixed in de template.
De effectieve inhoud van de pagina (foto's, teksten,...) wordt opgehaald uit een database. Conecteren met de database en data terugkrijgen kost wat tijd, waardoor het een beetje langer duurt voor de volledige inhoud wordt getoond.
Wanneer kiezen voor een dynamische website?
🛍️ Personalisatie: winkelmandje bijhouden, aanpassingen o.b.v. taal of locatie, al dan niet ingelogd,...
📥 Interactie met de server: formulieren verzenden, reacties plaatsen, filters toepassen
🔄 Automatische updates: aanpassingen in database (nieuwe gebruiker, product verwijderen) zie je meteen
🗂️ Uniformiteit: Eén template voor honderden pagina's
Bij de pinken blijven
Welke website is volgens jou dynamisch?
(Steek je hand op)
- Een portfolio met 5 vaste projecten
- Een webshop met 2000 producten
- Een evenementenkalender
- Een one-pager
Front-end vs. back-end
Front-end
= client-side / browser
👀 Alles wat de bezoeker ziet
🛠️ HTML, CSS, JS
🎯 UX/UI, responsiveness, a11y, branding
👨🦳 Bezoeker van de website
Back-end
= server-side / server
🗄️ Waar de website beheerd wordt
🛠️ SQL/NoSQL, PHP, Node.js, API's,...
🎯 Databeheer, logica, security, gebruiksersrechten
👨🦳 Beheerder/bouwer van de website
Bij de pinken blijven
Gebeurt deze actie in de front-end of back-end?
(Roep)
- Een gebruiker klikt op een knop
- Een product wordt opgeslagen in de database
- Een gebruiker logt in
- Een kleur wordt aangepast
- Productgegevens worden opgehaald
Tijdens deze module bouwen we de brug tussen
font-end en back-end...
...aan de hand van een CMS.
Content Management Systems (CMS)
Een interface voor de back-end
= "de website achter de website"
🖥️ Beheeromgeving / dashboard
✏️ Content beheren
🗄️ Data beheren
⚙️ Instellingen & functionaliteit
👨💻 Beheerder van de website
Voorbeelden
Content beheren met een CMS
Een beetje alsof je alles zou bijhouden in een Excel file en automatisch deze data toont op je website.
Voorbeeld
CMS in Webflow
Terminologie in een CMS
- Item of entry of post
= concreet stuk content
Terminologie in een CMS
- Field
= eigenschap van die content
vb: tekst, date, image, number,...
🧠 Denk aan datatypes in JS
Terminologie in een CMS
- Collection of post/entry types
= verzameling van dezelfde soort content
Figma Sites
Figma Sites
- Figma product (Bèta sinds 2025)
- 💪 Visuele editor zoals Figma Design
- 📱 Responsive website bouwen
- 🚀 Websites live zetten
- 🥳 Geen code nodig!
- 🗂️ CMS-optie: content kan dynamisch worden gekoppeld aan je pages
Aan welke tool doet je dit denken?
👀
Demo time
CMS collections
= een verzameling van content rond één onderwerp
Figma Site → CMS
CMS collections
- Items: individuele content items
- Fields: eigenschappen van je content
Figma Sites heeft 5 soorten field types:
🧠 Denk aan datatypes in JS
Figma Site → CMS
CMS Page
= een template voor één content item
- Dezelfde layout voor alle items in dezelfde collection
- Content wordt dynamisch ingevuld
- Elk item krijgt een eigen URL via een vast Field Type genaamd slug
Figma Site → File
CMS List
= Element op je page dat meerdere items uit een collection toont
- Items worden automatisch herhaald
- Ideaal voor overzichten, grids en lijsten
Figma Site → File
Docs & tuts
Content Management Systems
Figma Sites
Figma Sites CMS
Figma Sites
🔗 Learn Figma Sites
= Alle info over Figma Sites, opgedeeld per topic.
Bekijk er zeker deze onderdelen: