banner

Figma naar Elementor

Van Figma-ontwerp naar een echte webpagina: in acht lessen bouw je je eigen ontwerp na in WordPress, met de paginabouwer Elementor. Elke les sluit je af met een resultaat in je eigen uitwerkingsbericht.

Les 1 - Aan de slag Les 2 - Het skelet Les 3 - Containers en globals Les 4 - Bouwblokken Les 5 - Je eigen layout Les 6 - Doorbouwen Les 7 - Stijl en beeld Les 8 - Afronden en inleveren

Les 1 – Aan de slag met WordPress en Elementor

In deze lessenreeks bouw je je eigen Figma-ontwerp na in WordPress, met de paginabouwer Elementor. Vandaag zet je alles klaar: je installeert Elementor, maakt het bericht waarin je straks je ontwerp bouwt, en zet op je homepage een knop die daar naartoe linkt. Aan het eind van de les heb je een werkende link die je kunt delen.

Waarom een bericht en geen pagina? Je WordPress-site wordt later je portfolio. Pagina's (pages) zoals Home, About en Contact zijn voor dat portfolio. Elke projectuitwerking wordt een los bericht (post) in de categorie Uitwerkingen, met een eigen vormgeving die past bij de klant van dat project.

Stap 1 - Elementor installeren en instellen

Voordat je begint: WordPress staat al klaar op je installatie Portfolio. Log in op het dashboard via de link die je van je docent hebt gekregen.

