--- title: "Sectie aangepaste code" slug: "html-block" updated: 2026-06-22T09:03:17Z published: 2026-06-22T09:03:17Z canonical: "docs.document360.com/html-block" --- > ## Documentation Index > Fetch the complete documentation index at: https://docs.document360.com/llms.txt > Use this file to discover all available pages before exploring further. # Sectie aangepaste code De sectie Aangepaste code laat je je eigen HTML en CSS direct op de homepage van de kennisbank inbedden. Het bestaat voor situaties waarin de standaard bodyblocks zoals Rich text, multicolumn-kaarten, afbeelding met tekst - je niet de lay-out of functionaliteit geven die je nodig hebt. Met dit blok heb je volledige controle over welke renders en hoe het eruitziet, waardoor het de juiste keuze is voor dynamische content, inbeddingen van derden of aangepaste visuele behandelingen die via de andere blokken niet mogelijk zijn. ![Knowledge base site showing a custom code section with a promotional banner rendered from HTML and CSS](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/2_Screenshot-Knowledge_base_site_output.png) --- ## Wanneer te gebruiken van de sectie Aangepaste code - **Dynamische banners** - Toon een seizoensgebonden promotie, productlanceringsaankondiging of onderhoudsmelding met aangepaste HTML die je onafhankelijk van de pagina-indeling kunt bijwerken. - **Afteltimers** - Sluit een JavaScript-gestuurde aftelling in voor evenementen, lanceringen of tijdbeperkte aanbiedingen. - **Ingebedde widgets van derden** - Voeg embeds toe van externe diensten zoals videospelers, formulierbouwers, chatwidgets of statuspaginabadges, die geen toegewijd blok hebben. - **Aangepaste content** - Wanneer je een specifieke lay-out of visuele behandeling nodig hebt die niet haalbaar is met de Rich text- of Multicolumn-kaartblokken, schrijf dan je eigen HTML en CSS om dit te bereiken. BELANGRIJK! Aangepaste codesecties voeren HTML en CSS uit in de context van je kennisbanksite. Test je code zorgvuldig voordat je publiceert. Slecht gestructureerde HTML kan de lay-out van omliggende pagina-elementen beïnvloeden. --- ## Hoe voeg je een sectie Aangepaste code toe 1. Navigeer naar () in de linker navigatiebalk van het kennisbankportaal. 2. Navigeer in het linker navigatiepaneel naar **Knowledge base site** > **Site-aanpassing**. 3. Klik op de knop **Site aanpassen** . ![Site customization page showing the Customize site button](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/Customize-site.png) 1. Selecteer in het linker **keuzemenu** Startpagina. De sectie Lichaam toont de lijst van lichaamsblokken. 2. Klik op **Sectie Toevoegen** en kies **sectie Aangepaste code**. Het blok wordt aan de lijst toegevoegd. ![Add section dropdown showing Custom code section option in the home page builder](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771843220715.png) 1. Gebruik het **Reorder** () icoon om het blok te herschikken. De Herschikken en **Verbergen** () iconen verschijnen wanneer je met de muis over een lichaamsblok in het Lichaam-gedeelte beweegt. --- ## Hoe configureer je de sectie Aangepaste code 1. Klik op het **blok Aangepaste code om** de editor te openen. 2. Voeg in het **HTML-tabblad** je HTML-code toe of bewerk je. 3. Voeg in het **CSS-tabblad je CSS-code** toe of bewerk je. 4. Klik op **Opslaan** om je wijzigingen als concept op te slaan. 5. Klik **op Preview** om te zien hoe de code wordt weergegeven op de knowledge base-site. 6. Klik **op Publiceren** om de wijzigingen live te zetten. ![Custom code section editor showing the HTML and CSS tabs with code input areas](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771843242926.png) --- ## Best practices - **Altijd een preview vóór publicatie** - de verschillen in rendering tussen de editor en de live site kunnen subtiel zijn. Gebruik de optie Preview-optie om de lay-out en styling te controleren voordat je committeert. - **Houd HTML op zichzelf staand** - vermijd het raadplegen van externe stylesheets of scripts die het laden van pagina's kunnen blokkeren of conflicteren met de eigen stijlen van Document360. - **Scope je CSS** - gebruik specifieke klassennamen voor je aangepaste elementen om te voorkomen dat de standaardstijlen van de site worden overgeschreven. - **Gebruik het CSS-tabblad voor alle styling** - stijlen gescheiden houden van markup maakt de code makkelijker te onderhouden en bij te werken. - **Test in lichte en donkere modus** - als je kennisbank donkere modus ondersteunt, controleer dan of je aangepaste code in beide correct wordt weergegeven. --- ## FAQ **Hoe verwijder ik een sectie met aangepaste code van de startpagina?** Navigeer naar {{variable. Settings}} () > {{variable. Kennisbanksite}} > **Site-aanpassing** en klik op **Site aanpassen**. Selecteer in het linker **keuzemenu** Startpagina. Selecteer in de sectie Body de gewenste **sectie Custom code**. Klik onder de navigatiebalk op **Verwijderen** () en klik vervolgens **op Ja** in de bevestigingsprompt Verwijderen. Klik op **Opslaan** en vervolgens **Publiceren** om de wijzigingen toe te passen.