--- url: 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-sjablonen' title: 'DXPR Builder-sjablonen overschrijven | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2026-10-24T02:32:42+00:00' updated: '2026-10-24T17:19:22+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: |- DXPR Builder rendert zijn elementen in de browser, vanuit sjablonen die in de editor zijn gecompileerd. Er is geen elementsjabloon dat je naar een thema kunt kopiëren. De module levert wel vier Twig-sjablonen mee voor zijn eigen pagina's en die overschrijf je op de normale Drupal-manier. Deze pagina somt ze op, legt uit waarom elementmarkup niet kan worden overschreven en wijst naar de routes die de module in plaats daarvan ondersteunt. tags: - 'Match your brand' 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: 'DXPR Builder-sjablonen overschrijven' description: |- DXPR Builder rendert zijn elementen in de browser, vanuit sjablonen die in de editor zijn gecompileerd. Er is geen elementsjabloon dat je naar een thema kunt kopiëren. De module levert wel vier Twig-sjablonen mee voor zijn eigen pagina's en die overschrijf je op de normale Drupal-manier. Deze pagina somt ze op, legt uit waarom elementmarkup niet kan worden overschreven en wijst naar de routes die de module in plaats daarvan ondersteunt. image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2026-10-24T02:32:42+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/aanpassing/aangepaste-sjablonen' articleSection: 'Je huisstijl toepassen' - '@type': WebPage '@id': 'https://dxpr.com/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-sjablonen' description: |- DXPR Builder rendert zijn elementen in de browser, vanuit sjablonen die in de editor zijn gecompileerd. Er is geen elementsjabloon dat je naar een thema kunt kopiëren. De module levert wel vier Twig-sjablonen mee voor zijn eigen pagina's en die overschrijf je op de normale Drupal-manier. Deze pagina somt ze op, legt uit waarom elementmarkup niet kan worden overschreven en wijst naar de routes die de module in plaats daarvan ondersteunt. 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) /[De site beheren](/nl/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/nl/hc/documentation/learn-dxpr-builder/customization) # DXPR Builder-sjablonen overschrijven. DXPR Builder lerenDe site beherenJe huisstijl toepassen ## In deze gids Gerelateerde gidsen - [Begin een pagina met een sjabloon](/nl/hc/documentatie/dxpr-builder-leren/herbruikbare-sjablonen/paginasjablonen) - [DXPR Builder themen](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/themen) DXPR Builder rendert zijn elementen in de browser, vanuit sjablonen die in de editor zijn gecompileerd. Er is geen elementsjabloon dat je naar een thema kunt kopiëren. De module levert wel vier Twig-sjablonen mee voor zijn eigen pagina's en die overschrijf je op de normale Drupal-manier. Deze pagina somt ze op, legt uit waarom elementmarkup niet kan worden overschreven en wijst naar de routes die de module in plaats daarvan ondersteunt. ## Twig-sjablonen die je kunt overschrijven De sjablonen staan in de map `templates/` van de module: | Sjabloon | Gebruikt voor | Variabelen | |---|---|---| | `dxpr-license-info.html.twig` | Het gebruiksoverzicht op de pagina's **User Licenses** en **Content items**, en het **License info**-blok | `used_count`, `total_count`, `limit`, `block_label`, `total_label`, `used_label`, `more_info_link` | | `page--dxpr-builder--media-library.html.twig` | De paginawrapper van het dialoogvenster Media Library op `/dxpr_builder/media-library` | de standaard `page`-variabelen | | `html--dxpr-builder--media-library.html.twig` | De ``-wrapper van hetzelfde dialoogvenster | de standaard `html`-variabelen | | `page--people-list.html.twig` | Een startpunt voor de pagina **People** (`/admin/people`) met een licentieoverzicht | de standaard `page`-variabelen plus `user_license` | De eerste drie werken zoals ze zijn. Drupal laadt `page--people-list.html.twig` niet vanuit de module. DXPR Builder voegt alleen de suggestie `page__people_list` en de variabele `user_license` toe op de pagina People. Om het overzicht daar te tonen, kopieer je het bestand naar je adminthema. Om een sjabloon te overschrijven: 1. Kopieer het bestand van `modules/contrib/dxpr_builder/templates/` naar de map `templates/` van het thema dat het rendert. De adminpagina's en het dialoogvenster Media Library gebruiken het adminthema. Het blok **License info** gebruikt het thema van de regio waarin je het hebt geplaatst. 2. Bewerk de kopie. 3. Wis de caches met `drush cr`. ## Waarom elementmarkup niet kan worden overschreven De markup van elk element is een twig.js-sjabloon in `dxpr_builder/templates/`, bijvoorbeeld `elements/alert/alert.twig.html`. De build compileert deze sjablonen naar `dxpr_builder/dxpr_templates.js`. De editor rendert ze in de browser en slaat de resulterende HTML op in het veld. Twee dingen volgen daaruit: - Een gewijzigd sjabloon heeft een rebuild van de editor nodig. Sites die de editor vanaf het DXPR CDN laden kunnen een gewijzigd sjabloon helemaal niet gebruiken. - Bewaarde pagina's behouden de HTML waarmee ze zijn opgeslagen. Een nieuw sjabloon geldt alleen voor elementen die na de wijziging worden gerenderd. De module biedt dus geen override per site van elementsjablonen. Gebruik een van de routes hieronder. ## Ondersteunde aanpassingsroutes | Doel | Route | |---|---| | Herbruikbare lay-outs voor redacteurs | [Paginasjablonen](/nl/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates) en [Gebruikerssjablonen](/nl/hc/documentation/learn-dxpr-builder/reusable-templates/user-templates), beide gekozen in de builder | | Het uiterlijk van elementen wijzigen | [Aangepaste CSS](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/aangepaste-css) in het thema, gericht op je eigen klassen of de `az-*`-klassen | | Geef redacteurs benoemde stijlen | [Utility-klassen](/nl/hc/documentation/learn-dxpr-builder/customization/utility-classes) uit de `.info.yml` van het thema, en [aangepaste stijlen](/nl/hc/documentation/learn-dxpr-builder/customization/text-editor#set-up) voor de teksteditor | | Extra pictogrammensets | [Pictogrambibliotheken](/nl/hc/documentatie/dxpr-builder-leren/aanpassing/pictogrambibliotheken) | | Nieuwe elementtypen | [Aangepaste elementen maken](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/aangepaste-elementen) | ## Wat nu? - [Paginasjablonen](/nl/hc/documentation/learn-dxpr-builder/reusable-templates/page-templates): het sjabloonsysteem dat redacteurs gebruiken. - [DXPR Builder themen](/nl/hc/documentatie/dxpr-builder-leren/ontwikkeling/themen): hoe de CSS van de builder en je thema samen passen.