Samenvatting
In Mach3Blocks kun je technisch gezien alle HTML-tags gebruiken die je wilt. Maar alleen tags die op de zogeheten "whitelist" staan, worden door de editor herkend als elementen die je kunt aanklikken en bewerken. Tags die niet op de lijst staan werken prima in de browser, maar je kunt ze niet via de visuele editor selecteren of aanpassen.
Hoe werkt het
Waarom is dit belangrijk?
Als je eigen HTML schrijft die niet aan de structuurregels van Mach3Blocks voldoet, dan kan het blok er in de browser prima uitzien — maar elementen zijn niet meer bewerkbaar via de visuele editor. Hoe beter je de regels volgt, hoe beter je blok samenwerkt met de editor.
De basisregels
Gridstructuur: Elementen horen altijd binnen de gridstructuur: container → rij → kolom. Sla je lagen over, dan werkt de editor niet goed met je blok.
Kleurmodus: Elk element heeft één van de vijf kleurmodus-klassen nodig: light, light-shade, dark, dark-shade of negative. Dit bepaalt welk kleurenschema het element gebruikt.
Data-attributen: Sommige elementen hebben verplichte extra informatie nodig:
| Attribuut | Wanneer nodig? |
|---|---|
| data-lazy_load | Altijd op afbeeldingen, video's en iframes — zorgt ervoor dat ze pas laden als ze in beeld komen |
| data-translatable="false" | Op elementen die niet vertaald mogen worden, zoals een logo |
| data-color="fill" | Op iconen en logo-elementen |
Herhalende items: Gebruik article-tags voor items die herhaald worden (zoals producten in een overzicht). Ze bevatten allemaal dezelfde elementstructuur.
Wat als mijn code niet aan de regels voldoet?
⚠️ Pas op: Onvolledige of foutieve HTML/CSS kan de hele pagina ontoegankelijk maken in de editor. Als dat gebeurt: gebruik de debugmodus en klik op Content uitschakelen om alsnog bij de code te komen. Blokken met fouten worden rood gemarkeerd wanneer je "Valideren" gebruikt in de debugmodus.
Aanbeveling
Volg de regels zo nauwkeurig mogelijk — niet omdat het verplicht is, maar omdat het je blok het meest bewerkbaar houdt. Hoe meer je je aan de structuur houdt, hoe makkelijker je later aanpassingen kunt maken via de visuele editor.
Volledige regels (referentie)
Toegestane HTML-tags
section, header, footer, nav, div, article, p, a, img, span, ul, li, form, input, textarea, select, option, label, button, fieldset, video, svg, circle, br, x-gallery
Toegestane element-klassen
| Groep | Klassen |
|---|---|
| Kopteksten | heading-1 t/m heading-8 |
| Tekst | text-1 t/m text-7, text-bold, text-italic, text-link |
| Knoppen | button-1 t/m button-6, button-wrapper |
| Afbeeldingen/media | media-1 t/m media-4, media-6, media-wrapper |
| Iconen | icon-1 t/m icon-3, icon-wrapper |
| Kaarten | card-1 t/m card-5 |
| Nummers | number-1 t/m number-4 |
| Menu's | menu-1 t/m menu-6, menu-item, menu-link, menu-icon, menu-image, menu-name, menu-level, menu-separator, menu-description |
| Hamburgermenu | hamburger-menu-1 t/m hamburger-menu-4 |
| Dropdownmenu | dropdown-menu-1 t/m dropdown-menu-3 |
| Filtermenu | filter-menu-1 t/m filter-menu-3 |
| Navigatie | navigation |
| Formulieren | form-1 t/m form-3, form-field-1 t/m form-field-9, form-button, form-label, form-placeholder, form-row, form-options, form-option |
| Besturing | control-1 t/m control-7, control-wrapper |
| Scheidingslijnen | separator-1, separator-2 |
| Viewports | viewport-1 t/m viewport-4 |
| Iframes | iframe-1 |
| Kaarten (maps) | map-1, map-2 |
| Handler | handler-1 |
| Social sharing | sharethis-1 |
Structurele klassen (container, row, col, box) mogen vrij genummerd worden.
Verplichte data-attributen
- data-lazy_load — altijd op afbeeldingen, video's en iframe-elementen
- data-color="fill" — op icoon- en logo-elementen
- data-translatable="false" — op elementen die niet vertaalbaar mogen zijn
Wat werkt wel maar is niet bewerkbaar via de editor?
- Zelfverzonnen class-namen (de editor herkent ze niet)
- Het data-size attribuut
- HTML-tags die niet op de bovenstaande lijst staan