# 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.

![Paginalijst](/features/page-builder/pages-list.png)

| 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:

![Builder overzicht](/features/page-builder/builder-overview.png)

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.

![Metadata-paneel](/features/page-builder/metadata-panel.png)

| 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.

![Sectiepaneel](/features/page-builder/sections-panel.png)

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)

![Sectie toevoegen menu](/features/page-builder/add-section-menu.png)

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.

![Navigatiebalkpaneel](/features/page-builder/navbar-panel.png)

> **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.

![Themapaneel](/features/page-builder/theme-panel.png)

> **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:

![Opslagvenster](/features/page-builder/save-dialog.png)

- 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.

![Webwinkel homepagina](/features/page-builder/storefront-home.png)

### 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.

![Webwinkel aangepaste pagina](/features/page-builder/storefront-custom-page.png)

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.