Samenvatting
Het thema bepaalt hoe je hele website eruitziet: welke kleuren worden gebruikt, welke lettertypes, hoeveel ruimte er tussen elementen zit, en hoe knoppen, titels en teksten worden vormgegeven. Door je thema goed in te stellen voordat je begint met bouwen, bespaar je later veel tijd — en je website ziet er overal consistent uit.
Hoe werkt het
Elke website in Mach3Blocks heeft een eigen thema. Je kunt het thema zien als de "huisstijl-instellingen" van je site. Alles wat je hier instelt — kleuren, lettertypes, afstanden — wordt automatisch toegepast op elk nieuw element dat je plaatst. Zo hoef je niet bij elk element apart dezelfde kleur of hetzelfde lettertype in te stellen.
Waar vind je het thema?
De thema-knop staat in de editor, naast de Website instellingen-knop. Klik erop om het thema-scherm te openen.
Het thema-scherm
Het thema-scherm is opgedeeld in drie delen:
Links — Categorieën
Hier navigeer je door alles wat je kunt instellen:
| Categorie | Wat stel je hier in |
|---|---|
| Variabelen | Kleuren, lettertypes en standaard afstanden |
| Lay-out | Hoe pagina's, blokken, containers, rijen en kolommen eruitzien |
| Elementen | Hoe specifieke onderdelen eruitzien: kaarten, koppen, teksten, knoppen, formulieren, media, iconen en meer |
Midden — Preview
Een live voorbeeld van hoe je instellingen eruitzien. Als je bijvoorbeeld "Headings" selecteert, zie je alle soorten koppen naast elkaar — zo kun je direct het effect van je wijzigingen beoordelen.
Rechts — Styling
Hier pas je de instellingen aan: afstanden (marges en padding), typografie (lettertype, grootte, kleur), en overgangen (animaties). Bovenin kun je wisselen tussen de Standaard-staat en de Mouseover-staat (hoe iets eruitziet als een bezoeker er met de muis overheen gaat).
Opmaakniveaus: hoe het thema samenwerkt met blokken en elementen
Mach3Blocks werkt met drie niveaus van opmaak, van breed naar specifiek:
| Niveau | Wat het doet | Prioriteit |
|---|---|---|
| Thema | Geldt voor de hele website | Laagste — dit is de basis |
| Blok | Geldt alleen voor dat ene blok | Midden |
| Element | Geldt alleen voor dat ene element | Hoogste |
Een hoger niveau wint altijd van een lager niveau. Voorbeeld: stel je in het thema in dat tekst blauw is, maar op blokniveau stel je wit in — dan is de tekst in dat blok wit, terwijl het overal elders blauw blijft. En als je op elementniveau een tekst rood maakt, wint dat weer van zowel het blok als het thema.
De standaard kleuren
Je thema bevat zeven kleurgroepen die elk een eigen rol hebben:
| Kleurgroep | Waarvoor | Standaard |
|---|---|---|
| Wit | Achtergronden | 1 tint |
| Zwart | Tekst | 1 tint |
| Primair | Knoppen, links, accenten — je hoofdkleur | 3 blauwtinten |
| Secundair | Subtielere elementen | 3 grijstinten |
| Succes | Bevestigingen, succesmeldingen (zoals "formulier verzonden") | 2 groentinten |
| Gevaar | Foutmeldingen, waarschuwingen | 2 roodtinten |
| Neutraal | Randen, achtergronden, schaduwen | 10 grijstinten |
De standaard lettertypes
| Tekstsoort | Lettertype | Gewicht |
|---|---|---|
| Koppen | Roboto Light | 300 (dun) |
| Subkoppen | Roboto Medium | 500 (normaal-dik) |
| Lopende tekst | Roboto Regular | 400 (normaal) |
De standaard afstanden
| Wat | Standaardwaarde | Uitleg |
|---|---|---|
| Blok ruimtes | 56 px | De verticale ruimte tussen blokken op je pagina |
| Container breedte | 1056 px | Hoe breed de content maximaal is (de rest is witruimte) |
| Kolom ruimtes | 24 px | De ruimte tussen kolommen die naast elkaar staan |
| Card ruimtes | 28 px | De binnenruimte (padding) van kaarten |
| Element ruimtes | 24 px | De ruimte tussen elementen binnen een blok |
Responsive design
Bovenin het thema-scherm staan icoontjes voor desktop, tablet en mobiel. Hiermee kun je controleren hoe je instellingen eruitzien op verschillende schermformaten, en kun je per formaat specifieke waarden instellen. Zo kun je bijvoorbeeld op mobiel een kleiner lettertype gebruiken dan op desktop.
Belangrijk: Thema-wijzigingen gelden voor je hele website. Elke website heeft een eigen thema — je kunt thema's niet delen of kopiëren tussen websites.
Stappenplan — je thema instellen
- Open het thema via de thema-knop in de editor
- Stel eerst de variabelen in — kleuren, lettertypes en afstanden
- Configureer de lay-out — hoe pagina's, blokken en containers eruitzien
- Style de elementen — hoe koppen, knoppen, teksten en andere onderdelen eruitzien
- Test op verschillende apparaten via de device-knoppen bovenin
- Begin met bouwen — alle elementen die je plaatst krijgen automatisch de stijl uit je thema