Samenvatting
Wil je aanpassen hoe je website eruitziet? Denk aan kleuren, lettertypes, ruimtes tussen elementen en randen. In Mach3Blocks regel je dat allemaal via het opmaaksysteem. Het handige is dat dit systeem in drie lagen werkt: je kunt iets instellen voor je hele website, voor één blok, of voor één specifiek element. Zo houd je je website consistent én kun je toch uitzonderingen maken waar dat nodig is.
Hoe werkt het
Het systeem met drie lagen
Elke visuele eigenschap van je website — zoals een kleur of lettertype — wordt bepaald door drie mogelijke lagen:
| Laag | Wat bepaalt het? |
|---|---|
| Thema | De standaard voor je hele website. Stel je hier een kleur in, dan geldt die overal. |
| Blok | Overschrijft het thema voor één specifiek blok op je pagina. |
| Element | Overschrijft alles voor één los element, zoals een knop of kop. |
Een lagere laag wint altijd van een hogere. Dus als je op thema-niveau je koppen zwart maakt, maar voor één blok wit instelt, dan worden de koppen in dát blok wit.
In het paneel aan de rechterkant van de editor zie je bovenaan een dropdown waarmee je kunt wisselen tussen deze lagen. Zo weet je altijd op welke laag je aan het werken bent.
Wat kun je allemaal aanpassen?
Ruimtes
Dit gaat over de afstand rondom en binnen elementen:
- Buitenkant (margin) — de ruimte rondom een element, dus de afstand tot andere elementen
- Binnenkant (padding) — de ruimte bínnen een element, tussen de rand en de inhoud
Standaardwaarden zijn bijvoorbeeld: blokken hebben 56px ruimte, de container (de breedte van je content) is 1056px, en kolommen hebben 24px tussenruimte.
Typografie
Hier stel je alles in wat met tekst te maken heeft: welk lettertype je gebruikt, hoe groot de tekst is, welke kleur, hoe de tekst is uitgelijnd en hoeveel ruimte er tussen regels zit.
Achtergrond
Je kunt een achtergrondkleur of -afbeelding instellen. Bij afbeeldingen bepaal je ook de positie, grootte en of de afbeelding herhaald moet worden.
Randen
Voeg een rand toe aan een element. Je bepaalt hoe dik de lijn is, welke stijl (doorgetrokken, streepjes, puntjes), welke kleur, en of de hoeken afgerond zijn.
Schaduw
Geef een element een schaduweffect. Je stelt in hoe ver de schaduw verschuift, hoe zacht de schaduw is en welke kleur die heeft. Dit geeft een gevoel van diepte.
Het opmaakpaneel
Wanneer je een element selecteert in de editor, verschijnt rechts een paneel met secties:
- RUIMTES — voor margin en padding
- GROOTTE — voor breedte en hoogte
- ACHTERGROND — voor kleur en afbeelding
- RAND — voor randen rondom het element
- SCHADUW — voor schaduweffecten
- POSITIE — voor de positionering van het element
Ondoorzichtigheid (transparantie)
Met deze instelling bepaal je hoe doorzichtig een element is:
- 100% betekent volledig zichtbaar — je ziet niets erdoorheen
- 0% betekent volledig onzichtbaar — het element is er wel, maar je ziet het niet
Let op: deze instelling geldt voor het hele element inclusief alles wat erin staat (tekst, afbeeldingen, etc.).
Omlining
Een omlining is een lijn die buiten de rand van je element wordt getekend. Het verschil met een gewone rand:
- Een rand is onderdeel van het element en neemt ruimte in. Andere elementen schuiven op.
- Een omlining zweeft er als het ware omheen en heeft geen invloed op de rest van je pagina.
Je kunt de dikte, stijl, kleur en afstand van de omlining instellen.
Filters
Met filters pas je visuele effecten toe op een heel element:
| Filter | Wat doet het? |
|---|---|
| Vervaging | Maakt het element wazig, alsof je door matglas kijkt |
| Grijstinten | Maakt het element zwart-wit |
| Sepia | Geeft een warme, ouderwetse kleur — handig voor een vintage uitstraling |
Transformaties
Met transformaties verander je hoe een element eruitziet zonder dat de rest van je pagina verschuift:
| Transformatie | Wat doet het? |
|---|---|
| Schaal | Maakt het element groter of kleiner |
| Rotatie | Draait het element |
| Verplaatsing horizontaal | Schuift het element naar links of rechts |
| Verplaatsing verticaal | Schuift het element omhoog of omlaag |
Transformaties zijn vooral handig in combinatie met hover-effecten. Je kunt bijvoorbeeld een knop iets laten vergroten als iemand er met de muis overheen gaat.
Standaard themawaarden
Als je een nieuwe website aanmaakt, zijn er al standaardwaarden ingesteld:
Kleuren: Er zijn 7 kleurcategorieën beschikbaar — Wit, Zwart, Primair (met 3 tinten), Secundair (met 3 tinten), Succes, Gevaar en Neutraal (met 10 tinten). Je kunt ze allemaal aanpassen aan je eigen huisstijl.
Lettertypes: Standaard staan er drie lettertypes ingesteld:
- Koppen gebruiken Roboto Light
- Subkoppen gebruiken Roboto Medium
- Gewone tekst gebruikt Roboto Regular
Ruimtes:
| Wat | Standaardwaarde |
|---|---|
| Blok ruimtes | 56 px |
| Container breedte | 1056 px |
| Kolom ruimtes | 24 px |
| Card ruimtes | 28 px |
| Element ruimtes | 24 px |
Welke laag gebruik je wanneer?
- Wil je iets voor je hele website instellen? → Pas het thema aan
- Wil je iets voor één blok anders? → Pas het blok aan
- Heb je een eenmalige uitzondering nodig? → Pas het element aan
Begin altijd bij het thema. Hoe minder je op element-niveau aanpast, hoe makkelijker je website te onderhouden is.
Wanneer gebruik je dit
- Je wilt begrijpen hoe het opmaaksysteem van Mach3Blocks werkt
- Je zoekt een overzicht van alle dingen die je kunt aanpassen (ruimtes, kleuren, lettertypes, randen, etc.)
- Je wilt weten wat de standaardinstellingen zijn van een nieuw thema
Veelgestelde vragen
Wat is het verschil tussen margin en padding?
Margin is de ruimte aan de buitenkant van een element — de afstand tot andere elementen. Padding is de ruimte aan de binnenkant — tussen de rand van het element en de inhoud erin.
Moet ik elke kleur per element instellen?
Nee, dat hoeft juist niet. Stel je kleuren in op thema-niveau, dan gelden ze automatisch voor je hele website. Alleen als je een uitzondering nodig hebt, pas je iets aan op blok- of element-niveau.
Wat als ik een instelling wil terugzetten?
Via het menu in de opmaak-tab kun je de opmaak resetten. Dan gelden weer de instellingen van de laag erboven (bijvoorbeeld het thema).