Thema Hello Elementor installeren
  1. Ga naar Appearance > Themes (Weergave > Thema's) en klik op Add New Theme (Nieuw thema toevoegen).
  2. Zoek op “Hello Elementor”, klik op Install (Installeren) en daarna op Activate (Activeren).
  3. Bovenin verschijnt een melding die vraagt om de plugin Elementor te installeren. Klik op Install Elementor (Installeer Elementor).

Let op: na de installatie kom je mogelijk op een promotiepagina of een welkomstwizard van Elementor. Klik in je browser op de Back-knop of sla de wizard over.

Controleer Elementor
  1. Ga naar Plugins > Installed Plugins (Plugins > Geïnstalleerde plugins).
  2. Controleer of Elementor (gemaakt door Elementor.com) er staat en actief is.
  3. Staat Elementor er niet? Ga naar Plugins > Add New Plugin (Plugins > Nieuwe plugin toevoegen), zoek op “Elementor”, kies de gratis plugin van Elementor.com en klik op Install Now (Nu installeren) en Activate (Activeren).

Atomic Editor uitschakelen
  1. Ga naar Elementor > Editor > Settings (Elementor > Editor > Instellingen).
  2. Open het tabblad Atomic Editor.
  3. Schakel de Atomic Editor uit en klik op Save Changes (Wijzigingen opslaan).

Belangrijk: doe dit nu, vóórdat je iets bouwt. Elementor heeft een nieuwe set bouwblokken (atomic elements). Die gebruiken we in dit project niet. Bouw je er toch mee en zet je ze later uit, dan verdwijnt die inhoud uit beeld.

Google Fonts lokaal laden
  1. Ga naar Elementor > Editor > Settings > Performance (Instellingen > Prestaties).
  2. Zet Load Google Fonts Locally (Google Fonts lokaal laden) op Enable (Inschakelen) en klik op Save Changes (Wijzigingen opslaan).

Waarom? Lettertypes worden dan vanaf je eigen site geladen in plaats van vanaf de servers van Google. Dat is beter voor de privacy van je bezoekers (AVG).

Opruimen en instellen
  1. Ga naar Appearance > Themes (Weergave > Thema's) en verwijder alle thema's behalve Hello Elementor.
  2. Ga naar Settings > Permalinks (Instellingen > Permalinks), kies Post name (Berichtnaam) en klik op Save Changes (Wijzigingen opslaan). Zo krijgt je bericht straks een leesbare link.
  3. Verwijder onder Posts (Berichten) het voorbeeldbericht “Hello world!” (Hallo wereld!) en onder Pages (Pagina's) de voorbeeldpagina “Sample Page” (Voorbeeldpagina).

Updates
  1. Ga naar Dashboard > Updates.
  2. Staan er updates klaar voor WordPress, plugins of thema's? Installeer ze. Doe dit de rest van het project steeds zodra er een update is: dat houdt je site veilig.

Let op: controleer na elke update van Elementor of de Atomic Editor nog uit staat.

Stap 2 - Je uitwerkingsbericht maken

Categorie Uitwerkingen aanmaken
  1. Ga naar Posts > Categories (Berichten > Categorieën).
  2. Vul bij Name (Naam) “Uitwerkingen” in en klik op Add New Category (Nieuwe categorie toevoegen).

Nieuw bericht aanmaken
  1. Ga naar Posts > Add New Post (Berichten > Nieuw bericht).
  2. Geef het bericht een titel, bijvoorbeeld: M02 – [naam van je project].
  3. Open rechts in de zijbalk het blok Categories (Categorieën). Vink Uitwerkingen aan en vink Uncategorized (Geen categorie) uit.
  4. Klik bovenaan op Edit with Elementor (Bewerken met Elementor).

Elementor Canvas kiezen
  1. Klik in Elementor op het tandwiel-icoon Page Settings (Pagina-instellingen).
  2. Kies bij Page Layout (Pagina-indeling) de optie Elementor Canvas.

Wat doet Canvas? Een Canvas-pagina is een leeg vel: de header, footer en titel van het thema verdwijnen. Alles wat je ziet, bouw je zelf. Zo kan je uitwerking een eigen stijl krijgen, los van je portfolio.

Je eerste element plaatsen
  1. Klik op het plusje in het canvas en kies een Container.
  2. Sleep vanuit het paneel links de widget Heading (Kop) in de container.
  3. Typ als tekst: “Hier komt mijn uitwerking”.

Publiceren
  1. Klik linksonder (of rechtsboven) op Publish (Publiceren).
  2. Klik daarna op het oog-icoon of op View Post (Bericht bekijken) om je bericht te openen.
  3. Kopieer de link uit de adresbalk en bewaar die. Hij ziet er ongeveer zo uit: .../m02-naam-van-je-project/

Let op: staat er ?preview=true of ?p= met een nummer in de link? Dan heb je de voorbeeldlink. Open het bericht via Posts > All Posts > View (Berichten > Alle berichten > Bekijken) om de echte link te krijgen.

Stap 3 - Homepage met één knop

Je portfolio bouw je later. Voor nu krijgt je homepage maar één taak: een bezoeker naar je uitwerking sturen.

Pagina Home maken
  1. Ga naar Pages > Add New Page (Pagina's > Nieuwe pagina).
  2. Geef de pagina de titel “Home”.
  3. Klik op Edit with Elementor (Bewerken met Elementor).

Knop plaatsen en koppelen
  1. Voeg een Container toe en sleep de widget Button (Knop) erin.
  2. Verander de tekst van de knop, bijvoorbeeld in “Bekijk mijn uitwerking M02”.
  3. Plak bij Link de link van je bericht die je in stap 2 hebt bewaard.
  4. Klik op Publish (Publiceren).

Home instellen als homepage
  1. Ga naar Settings > Reading (Instellingen > Lezen).
  2. Kies bij Your homepage displays (Je homepage toont) de optie A static page (Een statische pagina).
  3. Kies bij Homepage de pagina Home.
  4. Klik op Save Changes (Wijzigingen opslaan).

Let op: de pagina Home staat niet op Canvas. Je ziet dus nog de header en footer van het thema Hello Elementor. Dat is prima: die pagina vormgeven doe je later, als je aan je portfolio werkt.

Stap 4 - Testen als bezoeker

Doorloop je site als bezoeker
  1. Open een incognito- of privévenster (niet ingelogd).
  2. Typ het adres van je site. Je komt op je homepage met de knop.
  3. Klik op de knop. Je komt op je uitwerkingsbericht met de kop “Hier komt mijn uitwerking”.
  4. Controleer dat je géén header en footer van het thema ziet op je bericht (Canvas werkt).

Controleer vanaf de frontend: zie je “Page not found” (Pagina niet gevonden) of een lege pagina? Kijk dan of het bericht op Published (Gepubliceerd) staat en niet op Draft (Concept), en of de link in je knop dezelfde is als het adres van je bericht.

Link delen
  1. Open je uitwerkingsbericht en kopieer het adres uit de adresbalk.
  2. Deel het met je docent of in de klas. Dit is de link die je uiterlijk in week 8 inlevert in Simulise.

Leerdoelen

Na deze les kun je:
  • uitleggen wat WordPress is en wat het verschil is tussen een thema en een plugin;
  • het verschil benoemen tussen een bericht en een pagina, en waarom je uitwerking een bericht is;
  • Elementor installeren en de belangrijkste instellingen goed zetten (Atomic Editor uit, Google Fonts lokaal, permalinks);
  • een bericht maken met de pagina-indeling Elementor Canvas;
  • een statische homepage instellen met een knop die naar een bericht linkt;
  • je site testen zoals een bezoeker hem ziet.

Tijdsplanning

0-10 minKlassikale intro
10-40 minElementor installeren en instellen
40-70 minJe uitwerkingsbericht maken
70-95 minHomepage met één knop
95-110 minTesten als bezoeker
110-120 minAfronden en vooruitblik

Wat lever je op?

Aan het eind van deze les staat er een werkende basis. Controleer zelf:
  • Hello Elementor is actief, overige thema's zijn verwijderd.
  • Elementor is actief, de Atomic Editor staat uit.
  • Google Fonts worden lokaal geladen.
  • Permalinks staan op Post name (Berichtnaam).
  • Er is een categorie Uitwerkingen.
  • Er is een gepubliceerd bericht (post) in de categorie Uitwerkingen, met Page Layout (pagina-indeling) Elementor Canvas en een kop.
  • De pagina Home is ingesteld als statische homepage en heeft een knop naar je bericht.
  • In een incognitovenster kom je via de knop op je bericht.

Les 2 – Het skelet

Vandaag zet je de basis van je pagina neer: een header, een content-deel en een footer. Je werkt vanuit het Figma-template, zodat je ontwerp en je pagina vanaf het begin dezelfde opbouw hebben. Aan het eind van de les staat het skelet van je pagina in je uitwerkingsbericht.

Frame = container. In Figma groepeer je onderdelen in frames. In Elementor doe je hetzelfde met containers. Een frame in een frame wordt een container in een container, en ze krijgen dezelfde naam.

Boxed of Full Width. Bij Boxed loopt de achtergrond van een container over de hele breedte van het scherm, maar blijft de inhoud binnen 1140 px. Bij Full Width loopt ook de inhoud tot de rand. Je hebt dus geen extra container nodig om je inhoud in het midden te houden.

Stap 1 - Het Figma-template

Template kopiëren
  1. Open het Figma-template.
  2. Klik bovenaan op de bestandsnaam en kies Duplicate (Dupliceren). Je kopie staat in je Drafts.
  3. Geef je kopie een naam: M02 – [naam van je project].

Lagen bekijken
  1. Open links het paneel Layers (Lagen).
  2. Klap het frame Desktop open. Je ziet Header, Content en Footer.
  3. Selecteer Header. Het frame is 1440 px breed en heeft links en rechts 150 px padding: de inhoud is dus 1140 px breed. In Elementor heet dat Boxed.

Let op: in dit template ontwerp je straks ook je medium-fi en je hifi. Werk dus altijd in je eigen kopie.

Stap 2 - De header bouwen

Voordat je begint: open je uitwerkingsbericht met Edit with Elementor (Bewerken met Elementor). De kop “Hier komt mijn uitwerking” uit les 1 mag je verwijderen: rechtsklik > Delete (Verwijderen).

Container Header
  1. Klik op het plusje en kies een Container (Flexbox) met één kolom.
  2. Zet in het tabblad Layout (Indeling) Content Width op Boxed. De breedte is standaard 1140 px.
  3. Zet Direction (richting) op Row (rij, pijl naar rechts).

Placeholders plaatsen
  1. Sleep een Heading (Kop) in Header en typ “Logo”.
  2. Sleep een Text Editor (Teksteditor) erin en typ bijvoorbeeld “Home Over Contact”.
  3. Sleep een Button (Knop) erin.
  4. Wijkt je ontwerp af? Zet de onderdelen in de volgorde die jij wilt. Het gaat nu om de structuur.

Controleer: open de Navigator (Ctrl/Cmd + I). Je ziet één container met daarin een kop, een tekst en een knop. Bekijk je pagina: de achtergrond van de header loopt over de hele breedte, de inhoud blijft binnen 1140 px.

Stap 3 - Content en footer bouwen

Content
  1. Voeg onder de header een nieuwe container toe. Content Width: Full Width, Direction: Column (kolom). Zet de Gaps op 0 en in het tabblad Advanced (Geavanceerd) de Padding op 0. Deze container groepeert al je secties, net als het frame Content in Figma. Zonder padding en gap sluiten de secties op elkaar aan en lopen hun achtergronden tot de rand van het venster.
  2. Zet daarin een container voor de Sectie: Boxed, Direction Column (kolom).
  3. Zet in de Sectie een Heading (Kop) en een Text Editor (Teksteditor) als placeholder.

Footer
  1. Voeg onder Content een container toe voor de Footer: Boxed, Direction Row (rij).
  2. Zet er twee Text Editors (Teksteditors) in als placeholders voor de kolommen.

Let op: zet geen container om je inhoud heen alleen om hem smaller te maken. Dat doet Boxed al. Een container gebruik je alleen als je onderdelen wilt groeperen, bijvoorbeeld een kolom met een kop én een tekst.

Stap 4 - Namen in de Navigator

Containers hernoemen
  1. Open de Navigator (Ctrl/Cmd + I).
  2. Dubbelklik op de naam van een container en typ de nieuwe naam.
  3. Gebruik precies dezelfde namen als in Figma: Header, Content, Sectie en Footer.

Opslaan en bekijken
  1. Klik op Update (Bijwerken).
  2. Bekijk je bericht in een nieuw tabblad en zet Figma ernaast.

Controleer vanaf de frontend: staan Header, Content en Footer onder elkaar, en staat de inhoud in het midden binnen 1140 px?

Leerdoelen

Na deze les kun je:
  • uitleggen dat een frame in Figma een container in Elementor is;
  • de opbouw Header, Content en Footer bouwen met containers;
  • het verschil uitleggen tussen Boxed en Full Width, en ze goed toepassen;
  • containers een naam geven in de Navigator, gelijk aan je frames in Figma.

Tijdsplanning

0-10 minKlassikale intro
10-25 minHet Figma-template
25-55 minDe header bouwen
55-85 minContent en footer bouwen
85-110 minNamen in de Navigator en vergelijken
110-120 minAfronden en vooruitblik

Wat lever je op?

Aan het eind van deze les staat het skelet van je pagina. Controleer zelf:
  • Je hebt een eigen kopie van het Figma-template.
  • In je uitwerkingsbericht staan Header, Content en Footer onder elkaar.
  • Header, Sectie en Footer staan op Boxed (1140 px), Content op Full Width met padding en gap 0, zonder extra containers om de inhoud smal te maken.
  • In de header staan placeholders voor logo, menu en knop; in de footer staan twee teksten.
  • De namen in de Navigator zijn gelijk aan de framenamen in Figma.
  • Je bericht is bijgewerkt (Update) en zichtbaar voor bezoekers.

Les 3 – Containers en globals

Vandaag leer je hoe je containers instelt: richting, tussenruimte, padding en uitlijning. Dat is precies wat Auto Layout in Figma doet. Daarna maak je je eigen kleuren en lettertypes voor dit project aan: de M02-globals. In week 5 vul je daar je styletile in, en dan verandert je hele pagina in één keer mee.

Stap 1 - Auto Layout en containers

Een container in Elementor werkt bijna hetzelfde als een frame met Auto Layout in Figma. Links Figma, rechts Elementor, en tussen haakjes het tabblad waar je het vindt:

  • Richting horizontaal of verticaal → Direction: Row of Column (rij of kolom) (Layout)
  • Spacing between items → Gap (Layout)
  • Padding → Padding (Advanced / Geavanceerd)
  • Alignment → Justify Content en Align Items (Layout)
  • Fixed width → Width in px (Layout)
  • Fill container → Width 100% (Layout)
  • Frame in een frame → container in een container (Navigator)

Vergelijk in Figma
  1. Selecteer in je kopie van het template het frame Header.
  2. Zet Auto Layout aan (Shift + A) en kies horizontaal.
  3. Kijk welke waarden je ziet bij spacing en padding.

Hetzelfde in Elementor
  1. Selecteer Header via de Navigator.
  2. Kies in het tabblad Layout (Indeling) bij Direction voor Row (rij).
  3. Stel bij Gaps de tussenruimte in.
  4. Stel in het tabblad Advanced (Geavanceerd) de Padding in.

Waarom twee uitlijningen? Justify Content verdeelt de onderdelen in de richting van de container (bij een rij: van links naar rechts). Align Items lijnt ze uit in de andere richting (bij een rij: van boven naar beneden).

Stap 2 - Uitlijnen

Header
  1. Selecteer Header. Zet Justify Content op Space Between en Align Items op Center.
  2. Het logo staat nu links en de knop rechts.
  3. Wil je menu en knop samen rechts? Zet ze in een eigen container met Direction Row (rij) en een gap van 24 px.

Secties
  1. Selecteer Sectie. Zet in het tabblad Advanced (Geavanceerd) de Padding boven en onder op 80 px.
  2. Zet bij Sectie ook de Gap op 24 px.

Footer
  1. Selecteer Footer. Zet de Padding boven en onder op 40 px.
  2. Zet bij Footer ook Justify Content op Space Between, of gebruik een gap van 40 px.

Tip: de echte waarden haal je straks uit je ontwerp. Gebruik nu ronde getallen: 8, 16, 24, 40 of 80 px.

Stap 3 - M02-globals aanmaken

Voordat je begint: globals zijn je kleuren en lettertypes op één plek. Je gebruikt nu neutrale waarden (grijstinten). In week 5 vervang je ze door je styletile.

Site Settings openen
  1. Klik in Elementor linksboven op het menu en kies Site Settings (Site-instellingen).
  2. Kies Global Colors (Globale kleuren).

Vier kleuren toevoegen
  1. Klik onder Custom Colors (aangepaste kleuren) op Add Color (Kleur toevoegen).
  2. Maak deze vier kleuren aan: M02 Primair (#333333), M02 Secundair (#777777), M02 Tekst (#111111), M02 Achtergrond (#F2F2F2).
  3. Klik op Save Changes (Wijzigingen opslaan).

Vijf lettertypes toevoegen
  1. Ga terug en kies Global Fonts (Globale lettertypes).
  2. Klik op Add Style (Stijl toevoegen) en maak: M02 H1 (48 px, vet), M02 H2 (36 px, vet), M02 H3 (24 px, vet), M02 Body (16 px, normaal), M02 Knop (16 px, vet).
  3. Kies voor alle vijf hetzelfde neutrale lettertype, bijvoorbeeld Roboto.
  4. Klik op Save Changes (Wijzigingen opslaan).

Belangrijk: pas de systeemkleuren en -lettertypes (Primary, Secondary, Text, Accent) niet aan en gebruik ze niet. Die zijn voor je portfolio. Verwijder ook nooit een M02-global: elementen die ernaar verwijzen, verliezen dan hun stijl.

Stap 4 - Globals toepassen

Kleuren koppelen
  1. Selecteer de knop in de header en open het tabblad Style (Stijl).
  2. Klik bij Background Color (Achtergrondkleur) op het wereldbol-icoon (Globals) en kies M02 Primair.
  3. Koppel op dezelfde manier de tekstkleur van koppen aan M02 Tekst en de achtergrond van Footer aan M02 Achtergrond.

Lettertypes koppelen
  1. Selecteer een kop. Klik bij Style > Typography (Stijl > Typografie) op het wereldbol-icoon.
  2. Kies M02 H1, M02 H2 of M02 H3.
  3. Geef elke Text Editor (Teksteditor) M02 Body en elke knop M02 Knop.

Controleer: zweef met je muis over het wereldbol-icoon. Zie je de naam van een M02-global? Dan is het goed gekoppeld. Zie je een hexcode of een losse lettergrootte? Koppel het opnieuw.

Let op: laat geen tekst op Default (Standaard) staan. Die valt terug op de site-instellingen en verandert straks mee met je portfolio.

Leerdoelen

Na deze les kun je:
  • uitleggen hoe Auto Layout in Figma en een container in Elementor samenhangen;
  • richting, gap, padding en uitlijning van een container instellen;
  • eigen M02-kleuren en -lettertypes aanmaken;
  • globals koppelen aan tekst, knoppen en achtergronden.

Tijdsplanning

0-10 minKlassikale intro
10-35 minAuto Layout en containers
35-55 minUitlijnen
55-80 minM02-globals aanmaken
80-110 minGlobals toepassen
110-120 minAfronden en vooruitblik

Wat lever je op?

Controleer zelf:
  • In de header staat het logo links en de rest rechts, verticaal gecentreerd.
  • Secties en footer hebben padding boven en onder.
  • Er zijn 4 M02-kleuren en 5 M02-lettertypes.
  • Header en footer gebruiken alleen M02-globals, geen systeemkleuren en geen losse hexcodes.
  • Je bericht is bijgewerkt (Update).

Les 4 – Bouwblokken

Vandaag bouw je bouwblokken: secties die op bijna elke website voorkomen. Je bouwt ze met je M02-globals en slaat ze op als template. Volgende week, als je medium-fi klaar is, zet je ze met één klik in je eigen layout. Je bent nu je medium-fi aan het ontwerpen: kijk dus goed welke bouwblokken jij nodig hebt.

Stap 1 - Samen: de hero

Voordat je begint: werk in je uitwerkingsbericht, in de container Content, onder de Sectie uit les 2.

Opbouw
  1. Voeg in Content een container toe met Content Width op Boxed en Direction op Column (kolom). Noem hem Hero.
  2. Er komt geen extra container in: Boxed houdt de inhoud al binnen 1140 px.
  3. Zet in Hero een Heading (Kop, M02 H1), een Text Editor (Teksteditor, M02 Body) en een Button (Knop, M02 Knop).

Hoogte en achtergrond
  1. Selecteer Hero. Zet in het tabblad Layout (Indeling) de Min Height op 600 px en Justify Content op Center.
  2. Kies bij Style > Background (Stijl > Achtergrond) de optie Classic (Klassiek) en selecteer een afbeelding. Een placeholder is prima.
  3. Zet bij Style > Background Overlay (Achtergrond-overlay) de kleur op M02 Tekst en de Opacity (dekking) op 50%. Zo blijft de tekst leesbaar.
  4. Zet de tekstkleur van kop en tekst op M02 Achtergrond (licht).

Let op: omdat Hero op Boxed staat, loopt de achtergrond over de hele breedte en blijft de tekst binnen 1140 px.

Stap 2 - Stations

Kies minimaal twee bouwblokken die in je ontwerp voorkomen. Bouw elk bouwblok als één container op Boxed, net als de hero. Containers dáárbinnen, zoals kolommen en kaarten, zet je op Full Width: ze vullen dan de breedte van de sectie. Gebruik alleen M02-globals.

Station A – Tekst + beeld
  1. Zet de sectie op Direction Row (rij), met een gap van 40 px.
  2. Zet er twee containers in (Full Width), elk met een Width van 50%.
  3. Links: Heading (Kop, M02 H2), Text Editor (Teksteditor) en Button (Knop). Rechts: een Image (Afbeelding).

Station B – Kaartenrij
  1. Zet de sectie op Direction Column (kolom), met een Heading (Kop, M02 H2) bovenaan.
  2. Zet daaronder een container Kaarten (Full Width) met Direction Row (rij) en een gap van 24 px.
  3. Bouw één Kaart: een container met een Image (Afbeelding), een Heading (Kop, M02 H3) en een Text Editor (Teksteditor). Geef hem achtergrond M02 Achtergrond, padding 24 px en een Border Radius (randradius) van 8 px.
  4. Klik twee keer op Duplicate (Dupliceren) om de kaart te kopiëren.

Station C – CTA-band
  1. Geef de sectie achtergrond M02 Primair en padding van 60 px boven en onder.
  2. Zet de sectie op Direction Column (kolom) en Align Items op Center.
  3. Zet er een Heading (Kop, M02 H2) en een Button (Knop) in.

Station D – Galerij
  1. Zet de sectie bij Container Layout (Containerindeling) op Grid, met 3 kolommen, 2 rijen en een gap van 16 px.
  2. Zet er zes Image-widgets (Afbeelding) in.

Tip: gebruik de placeholder-afbeelding van Elementor. Je echte beelden plaats je in les 7.

Stap 3 - Opslaan als template

Opslaan
  1. Rechtsklik op de container van het bouwblok (de hele sectie), in de Navigator of op het handvat van de container.
  2. Kies Save as Template (Opslaan als template).
  3. Geef het een naam die begint met M02: M02 Hero, M02 Tekst + beeld, M02 Kaartenrij, M02 CTA of M02 Galerij.

Terugvinden
  1. Klik in het canvas op het map-icoon (Add Template / Template toevoegen).
  2. Open het tabblad My Templates (Mijn templates). Je bouwblokken staan erin.

Opruimen
  1. Bouwblokken die je niet in je ontwerp gebruikt, mag je uit je bericht verwijderen. Ze blijven bewaard in My Templates (Mijn templates).

Waarom? Volgende les voeg je je bouwblokken met één klik in, in de volgorde van je eigen ontwerp.

Leerdoelen

Na deze les kun je:
  • veelvoorkomende secties bouwen met containers;
  • een achtergrondafbeelding met overlay instellen;
  • kaarten even breed maken met containers in een rij;
  • een sectie opslaan als template en terugvinden.

Tijdsplanning

0-10 minKlassikale intro
10-40 minSamen: de hero
40-95 minStations
95-110 minOpslaan als template
110-120 minAfronden en vooruitblik

Wat lever je op?

Controleer zelf:
  • Er staat een hero met achtergrondafbeelding en overlay.
  • Je hebt minimaal twee extra bouwblokken gebouwd die in je eigen ontwerp voorkomen.
  • Elk bouwblok is één container op Boxed; containers daarbinnen staan op Full Width.
  • Elk bouwblok gebruikt alleen M02-globals.
  • Alle bouwblokken staan in My Templates (Mijn templates), met een naam die begint met M02.

Les 5 – Je eigen layout

Je medium-fi is af. Vandaag vertaal je die naar Elementor. Eerst maak je een bouwplan: welke secties heeft je pagina, en welk bouwblok past erbij? Daarna zet je ze in je uitwerkingsbericht. Aan het eind van de les staat de layout van je eigen ontwerp in WordPress.

Stap 1 - Je bouwplan

Secties aanwijzen in Figma
  1. Open je medium-fi in je kopie van het template.
  2. Kijk of elke horizontale band in Content een eigen frame is. Zo niet: selecteer de onderdelen en maak er een frame van (Ctrl/Cmd + Alt + G).
  3. Geef elk frame een duidelijke naam, bijvoorbeeld Hero, Over ons, Aanbod of Contact.

Bouwplan opschrijven
  1. Schrijf van boven naar beneden alle secties op.
  2. Zet achter elke sectie welk bouwblok past, of “zelf bouwen”.
  3. Voorbeeld: Hero → M02 Hero; Over ons → M02 Tekst + beeld; Aanbod → M02 Kaartenrij; Contact → zelf bouwen; Afsluiter → M02 CTA.

Stap 2 - Bouwblokken invoegen

Invoegen
  1. Open je uitwerkingsbericht in Elementor.
  2. Klik binnen Content op het map-icoon, open My Templates (Mijn templates) en klik bij het juiste bouwblok op Insert (Invoegen).
  3. Sleep de sectie in de Navigator naar de juiste plek binnen Content.

Aanpassen aan je ontwerp
  1. Pas het aantal kaarten, kolommen of afbeeldingen aan je ontwerp aan.
  2. Staat het beeld in je ontwerp links in plaats van rechts? Zet Direction van de sectie op Row reverse (rij omgekeerd).
  3. Hernoem elke sectie in de Navigator naar de naam uit Figma.

Opruimen
  1. Verwijder de placeholder-Sectie uit les 2 als je hem niet meer nodig hebt.
  2. Verwijder oefenbouwblokken uit les 4 die nu dubbel in je bericht staan.

Stap 3 - Ontbrekende secties bouwen

Volg het vaste patroon
  1. Maak één container op Boxed met de naam van de sectie.
  2. Groepjes binnen de sectie, zoals kolommen of kaarten, zijn containers op Full Width.
  3. Kijk in Figma: staan de onderdelen naast elkaar (Row, rij) of onder elkaar (Column, kolom)?
  4. Gebruik geen extra container om de inhoud smal te maken: dat doet Boxed al.

Tip: gebruik grijze vlakken of placeholder-afbeeldingen. Teksten mogen nog “lorem ipsum” zijn; die vul je in les 6 aan.

Stap 4 - Vergelijken met Figma

  1. Klik op Update (Bijwerken) en open je bericht in een nieuw tabblad.
  2. Zet Figma ernaast, allebei op 100%.
  3. Loop van boven naar beneden: klopt de volgorde, en klopt de indeling per sectie?

Controleer vanaf de frontend: staat elke sectie binnen 1140 px, en lopen de achtergronden over de hele breedte?

Leerdoelen

Na deze les kun je:
  • je medium-fi opdelen in secties;
  • een bouwplan maken van boven naar beneden;
  • opgeslagen templates invoegen en aanpassen aan je ontwerp;
  • ontbrekende secties zelf bouwen met containers op Boxed en Full Width.

Tijdsplanning

0-10 minKlassikale intro
10-30 minJe bouwplan
30-60 minBouwblokken invoegen
60-100 minOntbrekende secties bouwen
100-110 minVergelijken met Figma
110-120 minAfronden en vooruitblik

Wat lever je op?

Controleer zelf:
  • Je hebt een bouwplan met alle secties van je medium-fi.
  • Elke sectie uit je medium-fi staat in Content, in de juiste volgorde.
  • Elke sectie is één container op Boxed, zonder extra containers om de inhoud smal te maken.
  • De sectienamen in de Navigator zijn gelijk aan de framenamen in Figma.
  • Je bericht is bijgewerkt (Update).

Les 6 – Doorbouwen

Je layout staat. Vandaag maak je hem compleet: alle koppen, teksten en knoppen uit je ontwerp komen erin, header en footer gaan lijken op je ontwerp en de afstanden gaan kloppen. Aan het eind bereid je week 5 voor: dan verwerk je je styletile in je M02-globals.

Stap 1 - Teksten en knoppen aanvullen

Tekst overnemen
  1. Dubbelklik in Figma in een tekstvak, selecteer alles (Ctrl/Cmd + A) en kopieer (Ctrl/Cmd + C).
  2. Plak de tekst in Elementor in de juiste widget.
  3. Ontbreekt een onderdeel? Voeg de widget toe en geef hem meteen een M02-lettertype en een M02-kleur.

Knoppen
  1. Geef elke knop de tekst uit je ontwerp.
  2. Gaat de knop nog nergens naartoe? Zet bij Link een #.

Let op: volgens de criteria heeft je pagina dezelfde onderdelen als je Figma-ontwerp. Loop je ontwerp dus helemaal na, van boven naar beneden.

Stap 2 - Kopniveaus

Zo kies je het niveau
  1. Eén H1 per pagina: de belangrijkste kop, meestal in de hero.
  2. H2 voor de kop van elke sectie.
  3. H3 voor koppen in kaarten of kleinere blokken.

Instellen
  1. Selecteer een Heading-widget (Kop) en kies in het tabblad Content (Inhoud) bij HTML Tag het niveau.
  2. Kies bij Style > Typography (Stijl > Typografie) het passende M02-lettertype.

Waarom? Zoekmachines en schermlezers gebruiken de koppen om je pagina te begrijpen. Het niveau zegt hoe belangrijk een kop is, niet hoe groot hij is.

Stap 3 - Header en footer afmaken

Header
  1. Vervang de placeholders door de onderdelen uit je ontwerp: logo (tekst of afbeelding), menu-items en knop.
  2. Het menu is statisch: gewone tekst of knoppen. Ze hoeven nog niet te werken; een link naar # mag.

Footer
  1. Neem de kolommen en teksten uit je ontwerp over.
  2. Geef de footer de achtergrond uit je ontwerp, via een M02-kleur.

Stap 4 - Afstanden gelijk aan Figma

Meten in Figma
  1. Selecteer een frame met Auto Layout. Lees in het rechterpaneel de padding en de spacing (gap) af.
  2. Geen Auto Layout? Selecteer een onderdeel, houd Alt (Option) ingedrukt en wijs een ander onderdeel aan. Figma toont de afstand ertussen.

Overnemen in Elementor
  1. Afstand tussen onderdelen: Gap van de container (tabblad Layout / Indeling).
  2. Ruimte binnen de rand van een container: Padding (tabblad Advanced / Geavanceerd).
  3. Gebruik geen Margin (marge) op losse widgets om iets op zijn plek te duwen.

Stap 5 - Opruimen en vooruitkijken

Navigator opruimen
  1. Geef elke container een naam. Er staat nergens meer alleen “Container”.
  2. Verwijder lege of overbodige containers (bijvoorbeeld een container die alleen de inhoud smal maakt) en oefenmateriaal dat je niet gebruikt.
  3. Klik op Update (Bijwerken).

Voorbereiding week 5 (BO)
  1. Op woensdag in week 5 is je styletile klaar.
  2. Open in Elementor Site Settings (Site-instellingen) > Global Colors (Globale kleuren) en Global Fonts (Globale lettertypes).
  3. Vervang de neutrale waarden van alle M02-globals door de kleuren en lettertypes uit je styletile en klik op Save Changes (Wijzigingen opslaan).
  4. Bekijk je bericht: je hele pagina neemt in één keer je stijl over.

Belangrijk: pas alleen de waarden aan, niet de namen. Laat de systeemkleuren en -lettertypes (Primary, Secondary, Text, Accent) met rust.

Leerdoelen

Na deze les kun je:
  • alle onderdelen uit je ontwerp aanvullen;
  • koppen in de juiste volgorde gebruiken (H1, H2, H3);
  • afstanden uit Figma overnemen met gap en padding;
  • je Navigator overzichtelijk houden;
  • je M02-globals aanpassen aan je styletile.

Tijdsplanning

0-10 minKlassikale intro
10-40 minTeksten en knoppen aanvullen
40-55 minKopniveaus
55-75 minHeader en footer afmaken
75-100 minAfstanden gelijk aan Figma
100-110 minOpruimen en vooruitkijken
110-120 minAfronden

Wat lever je op?

Controleer zelf:
  • Alle koppen, teksten en knoppen uit je ontwerp staan in je pagina.
  • Er is precies één H1; elke sectie heeft een H2.
  • Header en footer bevatten de onderdelen uit je ontwerp.
  • Afstanden zijn ingesteld met gap en padding, niet met losse marges.
  • Elke container in de Navigator heeft een naam.
  • Je bericht is bijgewerkt (Update).
  • Na week 5: je M02-globals hebben de kleuren en lettertypes uit je styletile.

Les 7 – Stijl en beeld

In week 5 heb je je styletile verwerkt in de M02-globals. Vandaag komt je hifi erin: je exporteert de beelden uit Figma, geeft ze een goede naam, uploadt ze en plaatst ze. Daarna werk je de details bij tot je pagina lijkt op je ontwerp.

Stap 1 - Globals controleren

  1. Open in Elementor Site Settings (Site-instellingen) > Global Colors (Globale kleuren) en Global Fonts (Globale lettertypes).
  2. Vergelijk ze met je styletile. Nog neutrale grijstinten? Pas de waarden nu aan (zie les 6, stap 5).
  3. Zie je een element dat niet meeverandert? Dan is het niet gekoppeld. Koppel het alsnog via het wereldbol-icoon.

Stap 2 - Beelden exporteren uit Figma

Exporteren
  1. Selecteer in je hifi de afbeelding zelf, niet het frame met tekst eromheen.
  2. Klik rechts in het paneel bij Export op het plusje.
  3. Kies het formaat: JPG voor foto's, PNG voor logo's en iconen met een transparante achtergrond.
  4. Kies 1x, of 2x voor kleine logo's. Een foto hoeft niet breder te zijn dan 1920 px.
  5. Klik op Export.

Goede bestandsnamen
  1. Kleine letters, geen spaties, woorden gescheiden door een streepje: m02-hero-fietser.jpg.
  2. Begin met m02, dan de plek op de pagina, dan wat erop staat.
  3. Hernoem het bestand vóór je het uploadt.

Veilig bewaren
  1. Bewaar alle beelden in je projectmap op OneDrive, in een map “beelden”.

Waarom? Criterium 5: je bestanden hebben een duidelijke naam en zijn veilig bewaard. En je vindt ze later terug voor je portfolio.

Stap 3 - Uploaden naar WordPress

  1. Ga in WordPress naar Media > Add New Media File (Media > Nieuw mediabestand toevoegen).
  2. Sleep je beelden erin.
  3. Open elke afbeelding en vul bij Alternative Text (Alternatieve tekst) kort in wat erop staat, bijvoorbeeld “Fietser in de stad bij zonsondergang”.

Let op: je opslagruimte op de hosting is beperkt. Upload geen grote originele foto's van meerdere MB's.

Stap 4 - Beelden plaatsen

Image-widgets
  1. Selecteer een Image-widget (Afbeelding). Klik in het tabblad Content (Inhoud) op de afbeelding en kies je beeld uit de Media Library (mediabibliotheek).
  2. Kies bij Image Resolution (Afbeeldingsgrootte) voor Full (Volledig), of een formaat dat groot genoeg is.

Achtergrondafbeeldingen
  1. Selecteer de container van de sectie, bijvoorbeeld Hero. Kies bij Style > Background (Stijl > Achtergrond) je beeld.
  2. Zet Position (Positie) op Center Center (Midden midden) en Size (Grootte) op Cover (Bedekken).

Controleer: er staat nergens meer een placeholder of een grijs vlak.

Stap 5 - Details vergelijken

  1. Open je bericht in een nieuw tabblad (niet in de editor) en zet Figma ernaast, allebei op 100%.
  2. Loop per sectie na: kleuren, lettertypes, afstanden en beelden.
  3. Schrijf de verschillen op en werk ze één voor één bij.

Tip: moet iets overal anders? Pas de M02-global aan. Gaat het om één plek? Pas de gap of padding van die container aan.

Leerdoelen

Na deze les kun je:
  • controleren of je styletile goed in je M02-globals staat;
  • beelden uit Figma exporteren in het juiste formaat;
  • bestanden een duidelijke naam geven en veilig bewaren;
  • beelden uploaden met een alt-tekst en plaatsen in Elementor;
  • je pagina vergelijken met je hifi en verschillen bijwerken.

Tijdsplanning

0-10 minKlassikale intro
10-20 minGlobals controleren
20-45 minBeelden exporteren en bewaren
45-60 minUploaden naar WordPress
60-85 minBeelden plaatsen
85-110 minDetails vergelijken
110-120 minAfronden en vooruitblik

Wat lever je op?

Controleer zelf:
  • Je M02-globals hebben de kleuren en lettertypes uit je styletile.
  • Alle beelden uit je hifi staan op je pagina; er zijn geen placeholders meer.
  • Elke afbeelding heeft een bestandsnaam die begint met m02 en een alt-tekst.
  • Alle beelden staan in je projectmap op OneDrive.
  • Je pagina lijkt qua kleuren, beeld en indeling op je hifi.
  • Je bericht is bijgewerkt (Update).

Les 8 – Afronden en inleveren

Dit is de laatste WEB-les van het project. Je controleert je pagina met de beoordelingscriteria, kijkt of je technische opbouw klopt en geeft elkaar feedback. Aan het eind staat je link klaar in Simulise. De deadline voor inleveren is week 8; op donderdag in week 8 presenteer je je eindproduct.

Stap 1 - Checklist met de criteria

Bekijk je pagina op de frontend (niet in de editor) en loop deze vijf criteria na:

  1. Je pagina heeft dezelfde onderdelen als je Figma-ontwerp: koppen, teksten, beelden en knoppen.
  2. Je pagina is gebouwd in WordPress.
  3. Je pagina lijkt qua kleuren, beeld en indeling op je Figma-ontwerp.
  4. Je pagina is te openen via een link die je inlevert in Simulise.
  5. Je bestanden, zoals afbeeldingen, hebben een duidelijke naam en zijn veilig bewaard.

Schrijf per criterium op wat nog niet klopt.

Stap 2 - Technische controle

Instellingen
  1. Elementor > Editor > Settings > Atomic Editor (Instellingen): staat uit.
  2. Settings > Permalinks (Instellingen > Permalinks): Post name (Berichtnaam).
  3. Je bericht staat in de categorie Uitwerkingen, is gepubliceerd (Published) en heeft Page Layout (pagina-indeling) Elementor Canvas.

Globals
  1. Klik in Elementor per sectie een paar elementen aan en zweef over het wereldbol-icoon bij kleur en typografie.
  2. Je ziet overal de naam van een M02-global. Zie je een hexcode, Primary, Secondary, Text, Accent of Default (Standaard)? Koppel het element aan een M02-global.

Navigator
  1. Elke container heeft een naam, gelijk aan de namen in Figma.
  2. Er staan geen lege of overbodige containers, zoals een extra container alleen om de inhoud smal te maken.

Stap 3 - Peer review

  1. Werk in duo's. Open de pagina van de ander en zet het Figma-ontwerp ernaast, allebei op 100%.
  2. Loop samen de vijf criteria na.
  3. Geef twee tops en twee tips, en schrijf ze op.
  4. Wissel van rol.

Stap 4 - Verbeteren

  1. Verwerk de tips die je hebt gekregen.
  2. Werk de punten uit je eigen checklist af.
  3. Klik na elke ronde op Update (Bijwerken) en controleer op de frontend.

Stap 5 - Link klaarzetten in Simulise

  1. Open je site in een incognitovenster.
  2. Klik op de knop op je homepage en controleer dat je uitwerking opent.
  3. Open je uitwerkingsbericht en kopieer de link uit de adresbalk.
  4. Zet de link in Simulise. Lever in uiterlijk in week 8.

Let op: geen preview-link (met ?preview=true) en geen editorlink (met wp-admin of elementor in de link).

Leerdoelen

Na deze les kun je:
  • je pagina beoordelen met de criteria;
  • je technische opbouw controleren: instellingen, globals en Navigator;
  • feedback geven en verwerken;
  • je link correct inleveren in Simulise.

Tijdsplanning

0-10 minKlassikale intro
10-25 minChecklist met de criteria
25-45 minTechnische controle
45-70 minPeer review
70-100 minVerbeteren
100-110 minLink klaarzetten in Simulise
110-120 minAfronden

Wat lever je op?

Controleer zelf:
  • Je pagina voldoet aan de vijf criteria.
  • De Atomic Editor staat uit en de permalinks staan op Post name (Berichtnaam).
  • Je bericht is gepubliceerd in de categorie Uitwerkingen, met Page Layout (pagina-indeling) Elementor Canvas.
  • Alle elementen gebruiken M02-globals; er zijn geen systeemkleuren of losse hexcodes.
  • Elke container in de Navigator heeft een naam.
  • Je hebt feedback gekregen en verwerkt.
  • De link naar je uitwerkingsbericht staat in Simulise en werkt uitgelogd. Uiterlijk ingeleverd in week 8.