---
url: 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/entwicklung/theming'
title: 'Theming für DXPR Builder | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-23T23:57:14+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  Builder-Inhalte sind gewöhnliches HTML in Ihrer Seite, sodass Ihr Theme sie
  stylt wie jeden anderen Inhalt. Diese Seite behandelt, was ein Theme erbt,
  wie es Klassen zum Editor hinzufügt und wohin Overrides gehören.
  Was Ihr Theme stylt
  Veröffentlichte Builder-Inhalte erben die Stile Ihres Themes:
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-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: 'Theming für DXPR Builder'
      description: |-
        Builder-Inhalte sind gewöhnliches HTML in Ihrer Seite, sodass Ihr Theme sie
        stylt wie jeden anderen Inhalt. Diese Seite behandelt, was ein Theme erbt,
        wie es Klassen zum Editor hinzufügt und wohin Overrides gehören.
        Was Ihr Theme stylt
        Veröffentlichte Builder-Inhalte erben die Stile Ihres Themes:
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-23T23:57:14+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/de/hc/dokumentation/dxpr-builder-lernen/entwicklung/theming'
      articleSection: 'Darauf aufbauen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/de/hc/dokumentation/dxpr-builder-lernen/entwicklung/theming'
      description: |-
        Builder-Inhalte sind gewöhnliches HTML in Ihrer Seite, sodass Ihr Theme sie
        stylt wie jeden anderen Inhalt. Diese Seite behandelt, was ein Theme erbt,
        wie es Klassen zum Editor hinzufügt und wohin Overrides gehören.
        Was Ihr Theme stylt
        Veröffentlichte Builder-Inhalte erben die Stile Ihres Themes:
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Startseite
            item: 'https://dxpr.com/de'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: de
---
[Hilfe-Center](/de/hc)/[Dokumentation](/de/hc/dokumentation) /[DXPR Builder lernen](/de/hc/documentation/learn-dxpr-builder) /[Erweitern](/de/hc/documentation/learn-dxpr-builder/extend) /[Darauf aufbauen](/de/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Theming für DXPR Builder.

 DXPR Builder lernenErweiternDarauf aufbauen

   ## In diesem Leitfaden

Builder-Inhalte sind gewöhnliches HTML in Ihrer Seite, sodass Ihr Theme sie stylt wie jeden anderen Inhalt. Diese Seite behandelt, was ein Theme erbt, wie es Klassen zum Editor hinzufügt und wohin Overrides gehören.

## Was Ihr Theme stylt

Veröffentlichte Builder-Inhalte erben die Stile Ihres Themes:

- Überschriften, Fließtext und Links nutzen die Stile Ihres Themes.
- Layout nutzt Bootstrap-5-Rows und -Columns, sodass ein Bootstrap-5-Theme dazu passt. Mit jedem anderen Theme gehen Sie zu **DXPR Studio > DXPR Builder > General Settings** und stellen **Sideload Bootstrap files** auf **Bootstrap 5**.
- Jedes Element hat eine Klasse pro Typ, zum Beispiel `az-card` oder `az-button`, und die meisten tragen zudem `az-element`; siehe [CSS-Architektur](/de/hc/dokumentation/dxpr-builder-lernen/entwicklung/css-architektur).

## Klassen zum Editor hinzufügen

### In der info.yml des Themes

Listen Sie Klassen unter `dxpr_builder_classes` in der `.info.yml` Ihres Themes. Sie erscheinen in der Liste **HTML classes** jedes Elements, in einer Optionsgruppe mit dem Namen des Themes, solange das Theme aktiviert ist:

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

```

### Aus einem Modul

Implementieren Sie `hook_dxpr_builder_classes_alter()`. Der Name muss auf `_alter` enden; siehe [Hooks-API-Referenz](/de/hc/dokumentation/dxpr-builder-lernen/entwicklung/hooks-api).

```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');
}

```

## Button-Stile

Das Button-Element bietet die Bootstrap-Stile Primary, Secondary, Success, Info, Warning, Danger, Link, Light und Dark. Die Liste ist im Editor fest; der Buttons-folders-Hook ändert sie nicht. Für Buttons in Ihrem Markenlook stylen Sie Bootstraps `btn-*`-Klassen in Ihrem Theme oder fügen über **HTML classes** eine eigene Klasse hinzu.

## CSS-Overrides

Überschreiben Sie Builder-Ausgaben im CSS Ihres Themes:

```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);
}

```

Einstellungen, die Sie auf dem Style-Tab vornehmen, werden als Inline- Stile geschrieben. Inline-Stile schlagen Theme-Regeln, die kein `!important`nutzen. Nutzen Sie also Theme-CSS für Vorgaben; die Redaktion kann sie pro Element überschreiben.

## Der Editor und Ihr Theme

Der Editor läuft auf der Seite, wo das Feld angezeigt wird, also in Ihrem Frontend-Theme, nicht im Admin-Theme. Seine Steuerleisten, Menüs und Dialoge tragen die Klasse `dxpr-builder-ui` und laden ihr eigenes Stylesheet, `dxpr_builder_backend.css`. Theme-Regeln, die auf breite Selektoren wie `button` oder `.modal` zielen, können sie dennoch erreichen; begrenzen Sie Ihre Regeln auf Ihre Inhaltsregionen, um das zu vermeiden.