Pagina’s vormgeven

Hoofdstuk 5 van 13

Je kent de editor, je huisstijl staat klaar en header en footer zijn in orde. Nu komt het leukste werk: mooie pagina’s bouwen. In dit hoofdstuk bouw je stap voor stap een volledige homepage op, precies zoals die van Bakkerij De Korenaar: een grote openingsfoto met titel en knoppen, een blok tekst met foto, drie kaarten met specialiteiten, getuigenissen en een opvallende band met een oproep tot actie.

Daarnaast leer je de belangrijkste ontwerpprincipes, hoe je een stuk pagina opslaat als sjabloon en hergebruikt, wat je wel en niet uit de Elementor-bibliotheek haalt, hoe je een popup maakt, hoe je met mate animaties gebruikt en hoe je alles op de gsm controleert.

De volledige oefenhomepage: header, openingsfoto met titel en twee knoppen, een blok met foto en tekst, drie kaarten met specialiteiten, twee getuigenissen, een gouden band met bestelknop en de footer — Dit bouwen we in dit hoofdstuk: de “Oefenhomepage”, een kopie van de homepage van De Korenaar.

1. Ontwerpprincipes: wat maakt een pagina mooi?

Een mooie website heeft weinig met toeval te maken. Professionele ontwerpers houden zich aan een handvol eenvoudige regels. Bekijk de homepage van De Korenaar hierboven en zoek telkens het voorbeeld.

Witruimte. Laat je inhoud ademen. Ruime padding boven en onder elke sectie (60 à 80 pixels op een computer) en ruimte tussen de elementen maken een pagina rustig en luxueus. Een volgepropte pagina oogt goedkoop en is moeilijk te lezen.
Hiërarchie. De bezoeker moet in één oogopslag zien wat het belangrijkst is. Eén grote titel (H1) per pagina, kleinere titels (H2) per sectie, gewone tekst daaronder. Grootte, dikte en kleur sturen het oog.
Contrast. Tekst moet leesbaar zijn: donker op licht of licht op donker. Witte tekst op een foto lukt enkel met een donkere laag (overlay) over die foto. Lichtgrijze tekst op wit is een klassieke fout.
Consistentie. Overal dezelfde kleuren, lettertypes, knoppen en afstanden. Daarom gebruik je de globale kleuren en lettertypes uit hoofdstuk 3, en daarom hergebruik je secties als sjabloon.
Maximaal twee lettertypes. Eén voor titels (bij De Korenaar: Playfair Display), één voor tekst (Inter). Meer lettertypes maken een pagina onrustig en trager.
Goede foto’s. Scherp, licht, echt en in dezelfde sfeer. Liever je eigen foto’s dan generieke stockfoto’s. Gebruik bij voorkeur foto’s met dezelfde verhouding (bv. allemaal liggend 4:3) in eenzelfde rij.
Een duidelijke call-to-action. Wat moet de bezoeker doen? Bestellen, bellen, langskomen, inschrijven? Zet die vraag op een opvallende knop, bovenaan én onderaan de pagina.

Waarom die volgorde: hero, uitleg, aanbod, bewijs, actie? Zo leest een bezoeker. Bovenaan (de “hero”) zie je in drie seconden wie je bent en wat je doet. Daarna wil je weten waarom jij (verhaal), wat je aanbiedt (kaarten), of anderen tevreden zijn (getuigenissen) en tot slot wat je moet doen (call-to-action). Die opbouw werkt voor een bakkerij, maar evengoed voor een fotograaf, een jeugdbeweging of een portfolio.

2. Een nieuwe pagina klaarzetten

We bouwen niet op de echte homepage, maar op een nieuwe conceptpagina. Zo kun je alles uitproberen zonder dat bezoekers iets zien.

Ga naar Pagina’s → Pagina toevoegen.
Typ de titel Oefenhomepage (1).
Klik op Bewerk met Elementor (2). WordPress bewaart de pagina dan automatisch als concept. (Je kunt ook eerst op Concept opslaan (3) klikken.)

Het scherm Pagina toevoegen met de titel Oefenhomepage en de knoppen Bewerk met Elementor en Concept opslaan aangeduid — Een nieuwe pagina, nog in de klassieke editor. Pagina’s bouw je met Elementor.

