CONTENT MANAGEMENT

WordPress: Visuele Site Editor - Elementor

Na deze les kan je...

✅  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

Designprincipes

Less is more.

Gebruik

• Max. 2 lettertypes
• Max. 3 hoofdkleuren

Vermijd

❌  Te veel effecten

❌  Te veel schaduwen

❌  Te veel animaties

Animaties

Een mooie website is niet de website met de meeste effecten.

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

Responsive Design

Waarom?

Meer dan de helft bezoekt via mobiel.

Controleer steeds:

Desktop

↓

Tablet

↓

Smartphone

Responsive Tips

Let op:

Tekst

Niet te klein, niet te groot.

Afbeeldingen

Niet afgesneden

Knoppen

Voldoende groot

Kolommen?

Eventueel onder elkaar plaatsen

Oefening

Optimaliseer mobiel

Controleer:

• Titel
• Afbeelding
• Kolommen
• Knoppen

Vraag

Wat werkt minder goed op smartphone?

Templates

Waarom telkens opnieuw beginnen? Consistentie is mogelijk dankzij templates.

Maak templates voor:

• Recepten
• Blogartikels
• Contactpagina's

Slide 33 – Recap

Gutenberg

✅ Licht

✅  Snel

✅  Standaard

❌  Minder ontwerpvrijheid

Elementor

✅  Visueel

✅  Flexibel

✅  Gebruiksvriendelijk

❌  Kan zwaar worden

❌  Niet alles gratis

Elementor is een hulpmiddel.

Geen vervanging voor goed ontwerp.

Gutenberg?

Wat is Gutenberg?

De standaard block-editor van WordPress.

Werkt met:

• Blokken
• Groepen
• Kolommen
• Patronen

Ideaal voor:

✅  Blogs

✅  Nieuwsartikelen

✅  Eenvoudige pagina's

Frustraties van Gutenberg?

Wat is jullie ervaring met deze editor?

Herkenbaar?

Je wil een pagina bouwen met:

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

Wat gebeurt er?

😤  Veel groepen

😤  Veel kolommen

😤  Layout breekt op mobiel

😤  Veel klikken voor kleine aanpassingen

Gutenberg beperkingen:

Layout

• Lastig positioneren
• Beperkte controle

Design

• Moeilijk exact vormgeven
• Minder visueel

Workflow

• Veel klikken
• Veel containers

Responsive

• Niet altijd intuïtief

Analyse

Analyseer volgende website.

Wat zou moeilijk zijn in Gutenberg?

Elementor als oplossing!

Elementor

Wat is Elementor?

Een visuele drag-and-drop page builder.

"Wat je ziet is wat je bouwt."

Voordelen

✅  Snel ontwerpen

✅  Live preview

✅  Veel controle

✅  Minder technisch

De juiste tool hangt af van de website.

Maar Elementor is niet perfect:

❌  Kan trager worden

❌  Veel instellingen

❌  Sommige functies enkel Pro

❌  Kans op overdesign: consistentie

❌  Afhankelijkheid van Elementor

Meer vrijheid betekent ook meer verantwoordelijkheid.

Interface

Elementor Interface

Links

Widgetbibliotheek

Midden

Canvas

Onderaan

Instellingen

Extra

Navigator

Responsive Mode

History

Belangrijke begrippen

Container

Een "doos" waarin elementen komen.

Widget

Een bouwblok.

Voorbeelden:

• Tekst
• Afbeelding
• Video
• Knop

Werkwijze? Structuur Eerst

Niet:

❌  Eerst kleuren kiezen

Wel:

✅  Eerst structuur bouwen met widgets.

Voorbeeld receptpagina

Header

↓

Hero afbeelding

↓

Ingrediënten

↓

Bereiding

↓

Gerelateerde recepten

↓

Footer

Praktijkdemo

Receptpagina

We bouwen:

• Grote foto met titel
• Intro
• Ingrediëntenlijst
• Stappenplan (Bereiding)

Eerst structuur, pas daarna design. Nood aan structuurelement = Container

Containers

Waarom containers?

Containers bepalen:

• Structuur
• Positionering
• Uitlijning
• Responsive gedrag

Container Instellingen

Layout

• Breedte
• Hoogte

Flexbox

• Row
• Column

Afstand

• Margin
• Padding

Stijl

• Achtergrond
• Border
• Schaduw

Ruw voorbeeld van receptpagina:

Layout bouwen

Maak volgende layout in elementor, gebruik hiervoor een contaoiner:

Linkerkolom

Ingrediënten

Rechterkolom

Bereiding

Stijl?

• Achtergrondkleur
• Afgeronde hoeken

Widgets

Widgets

Standaard bouwblokken.

Veelgebruikte widgets

Basis

• Heading
• Text Editor
• Image
• Button

Geavanceerd

• Video
• Tabs
• Accordion
• Icon List

Op onze receptensite?

Gebruik gepaste widgets om de detailpagina van een recept samen te stellen.

Image

Foto gerecht

Icon List

Ingrediënten

Tabs

Ingrediënten / Bereiding

Accordion

FAQ

Video

Kookdemonstratie

...

Design principes

Meer creatieve vrijheid? Back to basics!