Samenvatting
Met code-toegang kun je eigen HTML, LESS en JavaScript toevoegen aan blokken, pagina's en je hele website. Dit geeft je volledige controle over hoe iets eruitziet en werkt. Je kunt code-toegang aanvragen via support@mach3builders.nl.
Hoe werkt het
Blokcode bewerken
Open de code-editor door op het </> icoon te klikken links naast het blok in de editor. Je ziet dan drie tabbladen:
- HTML — hiermee pas je de structuur van het blok aan (welke elementen er staan en hoe ze genest zijn)
- LESS — hiermee bepaal je de opmaak van het blok. LESS is een uitgebreide versie van CSS — het wordt bij publicatie automatisch omgezet naar gewone CSS
- JavaScript — hiermee voeg je interacties en animaties toe aan het blok
Handige trucjes in de editor
Je kunt stukken LESS-code speciaal behandelen voor de editor:
Editor Ignore — code die je wél wilt publiceren, maar niet in de editor wilt laden (bijvoorbeeld animaties die de editor vertragen):
// editor ignore start
...jouw code...
// editor ignore end
Editor Only — code die je alleen in de editor wilt tonen, maar niet op de live website (bijvoorbeeld hulplijnen):
// editor only start
...jouw code...
// editor only end
Pagina-code
Naast blokcode kun je ook code toevoegen die alleen voor één specifieke pagina geldt. Klik op de pagina-code knop linksboven in de editor. CSS of JavaScript die je hier plaatst, wordt alleen op die ene pagina uitgevoerd.
Website-code
Wil je CSS die op alle pagina's geldt? Gebruik dan de website-code knop linksboven in de editor. Dit bewerkt het bestand website.css — hetzelfde bestand dat ook het thema van je website gebruikt. Wijzigingen hier zijn ook zichtbaar als je via de UI de thema-instellingen bekijkt.
HEAD en BODY scripts
Scripts die je op de hele website wilt laden (zoals analytics of een chatwidget) voeg je toe via de Code bewerken-editor (open die vanaf je website). Je ziet aparte velden voor de HEAD-sectie en de BODY-sectie.
Goed om te weten: De code-editors — blokcode, pagina-code, website-code én de Head/Body-velden — vallen allemaal onder code-toegang. Heb je geen code-toegang, dan zie je deze niet en krijg je bij een codehandeling een foutmelding (403). Vraag code-toegang aan via support@mach3builders.nl.
Technische basis
Mach3Blocks maakt gebruik van:
- jQuery — een JavaScript-bibliotheek die je kunt gebruiken voor interacties
- LESS — voor opmaak, wordt automatisch gecompileerd naar CSS bij publicatie
- Flexbox — het layout-systeem waarmee elementen gepositioneerd worden
⚠️ Let op: Zorg dat je code voldoet aan de M3B-regels. Als je HTML schrijft die niet aan de regels voldoet, kan het blok wel werken in de browser maar niet meer bewerkbaar zijn via de editor. Zie het artikel Valide code voor alle regels.