In de editor zie je bovenaan de paginatitel “Oefenhomepage” staan. Op een homepage wil je die niet: de grote openingsfoto is je titel. Klik in de bovenbalk op Pagina instellingen (1). Bij Algemene instellingen zie je de Titel (2) en onderaan Pagina lay-out (3). Kies daar Elementor volledige breedte.

Pagina instellingen met de Titel Oefenhomepage, Status Concept en Pagina lay-out Elementor volledige breedte — Pagina lay-out: Elementor volledige breedte.

Welke pagina lay-out kies ik?

Standaard: de lay-out van het thema, met de paginatitel bovenaan. Handig voor eenvoudige tekstpagina’s zoals je privacyverklaring.

Elementor volledige breedte: header en footer blijven, maar de paginatitel verdwijnt en je inhoud mag over de volledige breedte. Dit is de beste keuze voor pagina’s die je volledig met Elementor ontwerpt.

Elementor canvas: een helemaal leeg blad, zonder header en footer. Enkel voor speciale landingspagina’s.

3. De hero: grote foto, titel en knoppen

De hero is het grote openingsblok bovenaan. Hij moet in één oogopslag zeggen wie je bent, en de bezoeker meteen een volgende stap aanbieden.

3.1 Een container over de volledige breedte

Klik in het canvas op het plusje, kies Flexbox en kies de eerste structuur, met het pijltje naar beneden (1): één container waarin alles onder elkaar komt.
In Container bewerken → Lay-out zet je Inhoud breedte (1) op Volledige breedte: de foto loopt dan van rand tot rand.
Zet Min. hoogte (2) op 80 en kies als eenheid vh (klik op “px” om te wisselen). 80 vh is 80 % van de schermhoogte: de hero vult bijna het hele scherm, op elk toestel.
Kies bij Inhoud uitlijnen (3) en Items uitlijnen (4) telkens het middelste icoontje: de inhoud staat dan in het midden, horizontaal én verticaal.

Het venster Selecteer je structuur; het eerste blokje met de pijl naar beneden is aangeduid — Eén container, richting kolom.

De lay-outinstellingen van de container: Inhoud breedte Volledige breedte, Min. hoogte 80 vh, Inhoud uitlijnen en Items uitlijnen gecentreerd — Volledige breedte en 80 vh hoog.

3.2 Een achtergrondfoto

Ga naar het tabblad Stijl en open Achtergrond:

Kies bij Achtergrond type (1) het penseeltje (klassiek).
Klik bij Afbeelding (2) op het vak en kies een foto uit je mediabibliotheek. Kies een rustige, liggende foto van minstens 1920 pixels breed.
Zet Positie (3) op Midden gecentreerd.
Zet Weergavegrootte (4) op Bedekken: de foto vult dan altijd het hele vak, zonder lege randen.

De sectie Achtergrond met Achtergrond type klassiek, een foto van brood, Positie Midden gecentreerd en Weergavegrootte Bedekken; in het canvas vult de foto de hele hero — De achtergrondfoto vult de hero.

3.3 Een donkere laag (overlay) voor leesbaarheid

Witte tekst op een lichte foto is slecht leesbaar. Daarom leg je er een halfdoorzichtige, donkere laag over. Open Overlay achtergrond (1), kies het penseeltje, kies bij Kleur (2) een heel donkerbruin en zet Doorzichtigheid (3) op ongeveer 0,5 à 0,6.

De sectie Overlay achtergrond met een donkerbruine kleur en Doorzichtigheid 0,55; de foto in het canvas is zichtbaar donkerder — De foto wordt donkerder, zodat witte tekst er goed op leesbaar is.

Neem voor de overlay geen zuiver zwart maar een heel donkere versie van een huisstijlkleur (hier donkerbruin). Het resultaat oogt warmer en past beter bij de rest van de site.

3.4 De titel

Sleep een Koptekst in de hero. Typ bij Titel (1) een korte, krachtige zin: Elke dag vers gebakken.
Zet HTML tag (2) op H1. De hero-titel is de hoofdtitel van de pagina; elke pagina heeft precies één H1.
Op het tabblad Stijl: Uitlijning (1) gecentreerd, Tekstkleur (2) wit, en bij Typografie (3) klik je op het potloodje.
Zet in het typografievenster de Grootte (4) op 64 px. Het lettertype zelf (Playfair Display) komt uit je globale stijl voor H1; dat hoef je niet opnieuw te kiezen.

De Koptekst-widget met de titel Elke dag vers gebakken en HTML tag H1 — De hoofdtitel van de pagina.

