Dit is een individuele opdracht waarin je in vijf lessen van 2 uur een eigen pagina bouwt in Elementor (gratis versie). Je kiest zelf een thema — bijvoorbeeld een portfolio, een landingspagina voor een webshop, of een bedrijfssite. Het onderwerp maakt niet uit: de vaardigheden staan centraal.
Elk onderdeel van de pagina kun je uitwerken op drie niveaus: Basis, Gevorderd en Professioneel. Je werkt in ieder geval het basisniveau van iedere les uit. Ben je daarmee klaar? Ga dan door naar Gevorderd (en eventueel Professioneel) van hetzelfde onderdeel.
Les 1 — Fundament & Hero
1. Paginaskelet
- Maak zes secties onder elkaar aan. Geef ze tijdelijk een lichte achtergrondkleur en een tekstlabel ter herkenning: Hero, Features, Statistieken, FAQ, Portfolio, Contact. (Deze vul je in latere lessen verder in.)
- Plaats bovenaan iedere sectie een Menu Anchor-widget met een unieke, logische ID — zonder spaties of hoofdletters (bijv. hero, features, faq, portfolio, contact).
2. Navigatiebalk
Let op: de Nav Menu-widget (het kant-en-klare WordPress-menu in Elementor) zit alléén in Elementor Pro. In de gratis versie bouw je de balk zelf met een rij Button- of Icon List-widgets.
- Maak een sectie bovenaan de pagina (boven de Hero) met een horizontale rij knoppen — één per sectie.
- Stel bij elke knop de link in op #<anchor-ID>, bijvoorbeeld #features of #contact — dit laat de pagina naar het juiste anchor-punt scrollen.
- Test elke knop: springt de pagina naar de juiste sectie?
Niveaus bij dit onderdeel
Wanneer je een element op een hoger niveau gaat uitwerken, kopieer dan het element, zodat je voor ieder niveau een versie hebt.
Basis
Alle knoppen linken naar het juiste anchor-punt; scrollen werkt.
Gevorderd
Duidelijke hover-status op de knoppen; balk blijft leesbaar en consistent op elk schermformaat.
- Hover-effecten instellen op knoppen/tekst — Elementor Hover Effect Tutorial (YouTube)
- Per apparaat (breakpoint) instellingen bijstellen — Elementor Breakpoints aanpassen (YouTube)
Professioneel
Eigen CSS (CSS-klasse + Customizer → Additional CSS) voor bijv. een hover-animatie, of een HTML-widget met een JS-snippet dat het actieve sectielabel laat oplichten tijdens het scrollen.
- Een CSS-klasse toevoegen en aanspreken — CSS-klassen gebruiken in Elementor (YouTube)
- Custom CSS toevoegen zonder Pro (via de Customizer) — Custom CSS in Elementor Free (YouTube)
- Eigen HTML/JS toevoegen via de HTML-widget — De HTML-widget gebruiken in Elementor (YouTube)
- Voorbeeldcode om het actieve menu-item te laten oplichten tijdens scrollen — Nav-item highlighten met vanilla JavaScript (YouTube)
3. Hero-sectie
- Vul de Hero-sectie met:
- een Heading-widget (paginatitel),
- een Text Editor-widget (korte subtekst),
- een Button-widget (call-to-action) en
- een achtergrond (kleur of afbeelding via de sectie-instellingen).
- Controleer in de responsive-preview (desktop/tablet/mobiel) of niets overlapt of afgesneden wordt.
Niveaus bij dit onderdeel
Wanneer je een element op een hoger niveau gaat uitwerken, kopieer dan het element, zodat je voor ieder niveau een versie hebt.
Basis
Titel, subtekst, knop en achtergrond correct en leesbaar geplaatst.
Gevorderd
Geneste kolommen of overlappende elementen; styling via Global Colors/Fonts; padding/tekstgrootte bewust bijgesteld per breakpoint.
- Kolommen/widgets laten overlappen (z-index en marges) — Overlappen in Elementor uitgelegd (YouTube)
- Werken met Global Colors en Global Fonts — Global Colors & Fonts in Elementor (YouTube)
- Per breakpoint padding/tekstgrootte bijstellen — Elementor Breakpoints aanpassen (YouTube)
Professioneel
CSS-klasse + Additional CSS voor een effect dat niet met Elementor’s standaardopties kan (bijv. een gradient-overlay of clip-path).
- Een CSS-klasse toevoegen en aanspreken — CSS-klassen gebruiken in Elementor (YouTube)
- Een gradient-overlay over een achtergrondafbeelding zetten — CSS Gradient Overlay toevoegen (YouTube)
- Een sectie een eigen vorm geven met clip-path — CSS clip-path in 5 minuten uitgelegd (YouTube)
Leerdoelen
- Je kunt een Elementor-pagina opbouwen uit losse secties.
- Je kunt Menu Anchor-widgets gebruiken om interne verwijzingen te maken.
- Je kunt een navigatiebalk bouwen met werkende interne links — zonder de Nav Menu-widget, die niet in de gratis versie zit.
- Je kunt een Hero-sectie bouwen en op Basisniveau correct instellen.
Tijdsindeling
- 0–10 min Opstart
Thema kiezen, nieuwe pagina aanmaken in WordPress/Elementor. - 10–40 min Paginaskelet
Zes lege secties aanmaken, elk met een Menu Anchor-widget. - 40–70 min Navigatiebalk
Balk met knoppen bouwen die naar elke sectie scrollen. - 70–110 min Hero-sectie
Hero op Basisniveau bouwen: titel, subtekst, knop, achtergrond. - 110–120 min Afronden
Testen op desktop én mobiel, opleveren.
Nakijkpunten
- Bestaan alle zes secties, elk met een correcte Menu Anchor-ID?
- Werkt elke link in de navigatiebalk en scrollt hij naar de juiste sectie?
- Is de Hero-sectie compleet (titel, subtekst, knop, achtergrond) en leesbaar op mobiel?
- Indien aanwezig: is de verdieping naar Gevorderd of Professioneel technisch correct, of enkel cosmetisch anders?
Wat lever je op?
- Eén Elementor-pagina met: werkend skelet van zes secties, een werkende navigatiebalk, en een volledig afgeronde Hero-sectie op minimaal Basisniveau.
- Optioneel: de Hero-sectie op Gevorderd of Professioneel niveau.
Les 2 — Features & Statistieken
1. Features/diensten
- Vul de sectie ‘Features’ met 3 of 4 Icon Box-widgets naast elkaar (kolommen).
- Geef elke kaart een icoon, titel en korte tekst.
- Zorg dat alle kaarten dezelfde opmaak hebben: icoon-grootte, kleur en uitlijning identiek.
Niveaus bij dit onderdeel
Wanneer je een element op een hoger niveau gaat uitwerken, kopieer dan het element, zodat je voor ieder niveau een versie hebt.
Basis
3–4 kaarten met Icon Box-widget: icoon, titel, korte tekst — alle kaarten identiek opgemaakt.
Gevorderd
Consistente styling via Global Colors/Fonts; aangepast hover-effect (kleur/transform) via Elementor’s hover-instellingen.
- Hover-effect toepassen op de Icon Box (zelfde techniek als les 1) — Elementor Hover Effect Tutorial (YouTube)
- Consistente styling via Global Colors/Fonts — Global Colors & Fonts in Elementor (YouTube)
Professioneel
CSS-klasse + Additional CSS voor een hover-effect buiten Elementor’s standaardopties (bijv. een lift-effect met schaduw).
- Een CSS-klasse toevoegen en aanspreken — CSS-klassen gebruiken in Elementor (YouTube)
- Een hover-lift-effect maken met CSS box-shadow — CSS Hover Lift-effect met Box Shadow (YouTube)
2. Statistieken
- Vul de sectie ‘Statistieken’ met 3 of 4 Counter-widgets naast elkaar.
- Stel per counter een getal, eventueel een voor- of achtervoegsel (bijv. ‘+’ of ‘%’), en een label in.
- Test: scroll de sectie in beeld en controleer of de telanimatie afspeelt.
Niveaus bij dit onderdeel
Wanneer je een element op een hoger niveau gaat uitwerken, kopieer dan het element, zodat je voor ieder niveau een versie hebt.
Basis
3–4 Counter-widgets naast elkaar met cijfer, label en werkende scroll-animatie.
Gevorderd
Animatieduur/timing bewust ingesteld; gecombineerd met iconen of een Progress Bar-widget; nette responsive layout.
- De Counter-widget goed instellen — Elementor Counter Widget Tutorial (YouTube)
- De Progress Bar-widget combineren met de counters — Elementor Progress Bar Tutorial (YouTube)
Professioneel
CSS-klasse + Additional CSS voor vormgeving buiten Elementor’s opties (bijv. een ronde voortgangsindicator).
- Een CSS-klasse toevoegen en aanspreken — CSS-klassen gebruiken in Elementor (YouTube)
- Een ronde voortgangsindicator maken met CSS/SVG — Pure CSS Circular Progress Bar (YouTube)
3. Verdiepen (indien tijd over)
- Kies een onderdeel — Navigatie, Hero, Features of Statistieken — om naar Gevorderd niveau te tillen. Dupliceer het onderdeel eerst.
- Gebruik de verdiepingsbronnen hierboven.
Leerdoelen
- Je kunt meerdere gelijkvormige kaarten bouwen met de Icon Box-widget.
- Je kunt de Counter-widget correct configureren (cijfer, voor-/achtervoegsel, label).
- Je begrijpt het verschil tussen losse en consistente (Global) styling.
Tijdsindeling
- 0–10 min Opstart
Korte herhaling niveau-opbouw en dupliceer-regel; vooruitblik op deze les. - 10–55 min Features/diensten
Sectie vullen met 3–4 Icon Box-kaarten op Basisniveau. - 55–90 min Statistieken
Sectie vullen met 3–4 Counter-widgets op Basisniveau. - 90–115 min Verdiepen
Kies zelf een onderdeel (uit les 1 of 2) om naar Gevorderd te tillen. - 115–120 min Afronden
Testen op desktop én mobiel, opleveren.
Nakijkpunten
- Bestaan er 3–4 Icon Box-kaarten met identieke opmaak (icoon, titel, tekst)?
- Werken alle Counter-widgets en tonen ze het juiste cijfer/label?
- Is er sprake van consistente styling (Global Colors/Fonts) of losse per-widget keuzes — en past dat bij het genoemde niveau?
- Indien verdiept: is dit technisch correct uitgevoerd, en staat de eerdere versie nog als losse kopie?
Wat lever je op?
- De Features- en Statistieken-sectie, beide minimaal op Basisniveau, in de bestaande pagina.
- Optioneel: één of meer onderdelen (uit les 1 of 2) op Gevorderd of Professioneel niveau.
Les 3 — FAQ & Portfolio
1. FAQ
- Vul de sectie ‘FAQ’ met een Accordion-widget en minstens 5 vraag-antwoord items.
- Geef elk item een duidelijke vraag als titel en een kort antwoord als inhoud.
- Test: klap items open en dicht, controleer de leesbaarheid.
Niveaus bij dit onderdeel
Wanneer je een element op een hoger niveau gaat uitwerken, kopieer dan het element, zodat je voor ieder niveau een versie hebt.
Basis
Accordion-widget met minstens 5 vraag-antwoord items; klapt functioneel correct open en dicht.
Gevorderd
Eén item standaard open; icoon wisselt bij openen/sluiten; duidelijk kleurverschil actief/inactief; styling via Global Colors/Fonts.
- De Accordion-widget volledig instellen (standaard open item, iconen) — Accordion-widget in Elementor (YouTube)
- Consistente styling via Global Colors/Fonts — Global Colors & Fonts in Elementor (YouTube)
Professioneel
CSS-klasse + Additional CSS voor een effect buiten Elementor’s opties (bijv. een vloeiendere open/dicht-transitie of een eigen icoon), of een HTML-widget met JS die bijv. bij laden automatisch een item opent.
- Een CSS-klasse toevoegen en aanspreken — CSS-klassen gebruiken in Elementor (YouTube)
- Een vloeiendere open/dicht-transitie maken met pure CSS — Pure CSS Accordion Transition Effect (YouTube)
2. Portfolio/Galerij
- Vul de sectie ‘Portfolio’ met een Image Gallery-widget.
- Upload minstens 6 afbeeldingen (comprimeer ze eerst indien nodig).
- Controleer dat de ingebouwde lightbox opent bij een klik op een afbeelding.
Niveaus bij dit onderdeel
Wanneer je een element op een hoger niveau gaat uitwerken, kopieer dan het element, zodat je voor ieder niveau een versie hebt.
Basis
Image Gallery-widget met minstens 6 afbeeldingen en werkende ingebouwde lightbox.
Gevorderd
Consistente, nette indeling (gelijke beeldverhoudingen/grid); lightbox-instellingen zelf aangepast (bijv. navigatiepijlen, bijschriften) via de widget-opties.
- De lightbox-instellingen van Elementor zelf aanpassen — Elementor Lightbox-functie gebruiken (YouTube)
Professioneel
CSS-klasse + Additional CSS voor een hover-overlay met titel/tekst op de afbeeldingen, of een HTML-widget met JS-filterknoppen per categorie.
- Een CSS-klasse toevoegen en aanspreken — CSS-klassen gebruiken in Elementor (YouTube)
- Een hover-overlay met tekst op afbeeldingen maken met CSS — CSS Image Overlay Hover Effect (YouTube)
- Filterknoppen per categorie toevoegen met JavaScript (via de HTML-widget) — JavaScript Filter Gallery Tutorial (YouTube)
3. Verdiepen (indien tijd over)
- Kies een onderdeel — uit les 1, 2 of 3 — om naar Gevorderd niveau te tillen. Dupliceer het onderdeel eerst.
- Gebruik de verdiepingsbronnen hierboven.
Leerdoelen
- Je kunt de Accordion-widget vullen met meerdere, functioneel correcte items.
- Je kunt de Image Gallery-widget vullen en de ingebouwde lightbox laten werken.
- Je kunt afbeeldingen voorbereiden (comprimeren, rechtenvrij) voordat je ze gebruikt.
Tijdsindeling
- 0–10 min Opstart
Korte herhaling niveau-opbouw en dupliceer-regel; vooruitblik op deze les. - 10–55 min FAQ
Sectie vullen met een Accordion-widget: minstens 5 vraag-antwoord items op Basisniveau. - 55–95 min Portfolio/Gallerij
Sectie vullen met een Image Gallery-widget en werkende lightbox op Basisniveau. - 95–115 min Verdiepen
Kies zelf een onderdeel (uit les 1,2 of 3) om naar Gevorderd te tillen. - 115–120 min Afronden
Testen op desktop én mobiel, opleveren.
Nakijkpunten
- Bestaan er minstens 5 werkende FAQ-items met heldere vraag/antwoord?
- Bevat de galerij minstens 6 afbeeldingen en werkt de lightbox?
- Zijn de afbeeldingen redelijk qua bestandsgrootte (geen dubbel zo grote bestanden dan nodig)?
- Indien verdiept: is dit technisch correct uitgevoerd, en staat de eerdere versie nog als losse kopie?
Wat lever je op?
- De FAQ- en Portfolio-sectie, beide minimaal op Basisniveau, in de bestaande pagina.
- Optioneel: één of meer onderdelen (uit les 1, 2 of 3) op Gevorderd of Professioneel niveau.
Les 4 — Contactformulier
1. Contactformulier
- Plugin installeren
- Installeer en activeer WPForms Lite of Contact Form 7 via Plugins → Nieuwe plugin toevoegen.
- Formulier bouwen
- Bouw een formulier met minimaal: naam, e-mail en bericht.
- Stel verplichte velden en validatie in (bijv. een geldig e-mailadres).
- Stel een bevestigingsbericht in dat verschijnt na het verzenden.
- Plaatsen & testen
- Kopieer de shortcode van je formulier en plaats die in de sectie ‘Contact’ via de Shortcode-widget.
- Verstuur een test-inzending en controleer die in het inzendingenoverzicht van de plugin.
Niveaus bij dit onderdeel
Wanneer je een element op een hoger niveau gaat uitwerken, kopieer dan het element, zodat je voor ieder niveau een versie hebt.
Basis
Werkend formulier (naam, e-mail, bericht) met verplichte velden en validatie, geplaatst via de Shortcode-widget, met bevestiging na verzenden.
Gevorderd
Eigen indeling/kolommen (bijv. voornaam en achternaam naast elkaar); zoveel mogelijk eigen vormgeving via de stijlopties van Elementor en de plugin zelf.
- Een formulier in meerdere kolommen indelen — Multi-Column Form Layouts in WPForms (YouTube)
Professioneel
CSS-klasse + Additional CSS voor volledige custom styling van velden, knoppen en focus-states — verder dan wat de plugin of Elementor standaard bieden.
- Een CSS-klasse toevoegen en aanspreken — CSS-klassen gebruiken in Elementor (YouTube)
- Velden, knoppen en focus-states volledig zelf stylen met CSS — CSS Form Styling van saai naar strak (YouTube)
2. Verdiepen (indien tijd over)
- Geef het formulier een eigen indeling (bijv. twee velden naast elkaar) of ga verder met een onderdeel uit een vorige les. Dupliceer eerst.
- Gebruik de verdiepingsbronnen hierboven.
Leerdoelen
- Je kunt een gratis formulier-plugin installeren en een formulier bouwen met verplichte velden en validatie.
- Je kunt een formulier via de Shortcode-widget op een Elementor-pagina plaatsen.
- Je kunt controleren of een inzending is aangekomen, ook zonder e-mailbevestiging.
Tijdsindeling
- 0–15 min Opstart
Korte herhaling; formulier-plugin installeren en activeren. - 15–60 min Formulier bouwen
Velden configureren (naam, e-mail, bericht), verplicht/validatie instellen — Basisniveau. - 60–85 min Plaatsen en testen
Formulier via de Shortcode-widget op de pagina zetten en een test-inzending controleren. - 85–110 min Verdiepen
Indien tijd over: eigen indeling/kolommen (Gevorderd), of een onderdeel uit een vorige les. - 110–120 min Afronden
Testen op desktop én mobiel, opleveren.
Nakijkpunten
- Is de plugin correct geïnstalleerd en het formulier zichtbaar op de pagina?
- Werken de verplichte velden en de validatie (probeer het formulier leeg te versturen)?
- Komt een test-inzending aan in het overzicht van de plugin?
- Verschijnt er een bevestigingsbericht na het verzenden?
- Indien verdiept: is dit technisch correct uitgevoerd, en staat de eerdere versie nog als losse kopie?
Wat lever je op?
- Een werkend contactformulier in de sectie ‘Contact’, minimaal op Basisniveau.
- Optioneel: Gevorderd of Professioneel niveau, of extra verdieping op een onderdeel uit een vorige les.
Les 5 — Verdiepen & Afronden
1. Stappenplan
- Statusopname
- Loop de overzichtstabel hieronder langs: welke onderdelen staan nog niet op Basisniveau? Rond die als eerste af.
- Verdiepen
- Kies 1–2 onderdelen om naar Gevorderd of Professioneel te tillen. Dupliceer eerst.
- Gebruik de verdiepingsbronnen uit lessen 1 t/m 4 voor het gekozen onderdeel.
- Eindcontrole
- Doorloop de hele pagina: werken alle navigatie-links, is alles leesbaar op mobiel/tablet/desktop?
- Controleer of er nog placeholder-tekst of -labels uit het paginaskelet (les 1) over zijn.
- Opleveren
- Lever de pagina op zoals afgesproken (zie ‘Wat lever je op’).
Niveaus bij alle onderdelen
Wanneer je een element op een hoger niveau gaat uitwerken, kopieer dan het element, zodat je voor ieder niveau een versie hebt.
Gebruik de verdiepingsbronnen (video’s) in het lesdocument van het onderdeel dat je kiest — Navigatie/Hero staan in les 1, Features/Statistieken in les 2, FAQ/Portfolio in les 3, en Contactformulier in les 4.
Basis
Navigatie
Alle knoppen linken naar het juiste anchor-punt; scrollen werkt.
Hero
Titel, subtekst, knop en achtergrond correct en leesbaar geplaatst.
Features
3–4 Icon Box-kaarten: icoon, titel, korte tekst — identiek opgemaakt.
Statistieken
3–4 Counter-widgets met cijfer, label en werkende scroll-animatie.
FAQ
Accordion-widget met minstens 5 items; klapt functioneel correct open/dicht.
Portfolio/Galerij
Image Gallery-widget met minstens 6 afbeeldingen en werkende lightbox.
Contactformulier
Werkend formulier (naam, e-mail, bericht) met verplichte velden en bevestiging na verzenden.
Gevorderd
Navigatie
Duidelijke hover-status op de knoppen; balk blijft leesbaar en consistent op elk schermformaat.
Hero
Geneste kolommen of overlappende elementen; styling via Global Colors/Fonts; padding/tekstgrootte bijgesteld per breakpoint.
Features
Consistente styling via Global Colors/Fonts; aangepast hover-effect via Elementor’s hover-instellingen.
Statistieken
Animatieduur/timing bewust ingesteld; gecombineerd met iconen of Progress Bar; nette responsive layout.
FAQ
Eén item standaard open; icoon wisselt; duidelijk kleurverschil actief/inactief; styling via Global Colors/Fonts.
Portfolio/Galerij
Consistente indeling (gelijke beeldverhoudingen); lightbox-instellingen zelf aangepast via de widget-opties.
Contactformulier
Eigen indeling/kolommen; zoveel mogelijk eigen.
Professioneel
Navigatie
Eigen CSS voor bijv. een hover-animatie, of een HTML-widget met JS dat het actieve sectielabel laat oplichten tijdens het scrollen.
Hero
CSS-klasse + Additional CSS voor een effect buiten Elementor’s opties (bijv. gradient-overlay of clip-path).
Features
CSS-klasse + Additional CSS voor een hover-effect buiten Elementor’s opties (bijv. een lift-effect met schaduw).
Statistieken
CSS-klasse + Additional CSS voor vormgeving buiten Elementor’s opties (bijv. een ronde voortgangsindicator).
FAQ
CSS-klasse + Additional CSS voor een vloeiendere transitie of eigen icoon, of JS dat bij laden een item opent.
Portfolio/Galerij
CSS-klasse + Additional CSS voor een hover-overlay met tekst, of JS-filterknoppen per categorie.
Contactformulier
CSS-klasse + Additional CSS voor volledige custom styling.
Leerdoelen
- Je kunt gericht prioriteren welk onderdeel je verder verdiept.
- Je kunt je eigen pagina kritisch controleren op functionaliteit, samenhang en leesbaarheid.
- Je rondt de opdracht af tot een compleet, werkend geheel.
Tijdsindeling
- 0–15 min Statusopname
Check welke van de 7 onderdelen nog niet op Basisniveau staan; maak een kort persoonlijk plan voor deze les. - 15–100 min Verdiepen (of afronden)
Ontbrekende Basisniveaus eerst afronden; daarna 1–2 onderdelen naar keuze naar Gevorderd of Professioneel. - 100–115 min Eindcontrole
Hele pagina doorlopen: werken alle links, is alles leesbaar op mobiel, staat er geen placeholder-tekst meer? - 115–120 min Opleveren
Pagina definitief opleveren
Nakijkpunten
- Staan alle 7 onderdelen minimaal op Basisniveau?
- Zijn eerdere niveaus als losse kopie bewaard bij onderdelen die verdiept zijn?
- Werkt de pagina als geheel: geen kapotte links, laadt soepel, mobielvriendelijk?
Wat lever je op?
- Eén complete Elementor-pagina met alle 7 onderdelen, elk minimaal op Basisniveau.
- Per onderdeel het door jou bereikte niveau, zichtbaar doordat eerdere versies als kopie bewaard zijn.