--- title: "Afbeeldingen met tekstblok" slug: "image-and-text" description: "Add text and an image to the home page using the Image and text block. This is similar to the Text block but also includes an image. For example, you want to showcase a feature and its description" tags: ["Body blocks", "Customization"] updated: 2026-06-22T09:03:17Z published: 2026-06-22T09:03:17Z canonical: "docs.document360.com/image-and-text" --- > ## 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. # Afbeeldingen met tekstblok De afbeelding met tekstblok laat je een afbeelding naast een kop en alinea plaatsen op de startpagina van je kennisbasis. Waar het [Rich-tekstblok](https://docs.document360.com/docs/nl/text-block) puur tekstgebaseerd is, brengt dit blok een visuele dimensie toe, waarbij een afbeelding wordt gecombineerd met gestructureerde tekst zodat lezers context en beelden samenbrengen in één lay-out. Dit maakt het uitstekend voor content waarbij een screenshot, illustratie of miniatuur betekenis toevoegt die tekst alleen niet kan overbrengen. ![Knowledge base site showing an Image with text block with an image, heading, and paragraph displayed side by side](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/1_Screenshot-Image_with_text_knowlegde_base_site_view.png) --- ## Wanneer de afbeelding met tekstblok te gebruiken - **Feature-hoogtepunten** - Toon een specifieke productfeature met een screenshot of illustratie naast een korte beschrijving. - **Release-aankondigingen** - Combineer een afbeelding van een nieuwe feature met een korte alinea waarin wordt beschreven wat er nieuw is en waar je het kunt vinden. - **Visuele introducties** - Gebruik een afbeelding om de toon te zetten voor een gedeelte van je kennisbank, met ondersteunende tekst om lezers te oriënteren. - **Promotionele inhoud** - Marker een gids, videotutorial of belangrijk artikel met een thumbnail en een korte oproep tot actie. Wanneer de inhoud alleen tekst bevat, gebruik dan het [Rich text-blok](https://docs.document360.com/docs/nl/text-block) . --- ## Hoe voeg je een afbeelding toe met tekstblok 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 selecteer **Afbeelding met tekst**. Het blok wordt aan de lijst toegevoegd. 3. Gebruik het **Reorder** () icoon om het blok te herschikken. De Reorder en **Hide** () iconen verschijnen wanneer je over een body block zweeft. 4. Vouw de **afbeelding uit met tekst-dropdown** om toegang te krijgen tot de elementen **Afbeelding**, **Kop** en **Paragraaf** . ![Home page builder showing an Image with text block expanded with Image, Heading, and Paragraph elements](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684325265.png) --- ## Hoe de elementen te configureren ### Afbeelding 1. Klik op **Afbeelding** om het Afbeeldingspaneel te openen. 2. Klik op **Wijzigen** om de afbeelding te uploaden of bij te werken. 3. Voer in het tabblad **Afbeelding** de afbeeldings-URL in of upload er een vanaf je Drive. 4. Kies in de sectie **Uitlijning** **Links**, **Midden** of **Rechts** om de afbeelding binnen het blok te plaatsen. ![Image panel showing alignment options and image upload controls](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684343844.png) ### Kop 1. Klik **op Heading** om het Heading-paneel te openen. 2. Voer de gewenste tekst in het veld **Koptekst.** 3. Gebruik het **kleurpalet Tekst** om een kopkleur te kiezen. 4. Kies in de sectie **Uitlijning** **Links**, **Midden** of **Rechts**. 5. Klik **op Verwijderen** om alleen het Heading-element uit dit blok te verwijderen. ![Heading panel showing text input, color palette, and alignment options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684356968.png) ### Paragraaf 1. Klik **op Paragraaf** om het Paragraafpaneel te openen. 2. Voer je inhoud in het **tekstveld Paragraaf** . 3. Formaak de tekst met de volgende opties: | Optie | Wat het doet | | --- | --- | | **Vetgedrukt** () | Past vetgedrukte opmaak toe | | **Cursief** () | Past cursief formaat toe | | **URL/Link** () | Voegt een hyperlink toe | | **Ongeordende lijst** () | Maakt een opsomminglijst | | **Geordende lijst** () | Maakt een genummerde lijst aan | OPMERKING Markdown-syntaxis wordt ondersteund in het tekstveld Paragraaf. 1. Gebruik het **tekstkleurenpalet** om de kleur van de alineatekst in te stellen. 2. Kies in de sectie **Uitlijning** **Links**, **Midden** of **Rechts**. 3. Klik **op Verwijderen** om alleen het paragraafelement uit dit blok te verwijderen. ![Paragraph panel showing text formatting toolbar, color palette, and alignment options](https://cdn.document360.io/860f9f88-412e-4570-8222-d5bf2f4b7dd1/Images/Documentation/image-1771684373203.png) --- ## Hoe opslaan en publiceren - Gebruik de **schakelaar Voorbeeldweergave** rechts om je wijzigingen te bekijken. - Klik op **Opslaan** om je wijzigingen op te slaan. - Klik **op Publiceren** om wijzigingen live door te voeren. --- ## Best practices - **Houd beeld en tekst in balans** - een grote afbeelding naast een korte zin lijkt niet bij elkaar te passen. Streef naar ongeveer gelijke visuele lading tussen de afbeelding en de tekst ernaast. - **Gebruik Links-uitlijning voor de afbeelding** wanneer de leesrichting van links naar rechts is; Het is de meest natuurlijke lay-out voor de meeste lezers. - **Gebruik de kop om het blok te ankeren** – zelfs als de kop kort is, geeft het lezers een snel label waar de afbeelding en alinea over gaan. - **Vermijd het uploaden van te grote afbeeldingen** - grote afbeeldingen laden langzaam door de pagina. Verander de grootte van afbeeldingen voordat je ze uploadt, zodat ze webgeoptimaliseerd blijven (meestal onder de 200KB voor afbeeldingen op de startpagina). - **Gebruik consistente afbeeldingsafmetingen** - als je meerdere afbeeldingen hebt met tekstblokken op dezelfde pagina, houd dan de afbeeldingsgroottes consistent voor een nettere lay-out. --- ## FAQ **Hoe verwijder ik een afbeelding met een tekstblok van de startpagina?** Navigeer naar {{variable. Instellingen}} () > {{variabel. Kennisbanksite}} > **Site-aanpassing** en klik op **Site aanpassen**. Selecteer in het linker **keuzemenu** Startpagina. Klik op de gewenste **afbeelding met tekstblok** . Klik **op Verwijderen** en bevestig door op **Ja** te klikken in de bevestigingsprompt Verwijderen. Klik op **Opslaan** en vervolgens **Publiceren** om de wijzigingen toe te passen.