Het tabblad Stijl van de Koptekst met Uitlijning gecentreerd, Typografie en Tekstkleur wit aangeduid — Gecentreerd en wit.

Het typografievenster van de Koptekst met Grootte 64 px — Een grote, opvallende titel: 64 pixels.

3.5 Een korte inleiding

Sleep een Teksteditor onder de titel. Typ in het tekstvak (1) één of twee zinnen die uitleggen wat je doet. Centreer de tekst met de knop in de werkbalk van de teksteditor, en kies op het tabblad Stijl een lichte tekstkleur (crème) en een iets grotere letter (20 px).

De Teksteditor met de zin Ambachtelijk brood, krokante croissants en taart voor elk feest; in het canvas staat de zin onder de titel — Kort en concreet: wat bied je aan, en waar?

3.6 Twee knoppen naast elkaar

Knoppen in een container met richting kolom komen onder elkaar. Om ze naast elkaar te zetten, maak je een container in de container:

Sleep een Container (categorie Lay-out) onder de tekst in de hero.
Zet bij die binnenste container de Richting (1) op het pijltje naar rechts (rij), Inhoud uitlijnen (2) gecentreerd, Ruimtes (3) op 16 px en Terugloop (4) op het tweede icoontje (wrap). Met wrap springt de tweede knop op een smal scherm netjes naar de volgende lijn.
Sleep er twee Knoppen in: Bekijk ons brood (link naar je aanbod) en Bestel voor morgen (link naar contact).

De instellingen van de binnenste container: Richting rij, Inhoud uitlijnen gecentreerd, Ruimtes 16 en Terugloop wrap; in het canvas staan twee knoppen naast elkaar — Een container als rij voor de twee knoppen.

Twee identieke knoppen naast elkaar zeggen niet welke de belangrijkste is. Geef de tweede knop daarom een andere stijl: op het tabblad Stijl zet je de Tekstkleur (1) op bruin en de achtergrond Kleur (2) op wit.

Het tabblad Stijl van de tweede knop met een bruine tekstkleur en een witte achtergrondkleur; in het canvas een rode en een witte knop — Eén hoofdknop (rood) en één tweede keuze (wit).

Maak niet meer dan twee knoppen in een hero. Te veel keuze is geen keuze: de bezoeker klikt dan nergens op.

4. Een sectie met tekst en foto in twee kolommen

Klik onder de hero op het plusje, kies Flexbox en kies de structuur met twee gelijke kolommen (1).
Elementor maakt een container met daarin twee containers van 50 %. Geef de buitenste container een ruime padding (80 px boven en onder), Ruimtes 60 px en Items uitlijnen gecentreerd (zodat de tekst verticaal in het midden naast de foto staat).
Sleep een Afbeelding in de linkerkolom. Kies bij Afbeelding kiezen (1) een foto en bij Afbeelding resolutie (2) Large: groot genoeg om scherp te zijn, niet onnodig zwaar.
Geef de foto op het tabblad Stijl een Rand radius van 16 px (1) voor zachte, afgeronde hoeken.
Zet in de rechterkolom een Koptekst (H2, “Ambacht sinds 1987”), een Teksteditor met een korte alinea en een Knop (“Leer ons kennen”).

Het venster Selecteer je structuur; de structuur met twee gelijke kolommen is aangeduid — Twee kolommen naast elkaar.

De Afbeelding-widget met een foto van de toonbank en Afbeelding resolutie Large; rechts in het canvas de titel Ambacht sinds 1987, tekst en een knop — Links de foto, rechts de tekst.

Het tabblad Stijl van de afbeelding met Rand radius 16 in alle hoeken — Afgeronde hoeken, net als bij de knoppen: consistentie.

Op een gsm passen twee kolommen niet naast elkaar. Zet bij de buitenste container in de gsm-weergave de Richting op kolom (zie stap 8). Geef de twee kolommen op gsm een breedte van 100 %.

5. Drie kaarten met de widget Afbeelding vak

Om je aanbod te tonen zijn kaarten ideaal: foto, titel, korte tekst. De widget Afbeelding vak (categorie Algemeen) doet precies dat in één widget.

