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

• Third Party Plugin: 🔗 Elementor Website Builder
• "Wat je ziet is wat je bouwt."

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

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.