UI-editor (configuratorontwerp)
De UI-editor bepaalt hoe de klantgerichte configurator eruitziet: layout, navigatie, typografie, vorm en beweging. Wijzigingen gelden voor de configurator die je bezoekers gebruiken in zowel iFrame insluiten als Script-injectie.
Waar je het vindt
Manager → Design → Configurator.
Deze instellingen gelden bedrijfsbreed: ze werken door in elke configurator die je publiceert, niet in één product. De productkiezer in de bovenbalk bepaalt alleen welk product in de preview wordt getoond.
Onder Design staan vier samenhangende pagina's: Branding (logo, kleuren, lettertype, knophoeken — gedeeld door alles), Configurator (deze pagina), Email (de e-mails die je klant ontvangt, zie Inzendingen & uitvoer) en PDF (de offerte-PDF, zie Template-editor).
De editor toont het instellingenpaneel aan de linkerkant en een live preview aan de rechterkant. Wijzig een instelling en de preview wordt direct bijgewerkt.
Bovenbalk
| Besturingselement | Label | Wat het doet |
|---|---|---|
| Previewapparaat | Desktop / Mobiel / Componenten | Bekijk de configurator als desktop, als mobiel, of inspecteer losse componenten. |
| Previewproduct | Previewproduct | Kies welk live product in de preview wordt getoond. Het verandert niet wát je vormgeeft. |
| Verwerpen | Verwerpen | Niet-opgeslagen wijzigingen weggooien. |
| Opslaan | Opslaan | Publiceer het ontwerp naar elke configurator van je bedrijf. |
Sneltoetsen: Cmd/Ctrl + E schakelt de weergave Componenten aan en uit, Cmd/Ctrl + Shift + M schakelt de Mobiel-preview aan en uit.
De instellingen zijn gegroepeerd in drie inklapbare panelen: Layout, Typografie & stijl en Animaties & spinner.
Kleuren
Kleuren stel je hier niet meer in. Je primaire kleur en achtergrond staan op Design → Branding, omdat ze gedeeld worden met je e-mails. Wijzig ze daar en deze preview volgt direct.
1. Layout
Plaatsing van het stappenmenu — "Waar komt het stappenmenu?"
| Optie | Resultaat |
|---|---|
| Boven | Horizontaal menu boven de content |
| Onder | Horizontaal menu onder de content |
| Links | Verticaal menu aan de linkerkant |
| Rechts | Verticaal menu aan de rechterkant |
| Rond content | Menu rond de content (Wraparound-stijl) |
Stijl van het stappenmenu — "Welk stappenmenu past bij je?"
| Optie | Weergave | Beschikbaar bij |
|---|---|---|
| Num stappen | Genummerde rondjes in een kolom | Links, Rechts |
| Pillen | Compact, nummers met labels | Elke plaatsing |
| Stippen | Minimaal, kleine stippen | Boven, Onder, Links, Rechts |
| Tabs | Klikbare tabbalk | Boven, Onder |
| Stappenbalk | Blokken naast elkaar | Boven, Onder |
| Broodkruimels | Stap › stap › stap | Boven, Onder |
| Voortgangsbalk | Balk met "stap 2 van 4" | Boven, Onder, Links, Rechts |
| Minimaal | Alleen "Stap 2/4" als tekst | Boven, Onder |
| Accordeon | Stappen klappen rond de content | Rond content |
| Kaarten | Elke stap is een eigen kaart | Rond content |
Kies eerst de plaatsing: de lijst toont alleen de menu's die bij die plaatsing passen. Past je huidige menu niet bij een nieuw gekozen plaatsing, dan schakelt het over naar Pillen, dat overal past.
Actiebalk
De actiebalk bevat de volgende-knop en de prijs.
| Instelling | Label | Opties |
|---|---|---|
| Positie — "Waar komen de volgende-knop en de prijs?" | Waar komen de volgende-knop en de prijs? | Boven of Onder |
| Actiebalk-layout | Actiebalk-layout | Prijs links, Prijs rechts, Gestapeld, Overlay (prijs in de 3D-overlay) |
Kleur 3D-overlay (iconen en prijs)
De kleur van de iconen en de prijs over de 3D-weergave. Wit (standaard) staat standaard aan; zet het uit om een Eigen kleur te kiezen.
Dichtheid
Compact, Gezellig of Ruim: hoeveel ruimte de configurator rond en tussen de opties gebruikt.
Instellingenpaneel
Het gebied waar de klant zijn keuzes maakt.
| Instelling | Label | Wat het doet |
|---|---|---|
| Kant — "Aan welke kant komt het instellingenpaneel?" | Aan welke kant komt het instellingenpaneel? | Links of Rechts |
| Paneelbreedte | Paneelbreedte | Schuifregelaar van 340px tot 520px, in stappen van 10. Breder geeft opties meer ruimte; smaller geeft de productpreview meer ruimte. |
2. Typografie & stijl
Tekst
| Instelling | Label | Opties |
|---|---|---|
| Koppen | Koppen | Vet, Hoofdletters, Cursief — naar wens combineren |
| Kopgrootte | Kopgrootte | Klein, Middel, Groot |
| Tekstgrootte | Tekstgrootte | Klein / Middel / Groot — standaard bodytekst |
| Componenttekstgrootte | Componenttekstgrootte | Klein / Middel / Groot — tekst binnen besturingselementen (optie-labels, knoppen) |
Houd de drie groottes in een duidelijke hiërarchie (kop > body > component) voor evenwichtige, leesbare schermen. Componenttekst is het makkelijkst te klein in te stellen op mobiel.
Vorm
| Instelling | Label | Opties |
|---|---|---|
| Componenthoeken | Componenthoeken | Scherp, Zacht, Gebogen, Rond |
| Sliderdikte | Sliderdikte | Dun, Middel, Dik |
Scherpere hoeken ogen technisch; rondere hoeken ogen zacht en vriendelijk. Het lettertype en de knophoeken stel je in op Branding — die gelden ook voor je e-mails.
3. Animaties & spinner
Gedrag
| Instelling | Label | Wat het doet |
|---|---|---|
| Animaties — Componenten | Animaties · Componenten | Overgangen op besturingselementen (opties kiezen, hover) |
| Animaties — Layout | Animaties · Layout | Overgangen wanneer stappen en panelen wisselen |
Zet animaties lager voor een snellere, functionele indruk; hoger voor een gepolijstere indruk.
Spinner
De laadindicator die wordt getoond terwijl de configurator initialiseert. Kies een van de 16 stijlen (Kies een laad-spinner).
Opslaan & publiceren
Klik op Opslaan om het ontwerp te publiceren naar elke configurator van je bedrijf. Omdat de styling in de manager staat en niet in de insluitcode, kun je een live configurator opnieuw vormgeven zonder de hostwebsite aan te raken. Gebruik Verwerpen om niet-opgeslagen wijzigingen weg te gooien. Cmd/Ctrl + S slaat ook op; Cmd/Ctrl + Backspace verwerpt.
Verlaat je de pagina met niet-opgeslagen wijzigingen, dan vraagt de manager wat je wilt: Wijzigingen weggooien, Verder werken of Opslaan en weggaan.
Tips
- Stel eerst de primaire kleur in op Branding; die werkt door in de accenten hier én in je e-mails.
- Controleer zowel de Mobiel- als de Desktop-preview — de kant van het paneel, de paneelbreedte en de positie van de actiebalk ogen per schermformaat anders.
- Gebruik de previewmodus Componenten om losse besturingselementen apart te bekijken.
Verder lezen
- Branding — logo, kleuren, lettertype en knophoeken
- Product Editor — de inhoud die de configurator toont
- Aan de slag met Manager
- iFrame insluiten
- Script-injectie