Theming & flexibiliteit

Themes in een CMS

= Visuele laag op je CMS

• Kleuren, typografie, spacing, UI-elementen, layout,...

• Zorgen dat alle pagina’s er uniform uitzien

• Content wordt los van het design beheerd

Theme kiezen

• Downloaden (gratis of betalend)
• of custom theme (laten) ontwikkelen

Themes gebruiken

• Je hangt vaak vast aan specifieke page templates
• Basisstructuur en logica blijven altijd gelijk

Theme editors

Sommige CMS'en bieden een custom editor
vb. Elementor of Gutenberg Editor in Wordpress

• Bestaan uit verplaatsbare bouwblokken
• Geven (soms te) veel vrijheid aan site beheerders

Flexibiliteit in een CMS

Grote websites moeten consistent ogen, maar moeten ook flexibel kunnen inspelen op:

• ❤️ Campagne-gebaseerd
  Black Friday, Valentijn, Nieuwjaar, Promo's,...

• 🛍️ Sub-brands

• 🏷️ Productcategorieën

• 🍂 Seizoenen

Flexibiliteit in een CMS

• Klassieke theming = te rigide, eentonig
• Custom editors = soms te flexibel
• Maatwerk = alles kan, maar complex en duur
   

→ De gulden middenweg: "Content Blocks"

Content blocks

Content blocks

= Herbruikbare secties met vaste structuur en variabele content

• Designer kiest welke blokken er nodig zijn en hoe ze er uit zien
• Content editor kan deze toevoegen & verslepen

Content blocks

• Ook building blocks of modular body genoemd
• Mogelijk in verschillende CMS'en zoals             en 
• Voorbeelden:
  • CTA
  • Quotes block
  • Cards grid
  • Products overview
  • ...

🔗 Hyperion.be

🔗 Hyperion branding

Voorbeeld

Content blocks gebruiken

• Editors kiezen de blokken die ze nodig hebben
• (Beperkte) opties mogelijk: color-mode, layout variant,...

Demo

Content block vs.
fixed template parts

Vaak wordt er gebruikt gemaakt van de combinatie van vaste delen & modulaire content blocks.

De inhoud van de vaste secties is veelal wel aanpasbaar via het CMS.

amal.gent

Content block vs. rich text veld

Content blocks
Designer heeft controle over styling & semantiek
 

Rich text
Editor heeft alle vrijheid

• Kans op inconsistente branding & foute semantiek
• Eerder voor 'lees'-content zoals blogs

Mini oefening

Content blocks herkennen

Duid de verschillende content blocks aan op de aangeleverde screenshots van de Hyperion website. Geef ze een logische naam.

Uitgebreide uitleg op Canvas

Content blocks ontwerpen

Content blocks

= herbruikbare bouwstenen of componenten

Een component is herbruikbaar als je op voorhand slim nadenkt over:

• de inhoud
• de logica
• combinatiemogelijkheden

Content blocks ontwerpen

• Bepaal de field types die minimaal nodig zijn
  Titel (text), short intro (plain text), thumbnail (image),...

• Creëer een basis layout

Content blocks ontwerpen

• Style de blokken a.d.h.v. consistente design token
  Colors, spacing, typography, border radius,...​
• Test met realistische content

Varianten

Denk aan alternatieve
verschijningsvormen:

• Kleine layout wijzigingen
• Optionele fields
• Kleuren wijzigen
• Decoratief element tonen
• ...

Varianten

Geven vrijheid aan editors, maar houden structuur en design intact.

Afbeeldingsbron

Opties, opties, opties

Te veel opties = chaos

• Editors verliezen overzicht

• Pagina’s zien er inconsistent uit

Te weinig opties = frustratie

• Editors voelen zich beperkt

• Creatieve campagnes onmogelijk

Kleurenschema's

= Zorgen eenvoudig voor dynamiek en logica in een pagina

• Kan per blok, of per pagina

rubenshuis.be

moooor.com

Kleurenschema's pro tip 🔥

• Werk eerst de logica voor je kleurenschema's consistent uit
• Pas ze daarna toe op je blokken

vb: Zwarte achtergrond → accent altijd paars, niet soms eens roze

Denk aan het geheel

Hoe kunnen content editors blokken combineren zonder inconsistenties? Let op verschillende:

• volgorde
• varianten of opties per bouwblok
• kleurenschema's per bouwblok
• witruimte boven- én onder de bouwblokken

🧩 Zonder logica worden content blocks al snel losse, niet-passende puzzelstukken.

Variable modes

& Conditional visibility

Recap

Variable modes in Webflow
Responsive variables

Variables > "+ New mode" (Bovenaan rechts) > Automatic > Selecteer een breakpoint

Recap

Variable modes in Webflow
Themes (manual mode)

• Variables > "+ New mode" (Bovenaan rechts) > Manual > Selecteer een breakpoint
• Selecteer de 'Variable mode' in het Settings Panel van een element

Excelleren

Webflow
Conditional visibility

= Elementen showen/hiden afhankelijk van een field in Webflow CMS

• 🔗 Webflow guide

Sommigen experimenteerden hier al mee in hun portfolio 💪

Kan ook in Figma 🎉

Demo time!