CONTENT MANAGEMENT

WordPress - Visuele site editor: Elementor

✅  Beperkingen van de Block Editor uitleggen

✅  Pagina's bouwen met Elementor

✅  Containers en widgets gebruiken

✅  Responsive pagina's ontwerpen

✅  Voor- en nadelen van Elementor beoordelen

Na deze les kan je...

Gutenberg

= De standaard block-editor van WordPress

Wat is Gutenberg?

Werkt met

  • Blokken
  • Groepen
  • Kolommen
  • Patronen

Ideaal voor

✅  Blogs

✅  Nieuwsartikelen

✅  Eenvoudige pagina's

Herhaling

Wat is jullie ervaring met deze editor?

Frustraties met Gutenberg

Je wil een pagina bouwen met:

  • Grote headerfoto
  • Ingrediënten links
  • Bereiding rechts
  • Video
  • Gerelateerde recepten
  • Mooie call-to-action op een vaste positie

Herkenbaar?

Wat gebeurt er?

😤  Veel groepen

😤  Veel kolommen

😤  Layout breekt op mobiel

📄 Layout

  • Lastig positioneren
  • Beperkte controle

Gutenberg beperkingen

🎨 Design

  • Moeilijk exact vormgeven
  • Minder visueel

🖱️ Workflow

  • Veel klikken
  • Veel containers

📱Responsive

  • Niet altijd intuïtief

Analyseer deze pagina

Wat zou moeilijk zijn in Gutenberg? 🙋🙋‍♀️🙋‍♂️

Elementor als oplossing!

Elementor

= Een visuele drag-and-drop page builder

Voordelen

✅  Snel ontwerpen

✅  Live preview

✅  Veel controle

✅  Minder technisch

👉 Wordt door veel bedrijven standaard gebruikt

Elementor

Gutenberg 🆚 Elementor

Gutenberg

Blokken

Basislayouts

Snel

Minder visueel

Gratis

Elementor

Widgets

Vrije layouts

Meer mogelijkheden

Volledig visueel

Freemium

👉 De juiste tool hangt af van de website.

Elementor is niet perfect

❌ Kan trager worden ⏱️

❌ Veel instellingen ⚙️

❌ Sommige functies enkel Pro 🤑

❌ Kans op overdesign: consistentie 🧑‍🎨

❌ Afhankelijkheid van Elementor ⛓️  

👉 Meer vrijheid = meer verantwoordelijkheid.

Interface

Widgetbibliotheek

Elementor interface

Canvas

History

Responsive mode

Navigator

Container

= Een "doos" waarin elementen komen.

Belangrijke begrippen

Widget

= Een bouwblok, vb:

  • Tekst
  • Afbeelding
  • Video
  • Knop

(Zoals default WordPress Blocks of Elements in Webflow)

Waarom containers?

Containers bepalen:

  • Structuur
  • Positionering
  • Uitlijning
  • Responsive gedrag

Container instellingen

Zoals in CSS & Webflow, kan je volgende zaken ook in Elementor aanpassen:

  • Layout: breedte, hoogte, min height,...
  • Flexbox: row & column, alignment,...
  • Box properties: margin, padding,..
  • Stijl: kleuren, border, schaduw,...
  • ...

👀

Demo time

Receptenpagina opbouw

Header
Hero
Ingrediënten
Bereiding
Gerelateerde recepten
Footer

Eerst structuur, pas daarna design.

→ Nood aan structuurelement = Container

Niet
❌  Eerst details zoals kleuren en typografie finetunen

 

Wel

✅  Eerst algemene structuur bouwen met widgets

Werkwijze
Structuur eerst!

Typische layout van een recept

Links: Ingrediënten

Rechts: Bereiding

Oefening

Stel een recept detailpagina op in Elementor

Gebruik containers en widgets om een typische recept-layout te verkijgen.

 

Experimenteer met advanced widgets:

  • Image: foto rechts
  • Icon list: ingrediënten
  • Tabs: ingrediënten / bereiding
  • Accordion: FAQ
  • Video: kookdemonstratie

Design principles

🧑‍🎨 Back to basics! 🧑‍🎨

Meer creatieve vrijheid?

Less is more

Gebruik

  • Maximum 2 lettertypes
  • Maximum 3 hoofdkleuren

Vermijd

❌  Te veel effecten

❌  Te veel schaduwen

❌  Te veel animaties

Less is more

Animaties

  • Een mooie website is niet de website met de meeste effecten.
  • Animaties moeten de gebruiker begeleiden en de sfeer versterken - niet overheersen.

 

👉 Een goede website helpt bezoekers hun doel bereiken.

Visuele Hiërarchie

Wat ziet de bezoeker eerst?

  1. Foto
  2. Titel
  3. Bereidingstijd
  4. Ingrediënten
  5. Actieknop

👉 Wat wil de bezoeker eerst zien?

Responsive design

Meer dan de helft bezoekt via mobiel.

 

Controleer steeds:

Desktop → Tablet  → Mobile

Responsive design Tips 💡

Tekst

  • Body font niet kleiner dan 14px 
  • Verklein grote titels (maar behoud hiërarchie)

Afbeeldingen

  • Verander ratio, crop op de juiste manier

Responsive design Tips 💡

Knoppen en "touch areas"

Zorg dat je gemakkelijk met je duim kan klikken (mik op 44px)

Kolommen

Weinig breedte = elementen onder elkaar

Oefening

Optimaliseer voor verschillende schermformaten

Controleer:

  • Titel
  • Afbeelding
  • Kolommen
  • Knoppen

 

👉 Wat werkt minder goed op smartphone?

Templating

Templates

Waarom telkens opnieuw beginnen? Consistentie is mogelijk dankzij templates.

Elementor Pro

Maak templates voor

  • Recepten
  • Blogartikels
  • Contactpagina's

Elementor Pro

Recap

Gutenberg

✅ Licht

✅ Snel

✅ Standaard

❌ Minder ontwerpvrijheid

Elementor

✅ Visueel

✅ Flexible

✅ Gebruiksvriendelijk

❌ Kan zwaar worden

❌ Niet alles is gratis

Gutenberg 🆚 Elementor

Elementor is een hulpmiddel.

Het is geen vervanging voor goed ontwerp.