De one pager: wat is dat? | Hoe maak je dat?

17 Apr 2022 | webdesign

Hoe one pager maken?

Soms kom je eenvoudige websites van hooguit één pagina tegen die je kort en bondig informatie over een bedrijf geven. Zo’n site heet een one pager. Dit ziet er vaak stijlvol en simpel uit, maar er kan aardig wat tijd kruipen in het maken ervan. Dit artikel geeft je antwoord op de vragen “wat is one pager” en “hoe one pager maken”.

Zoals het woord al aangeeft, gaat het hier om websites die bestaan uit één pagina, namelijk een homepagina. Op deze pagina vind je de onderdelen die je ook op een gewone website tegen komt: bijvoorbeeld over ons, diensten of aanbod, contact en reviews. Normaal gezien zie je dat dus bij een website op verschillende pagina’s terugkomen, bij de one pager staat dit allemaal op de homepage. Bij de one pager kom je op één pagina heel wat te weten: vaak is deze redelijk lang. Klik hier voor een voorbeeld van een one pager die ik onlangs heb gemaakt.

Naast het woord one pager is ook de term microsite in omloop. Dit is eigenlijk niet hetzelfde als een one pager: een microsite is vaak een onderdeel van een groter geheel en kan een aparte domeinnaam hebben. Zo is de jongerennieuwswebsite Bruzzket een microsite van de Brusselse regionale omroep Bruzz.

Voordelen en nadelen van de one-pager

Terug naar de one pager: mocht je overwegen om er één te gaan maken, weet dan goed waar je aan begint. Vind je het belangrijk om in Google gevonden te worden? Dan is de one pager niet de meest geschikte optie. Je kiest dan beter voor een traditionele website. Websites van één pagina worden namelijk minder snel gevonden door Google, simpelweg omdat er minder content wordt aangemaakt dan bij een gewone website die uit meerdere pagina’s bestaat. Een manier om hieraan tegemoet te komen is het publiceren van een blog die aan je one pager vastzit.

Daarnaast ga je in veel gevallen code moeten gebruiken om het menu van je one pager te laten functioneren. Gelukkig kun je daar heel wat over online vinden. Hieronder leg ik je uit hoe je zelf een mooie one pager in het populaire WordPress thema en bouwer Divi kan maken. Want zeg nou zelf, buiten die nadelen is een one pager wel heel stijlvol. Dat is dan ook een geweldig voordeel hieraan. Net als dat je bezoeker heel snel van alles te weten kan komen over jouw onderneming.

Hoe one pager in Divi maken?

Mocht je er toch aan willen beginnen, dan kun je hier het stappenplan vinden. Dit stappenplan is bedoeld voor Divi en dit thema en deze bouwer kan ik van harte aanbevelen om een website van één pagina te maken. What you see is what you get: dit thema werkt super visueel, je ziet de heel tijd wat je aan het doen bent en je kan ook meteen de mobiele versie van je site ontwerpen.

Daar gaan we dan. We beginnen met het algemene gedeelte:

  1. Registreer je domeinnaam en koop je hosting.
  2. Installeer WordPress op je controlepaneel, dat is de achterkant van je website.
  3. Koop een Divi-licensie bij Elegant Themes: ofwel betaal je per jaar, ofwel betaal je life time access. En ik kan je uit eigen ervaring vertellen dat dat een super goede deal is! 
  4. Download het Divi-thema en -bouwer. Je ontvangt een ZIP-bestand.
  5. Dit upload je als thema en activeer je.
  6. Maak hier een child theme van met bijvoorbeeld de plugin Generate Child Theme, dat is een plugin die prima werkt. Een child theme maak je voor de veiligheid aan: mocht er iets aan je hoofdthema (Divi in dit geval) veranderen, dan blijft je website operationeel en toegankelijk.

