Samenvatting
Via de Blok code popup kun je eigen HTML, LESS (opmaak) en JavaScript toevoegen aan één specifiek blok op een pagina. Dit geeft je volledige controle over hoe dat ene blok eruitziet en werkt, zonder dat het de rest van je website beïnvloedt.
Hoe werkt het
Waar vind je de blok code editor?
- Open de editor van een pagina
- Klik op de linkerrand van een blok om het te selecteren
- Klik in de rechter verticale werkbalk op het </> icoon (Blok code)
Wat zie je in de popup?
De popup heeft drie tabbladen:
| Tabblad | Waarvoor? |
|---|---|
| HTML | De structuur van het blok aanpassen — welke elementen er staan en hoe ze genest zijn |
| LESS | De opmaak van het blok bepalen. LESS is een uitgebreide versie van CSS die automatisch wordt omgezet bij publicatie |
| JavaScript | Interacties en animaties toevoegen die alleen voor dit blok gelden |
Elk tabblad bevat een code-editor. Klik op Opslaan om je wijzigingen door te voeren, of op Annuleren om te sluiten zonder op te slaan.
Voor welke blokken geldt de code?
Dat hangt af van het type blok:
- Een gewoon blok (niet-globaal): de code geldt alleen voor dit specifieke blok op deze pagina
- Een globaal blok (uit de blokbibliotheek): de code geldt voor alle pagina's waar dit blok wordt gebruikt
LESS-code is automatisch beperkt tot het blok
Goed om te weten: LESS-code die je hier schrijft, is automatisch beperkt (gescopet) tot het blok. Je hoeft geen extra omsluitende selector te schrijven — de stijlen raken alleen dit blok.
Wat is het verschil met pagina-code en website-code?
| Type | Wat beïnvloedt het? | Waar vind je het? |
|---|---|---|
| Website code | Alle pagina's van je website | Editor toolbar → Website code |
| Pagina code | Alleen deze pagina | Editor toolbar → Pagina code |
| Blok code | Alleen dit blok | Rechter toolbar → </> icoon |
⚠️ Let op: Het is niet bevestigd of aanpassingen via Blok code worden overschreven als je het blok bijwerkt vanuit de blokbibliotheek. Maak bij twijfel een backup.