Samenvatting
Dit artikel is je complete naslagwerk voor alle opmaak-instellingen in de Mach3Blocks editor. Je leert hoe het opmaaksysteem in elkaar zit, wat je allemaal kunt instellen op blok- en element-niveau, en hoe je het thema gebruikt om je hele website er consistent uit te laten zien.
Hoe werkt het
1. De drie lagen (van grof naar fijn)
De opmaak in Mach3Blocks werkt als een waterval met drie niveaus:
| Laag | Wat doet het? | Waar geldt het? |
|---|---|---|
| Thema | Bepaalt de standaard opmaak | Je hele website — alle pagina's, blokken en elementen |
| Blok | Overschrijft het thema voor één blok | Alles binnen dat ene blok |
| Element | Overschrijft het blok voor één element | Alleen dat specifieke element |
Voorbeeld: Stel dat je in het thema hebt ingesteld dat alle koppen zwart zijn. Dan maak je voor één blok met een donkere achtergrond de koppen wit. En voor één specifieke kop in dat blok kies je rood om extra aandacht te trekken. Elke lagere laag wint van de hogere.
In de editor zie je bovenaan het rechter paneel een dropdown waarmee je kunt wisselen tussen Thema, Blok en Element. Zo zie je altijd welke waarden waar vandaan komen.
Staten: Standaard en Mouseover
Elke opmaak-instelling geldt per staat — dat wil zeggen: per situatie waarin het element zich bevindt.
- Standaard — zo ziet het element er normaal uit
- Mouseover — zo ziet het eruit als een bezoeker er met de muis overheen beweegt
Sommige elementen kennen extra staten. Formuliervelden hebben ook een Focus-staat (als iemand in het veld klikt) en een Error-staat (als er een fout is bij het invullen). Menu-links hebben een Actief-staat voor de pagina waar je op dat moment bent.
Je wisselt tussen staten via de tabs bovenaan de Opmaak-tab.
Kleurmodi
Elk blok heeft een kleurmodus. Die bepaalt of het blok licht of donker is, en welke kleuren uit je thema worden toegepast. Er zijn vier opties:
| Kleurmodus | Typisch gebruik |
|---|---|
| Licht | Witte of lichte achtergrond met donkere tekst |
| Licht tint | Licht getinte achtergrond (bijv. lichtgrijs) met donkere tekst |
| Donker tint | Donker getinte achtergrond met lichte tekst |
| Donker | Donkere of zwarte achtergrond met lichte tekst |
Je kiest de kleurmodus bovenaan de Opmaak-tab via vier kleurblokjes. Er is ook een vergrendel-knop (een slotje) waarmee je de kleurmodus voor dat blok vastzet. Dat is handig als je niet wilt dat het blok meeverandert wanneer je globaal iets wijzigt.
2. Opmaak op blok-niveau
Een blok selecteren
Er zijn drie manieren om een blok te selecteren:
- Klik op de rand of lege achtergrond van het blok
- Klik op een element en navigeer via de breadcrumb onderaan naar de bloknaam
- Klik op de knop Blok selecteren in de rechter toolbar
Opmaak-tab: alle secties
Lay-out
| Instelling | Wat doet het? | Wanneer gebruik je het? |
|---|---|---|
| Blok uitvullen | Het blok neemt de volledige breedte van het scherm in | Als je een blok van rand tot rand wilt laten lopen |
| Content uitvullen | Bepaalt hoe breed de inhoud binnen het blok is | Als je de content smaller wilt houden dan het blok zelf |
Ruimte
| Instelling | Wat doet het? | Wanneer gebruik je het? |
|---|---|---|
| Buitenkant (marge) | Ruimte rondom het blok | Om afstand te maken tussen opeenvolgende blokken. Je kunt ook negatieve marge gebruiken voor overlap |
| Binnenkant (padding) | Ruimte tussen de rand en de inhoud | Om lucht te geven binnen een blok |
| Binnenkant kolommen | Extra ruimte voor de kolommen | Om verticale ruimte toe te voegen aan kolommen |
Grootte
| Instelling | Wat doet het? | Wanneer gebruik je het? |
|---|---|---|
| Hoogte | Geeft het blok een vaste hoogte | Als het blok altijd even hoog moet zijn, ongeacht de inhoud |
| Minimale hoogte | Het blok is minstens zo hoog, maar mag groter worden | Handig voor hero-blokken die minstens het hele scherm moeten vullen |
Achtergrond
| Instelling | Wat doet het? |
|---|---|
| Kleur | Een effen achtergrondkleur voor het blok |
| Afbeelding | Een achtergrondafbeelding |
| Positie | Waar het focuspunt van de afbeelding ligt |
| Grootte | Hoe de afbeelding wordt geschaald (bedekken of bevatten) |
| Herhalen | Of de afbeelding herhaald wordt, handig voor patronen |
Vormen
Dit zijn decoratieve vormen (golven, schuine lijnen, driehoeken) die je aan de randen van een blok kunt toevoegen. Je kunt ze per zijde apart instellen.
| Instelling | Wat doet het? |
|---|---|
| Vorm | Het type vorm (golf, schuine lijn, driehoek, etc.) |
| Breedte | Hoe breed de vorm is |
| Hoogte | Hoe hoog de vorm is |
| Positie | Waar de vorm langs de rand staat |
| Herhalen | Of de vorm over de volledige breedte herhaald wordt |
| Opvullen | Of de vorm gevuld wordt met kleur |
| Overlap | Of de vorm over het aangrenzende blok heen valt |
Rand
| Instelling | Wat doet het? |
|---|---|
| Dikte | Hoe dik de rand is (in pixels) |
| Stijl | Doorgetrokken, streepjes, puntjes, etc. |
| Kleur | De kleur van de rand |
| Ronde hoeken | Hoe rond de hoeken zijn |
Schaduw
| Instelling | Wat doet het? |
|---|---|
| Afstand horizontaal | Hoe ver de schaduw naar links of rechts verschuift |
| Afstand verticaal | Hoe ver de schaduw naar boven of onder verschuift |
| Vervaging | Hoe zacht en wazig de schaduw is |
| Kleur | De kleur en doorzichtigheid van de schaduw |
Weergave
| Instelling | Wat doet het? |
|---|---|
| Overloop | Wat er gebeurt met inhoud die buiten het blok valt (standaard: zichtbaar) |
Positie
| Instelling | Wat doet het? |
|---|---|
| Diepteniveau (z-index) | Welk blok bovenop verschijnt als blokken overlappen |
Instellingen-tab op blok-niveau
| Instelling | Wat doet het? | Wanneer gebruik je het? |
|---|---|---|
| Naam | De interne naam van het blok | Om het blok makkelijk terug te vinden in de editor |
| Verbergen | Verbergt het blok per schermgrootte | Als je een blok alleen op mobiel of alleen op desktop wilt tonen |
| Sticky | Het blok blijft bovenaan het scherm plakken als je scrollt | Voor vaste navigatiebalken |
| Hoogte uitvullen | De inhoud vult de volledige hoogte van het blok | Handig voor verticaal centreren bij een vaste blokhoogte |
| Scrollsnelheid | Parallax-effect — het blok scrollt langzamer of sneller mee | Voor een subtiel diepte-effect |
| Achtergrond scrollsnelheid | Parallax voor de achtergrondafbeelding | De achtergrond laten achterblijven terwijl je scrollt |
3. Opmaak op element-niveau
Opmaak-tab: alle secties
Ruimte
| Instelling | Wat doet het? |
|---|---|
| Buitenkant (margin) | Ruimte rondom het element |
| Binnenkant (padding) | Ruimte tussen de rand en de inhoud |
Grootte
| Instelling | Wat doet het? |
|---|---|
| Breedte | Hoe breed het element is |
| Hoogte | Hoe hoog het element is |
Achtergrond
| Instelling | Wat doet het? |
|---|---|
| Kleur | De achtergrondkleur van het element |
Rand
| Instelling | Wat doet het? |
|---|---|
| Dikte | Hoe dik de rand is |
| Stijl | Doorgetrokken, streepjes, puntjes, of geen rand |
| Kleur | De kleur van de rand |
| Ronde hoeken | Hoe rond de hoeken zijn |
Schaduw
| Instelling | Wat doet het? |
|---|---|
| Afstand horizontaal | Hoe ver de schaduw horizontaal verschuift |
| Afstand verticaal | Hoe ver de schaduw verticaal verschuift |
| Vervaging | Hoe zacht de schaduw is |
| Kleur | De kleur van de schaduw |
Omlining
Een omlining is een extra lijn buiten de rand van het element. Het verschil met een rand: een omlining neemt geen ruimte in en verschuift andere elementen niet.
| Instelling | Wat doet het? |
|---|---|
| Dikte | Hoe dik de omlining is |
| Stijl | Doorgetrokken, streepjes of puntjes |
| Kleur | De kleur van de omlining |
| Afstand | Hoeveel ruimte er zit tussen het element en de omlining |
Kleur
| Instelling | Wat doet het? |
|---|---|
| Voorgrondkleur | De tekstkleur of standaardkleur van het element |
| Vulkleur voor SVG | De vulkleur als je een SVG-icoon gebruikt |
| Ondoorzichtigheid | Hoe doorzichtig het element is (0% = onzichtbaar, 100% = volledig zichtbaar) |
Filter
| Instelling | Wat doet het? |
|---|---|
| Vervaging | Maakt het element wazig |
| Grijstinten | Maakt het element zwart-wit (0% = kleur, 100% = volledig zwart-wit) |
| Sepia | Geeft een warme, ouderwetse tint (0% = normaal, 100% = volledig sepia) |
Transformatie
| Instelling | Wat doet het? |
|---|---|
| Schaal | Vergroot of verklein het element (1 = normaal) |
| Rotatie | Draai het element een bepaald aantal graden |
| Verplaatsing horizontaal | Verschuif het element naar links of rechts |
| Verplaatsing verticaal | Verschuif het element omhoog of omlaag |
Transformaties verschuiven het element visueel, maar het neemt nog steeds dezelfde ruimte in — de omliggende elementen verplaatsen dus niet.
Positie
| Instelling | Wat doet het? |
|---|---|
| Positie | Hoe het element gepositioneerd wordt: standaard (in de flow), relatief of absoluut |
| Boven / Onder / Links / Rechts | De afstand tot de randen bij relatieve of absolute positionering |
| Diepteniveau (z-index) | Welk element vooraan verschijnt als elementen overlappen |
Overgangen-tab
Met overgangen bepaal je hoe soepel een element verandert tussen twee staten. Bijvoorbeeld: als iemand met de muis over een knop gaat, verandert de kleur niet in één keer maar vloeiend.
Zo voeg je een overgang toe:
- Selecteer het element
- Ga naar de tab Overgangen
- Klik op + (Overgang toevoegen)
- Kies welke eigenschap je wilt animeren
- Stel de timing in
Instellingen per overgang:
| Instelling | Wat doet het? |
|---|---|
| Property | Welke eigenschap geanimeerd wordt (bijv. achtergrondkleur, schaduw, schaal) |
| Vertraging | Hoe lang er gewacht wordt voordat de animatie begint (in milliseconden) |
| Duur | Hoe lang de animatie duurt (in milliseconden) |
| Timing | Hoe het verloop van de animatie eruitziet |
Beschikbare timing-opties:
| Optie | Wat doet het? |
|---|---|
| Vloeiend | Begint langzaam, versnelt in het midden, eindigt langzaam — de meest natuurlijke optie |
| Vloeiend-in | Begint langzaam, eindigt snel |
| Vloeiend-uit | Begint snel, eindigt langzaam |
| Vloeiend-in-uit | Begint én eindigt langzaam |
| Lineair | Constante snelheid van begin tot eind |
Via het ⋮-menu kun je alle overgangen in één keer resetten als je opnieuw wilt beginnen.
Instellingen-tab (element-niveau)
| Instelling | Wat doet het? | Voor welke elementen? |
|---|---|---|
| Verbergen | Verbergt het element per schermgrootte (er zijn 5 schermgroottes) | Alle elementen |
| Vertaalbaar | Markeer het element als vertaalbaar voor meertalige websites | Teksten, koppen, knoppen |
| Afbeelding | Het bronbestand van de afbeelding | Afbeeldingen en iconen |
| Afbeelding grootte | Maximale breedte en hoogte van de afbeelding | Afbeeldingen |
| Afbeelding vulkleur | De vulkleur als het een SVG-icoon is | Iconen |
| Link | Waar het element naartoe linkt (pagina, URL, e-mail, telefoon, pop-in, etc.) | Knoppen, afbeeldingen, iconen |
| Link doel | Of de link in hetzelfde venster of een nieuw venster opent | Alle linkbare elementen |
| Aria label | Een beschrijving voor schermlezers (toegankelijkheid) | Alle elementen |
| Effect | Een scroll-animatie die afspeelt als het element in beeld komt | Alle elementen |
| Effect start | Op welk punt van het scherm het effect begint | Alle elementen |
| Effect terugkeren | Of het effect opnieuw afspeelt als je terugscrolt | Alle elementen |
| Scrollsnelheid | Parallax-effect — het element scrollt langzamer of sneller mee | Alle elementen |
| Lazy load | De afbeelding wordt pas geladen als die zichtbaar wordt — goed voor de laadsnelheid | Afbeeldingen |
Beschikbare scroll-effecten:
| Effect | Wat doet het? |
|---|---|
| Geen | Geen animatie |
| Infaden | Het element verschijnt geleidelijk |
| Inschuiven van links | Schuift van links het beeld in |
| Inschuiven van rechts | Schuift van rechts het beeld in |
| Inschuiven van boven | Schuift van boven het beeld in |
| Inschuiven van onder | Schuift van onder het beeld in |
| Inzoomen | Begint klein en groeit naar normaal formaat |
| Uitzoomen | Begint groot en krimpt naar normaal formaat |
4. Thema-niveau opmaak
Het thema bepaalt de visuele basis van je website. Open het via het penseel-icoon in de linker sidebar van de editor.
Variabelen
Kleuren — Je hebt 7 kleurvariabelen:
| Variabele | Waar gebruik je het voor? |
|---|---|
| Wit | Achtergronden, tekst op donkere vlakken |
| Zwart | Tekst, donkere achtergronden |
| Primair | Knoppen, links, accenten — je hoofdkleur |
| Secundair | Subtiele accenten, hover-effecten |
| Succes | Bevestigingen, positieve meldingen (vaak groen) |
| Gevaar | Foutberichten, waarschuwingen (vaak rood) |
| Neutraal | Randen, scheidingslijnen, subtiele achtergronden |
Lettertypes — Je hebt 3 lettertype-variabelen:
| Variabele | Waar wordt het gebruikt? |
|---|---|
| Headings | Alle koppen (H1 tot en met H6) |
| Subheadings | Subkoppen |
| Teksten | Gewone tekst, alinea's, lijsten |
Ruimtes:
| Variabele | Standaardwaarde |
|---|---|
| Blok ruimtes | 56px |
| Container breedte | 1056px |
| Kolom ruimtes | 24px |
| Card ruimtes | 28px |
| Element ruimtes | 24px |
Lay-out
In het thema kun je de opmaak instellen voor de basisonderdelen van je website:
| Onderdeel | Wat kun je instellen? |
|---|---|
| Pagina's | Achtergrond |
| Blokken | Achtergrond, Grootte, Lay-out, Ruimte, Rand, Schaduw, Vormen, Weergave, Positie |
| Containers | Achtergrond, Grootte, Lay-out, Ruimte, Rand, Schaduw, Positie |
| Rijen | Achtergrond, Lay-out, Ruimte, Rand, Schaduw, Positie |
| Kolommen | Achtergrond, Lay-out, Ruimte, Rand, Schaduw, Transformatie, Typografie, Weergave, Positie |
Elementen per type
In het thema vind je ook voorinstellingen voor elk type element. Je kunt daar de standaard opmaak aanpassen:
| Elementtype | Aantal varianten |
|---|---|
| Cards | 6 |
| Headings | 8 |
| Teksten | 7 |
| Nummers | 4 |
| Buttons | 9 |
| Handlers | 1 |
| Controls | 10 |
| Media | 8 |
| Iconen | 10 |
| Maps | 1 |
| Viewports | 4 |
| Scheiders | 2 |
| Formulieren | 10 |
5. Responsief ontwerp (schermgroottes)
Je website wordt op verschillende apparaten bekeken. Mach3Blocks heeft vijf schermgroottes waarvoor je aparte instellingen kunt maken:
| Schermgrootte | Schermbreedte | Typisch apparaat |
|---|---|---|
| Desktop | 1280px en breder | Desktopcomputers |
| Laptop | 1024–1280px | Laptops |
| Tablet | 768–1024px | Tablets (liggend) |
| Telefoon liggend | 480–768px | Telefoons (liggend) |
| Telefoon staand | Smaller dan 480px | Telefoons (staand) |
Via "Schermgrootte waarde toevoegen" stel je per schermgrootte een afwijkende waarde in. Er zijn ook gecombineerde opties beschikbaar, zoals "tablet en groter" of "laptop en kleiner".
Verborgen blokken en elementen weer zichtbaar maken
Heb je blokken of elementen verborgen (via Verbergen) en wil je ze terughalen? Daarvoor zijn er in het ⋮-menu twee acties:
- Toon verborgen blokken — staat in het ⋮-menu van de pagina-werkbalk en maakt alle blokken zichtbaar die op de huidige schermgrootte verborgen zijn.
- Toon verborgen elementen — staat in het ⋮-menu van de blok-werkbalk en maakt alle verborgen elementen binnen dat blok weer zichtbaar.
⚠️ Let op: dit is definitief, geen tijdelijke weergave. Deze acties zetten de verberg-instelling écht uit en slaan dat op — het is dus geen "even kijken en daarna weer verbergen". Ze werken bovendien alleen voor de schermgrootte die op dat moment actief is; op andere schermgroottes verborgen blokken of elementen blijven verborgen. Bij Toon verborgen blokken krijg je eerst een bevestiging; Toon verborgen elementen wordt meteen uitgevoerd.
Zie je deze opties niet in het ⋮-menu? Dan heb je er geen rechten voor — dit valt onder de opmaakrechten voor websites.
6. Kleurmodi uitgelegd
| Kleurmodus | Achtergrond | Tekst | Wanneer gebruik je het? |
|---|---|---|---|
| Licht | Wit of licht | Donker | De standaard voor de meeste blokken |
| Licht tint | Lichtgekleurd | Donker | Om blokken visueel van elkaar te onderscheiden |
| Donker tint | Donkergekleurd | Licht | Als je nadruk wilt zonder helemaal donker te gaan |
| Donker | Zwart of donker | Licht | Voor footers, call-to-action blokken of hero-secties |
Met het vergrendel-icoontje (slotje) zet je de kleurmodus per blok vast.
7. Beschikbare eenheden
Bij het instellen van waardes (zoals breedte, hoogte of ruimte) kun je verschillende eenheden kiezen:
| Eenheid | Wat is het? | Wanneer gebruik je het? |
|---|---|---|
| px | Pixels — een vaste grootte | Als je een exacte, pixelprecieze waarde wilt |
| rem | Relatief aan de basislettergrootte van je website | Voor waarden die meeschalen als de basisgrootte verandert |
| em | Relatief aan de lettergrootte van het element zelf | Voor waarden die relatief zijn aan de tekst erin |
| % | Percentage van het bovenliggende element | Voor flexibele breedtes en hoogtes |
| vw | Percentage van de schermbreedte | Als een element altijd een deel van het scherm moet vullen |
| vh | Percentage van de schermhoogte | Voor fullscreen blokken (100vh = heel het scherm) |
| cqw | Container query breedte | Voor geavanceerd responsief ontwerp |
| cqh | Container query hoogte | Voor geavanceerd responsief ontwerp |
| calc | Een berekende waarde | Om eenheden te combineren, bijv. "100% - 24px" |
8. Opmaak resetten en opslaan
Via het ⋮-menu in de Opmaak-tab kun je:
- Opmaak resetten — alle instellingen op het huidige niveau verwijderen, zodat de instellingen van het hogere niveau weer gelden
- Opmaak opslaan in opmaakniveau: Thema — de huidige opmaak doorvoeren naar het thema, zodat het overal geldt
De editor slaat alle wijzigingen automatisch op — je hoeft nergens op "Opslaan" te klikken.
Tips
- Begin bij het thema: stel daar je kleuren, lettertypes en ruimtes in
- Gebruik kleurmodi in plaats van handmatig kleuren per blok te kiezen
- Test je website op alle schermgroottes via de apparaat-iconen in de toolbar
- Werk van grof naar fijn: eerst de achtergrond en ruimtes, dan pas schaduwen en animaties
- Houd overgangen subtiel: 200–300 milliseconden met timing "Vloeiend" werkt voor de meeste hover-effecten
Wanneer gebruik je dit
- Je zoekt een compleet overzicht van alle opmaak-instellingen
- Je wilt weten welke opties er zijn op blok-niveau versus element-niveau
- Je wilt begrijpen hoe kleurmodi, staten, schermgroottes en eenheden werken