UI-editor (configuratorontwerp)
De UI-editor bepaalt hoe de klantgerichte configurator eruitziet: templates, kleuren, layout, 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 → Configuraties → open een product → Configurator-design.
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. |
| Productkiezer | Binnendeur ▾ | Wissel welk product je vormgeeft. |
| Verwerpen | Verwerpen | Niet-opgeslagen wijzigingen weggooien. |
| Opslaan | Opslaan | Pas je ontwerp toe op elke insluiting van het product. |
De instellingen zijn gegroepeerd in vier inklapbare panelen: Templates & kleuren, Layout, Typografie & stijl en Animaties & spinner.
1. Templates & kleuren
Begin met een layouttemplate
Kies een van de vijf presets als startpunt. Het stelt verstandige standaardwaarden in voor de plaatsing van het menu, de actiebalk en de vorm, die je daarna hieronder verfijnt. Een template kiezen overschrijft de layout-gerelateerde instellingen, maar behoudt je kleuren en typografie — zie het als een reset naar een betrouwbare basis.
| Template | Stijl | Geschikt voor |
|---|---|---|
| Wraparound (Rond content · rustig) | Menu rond de content; rustig | Contentgedreven layouts |
| Stappenbalk (Stapbalk · krachtig) | Prominente stappenbalk; krachtig | Begeleide flows waarin de huidige stap opvalt |
| Num stappen (Num stappen · strak) | Genummerde stappen; strak | Lineaire, formulierachtige configurators |
| Pills (Pills · speels) | Pilvormige stapknoppen; speels | Vriendelijke, consumentgerichte producten |
| Tracker (Voortgang · minimaal) | Voortgangstracker; minimaal | Lange flows die slechts een subtiele voortgangshint nodig hebben |
Kleuren
| Instelling | Label | Wat het doet |
|---|---|---|
| Primaire kleur | Primaire kleur | Accent voor de actieve stap, de volgende-knop, sliders en geselecteerde opties. Kies een staal of gebruik de pipet voor een eigen kleur. |
| Achtergrond | Achtergrond | Pagina-/canvasachtergrond achter de configurator-UI. |
Stel hier de primaire kleur van je merk in; deze stuurt de meeste gekleurde accenten aan, dus één wijziging geeft de hele configurator een nieuw thema.
2. 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 |
|---|---|
| Num stappen | Genummerde items (1, 2, 3 …) |
| Pillen | Afgeronde pilknoppen |
| Stippen | Minimale stippen |
| Voortgangsbalk | Eén vullende balk |
Plaatsing en stijl staan los van elkaar — bijv. een Num stappen-menu links, of een Voortgangsbalk bovenaan.
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 |
| Dichtheid | Dichtheid | Compact, Gezellig, Ruim |
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 | Vaste breedte (bijv. 430px). Breder geeft opties meer ruimte; smaller geeft de productpreview meer ruimte. |
3. Typografie & stijl
Tekst
| Instelling | Label | Opties |
|---|---|---|
| Lettertype | Lettertype | Lettertype voor de hele UI (bijv. Archivo) |
| 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 |
| Knophoeken | Knophoeken | Scherp / Zacht / Gebogen / Rond — apart van de componenten in te stellen |
| Sliderdikte | Sliderdikte | Dun, Middel, Dik |
Scherpere hoeken ogen technisch; rondere hoeken ogen zacht en vriendelijk.
4. 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 je ontwerp toe te passen op elke insluiting van het product. Omdat de styling op het product staat (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.
Tips
- Begin met een template en pas daarna aan — bouw de layout niet vanaf nul op.
- Stel eerst de primaire kleur in; deze werkt door in de accenten.
- 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.