Ziezo, dit was het algemene werk. Nu gaan we specifieker aan de slag:

  1. Maak zelf een thema aan: klik op de D van Divi in je WordPress dashboard en selecteer “Divi builder”. Hier maak je om te beginnen een header (bovenkant website, die bestaat vaak uit een logo en een menu) en een footer (onderkant van de website, hier staat algemene informatie met credits) aan. Hier kun je lezen hoe je een header in Divi maakt. Het menu hoef je nog niet meteen aan te maken, dat kan je nog even op default blijven staan.
  2. Als je je header en footer hebt gemaakt, kun je de body gaan maken. Dat is het middenstuk van een webpagina. Deze body wordt dus onze one pager. Klik op “body” en dan nog eens op “build from scratch”. We gaan onze one pager vanaf een blanco pagina beginnen.
  3. Goed om te weten: Divi werkt met sections, rows en modules. Sections zijn grote vlakken waar rows en modules inzitten. De sections gaan heel belangrijk zijn om ons menu naar te laten verwijzen. Maak dus nu sections aan voor de onderdelen die je zeker op je website wilt: bijvoorbeeld homepagina (het bovenste deel van je one pager), over mij, diensten of aanbod, reviews en contact.
  4. Als je deze secties hebt aangemaakt, dan ga je deze verder designen: met behulp van row bepaal je de lay-out per sectie. Misschien wil je het onderverdelen in kolommen: dat kun je hier regelen. Vervolgens voeg je je teksten en afbeeldingen en andere zaken toe. Dat doe je met modules. Je gaat nu verder je sections, rows en modules zo bouwen dat alles er goed uit ziet. Zoek gerust op tutorials op YouTube voor verdere informatie.
  5. Nu alles gemaakt is, gaan we het koppelen aan ons menu. Per sectie gaan we CSS ID toevoegen. Dat is codetaal om extra toe te voegen. Je vindt dit door op het tandwieltje in de section te drukken. Open dan het tabblad “advanced” en voeg CSS ID toe. Je kan heel gemakkelijk dezelfde titel als die van de sectie gebruiken: dus homepagina, overmij, aanbod, reviews en contact. Voeg dat per sectie toe. Opgelet: vermijd spaties en leestekens, anders kan de code niet of niet goed werken.
  6. Nu we dit gedaan hebben gaan we uit Divi en naar “menus” in de “theme customizer”. Je kan daar eenvoudig komen vanuit het WordPress dashboard aan de linkerkant of via de knoppen die boven je website verschijnen.
  7. Eens de achterkant van het menu zich opent, kunnen we de CSS ID toevoegen via “custom link”. Je vult bij de URL in #homepagina, die je bij link tekst “Home” kunt laten verschijnen. Hetzelfde doe je voor #overmij, #aanbod, #reviews en #contact. Door de hashtags toe te voegen, gaat de codetaal zijn werk doen. Vergeet ook niet om steeds op “add to menu” te drukken. Verder kun je in dit menu ook de volgorde van je menu wijzigen door te klikken en te slepen.
  8. Klaar? Controleer of alles werkt. En laat je one pager goed checken door familie, vrienden, collega’s of kennissen voordat je deze met de wereld deelt.

En wat met extra inhoud als een privacyverklaring?

Wil je het heel simpel houden? Dan kun je de wettelijk verplichte privacyverklaring als pdf’je toevoegen aan je website. Vanuit je footer kun je daarnaar verwijzen. Of je maakt toch een nieuwe pagina aan, die je niet in je menu zet, maar wel naar linkt vanuit je footer.

Ik wens je veel succes met maken van een one pager!

En wat zie jij het liefst? Een one pager of eerder een traditionele website die uit meerdere pagina’s bestaat? En waarom?

Op de hoogte blijven van mijn nieuwste blogs? Schrijf je nu in voor mijn nieuwsbrief!

Op zoek naar gratis website tips? Boek nu een gratis webdesign sessie!

Laat een reactie achter

0 Comments

Submit a Comment

Your email address will not be published. Required fields are marked *

Lees hier meer
Welk lettertype voor website?

Welk lettertype voor website?

Als je een website gaat maken, dan heb je een enorme keuze aan lettertypes. Waar moet je allemaal opletten als je een lettertype uitkiest? Hoeveel lettertypes kun je gebruiken? En waar kun je lettertypes vinden? In dit artikel krijg je antwoord op...

Personal branding voor creatieve ondernemers

Personal branding voor creatieve ondernemers

Als creatief ondernemer moet je jezelf goed kunnen verkopen. Een manier om dat te doen is “personal branding”, jezelf als merk neerzetten. Hoe begin je hieraan en hoe kan je dat volhouden? In dit artikel lees je alles over personal branding voor...

Foto’s verkopen online via POD

Foto’s verkopen online via POD

Kun je goed fotograferen? Ben je klaar voor een challenge? Misschien kun je je foto’s wel online verkopen. Wil je het printen en verzenden outsourcen? Dan kun je print on demand overwegen. In dit artikel krijg je antwoord op de zoekterm ‘foto’s...