HTML Block
Voeg custom HTML, CSS en JavaScript toe voor geavanceerde content en externe widgets.
Preview
1<div class="card">
2 <h3>Welkom</h3>
3 <p>Dit is een custom widget.</p>
4 <button>Start</button>
5</div>
Overzicht
Het HTML Block geeft je volledige controle over de content door middel van custom HTML, CSS en JavaScript. De code wordt gerenderd in een beveiligde, sandboxed iframe. Dit block is bedoeld voor gevorderde gebruikers die specifieke content willen bouwen die niet met standaard blocks mogelijk is, zoals custom calculators, embedded third-party widgets of geavanceerde layouts.
Technische kennis vereist
Dit block vereist kennis van HTML, CSS en eventueel JavaScript. Als je geen code-ervaring hebt, gebruik dan de Widget Builder om met AI een widget te genereren.Hoe het werkt
1Voeg het block toe
Klik op + of typ
/html in het slash command veld.2Schrijf je code
Voer je HTML in de code-editor in. Je kunt ook inline CSS en JavaScript gebruiken.
3Preview het resultaat
De gerenderde output verschijnt direct onder de code-editor in een preview-frame.
4Pas de hoogte aan
Stel de hoogte van de iframe in op basis van je content. De breedte is altijd 100%.
Instellingen
| Instelling | Beschrijving | Standaard |
|---|---|---|
| HTML/CSS/JS | De broncode van de custom content | - |
| Hoogte | De hoogte van de iframe in pixels | 300px |
| Sandbox | Beveiligde iframe zonder toegang tot de bovenliggende pagina (altijd aan) | Aan |
| Animatie | Geen, Fade in, Slide omhoog, Slide links, Slide rechts, Bounce, Blur in, Zoom in | Geen |
| Span achtergrond | Kleur, afbeelding of video als achtergrond | Wit |
Tips & best practices
Test altijd in de preview
Code-fouten zijn lastig te debuggen zonder preview. Test je HTML na elke wijziging.Houd het simpel
Gebruik het HTML Block voor dingen die echt niet met standaard blocks kunnen. Voor de meeste content zijn Tekst, Afbeelding en Video blocks beter geschikt.Beveiliging
Het HTML Block draait in een sandboxed iframe. De code heeft geen toegang tot de bovenliggende pagina, gebruikerssessie of het leerplatform. Dit beschermt je deelnemers.Gerelateerde blocks
- Widget Builder - Laat AI een widget genereren zonder zelf code te schrijven.
- Embed - Voor het insluiten van externe webpagina's en video's via URL.