Maak een nieuwe container (boxed, richting kolom) met de globale achtergrondkleur Crème en 80 px padding. Een andere achtergrond zorgt voor afwisseling tussen de secties.
Zet er een Koptekst in (H2, gecentreerd): Onze specialiteiten.
Zet daaronder een container als rij (Ruimtes 30 px; op gsm richting kolom).
Sleep in die rij een Afbeelding vak. Kies de afbeelding (1), typ de Titel (2) en de Beschrijving (3), en vul eventueel een Link (4) in: dan wordt de hele kaart klikbaar.
Op het tabblad Stijl, onder Vak: Afbeelding positie (1) boven, Uitlijning (2) links, Afstand afbeelding (3) 16 px. Onder Afbeelding zet je de breedte op 100 % en een rand radius van 12 px.
Klaar met de eerste kaart? Klik met de rechtermuisknop op de widget en kies Dupliceren. Pas in de kopie enkel foto, titel en tekst aan. Zo blijven de drie kaarten gegarandeerd gelijk van stijl.

Afbeelding vak op het tabblad Inhoud met de velden Afbeelding kiezen, Titel Desembrood, Beschrijving en Link aangeduid — Afbeelding vak, tabblad Inhoud.

Afbeelding vak op het tabblad Stijl met Afbeelding positie, Uitlijning en Afstand afbeelding; in het canvas drie kaarten met foto, titel en tekst — Afbeelding vak, tabblad Stijl. Merk op dat de foto’s niet even hoog zijn.

Even brede kaarten. Worden je kaarten ongelijk breed? Geef elke kaart dan bij Geavanceerd → Lay-out → Breedte de waarde Aangepast en 33 % (op gsm 100 %).

Even hoge foto’s. Op de schermafbeelding is de foto van het desembrood vierkant, die van de croissants en de taart staand. Daardoor springen de titels op en neer. De eenvoudigste oplossing: snij je foto’s vooraf bij tot dezelfde verhouding (bv. 4:3) voor je ze uploadt.

6. Getuigenissen

Wat anderen over je zeggen, overtuigt meer dan wat je zelf zegt. Maak een container als rij (twee kolommen, op gsm onder elkaar) en zet er twee widgets Getuigenis in.

Typ bij Inhoud (1) het citaat. Kort en concreet werkt het best.
Bij Afbeelding kiezen (2) kun je een foto van de persoon zetten. Gebruik enkel foto’s waarvoor je toestemming hebt; anders laat je het leeg.
Vul de Naam (3) en de Titel (4) in, bijvoorbeeld “vaste klant”.

De widget Getuigenis met het citaat, een leeg afbeeldingsvak, de naam Sofie en de titel vaste klant; in het canvas twee getuigenissen naast elkaar — Twee getuigenissen naast elkaar.

Verzin geen getuigenissen voor een echte website. Vraag ze aan echte klanten, en vraag of je hun voornaam mag gebruiken. Op een oefensite mag je natuurlijk fantaseren.

7. De call-to-action-band

Wie onderaan de pagina komt, is geïnteresseerd. Geef hem dan meteen de kans om iets te doen. Maak een container (boxed, richting kolom, items gecentreerd, 60 px padding) met op het tabblad Stijl → Achtergrond het penseeltje (1) en de globale kleur Secundair (2). Zet er een witte Koptekst (H2) en een Knop in.

De achtergrondinstellingen van de container met een goudkleurige globale kleur; in het canvas de gouden band Vandaag bestellen, morgen afhalen met een rode knop — Een opvallende band met één duidelijke vraag en één knop.

Klik op het pijltje naast Publiceren en kies Concept opslaan, of druk op Ctrl+S (Cmd+S op een Mac). Bekijk het resultaat via het oogje (Voorbeeld) in de bovenbalk: je ziet de volledige pagina zoals bovenaan dit hoofdstuk.

8. De pagina op gsm controleren

Meer dan de helft van je bezoekers komt via een gsm. Controleer daarom elke pagina in de gsm-weergave voor je publiceert.

Klik in de bovenbalk op het gsm-icoontje (1). Het canvas wordt zo smal als een gsm.
Loop de pagina van boven naar onder door. Te grote titels? Selecteer de koptekst, ga naar Stijl → Typografie en vul bij Grootte (2) een kleinere waarde in (bv. 40 px). Let op het kleine gsm-icoontje naast “Grootte”: de waarde geldt enkel voor gsm. Op de computer blijft de titel 64 px.
Staan kolommen nog naast elkaar en worden ze piepklein? Selecteer de container en zet in de gsm-weergave de Richting (1) op het pijltje naar beneden.

