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.

(Jep, ook zoals in Webflow)

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 kleuren kiezen

 

Wel

✅  Eerst structuur bouwen met widgets

Werkwijze
Structuur eerst!

Typische layout van een recept

Links

  • Ingrediënten
  • Tips
  • Voedingswaarden

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.

Geen animatie opties in Elementor Free?

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

CPT niet linkbaar met Elementor Free

CPT niet linkbaar met Elementor Free

Templates

Waarom telkens opnieuw beginnen? Consistentie is mogelijk dankzij templates.

CPT niet linkbaar met Elementor Free

Maak templates voor

  • Recepten
  • Blogartikels
  • Contactpagina's

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.