Code

Code #

Met de widget Code voeg je eigen code toe aan je pagina. Denk aan HTML, CSS of JavaScript (bijv. een embed van een extern script of een eigen blokje markup). Handig als je iets wilt tonen wat (nog) geen standaard widget heeft

Wanneer gebruik je de widget Code
#

Je gebruikt de Code-widget wanneer je eigen code wilt toevoegen aan je pagina.

Dit is handig als je:

• Een externe embed wilt plaatsen (bijv. kalender, formulier, chat-bubble, kaart).

• Kleine visuele of functionele uitbreidingen wilt doen met eigen HTML/CSS/JS.

• Een dienst wilt integreren via een code-snippet die je van een leverancier krijgt

Uitleg #

1. Zorg dat je in Bouwen zit en klik links op het plusje (Voeg widget toe).
2. Kies onder Anders voor Code en sleep deze naar de gewenste plek op je pagina.
3. Zodra je de widget hebt geplaatst, zie je het scherm Broncode. Dit is een zwart invoerveld waarin je je eigen code kunt plaatsen:
   • HTML – voor de opmaak of embeds (bijv. een iframe van YouTube of een kalender).
   • CSS – voor extra styling van het element.
   • JavaScript – voor interactieve functies of scripts van externe diensten.
   • Alles wat je hier plakt, wordt direct geladen op je pagina.
4. Klik op de widget. Je ziet nu een balk met opties:
   • Bewerk code – open het codeveld om je HTML, CSS of JavaScript aan te passen.
   • Instellingen (tandwiel) – stel extra opties in voor het codevenster:
     • De code bepaalt de kleur – kies de programmeertaal (bijv. HTML, CSS of JavaScript) zodat de juiste kleuren gebruikt worden in de editor.
     • Thema – kies een lichte of donkere achtergrond voor het codeveld.
     • Voeg rijnummers toe – laat rijnummers zien in de editor, handig bij langere code.
   • Uitlijning – plaats de widget links of in het midden.
   • Animatie (klokje) – voeg een effect toe, zoals infaden of inschuiven.
   • Kopiëren – maak een kopie van de code-widget.
   • Prullenbak – verwijder de widget.
5. Ga met je muis over de widget. Links verschijnt een tandwieltje met Kolom. Hier kun je extra instellingen aanpassen voor de container, zoals:
   • Achtergrondkleur of -afbeelding.
   • Rand of schaduw rondom het codeblok.
   • Extra ruimte (marges/padding) om het blok netjes te laten aansluiten.
6. Klik op Opslaan boven in het scherm. Via het oogje links kun je bekijken hoe de code eruitziet voor je bezoekers.

💡 Extra tip #

Gebruik alleen code van betrouwbare bronnen (zoals YouTube of Google Maps). Vermijd code van onbekende websites, want die kan fouten geven of je website onveilig maken.