De editor in gsm-weergave met het typografievenster open; Grootte staat op 40 px en het gsm-icoontje in de bovenbalk is aangeduid — Een kleinere titel enkel voor gsm.

De editor in gsm-weergave met de container geselecteerd en Richting naar beneden; de foto en de tekst staan onder elkaar — Op gsm: kolommen onder elkaar.

De oefenhomepage op een gsm: hero met titel en twee knoppen onder elkaar, foto en tekst onder elkaar, de kaarten één per rij — Het resultaat op gsm: alles netjes onder elkaar, niets valt buiten het scherm.

Wat je in de editor ziet, is een benadering. Controleer je site ook op je eigen gsm: open hem in de browser, scrol de hele pagina af en tik op alle knoppen.

Iets enkel op computer of enkel op gsm tonen? Gebruik Geavanceerd → Responsive → Verbergen op …, zoals bij de knop in de header (hoofdstuk 4).

9. Animaties: met mate

Elementor kan elementen laten invliegen, vervagen of inzoomen als ze in beeld komen. Eén subtiel effect kan je pagina levendiger maken; tien verschillende effecten maken ze onrustig en traag.

Selecteer bijvoorbeeld de titel in de hero en ga naar Geavanceerd.
Open Bewegingseffecten (1).
Kies bij Inkomende animatie (2) een rustig effect zoals Fade In Up (vervagend omhoog schuiven).
Laat Duur animatie (3) op Normaal. Met Vertraging animatie (4) laat je bijvoorbeeld de knoppen iets later verschijnen dan de titel.

Het tabblad Geavanceerd van de titel met Bewegingseffecten open en Inkomende animatie Fade In Up — Een inkomende animatie voor de titel.

Gebruik overal hetzelfde soort animatie, en enkel voor een paar belangrijke elementen. Animeer geen lopende tekst: dat leest vervelend. De opties Scrolling Effects en Mouse Effects zijn leuk om te ontdekken, maar maken een site al snel druk.

10. Een sectie opslaan als sjabloon en hergebruiken

De gouden bestelband wil je misschien op meerdere pagina’s. In plaats van hem telkens opnieuw te bouwen, sla je hem één keer op als sjabloon.

Klik met de rechtermuisknop op de container van de band (bijvoorbeeld op een lege plek naast de knop).
Kies in het menu Save as a template (1).
Typ een duidelijke naam (1), bijvoorbeeld Bestelband – call-to-action. Laat Site Templates (2) aangevinkt en klik op Opslaan (3). (Cloud Templates heb je niet nodig.)

Het rechtermuisknopmenu van een container met de optie Save as a template aangeduid — Rechtermuisknop → Save as a template.

Het venster Save this Container to your library met de naam Bestelband – call-to-action, Site Templates aangevinkt en de knop Opslaan — Geef het sjabloon een naam die je later terugvindt.

Elementor toont meteen je lijst met sjablonen (tabblad Templates). Je nieuwe sjabloon staat ertussen (1). Op een andere pagina klik je op het mapje in het canvas, ga je naar Templates en klik je bij je sjabloon op Invoegen (2).

Het tabblad Templates van de bibliotheek met onder meer Bestelband – call-to-action van het type Container en de knop Invoegen — Je eigen sjablonen, klaar om in te voegen.

Onderaan een pagina in de editor: naast het plusje staat het mapje om de bibliotheek te openen — Het mapje opent de bibliotheek.

Een kopie, geen koppeling. Een ingevoegd sjabloon is een kopie. Pas je later het sjabloon aan, dan veranderen de pagina’s waar je het al invoegde niet mee. Wil je één blok dat overal tegelijk verandert (zoals je header), dan gebruik je de Theme Builder (hoofdstuk 4).

Je kunt ook kleinere stukken hergebruiken: met de rechtermuisknop Kopieer en op een andere pagina Plakken, of Plak stijl om enkel de opmaak over te nemen.

11. De Elementor-bibliotheek: blokken, pagina’s en websitesjablonen

Achter het mapje zit ook de online bibliotheek van Elementor, met honderden kant-en-klare ontwerpen.

Blokken (1): losse secties, zoals een hero, een prijslijst of een contactblok. Met het keuzemenu Categorie (2) filter je op soort.
Pagina’s (1): volledige pagina-ontwerpen. Ga met je muis over een ontwerp en klik op Invoegen (2) om het in je pagina te zetten.
Templates: je eigen opgeslagen sjablonen (zie hierboven).

