---
url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/html'
title: 'Een HTML-element toevoegen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2023-11-06T09:29:50+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Je krijgt een plek op de pagina waar je eigen code draait, zoals een social post of een boekingswidget. Gebruik het wanneer een embed van een derde partij of aangepaste code geen passend element heeft.'
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 HTML-element toevoegen'
      description: 'Je krijgt een plek op de pagina waar je eigen code draait, zoals een social post of een boekingswidget. Gebruik het wanneer een embed van een derde partij of aangepaste code geen passend element heeft.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2023-11-06T09:29:50+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/html'
      articleSection: 'Tekst en media'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/elementen/html'
      description: 'Je krijgt een plek op de pagina waar je eigen code draait, zoals een social post of een boekingswidget. Gebruik het wanneer een embed van een derde partij of aangepaste code geen passend element heeft.'
      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 HTML-element 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)

Je krijgt een plek op de pagina waar je eigen code draait, zoals een social post of een boekingswidget. Gebruik het wanneer een embed van een derde partij of aangepaste code geen passend element heeft.

## Een HTML-element 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 **HTML**. Het komt bovenaan de kolom te staan en het dialoogvenster opent.
2. Kopieer de embedcode via de optie Insluiten of Delen van de dienst. Plak hem in de editor **Ruwe HTML**.
3. 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

Je embed werkt in de editor zodra je in het dialoogvenster op **Opslaan** klikt, omdat de builder zijn script daar ook uitvoert. In de video verschijnt een Google Agenda met Amerikaanse feestdagen zodra het dialoogvenster sluit. Bezoekers zien hem zodra je de pagina opslaat en publiceert.

## Je HTML-element instellen

Beweeg over het element en open **More > Settings** in de besturingsbalk. Opties:

- **Ruwe HTML:** een code-editor voor je HTML, CSS of JavaScript. Scripts draaien in de editor en op de gepubliceerde pagina.
- **HTML-ID:** een optionele ID om het element mee aan te spreken met CSS of JavaScript.
- **HTML-klassen:** optionele CSS-klassen voor de wrapper van het element.

## Als je het niet ziet

- **HTML staat niet in het tabblad Inhoud.** Je gebruikersprofiel verbergt het. Vraag een beheerder om het in te schakelen in [Gebruikersprofielen](/nl/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **Het is weg na het herladen.** De pagina is niet opgeslagen. Voeg het opnieuw toe en klik op **Opslaan** in de werkbalk bovenaan het inhoudsgebied.
- **De embed verschijnt als platte tekst of een los citaat.** Het embedscript is nog niet geladen, of de `<script>`-regel ontbreekt. Wacht een paar seconden, of plak de volledige embedcode opnieuw.
- **Het veld heeft code, maar bezoekers zien niets.** Je site past tekstformaatfilters toe voor bezoekers, en het formaat kan tags als `<script>` of `<iframe>` strippen. Redacteurs zien de code wel werken. Vraag een beheerder om **Tekstformaatfilters toepassen op frontend-inhoud** uit te vinken in [Algemene instellingen](/nl/hc/documentatie/dxpr-builder-leren/beheer/algemene-instellingen), of om die tags toe te staan in het tekstformaat. Herlaad daarna de gepubliceerde pagina.
- **De lay-out onder het element breekt.** De code heeft een niet-gesloten tag. Controleer of elke openingstag zijn sluittag heeft.

## Wat nu?

[Tabblad Stijl](/nl/hc/documentation/learn-dxpr-builder/element-settings/style-tab) om de witruimte en achtergrond van je HTML-element aan te passen.