De editor en alle elementen
Leer de canvas kennen en weet precies welk element je waarvoor pakt: tekst, vormen, prijstabel, formulier-veld en handtekening.
± 11 min lezen
De offerte-editor is een vrije canvas in Figma-stijl. Je werkt niet met een vaste, van boven naar beneden stapelende lijst, maar je plaatst en versleept elementen precies waar je ze wilt. Daardoor maak je een voorstel dat eruitziet als een ontworpen document in plaats van een ingevuld formulier.
De editor bestaat uit drie zones plus een toolbar. Links staan je pagina’s en hoofdstukken, in het midden de canvas met linialen en een grid, en rechts de instellingen van het geselecteerde element of het device. Onderaan zweeft de blok-toolbar: je gereedschapskist met alle elementen die je kunt plaatsen.
Deze gids legt de canvas uit en loopt langs elk element: waarvoor het bedoeld is en hoe je het inzet. We gaan kort in op de prijstabel, het formulier-veld en de handtekening; voor variabelen, typografie en de devices verwijzen we naar de aparte gidsen die daar dieper op ingaan.
Wat kun je hiermee
- Tekst plaatsen voor koppen, alinea’s en losse labels
- Afbeeldingen direct op de canvas zetten en op maat trekken
- Vormen tekenen: rechthoek, cirkel en lijn voor vlakken, accenten en scheidslijnen
- Een prijstabel toevoegen met regels, aantallen, bedragen en btw
- Een formulier-veld plaatsen om gegevens uit te vragen, en een handtekening-blok voor online akkoord
- Pagina’s toevoegen: voorpagina, inhoudsopgave en losse hoofdstukken, plus navigatie
- Elementen vrij verslepen, op maat trekken en uitlijnen op het grid
Voor je begint
- Je hebt een offerte geopend in de editor
- Voor de basis-rondleiding: lees eventueel eerst "Een offerte maken in de visuele editor"
- 1
Ken de drie zones en de toolbar
Links je pagina’s, midden de canvas met linialen en grid, rechts de instellingen, en onderaan de zwevende blok-toolbar.
Links beheer je de structuur: Speciale pagina’s (Offerte cover, Inputs, Stijl) bovenaan, daaronder je gewone pagina’s en hoofdstukken. Sleep ze om de volgorde te wijzigen.
In het midden ligt de canvas met linialen langs de randen. Klik in een leeg gebied om je selectie op te heffen; klik op een element om het te selecteren.
Rechts zie je de instellingen van het geselecteerde element, of, als er niets geselecteerd is, de device-instellingen. Onderaan zweeft de toolbar met alle elementen.
de drie zones plus de zwevende toolbar onderaan - 2
Plaats tekst en afbeeldingen
Kies de tekst-tool voor koppen en alinea’s, of de afbeelding-tool om beeld op de canvas te zetten.
Een tekst-element typ je direct vol. Voor consistente koppen en lopende tekst koppel je het aan een stijl-token in plaats van alles los in te stellen; zie de gids over typografie en type-scale.
Een afbeelding plaats je rechtstreeks op de canvas en trek je aan een hoekje op maat. Er is geen aparte mediabibliotheek: beeld hoort altijd bij déze offerte.
Typ {{ in een tekst om de variabele-picker te openen en een waarde als {{klantnaam}} in te voegen.
- 3
Teken vormen voor structuur en accenten
Gebruik rechthoek, cirkel en lijn voor vlakken, kaders, accenten en scheidslijnen.
In de hero-afbeelding is de rechthoek-tool actief (blauw). Sleep op de canvas om een vlak te tekenen; geef het rechts een vul- of randkleur. Zo zet je bijvoorbeeld een gekleurd vlak achter een titel of een kader rond een citaat.
Een lijn is ideaal als nette scheiding tussen onderdelen, en een cirkel werkt voor accenten of als achtergrondvorm. Vormen schuif je naar voren of naar achteren, zodat tekst er netjes op of naast valt.
de toolbar met de rechthoek-tool actief; ernaast staan tekst, afbeelding, cirkel en lijn Lijn vormen uit op het grid voor een strak resultaat; de gids over device-weergaven laat zien hoe je het grid instelt.
- 4
Zet een prijstabel neer
Met de prijstabel-tool plaats je een tabel met regels, aantallen, bedragen en btw die optelt tot een totaal.
De prijstabel is het hart van de meeste offertes. Je voegt regels toe met een omschrijving, een aantal en een bedrag; het totaal en de btw rekenen mee. Zet ’m op de Investment- of prijs-pagina van je voorstel.
Omdat de bedragen in de tabel staan, komen ze later netjes mee als je de offerte omzet naar een factuur. Zo hoef je niets over te tikken.
Werk je met opties of pakketten? Zet ze als losse regels of in aparte tabellen naast elkaar, zodat de klant ze kan vergelijken.
- 5
Vraag gegevens uit en laat ondertekenen
Plaats een formulier-veld om iets uit te vragen, en een handtekening-blok op de plek waar de klant tekent.
Een formulier-veld gebruik je om de klant iets te laten invullen, bijvoorbeeld een projectnaam, een keuze of een opmerking. Het hoort bij een interactief voorstel waarin de klant zelf wat aanvult.
Het handtekening-blok zet je op de plek waar de klant online akkoord geeft. In de Voorvertoning zijn de teken-knoppen verborgen; ze verschijnen pas op de echte deel-link. Hoe ondertekenen precies werkt, lees je in de gids over delen en ondertekenen.
- 6
Bouw de structuur met pagina’s en navigatie
Voeg een voorpagina, inhoudsopgave of hoofdstuk toe via de toolbar, en gebruik navigatie om de klant door het voorstel te leiden.
Een langer voorstel deel je op in hoofdstukken, die je links terugziet en die de klant via de hoofdstuk-dropdown in de Voorvertoning kan kiezen. Een voorpagina en een inhoudsopgave geven een uitgebreid voorstel meteen een verzorgde indruk.
Met de navigatie-tool plaats je verwijzingen waarmee de klant door de offerte springt. Sleep pagina’s links in de juiste volgorde, want die volgorde bepaalt de inhoudsopgave en de dropdown.
- Kies in de toolbar "pagina toevoegen" en selecteer voorpagina, inhoudsopgave of hoofdstuk
- Sleep de pagina links naar de juiste plek in de volgorde
- Plaats desgewenst navigatie zodat de klant snel kan springen
Veelvoorkomende vragen
Vormen kunnen voor of achter andere elementen liggen. Klik het bovenliggende element weg of stuur het naar achteren, en selecteer dan het element dat je zoekt. Klik in een leeg gebied om je selectie op te heffen.
Zet het grid wat strakker en sleep het element tot het op de gridlijnen valt. Zie de gids over device-weergaven voor het instellen van kolommen, gutter en marge.
Controleer per regel het aantal, het bedrag en het btw-percentage. Een ontbrekend of fout veld telt mee in het totaal. Pas de regels aan; het totaal herberekent automatisch.
Dat is expres: in de Voorvertoning zijn de knoppen om te ondertekenen of reageren verborgen. Ze verschijnen pas wanneer de klant de offerte via een echte deel-link opent.
Hierna
- Een offerte maken in de visuele editor
De brede rondleiding van starten tot delen, als je liever eerst het hele proces overziet.
- Typografie en de type-scale tool
- Variabelen gebruiken
- Device-weergaven en het grid
Kom je er niet uit? Neem contact op, we helpen je graag verder.