Het tabblad Blokken van de bibliotheek met voorbeeldblokken en het keuzemenu Categorie — Blokken: losse secties.

Het tabblad Pagina's van de bibliotheek met volledige paginaontwerpen — Pagina’s: volledige ontwerpen.

Een paginaontwerp in de bibliotheek met de knop Invoegen eronder — Invoegen met één klik.

Via Templates → Website Templates (in de grijze zijbalk van de Elementor-schermen) vind je zelfs complete websitesjablonen (vroeger “Kits” genoemd): een volledige website met pagina’s, header, footer en huisstijl in één pakket.

Het scherm Website Templates met volledige websiteontwerpen zoals Startup & Investment One Page, Health and Fitness eBook en Personal Chef — Websitesjablonen: een volledige site in één keer.

Wees voorzichtig met kant-en-klare ontwerpen, en vooral met websitesjablonen.

Ze brengen hun eigen kleuren, lettertypes en afstanden mee. Die staan vaak als losse waarden in de widgets, niet als jouw globale kleuren. Je huisstijl raakt dan versnipperd.

Ze brengen veel extra afbeeldingen mee naar je mediabibliotheek (vaak tientallen), plus pagina’s, menu’s en soms instellingen die de jouwe overschrijven. Een websitesjabloon kan je bestaande huisstijl en sjablonen vervangen.

Ze zijn vaak Engelstalig en de teksten zijn nep. Alles moet je toch herschrijven.

Ons advies: haal hoogstens eens een blok binnen om te zien hoe het gebouwd is, en pas het meteen aan naar je eigen globale kleuren en lettertypes. Installeer geen websitesjabloon op een site waaraan je al gewerkt hebt; maak eerst een back-up (zie het hoofdstuk over UpdraftPlus).

12. Een Over ons- en een Contactpagina

Met de bouwstenen van de homepage maak je ook de andere pagina’s. Kijk naar de pagina’s Over ons en Contact van De Korenaar: ze beginnen allebei met dezelfde, iets lagere banner (container met achtergrondfoto en overlay, 40 vh hoog, titel en een korte zin). Dat zorgt voor herkenning: sla zo’n banner op als sjabloon en hergebruik hem.

Over ons vertelt je verhaal:

een sectie in twee kolommen met een titel “Ons verhaal”, een paar alinea’s en een sfeerfoto;
een crèmekleurige band met Tellers (widget Teller): een jaartal, een aantal producten, een aantal klanten. Cijfers maken je verhaal concreet;
eventueel foto’s van het team (met toestemming!) en een call-to-action onderaan.

De pagina Over ons van De Korenaar: een banner met foto, een sectie Ons verhaal met tekst en een foto van de winkel, een band met de tellers 1987, 35 en 1,200+, en de footer — De pagina Over ons van De Korenaar.

Contact maakt het de bezoeker zo makkelijk mogelijk:

links een formulier (op de voorbeeldsite het Elementor Pro-formulier; in een apart hoofdstuk leer je formulieren maken met Gravity Forms);
rechts in een crèmekleurig vak met afgeronde hoeken de praktische info: adres, telefoon en openingsuren in een Icoon lijst, en een Google Maps-kaart;
telefoonnummer en e-mailadres klikbaar maken (tel: en mailto:).

De pagina Contact van De Korenaar: een banner, links een formulier met naam, e-mail, telefoon, onderwerp, bericht en privacyvinkje, rechts adres, telefoon, openingsuren en een kaart — De contactpagina. De kaart verschijnt pas als de bezoeker de marketingcookies aanvaardt: dat regelt Complianz.

Twijfel je hoe je een pagina opbouwt? Schrijf eerst op papier de vragen die een bezoeker heeft (“Wanneer zijn jullie open?”, “Hoe bestel ik een taart?”) en maak per vraag een sectie. Zo bouw je vanuit de bezoeker, niet vanuit de widgets.

Een popup is een venstertje dat over je pagina verschijnt: een nieuwtje, een kortingscode, een inschrijving voor de nieuwsbrief. Met mate gebruikt kan dat nuttig zijn; te veel popups ergeren je bezoekers. We maken een popup die op de homepage aankondigt: Nieuw: croissants op zondag.

13.1 De popup aanmaken

