Samenvatting
In Mach3Blocks kun je op drie niveaus eigen code toevoegen: voor je hele website, voor één pagina, of voor één specifiek blok. Zo kun je trackingscripts, extra opmaak, widgets en andere code precies op de juiste plek kwijt — zonder dat het de rest van je website beïnvloedt.
Hoe werkt het
Niveau 1: Website-brede code
Waar vind je dit? Via Code bewerken op websiteniveau (hiervoor heb je toegang tot Code bewerken nodig)
Hier voeg je code toe die op alle pagina's van je website geldt:
| Veld | Wat komt hier? |
|---|---|
| Head | Code die in het head-gedeelte van elke pagina komt — wees hier voorzichtig mee, fouten hier kunnen je hele pagina breken |
| Body | Code die bovenin het body-gedeelte van elke pagina komt — ook hier geldt: fouten kunnen je pagina breken |
| Trackingcode | Speciaal veld voor analytics en tracking (zoals Google Analytics) — gebruik dit veld bij voorkeur, het houdt je trackingcode netjes gescheiden van de rest |
Niveau 2: Pagina-specifieke code
Waar vind je dit? Via Code bewerken op paginaniveau
Hier voeg je code toe die alleen op deze ene pagina werkt:
| Veld | Wat komt hier? |
|---|---|
| Head | Extra code in het head-gedeelte, alleen voor deze pagina |
| Body | Extra code in het body-gedeelte, alleen voor deze pagina |
| Conversiecode | Trackingscript voor alleen deze pagina (bijv. conversie-tracking op een bedankpagina) |
⚠️ Let op: Niet iedereen heeft toegang tot deze code-editor. Hiervoor heb je toegang tot Code bewerken nodig.
Niveau 3: Blok-specifieke code
Waar vind je dit? Selecteer een blok in de editor en open de blok-code-editor (zie Coderen in blokken)
Hier voeg je code toe die alleen voor dit ene blok geldt:
| Taal | Waarvoor? |
|---|---|
| LESS | Opmaak specifiek voor dit blok (LESS is een uitgebreide versie van CSS — het wordt automatisch omgezet) |
| JavaScript | Interacties en animaties die alleen bij dit blok horen |
In welke volgorde wordt code geladen?
- Website Head-code (geldt voor alle pagina's)
- Pagina Head-code (geldt voor deze specifieke pagina)
- Blok-code (geldt voor dit specifieke blok)
- Website Body-code
Praktijkvoorbeeld: een extern formulier of widget insluiten
Veel externe tools — denk aan een nieuwsbrief-aanmeldformulier, een reserverings- of afsprakenwidget, een reviewsblok of een chatvenster — geven je een stukje insluitcode (embed code) om op je eigen site te zetten. Zo krijg je die functionaliteit op je website zonder het zelf te bouwen. Er zijn twee manieren, afhankelijk van wat de externe tool aanlevert:
- Krijg je een
<iframe>-code of een insluit-URL? Gebruik dan het iframe-element (Iframes) in de editor en wijs het naar de URL van de externe tool. Het externe formulier verschijnt dan in een kader op je pagina. - Krijg je een HTML- of
<script>-snippet? Plak die dan in de blok-code op blokniveau (zie Niveau 3 hierboven), op het blok waar het formulier moet komen te staan.
Een paar tips:
- Test altijd op de gepubliceerde website. Sommige externe embeds laden hun inhoud pas op de live site en niet in de editor.
- Pas je de embed later aan bij de externe tool zelf? Dan hoef je op je Mach3Blocks-site meestal niets te wijzigen — de insluitcode toont vanzelf de actuele versie.
💡 Welke externe tool je gebruikt (bijvoorbeeld voor je nieuwsbrief) maakt niet uit: zolang die insluitcode of een iframe-URL levert, kun je hem op deze manier op je site tonen.
Veelgestelde vragen
Waar zet ik Google Analytics of Tag Manager?
Gebruik het Trackingcode-veld via Code bewerken (Websitecode). Dit is speciaal bedoeld voor analytics en houdt het netjes gescheiden van je andere code.
Waar zet ik opmaak die alleen één blok betreft?
Gebruik de blok-LESS. Die opmaak geldt alleen voor dat ene blok en overschrijft niet je website-brede stijlen.
Wat als mijn code een pagina breekt?
Bij het opslaan controleert Mach3Blocks je code (de HTML in Head/Body/Trackingcode/Conversiecode, en de LESS/JavaScript in blokken). Zit er een fout in, dan verschijnt de melding "Er zit een fout in de code. Weet je zeker dat je wilt opslaan?". Je kunt dan alsnog opslaan (toch opslaan) of eerst de fout herstellen. Test grote wijzigingen sowieso eerst in de preview vóórdat je publiceert.
Handige functies van de code-editor
De code-editor (Monaco) heeft een paar hulpmiddelen die het werken met code makkelijker maken:
- Emmet — typ een korte afkorting (bijvoorbeeld
div.kaart>h2+p) en druk op Tab om die uit te vouwen naar volledige HTML. Werkt ook voor CSS/LESS. - Snippets en autoaanvulling — terwijl je typt stelt de editor stukjes code voor, plus je beschikbare variabelen, collectievelden en objectwaardes.
// require:— bibliotheken inladen — zet bovenaan je JavaScript een regel als// require: <naam>/<versie>om een door Mach3Blocks meegeleverde bibliotheek automatisch mee te laden op je gepubliceerde pagina. Dit werkt alleen voor bibliotheken die Mach3Blocks meelevert; de require-regel zelf wordt bij publiceren automatisch verwijderd.