---
url: 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/sviluppo/tematizzazione'
title: 'Tematizzazione di DXPR Builder | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T19:16:05+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: |-
  I contenuti del builder sono normale HTML nella tua pagina, quindi il tuo tema applica loro i suoi stili come a qualsiasi altro contenuto. Questa pagina spiega cosa eredita un tema, come aggiunge classi all’editor e dove mettere gli override.
  Cosa stilizza il tuo tema
  I contenuti pubblicati del builder ereditano gli stili del tuo tema:
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:05+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Tematizzazione di DXPR Builder'
      description: |-
        I contenuti del builder sono normale HTML nella tua pagina, quindi il tuo tema applica loro i suoi stili come a qualsiasi altro contenuto. Questa pagina spiega cosa eredita un tema, come aggiunge classi all’editor e dove mettere gli override.
        Cosa stilizza il tuo tema
        I contenuti pubblicati del builder ereditano gli stili del tuo tema:
      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:05+0000'
      dateModified: '2026-10-24T19:16:05+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/it/hc/documentazione/impara-dxpr-builder/sviluppo/tematizzazione'
      articleSection: 'Costruisci su DXPR'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentazione/impara-dxpr-builder/sviluppo/tematizzazione'
      description: |-
        I contenuti del builder sono normale HTML nella tua pagina, quindi il tuo tema applica loro i suoi stili come a qualsiasi altro contenuto. Questa pagina spiega cosa eredita un tema, come aggiunge classi all’editor e dove mettere gli override.
        Cosa stilizza il tuo tema
        I contenuti pubblicati del builder ereditano gli stili del tuo tema:
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Home
            item: 'https://dxpr.com/it'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: it
---
[Centro assistenza](/it/hc)/[Documentazione](/it/hc/documentazione) /[Impara DXPR Builder](/it/hc/documentation/learn-dxpr-builder) /[Estendi](/it/hc/documentation/learn-dxpr-builder/extend) /[Costruisci su DXPR](/it/hc/documentation/learn-dxpr-builder/extend/build-on-it) # Tematizzazione di DXPR Builder.

 Impara DXPR BuilderEstendiCostruisci su DXPR

   ## In questa guida

I contenuti del builder sono normale HTML nella tua pagina, quindi il tuo tema applica loro i suoi stili come a qualsiasi altro contenuto. Questa pagina spiega cosa eredita un tema, come aggiunge classi all’editor e dove mettere gli override.

## Cosa stilizza il tuo tema

I contenuti pubblicati del builder ereditano gli stili del tuo tema:

- Intestazioni, testo e link usano gli stili del tuo tema.
- Il layout usa righe e colonne Bootstrap 5, quindi un tema Bootstrap 5 si allinea con esso. Con qualsiasi altro tema, vai in **DXPR Studio > DXPR Builder > Impostazioni generali** e imposta **File Bootstrap esterni** su **Bootstrap 5**.
- Ogni elemento ha una classe per tipo, come `az-card` o `az-button`, e quasi tutti hanno anche `az-element`; vedi [Architettura CSS](/it/hc/documentazione/impara-dxpr-builder/sviluppo/architettura-css).

## Aggiungere classi all’editor

### Nell’info.yml del tema

Elenca le classi sotto `dxpr_builder_classes` nell’`.info.yml` del tuo tema. Appaiono nell’elenco **Classi HTML** di ogni elemento, in un gruppo di opzioni con il nome del tema, mentre il tema è abilitato:

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

```

### Da un modulo

Implementa `hook_dxpr_builder_classes_alter()`. Il nome deve finire con `_alter`; vedi [Riferimento API hook](/it/hc/documentazione/impara-dxpr-builder/sviluppo/api-hook).

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

```

## Stili del pulsante

L’elemento Pulsante offre gli stili Bootstrap Primary, Secondary, Success, Info, Warning, Danger, Link, Light e Dark. L’elenco è fisso nell’editor; l’hook delle cartelle dei pulsanti non lo cambia. Per dare ai pulsanti l’aspetto del tuo marchio, personalizza le classi `btn-*` di Bootstrap nel tuo tema, o aggiungi la tua classe tramite **Classi HTML**.

## Override CSS

Sovrascrivi l’output del builder nel CSS del tuo tema:

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

```

Le impostazioni che un redattore fa nella scheda Stile sono scritte come stili inline. Gli stili inline hanno la precedenza sulle regole del tema che non usano `!important`, quindi usa il CSS del tema per i valori predefiniti e lascia che i redattori li sovrascrivano per elemento.

## L’editor e il tuo tema

L’editor gira sulla pagina dove è mostrato il campo, quindi dentro il tuo tema front-end, non nel tema di amministrazione. Le sue barre di controllo, menu e finestre di dialogo portano la classe `dxpr-builder-ui` e caricano il loro foglio di stile, `dxpr_builder_backend.css`. Le regole del tema che puntano a selettori ampi come `button` o `.modal` possono comunque raggiungerli; limita le tue regole alle regioni di contenuto per evitarlo.