Page Builder
De Page Builder is een visuele editor waarmee je de pagina's van je webwinkel ontwerpt. Het werkt als een drag-and-drop canvas — je voegt inhoudsblokken toe (genaamd secties), past het uiterlijk van je navigatiebalk en themakleuren aan, en bekijkt een live voorbeeld van het resultaat voordat je publiceert.
Elke winkel begint met een Home-pagina. Je kunt ook aangepaste pagina's aanmaken (bijv. Over ons, Contact, Acties) die hun eigen URL krijgen op je webwinkel.
Pagina's beheren
Open Pages in de beheerderszijbalk om al je winkelpagina's te bekijken. De Home-pagina wordt altijd als eerste weergegeven.
| Kolom | Beschrijving |
|---|---|
| Name | De paginatitel zoals weergegeven in het beheerdersdashboard |
| Slug | Het URL-pad op je webwinkel (bijv. /about) |
| Status | Active (zichtbaar op de webwinkel) of Inactive |
| Created At | Datum waarop de pagina is aangemaakt |
Vanaf dit scherm kun je:
- Een pagina aanmaken — klik op New Page in de rechterbovenhoek. Dit opent de builder met een lege pagina.
- Een pagina bewerken — klik op een paginanaam of kies Edit uit het actiemenu. Dit opent de builder met die pagina geladen.
- Activeren / Deactiveren — schakel de zichtbaarheid via het actiemenu of gebruik de bulk-selectievakjes.
- Verwijderen — verwijder een pagina via het actiemenu of in bulk.
Belangrijk: De Home-pagina kan niet worden verwijderd of hernoemd vanuit dit scherm. De metadata wordt beheerd in de winkelinstellingen.
De builder openen
Wanneer je op New Page of Edit klikt, opent de Page Builder in een volledig-scherm weergave:
De builder heeft drie hoofdgebieden:
| Gebied | Beschrijving |
|---|---|
| Primaire zijbalk | Een smalle pictogrammenbalk helemaal links met vier paneelknoppen (van boven naar beneden): Metadata, Sections, Navbar, Theme |
| Secundaire zijbalk | De besturingselementen van het actieve paneel — waar je inhoud, instellingen of stijlen bewerkt |
| Live voorbeeld | Een iframe dat je pagina precies laat zien zoals klanten deze zullen zien. Wordt in realtime bijgewerkt terwijl je wijzigingen aanbrengt |
De bovenste balk bevat:
| Besturing | Beschrijving |
|---|---|
| Back | Keert terug naar de paginalijst (waarschuwt als je onopgeslagen wijzigingen hebt) |
| Paginaselector | Dropdown om tussen pagina's te wisselen zonder de builder te verlaten |
| Viewport-wisselaar | Schakel tussen Desktop, Tablet en Mobiel voorbeeldformaten |
| Discard | Draait alle onopgeslagen wijzigingen direct terug |
| Save | Opent een bevestigingsvenster en slaat vervolgens alles op in de database |
Pagina-metadata
Klik op het documentpictogram (eerste pictogram in de primaire zijbalk) om het metadata-paneel te openen. Bij nieuwe pagina's opent dit paneel automatisch.
| Veld | Beschrijving |
|---|---|
| Name | De paginatitel (verplicht). Bij het aanmaken van een nieuwe pagina wordt door het wijzigen van de naam automatisch een slug gegenereerd |
| Slug | Het URL-pad voor de pagina (verplicht). Alleen kleine letters, cijfers en koppeltekens zijn toegestaan |
| Description | Een optionele beschrijving voor SEO-doeleinden. Je kunt ook de knop AI Generate gebruiken als AI-integraties zijn ingeschakeld |
| Published | Schakelaar om de pagina zichtbaar te maken op de webwinkel |
Tip: De slug-voorvertoning onder het veld toont het volledige URL-pad (bijv.
/about-us). Zodra je de slug handmatig bewerkt, stopt het automatisch genereren vanuit de naam.
Voor de Home-pagina toont het metadata-paneel een alleen-lezen melding — de naam en beschrijving van de homepagina worden beheerd vanuit de algemene winkelinstellingen.
Werken met secties
Klik op het lagen-pictogram (tweede pictogram in de primaire zijbalk) om het sectiepaneel te openen. Hier voeg je inhoudsblokken toe en organiseer je ze.
Elke sectie in de lijst toont het typepictogram en label. Je kunt:
- Een sectie toevoegen — klik op Add Section en kies uit het dropdownmenu
- Herschikken — sleep secties omhoog of omlaag met de greep aan de linkerkant
- Uitklappen / Inklappen — klik op de naam van een sectie om de instellingen weer te geven
- Zichtbaarheid wisselen — gebruik de schakelaar om een sectie te tonen of verbergen zonder deze te verwijderen
- Verwijderen — klik op het prullenbakpictogram (vereist bevestiging)
Zes sectietypes zijn beschikbaar:
| Type | Geschikt voor |
|---|---|
| Slideshow | Herobanners, acties, uitgelichte inhoud |
| Product List | Specifieke producten uitlichten |
| Collection | Een productcollectie onder de aandacht brengen |
| Image with Text | Storytelling, merkcommunicatie, feature highlights |
| Text | Aankondigingen, beschrijvingen, beleidsregels |
| Space | Visuele ademruimte tussen secties |
De navigatiebalk aanpassen
Klik op het panel-top pictogram (derde pictogram in de primaire zijbalk) om het paneel voor navigatiebalk-aanpassing te openen.
Belangrijk: Wijzigingen aan de navigatiebalk gelden globaal voor alle pagina's, niet alleen de pagina die je momenteel bewerkt.
| Instelling | Beschrijving |
|---|---|
| Show Logo | Schakel het winkellogo in de navigatiebalk aan of uit |
| Show Store Name | Schakel de winkelnaamtekst naast het logo aan of uit |
| Logo Size | Kies uit sm, md, lg, xl of 2xl |
| Text Style | Stel de lettergrootte, vet en cursief van de winkelnaam in |
| Position | Lijn het logo en de winkelnaam uit naar links, gecentreerd of rechts |
Het thema aanpassen
Klik op het paletpictogram (vierde pictogram in de primaire zijbalk) om het paneel voor thema-aanpassing te openen.
Belangrijk: Themawijzigingen gelden globaal voor alle pagina's, niet alleen de pagina die je momenteel bewerkt.
Modusschakelaars:
| Instelling | Beschrijving |
|---|---|
| Light Mode | Schakel het lichte kleurenschema in of uit |
| Dark Mode | Schakel het donkere kleurenschema in of uit |
Er moet altijd minimaal één modus ingeschakeld blijven.
Kleurvelden (10 per modus):
| Kleur | Wat het beheert |
|---|---|
| Primary Color | Knoppen, links en accentelementen |
| Secondary Color | Secundaire UI-elementen |
| Tertiary Color | Extra accentkleur |
| Background Color | Pagina-achtergrond |
| Menu Bar Color | Achtergrond van de navigatiebalk |
| Menu Bar Text Color | Tekst van de navigatiebalk |
| Input Background | Formulier-invoervelden |
| Text Color | Hoofdtekst |
| Banner Background | Achtergrond van de promotiebanner |
| Banner Text Color | Tekst van de promotiebanner |
Lettertype:
| Instelling | Beschrijving |
|---|---|
| Font Family | Kies een globaal lettertype uit de beschikbare systeem- en Google Fonts |
Opslaan en publiceren
Wanneer je tevreden bent met je wijzigingen, klik op Save in de rechterbovenhoek. Er verschijnt een bevestigingsvenster:
- Als de pagina gepubliceerd (actief) is, bevestigt het venster dat je wijzigingen live publiceert.
- Als de pagina een concept (inactief) is, bevestigt het venster dat je opslaat zonder de pagina openbaar te maken.
Het opslagproces uploadt alle opgeslagen afbeeldingen, maakt de pagina aan (indien nieuw) en slaat secties, navigatiebalk-instellingen, thema-instellingen en pagina-metadata in één keer op.
Klik op Discard om op elk moment alle onopgeslagen wijzigingen terug te draaien naar de laatst opgeslagen staat.
Hoe pagina's worden weergegeven op de webwinkel
Home-pagina
De homepagina is het eerste wat bezoekers zien. Het toont alle actieve secties in de volgorde die je in de builder hebt bepaald.
Aangepaste pagina's
Aangepaste pagina's zijn bereikbaar via hun slug-URL (bijv. jouwwinkel.nl/about). Ze worden op dezelfde manier weergegeven als de homepagina — elke actieve sectie verschijnt op volgorde.
Alleen actieve pagina's met de Published-schakelaar ingeschakeld zijn zichtbaar op de webwinkel. Inactieve pagina's geven een 404-fout.
Aangepaste pagina's verschijnen ook in het mobiele navigatiemenu en de footer van de webwinkel, zodat klanten ze gemakkelijk kunnen vinden.