Thema's

Wat is een WordPress Thema?

• Het visuele jasje rondom je content
• Bepaalt grotendeels:
  • lay-out
  • typografie
  • kleuren
  • templates

Waarom een thema gebruiken?

• Scheiding van inhoud en vormgeving
• Wisselen van look & feel zonder dataverlies
  • Instellingen - Weergave - Thema's
• Basis voor een professionele en future-proof website, handing voor re-branding.

Ontwerpen

Hoe jouw site visueel aanpassen?

Je kan jouw front-end visueel aanpassen door te wisselen van thema. Je kan een thema ook meer personaliseren en ontwerpen via:

• Globale thema-instellingen

• Template Editor

• Block Editor

• (Custom CSS)

Ontwerp wijzigen:

Globale thema-instellingen

Eén centrale plek voor je huisstijl. Snelle rebranding, seizoenskleuren of tijdelijke campagnes, ...

• Centraal beheer: Pas één keer aan, verandert overal direct mee
• Kleurenpalet: Primaire merkkleur, secundaire accenten, achtergrondtinten
• Typografie: Vaste fonts voor koppen (H1-H6) en tekst (body)
• Lay-out & Spacing: Vaste breedtes voor containers, marges en tussenruimtes

Ontwerp wijzigen:

Template Editor

Template is een herbruikbare structuur. Kan gebruikt worden door verschillende paginatypes.

• Gebruik ingebouwde templates van actief thema.
• Maak zelf jouw aangepaste template.

Ontwerp wijzigen:

Block Editor

Unieke lay-outs op bericht- of paginaniveau.

• Kan met de ontwerpblokken bij een pagina of bericht.
• Let op: Niet té veel layout en ontwerp aanpassingen op pagina- of berichtniveau: niet herbruikbaar.
  • Steeds pagina opnieuw tekenen is niet efficient
• Gebruik de editor wél om content toe te voegen, gebruik hiervoor modulaire componenten.

Modulariteit

Modulair ontwerpen met componenten

Wat is een component?

• Een op zichzelf staand UI-element (bijv. CTA-knop, infobox, teamkaart)
• Bevat vaste structuur, stijl en invulbare datavelden

Wat is component-based design?

• Pagina's opbouwen uit losse, herbruikbare bouwstenen
• Geen unieke losse pagina's 'tekenen', maar systemen bouwen

Voordelen modulariteit

• Consistentie: Overal dezelfde look & feel
• Snelheid: Sneller nieuwe landingspagina's lanceren
• Onderhoud: Eén component updaten = overal geüpdatet

Patronen

In WordPress kan je gebruik maken van ingebouwde blokken, de blokken van een thema maar kan je ook zelf herbruikbare patronen aanmaken bestaande uit blokken.

Visuele editors

Visuele Editors

Het "oude" web: Werken met code (HTML/CSS) of simpele, niet-flexibele tekstvakken (WYSIWYG)

Waarom visuele editors?

• What You See Is What You Get: Direct visuele feedback
• Toegankelijk voor personen zonder codeerkennis (redacteur, webdesigner, ...)
• Snellere prototyping en flexibele lay-outs
• Minder afhankelijkheid van externe webontwikkelaars

Welke visuele Editors?

• Core WordPress (Native):

  • Gutenberg (Block Editor): Standaard ingebouwd, modulair, lichtgewicht.
  • Minder visueel en weinig controle over ontwerp.

• Page Builder Plugins (Third-party): De visuele editor bepaalt hoe je site er uitziet, niet het thema.

  • Elementor: Drag-and-drop marktleider
  • Divi Builder: Visuele builder gericht op design-vrijheid
  • Bricks / Oxygen: Geavanceerde builders voor developers en prestaties
  • ...

De Native Block Editor

Inhoud in de backend, styling via het thema

• Elk element is een semantisch blok (Paragraaf, Kop, Afbeelding)
• Editor focust op gestructureerde content

🎨 Rol van thema:

• Thema bepaalt hoe de blokken renderen aan de voorkant
• Scheiding tussen semantiek en visuele presentatie blijft intact

Voordelen van Gutenberg

👍

• Snelheid & Performance: Geen zware externe plugins nodig
• Toekomstbestendig: Officiële standaard van WordPress Core
• Semantisch zuiver: Produceert schone, toegankelijke HTML-code
• Gratis: Volledig geïntegreerd zonder licentiekosten

Nadelen van Gutenberg

👎

• Leercurve FSE: Full Site Editing kan complex aanvoelen
• Minder vrije pixelprecisie: Strakker gebonden aan themaregels
• Eenvoudigere animaties: Minder ingebouwde visuele effecten

Templates & Template Parts in Gutenberg

📑 Wat zijn template files?

• Blauwdrukken voor specifieke paginatypes (Single Post, Page, Archive, 404)
• Opgebouwd uit blokken in plaats van PHP-code

🧩 Template Parts (Patronen):

• Herbruikbare structurele secties (bijv. Header, Footer, Sidebar)

⚙️ Hoe werkt het?

• Bezoeker opent een pagina ➔ WordPress laadt het juiste template ➔ Vult dynamisch de content in

💡 Waarom handig?

• Headers en archiefpagina's visueel bewerken zónder code

Elementor: De Drag-and-Drop Builder

Een andere visuele insteek

🎨 Design-first benadering:

• Volledige pixel-perfecte controle aan de voorkant (front-end canvas)
• Vrij slepen, positioneren, marges slepen en animeren

Theme Builder (Elementor Pro):

• Vervangt de traditionele themastructuur

• Visueel templates ontwerpen voor headers, footers en dynamische posts

• 🧱 Modulair werken:

• Werkt met Containers, Widgets en Global Templates

• ⚠️ Aandachtspunt:

• Zwaardere code-overhead ➔ Vereist actieve optimalisatie voor snelheid