Ga in de grijze zijbalk naar Templates → Popups (1) en klik op Nieuwe Popup toevoegen (2).
Het type staat al op Popup (1). Typ een naam (2), Nieuw: croissants op zondag, en klik op Template aanmaken (3).
De bibliotheek opent met kant-en-klare popups (tabblad Popups). Sluit ze met het kruisje: we bouwen zelf, in onze huisstijl.

13.2 De inhoud en de popup-instellingen

Bouw de popup zoals een gewone pagina: een container met een Afbeelding (foto van croissants, 100 % breed, 230 px hoog, Object passend: Bedekken), en daaronder een Koptekst, een korte Teksteditor en een Knop “Bestel voor zondag”.

Klik dan op Pagina instellingen (1). Hier bepaal je hoe de popup zelf eruitziet:

Width (2): de breedte, bijvoorbeeld 520 px. Een popup mag nooit het hele scherm bedekken.
Height: Fit To Content, zo hoog als de inhoud.
Position (3): horizontaal en verticaal gecentreerd.
Overlay: de donkere laag achter de popup.
Close Button (4): laat dit altijd op Show. Een popup zonder kruisje is ergerlijk.
Entrance Animation (5): hoe de popup verschijnt, bv. Zoom In.

Op het tabblad Stijl geef je de popup een witte achtergrond en afgeronde hoeken (16 px).

13.3 Voorwaarden, triggers en regels

Bij het publiceren van een popup krijg je drie tabbladen.

Conditions – waar mag de popup verschijnen? Klik op Add condition en kies Include → Singular (1) → Front page (2): enkel op de homepage. Klik op Next.

Triggers – wanneer verschijnt de popup? Zet On Page Load (1) aan en vul bij Within (sec) (2) 3 in: de popup verschijnt 3 seconden nadat de pagina geladen is. Andere mogelijkheden: On Scroll (3) (als de bezoeker een bepaald percentage gescrold heeft), On Click (4) (na een aantal klikken), After Inactivity, On Page Exit Intent (als de muis naar het kruisje van de browser gaat). Kies er maar één.

Advanced Rules – extra regels. Zet Show up to X times (1) aan, bijvoorbeeld 3 keer: dan krijgt een bezoeker de popup niet bij elk bezoek opnieuw te zien. Met Show on devices (2) kun je de popup bijvoorbeeld op gsm uitschakelen. Klik op Save & Close (3).

Open je homepage in een privévenster (zodat je niet ingelogd bent) en wacht drie seconden:

13.4 De popup enkel tonen als de bezoeker op een knop klikt

Een popup die vanzelf verschijnt, onderbreekt de bezoeker. Vaak is het vriendelijker om hem enkel te tonen als de bezoeker zelf op een knop klikt. Op de voorbeeldsite hebben we de popup na het testen zo ingesteld, zodat hij de demo niet stoort.

Open de popup in de editor en klik op het pijltje naast Publiceren (1). Kies Display Conditions (2). (Via dit menu kom je ook bij Triggers en Advanced Rules.)
Verwijder de voorwaarde met het kruisje achter de regel. Er staat nu enkel nog Add condition.
Ga naar Triggers en zet On Page Load (1) weer uit. Klik op Save & Close (2).

Nu koppel je de popup aan een knop:

Open de pagina met de knop (hier de knop “Plaats je bestelling” op de oefenhomepage).
Klik bij Link op het icoontje Dynamische tags (1) en kies onder Actions de tag Popup (2).
Klik op het moersleuteltje in het linkveld. Laat Action (1) op Open Popup staan en kies bij Popup (2) je popup (typ een deel van de naam).
Sla de pagina op. Klikt een bezoeker op de knop, dan opent de popup.

Popups en je bezoekers. Toon nooit meer dan één popup tegelijk, nooit meteen bij het binnenkomen en nooit op elke pagina. Zorg dat het kruisje goed zichtbaar is. Google houdt er rekening mee als popups op gsm de inhoud verbergen.

Je cookiebanner (Complianz) is ook een soort popup. Laat je eigen popup niet tegelijk met de cookiebanner verschijnen: een vertraging van een paar seconden of een klik-trigger is veiliger.

Veelgemaakte fouten

Witte tekst op een lichte foto zonder overlay: onleesbaar.

Twee H1-titels op één pagina, of titels kiezen op hun grootte in plaats van hun belang. Gebruik H1 één keer; de grootte stel je apart in.

