--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/afbeelding' title: 'Een afbeelding toevoegen | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:31:01+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Voeg een foto of illustratie toe die zijn kolom vult en meeschaalt met het scherm.' tags: - 'Text and media' image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' published: true og: site_name: DXPR updated_time: '2026-10-24T17:19:22+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Een afbeelding toevoegen' description: 'Voeg een foto of illustratie toe die zijn kolom vult en meeschaalt met het scherm.' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:31:01+0000' dateModified: '2026-10-24T17:19:22+0000' author: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR url: 'https://dxpr.com/' logo: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg' width: '1348' height: '501' mainEntityOfPage: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/afbeelding' articleSection: 'Tekst en media' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/afbeelding' description: 'Voeg een foto of illustratie toe die zijn kolom vult en meeschaalt met het scherm.' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/nl' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: nl --- [Helpcentrum](/nl/hc)/[Documentatie](/nl/hc/documentatie) /[DXPR Builder leren](/nl/hc/documentation/learn-dxpr-builder) /[Pagina’s bouwen](/nl/hc/documentation/learn-dxpr-builder/build) /[Content toevoegen](/nl/hc/documentation/learn-dxpr-builder/elements) /[Tekst en media](/nl/hc/documentation/learn-dxpr-builder/elements/text-and-media) # Een afbeelding toevoegen. DXPR Builder lerenPagina’s bouwenContent toevoegenTekst en media ## In deze gids Gerelateerde gidsen - [Het uiterlijk van een element wijzigen in het paneel Stijl](/nl/hc/documentatie/dxpr-builder-leren/elementinstellingen/stijl-tabblad) Voeg een foto of illustratie toe die zijn kolom vult en meeschaalt met het scherm. ## Een afbeelding toevoegen Open je pagina terwijl je bent ingelogd: de builder-knoppen verschijnen als je met de muis over het inhoudsgebied beweegt. [Je eerste pagina](/nl/hc/documentatie/dxpr-builder-leren/aan-de-slag/eerste-pagina) legt de basis uit. 1. Beweeg over de kolom en klik op **+** in de besturingsbalk, of klik op **Add Elements** op een lege pagina. Open het tabblad **Inhoud** en klik op **Afbeelding**. De afbeelding komt bovenaan de kolom te staan en het dialoogvenster opent. 2. Klik onder **Afbeelding** op **Afbeelding selecteren**. Filter in de **Mediabrowser** op naam als je wilt, vink een foto aan en klik op **Geselecteerde invoegen**. 3. Klik op de kop **SEO** om hem uit te vouwen. Vervang de tekst in **Alt-attribuut** door een korte beschrijving van de foto. 4. Klik in het dialoogvenster op **Opslaan**. Klik daarna op **Opslaan** in de werkbalk bovenaan het inhoudsgebied om de pagina op te slaan. ## Wat je ziet De standaard **Afbeeldingsbreedte** is 100%. Schermlezers lezen je alt-tekst voor. Om het schalen te controleren zet je **Weergavemodus** op **Voorbeeld** en versmal je je browservenster. Bezoekers zien je wijzigingen nadat je opslaat en publiceert. ## Je afbeelding instellen Beweeg over het element en open **More > Settings** in de besturingsbalk. Opties: - **Afbeelding:** selecteer een afbeelding uit de media- of bestandsbrowser van je site, upload een bestand, of plak een externe URL. - **Afbeeldingsbreedte:** een CSS-breedte zoals `100%` of `300px`. De standaard is 100%. - **Afbeeldingshoogte:** een vaste hoogte zoals `400px`. Laat hem leeg om de vorm van de foto te behouden. - **Afbeeldingslink:** maakt de afbeelding klikbaar. Vul een URL in of kies een pagina. - **Doel afbeeldingslink:** Zelfde venster of Nieuw venster. Verschijnt zodra je een link toevoegt. - **Alt-attribuut:** in de sectie **SEO**, een beschrijving voor schermlezers en zoekmachines. - **Titelattribuut:** in de sectie **SEO**, extra informatie die als tooltip verschijnt als je erover beweegt. ## Afbeeldingen laden en paginasnelheid DXPR Builder beheert het laden van nieuwe afbeeldingen automatisch om pagina's snel te houden en te voorkomen dat inhoud verspringt. Afbeeldingen bovenaan de pagina en in tabbladen, carrousels en marquees blijven klaar om te tonen. Afbeeldingen verderop kunnen laden terwijl bezoekers scrollen. Afbeeldingen kunnen komen uit je mediabibliotheek, geüploade bestanden of externe URL's. Laat afbeeldingen in de editor volledig laden voordat je opslaat, zodat DXPR Builder de juiste hoeveelheid ruimte kan reserveren. Een afbeelding vervangen werkt zijn afmetingen bij zonder je gekozen weergavegrootte te wijzigen. Afbeeldingen die al op je site staan worden niet automatisch geüpgraded. Paginasnelheid hangt ook af van de bestandsgrootte van afbeeldingen en andere inhoud. Controleer je gepubliceerde pagina op smalle en brede schermen. ## Als je het niet ziet - **Afbeelding staat niet in het tabblad Inhoud.** Je gebruikersprofiel verbergt hem. Vraag een beheerder om hem in te schakelen in [Gebruikersprofielen](/nl/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin). - **Hij is weg na het herladen.** De pagina is niet opgeslagen. Voeg hem opnieuw toe en klik op **Opslaan** in de werkbalk bovenaan het inhoudsgebied. - **Het afbeeldingselement is leeg.** Er is geen foto ingesteld in het veld **Afbeelding**. Beweeg over het element en open **More > Settings** en klik op **Afbeelding selecteren**. - **Er verschijnt een pictogram voor een gebroken afbeelding.** Het bestand is verwijderd of verplaatst in de mediabibliotheek. Beweeg over het element en open **More > Settings**, verwijder de selectie en kies een nieuwe afbeelding. - **De afbeelding is uitgerekt of platgedrukt.** **Afbeeldingsbreedte** en **Afbeeldingshoogte** hebben allebei vaste waarden die niet bij de foto passen. Wis **Afbeeldingshoogte** om zijn vorm te herstellen. ## Wat nu? [Tabblad Stijl](/nl/hc/documentation/learn-dxpr-builder/element-settings/style-tab) om de witruimte en achtergrond van je afbeelding aan te passen.