---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/developpement/themage'
title: 'Thémer DXPR Builder | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:16:01+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Le contenu du constructeur est du HTML ordinaire dans votre page : votre thème le met en forme comme tout autre contenu. Cette page explique ce qu’un thème hérite, comment il ajoute des classes à l’éditeur et où placer les surcharges.
  Ce que votre thème met en forme
  Le contenu publié du constructeur hérite des styles de votre thème :
tags:
  - 'Build on it'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T19:16:01+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Thémer DXPR Builder'
      description: |-
        Le contenu du constructeur est du HTML ordinaire dans votre page : votre thème le met en forme comme tout autre contenu. Cette page explique ce qu’un thème hérite, comment il ajoute des classes à l’éditeur et où placer les surcharges.
        Ce que votre thème met en forme
        Le contenu publié du constructeur hérite des styles de votre thème :
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T19:16:01+0000'
      dateModified: '2026-10-24T19:16:01+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/fr/hc/documentation/apprendre-dxpr-builder/developpement/themage'
      articleSection: 'Développer dessus'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/developpement/themage'
      description: |-
        Le contenu du constructeur est du HTML ordinaire dans votre page : votre thème le met en forme comme tout autre contenu. Cette page explique ce qu’un thème hérite, comment il ajoute des classes à l’éditeur et où placer les surcharges.
        Ce que votre thème met en forme
        Le contenu publié du constructeur hérite des styles de votre thème :
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Accueil
            item: 'https://dxpr.com/fr'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: fr
---
[Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Étendre](/fr/hc/documentation/learn-dxpr-builder/extend) /[Développer dessus](/fr/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Thémer DXPR Builder.

 Apprendre DXPR BuilderÉtendreDévelopper dessus

   ## Dans ce guide

Le contenu du constructeur est du HTML ordinaire dans votre page : votre thème le met en forme comme tout autre contenu. Cette page explique ce qu’un thème hérite, comment il ajoute des classes à l’éditeur et où placer les surcharges.

## Ce que votre thème met en forme

Le contenu publié du constructeur hérite des styles de votre thème :

- Les titres, le texte courant et les liens utilisent les styles de votre thème.
- La mise en page utilise des lignes et des colonnes Bootstrap 5, donc un thème Bootstrap 5 s’aligne avec elle. Avec tout autre thème, allez dans **DXPR Studio > DXPR Builder > General Settings** et réglez **Sideload Bootstrap files** sur **Bootstrap 5**.
- Chaque élément a une classe par type, comme `az-card` ou `az-button`, et la plupart portent aussi `az-element` ; voir [Classes dans le balisage enregistré](/fr/hc/documentation/apprendre-dxpr-builder/developpement/architecture-css).

## Ajouter des classes à l’éditeur

### Dans le fichier info.yml du thème

Listez les classes sous `dxpr_builder_classes` dans le fichier `.info.yml` de votre thème. Elles apparaissent dans la liste **HTML classes** de chaque élément, dans un groupe d’options nommé d’après le thème, tant que le thème est activé :

```yaml
# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

```

### Depuis un module

Implémentez `hook_dxpr_builder_classes_alter()`. Le nom doit se terminer par `_alter` ; voir [Référence de l’API des hooks](/fr/hc/documentation/apprendre-dxpr-builder/developpement/api-des-hooks).

```php
/**
 * Implements hook_dxpr_builder_classes_alter().
 */
function mymodule_dxpr_builder_classes_alter(&$classes) {
  $classes['optgroup-custom'] = t('Custom Styles');
  $classes['custom-card'] = t('Custom card');
  $classes['custom-hero'] = t('Custom hero');
}

```

## Styles de boutons

L’élément Bouton propose les styles Bootstrap Primary, Secondary, Success, Info, Warning, Danger, Link, Light et Dark. La liste est figée dans l’éditeur ; le hook des dossiers de boutons ne la modifie pas. Pour donner à vos boutons l’aspect de votre marque, personnalisez les classes `btn-*` de Bootstrap dans votre thème, ou ajoutez votre propre classe via **HTML classes**.

## Surcharges CSS

Surchargez le rendu du constructeur dans le CSS de votre thème :

```css
/* Section padding */
.az-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Card shadows */
.az-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

```

Les réglages qu’un rédacteur fait dans l’onglet Style sont écrits comme styles en ligne. Les styles en ligne l’emportent sur les règles du thème qui n’utilisent pas `!important` : utilisez donc le CSS du thème pour les valeurs par défaut et laissez les rédacteurs les surcharger par élément.

## L’éditeur et votre thème

L’éditeur s’exécute sur la page où le champ est affiché, donc dans votre thème frontal, pas dans le thème d’administration. Ses barres de contrôle, menus et boîtes de dialogue portent la classe `dxpr-builder-ui` et chargent leur propre feuille de style, `dxpr_builder_backend.css`. Les règles du thème qui ciblent des sélecteurs larges comme `button` ou `.modal` peuvent quand même les atteindre ; limitez vos règles à vos régions de contenu pour éviter cela.