Losse kleuren en lettertypes in plaats van de globale. Na een tijdje heeft je site tien tinten bruin.

Alles volproppen: weinig padding, geen ruimte tussen de secties.

Gigantische foto’s (5 MB van je gsm) uploaden: de pagina laadt traag. Verklein ze eerst tot maximaal 1920 pixels breed.

Niet op gsm controleren: tekst die buiten het scherm valt, knoppen die over elkaar staan.

Een websitesjabloon importeren op een bestaande site: je huisstijl, menu’s en mediabibliotheek raken overhoop.

Een popup die meteen en bij elk bezoek verschijnt.

Vragen

Hoe zet ik mijn oefenpagina om naar mijn echte homepage?

Publiceer de pagina en ga naar Instellingen → Lezen. Kies bij “Je homepage toont” voor “Een statische pagina” en selecteer je pagina bij “Homepage”. Of: sla de secties op als sjablonen en voeg ze in op je bestaande Home-pagina.

Mijn achtergrondfoto is op gsm raar bijgesneden. Wat kan ik doen?

Zet bij de container in de gsm-weergave de Positie van de achtergrond anders (bv. Midden rechts), of kies in de gsm-weergave een andere, staande foto: de achtergrondinstellingen kun je per toestel instellen (let op het schermpje naast het label).

Wat is het verschil tussen een sjabloon opslaan en een globale widget?

Een opgeslagen sjabloon voeg je in als kopie: elke kopie kun je los aanpassen. Een header of footer uit de Theme Builder is één onderdeel dat overal tegelijk verandert. Voor een stuk dat op enkele pagina’s terugkomt en zelden verandert, volstaat een sjabloon.

Waar vind ik later mijn opgeslagen sjablonen terug?

In de editor via het mapje → tabblad Templates, of in WordPress via Templates → Opgeslagen Templates. Daar kun je ze ook hernoemen, exporteren of verwijderen.

Mijn popup verschijnt niet. Wat controleer ik?

Is hij gepubliceerd? Heeft hij een voorwaarde (Conditions) én een trigger? Bekijk je de pagina niet ingelogd of in een privévenster? Heb je hem al het maximum aantal keren gezien (Advanced Rules)? Test in een nieuw privévenster.

Opdracht

Opdracht: jouw homepage, Over ons en Contact. Werk op je eigen site (sNN.ucll.somesites.be).

Maak een nieuwe pagina, kies de pagina lay-out Elementor volledige breedte en bouw een homepage met minstens: een hero (achtergrondfoto + overlay + H1 + inleiding + twee knoppen), een sectie tekst + foto in twee kolommen, drie kaarten met Afbeelding vak, getuigenissen of een andere vorm van bewijs, en een call-to-action-band.
Gebruik enkel je globale kleuren en lettertypes, maximaal twee lettertypes en voldoende witruimte.
Controleer en verbeter de pagina in de gsm-weergave en op je eigen gsm.
Geef hoogstens drie elementen een rustige ingangsanimatie.
Sla je call-to-action-band op als sjabloon en voeg hem in op twee andere pagina’s.
Bouw een Over ons-pagina en een Contact-pagina die met dezelfde banner beginnen.
Maak een popup met een nieuwtje die enkel opent als een bezoeker op een knop klikt.
Stel de nieuwe pagina in als je homepage (Instellingen → Lezen) en zet hem in je menu.

Samengevat

Een goede homepage volgt de leesrichting van de bezoeker: hero → verhaal → aanbod → bewijs → actie.
Ontwerpprincipes: witruimte, hiërarchie, contrast, consistentie, maximaal twee lettertypes, goede foto’s en een duidelijke call-to-action.
Kies Elementor volledige breedte als pagina lay-out voor pagina’s die je met Elementor ontwerpt.
Een hero = container met volledige breedte, min. hoogte in vh, achtergrondfoto (Bedekken) en een donkere overlay.
Containers in containers maken rijen en kolommen; op gsm zet je de richting op kolom.
Sla secties op als sjabloon (rechtermuisknop → Save as a template) en voeg ze in via het mapje. Wees zuinig met blokken, pagina’s en websitesjablonen uit de bibliotheek.
Een popup heeft voorwaarden (waar), triggers (wanneer) en regels (hoe vaak). Of je opent hem met een knop via de dynamische tag Popup.
Animaties met mate, en controleer altijd op gsm.

Alle hoofdstukken