---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/customization/utility-classes'
title: 'Classi di utilità | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T03:00:57+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Ogni elemento ha un campo HTML classes con un elenco di classi con nome. Utilità Bootstrap 5 e ombre sono integrate. Il tuo tema può aggiungere un gruppo proprio tramite il suo .info.yml, e un modulo tramite un hook alter. Questa pagina spiega cosa contiene l’elenco e come registri le tue classi, così gli editor scelgono un aspetto brand per nome invece di digitare nomi di classi.'
tags:
  - 'Je huisstijl toepassen'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T09:09:48+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Classi di utilità'
      description: 'Ogni elemento ha un campo HTML classes con un elenco di classi con nome. Utilità Bootstrap 5 e ombre sono integrate. Il tuo tema può aggiungere un gruppo proprio tramite il suo .info.yml, e un modulo tramite un hook alter. Questa pagina spiega cosa contiene l’elenco e come registri le tue classi, così gli editor scelgono un aspetto brand per nome invece di digitare nomi di classi.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T03:00:57+0000'
      dateModified: '2026-10-24T09:09:48+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/documentation/learn-dxpr-builder/customization/utility-classes'
      articleSection: 'Je huisstijl toepassen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/customization/utility-classes'
      description: 'Ogni elemento ha un campo HTML classes con un elenco di classi con nome. Utilità Bootstrap 5 e ombre sono integrate. Il tuo tema può aggiungere un gruppo proprio tramite il suo .info.yml, e un modulo tramite un hook alter. Questa pagina spiega cosa contiene l’elenco e come registri le tue classi, così gli editor scelgono un aspetto brand per nome invece di digitare nomi di classi.'
      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
---
[Help Center](/it/hc)/[Documentation](/it/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Manage the site](/hc/documentation/learn-dxpr-builder/manage) /[Je huisstijl toepassen](/hc/documentation/learn-dxpr-builder/customization) # Classi di utilità.

 Learn DXPR BuilderManage the siteJe huisstijl toepassen

   ## In this guide

 Related guides

- [Dai stile ai contenuti del builder con il CSS del tuo tema](/it/hc/documentation/learn-dxpr-builder/customization/custom-css)
- [Aggiungi stili del brand e pulsanti all’editor di testo](/it/hc/documentation/learn-dxpr-builder/customization/text-editor)
- [Riferimento API hook](/it/hc/documentation/learn-dxpr-builder/development/hooks-api)

Ogni elemento ha un campo **HTML classes** con un elenco di classi con nome. Utilità Bootstrap 5 e ombre sono integrate. Il tuo tema può aggiungere un gruppo proprio tramite il suo `.info.yml`, e un modulo tramite un hook alter. Questa pagina spiega cosa contiene l’elenco e come registri le tue classi, così gli editor scelgono un aspetto brand per nome invece di digitare nomi di classi.

## Applica una classe

1. Apri le impostazioni dell’elemento e trova **HTML classes** in fondo al pannello **General**.
2. Fai clic sul riquadro e scegli una classe dall’elenco. Digitare nel riquadro filtra l’elenco.
3. Per inserire una classe non in elenco, fai clic su **Edit as text** e digitala.
4. Fai clic su **Save** nella finestra, poi su **Save** nella barra del builder.

Le classi finiscono nell’attributo `class` dell’elemento nell’HTML salvato. [ID HTML e classi](/hc/documentation/learn-dxpr-builder/element-settings/custom-css) guida gli editor negli usi comuni.

## Cosa contiene l’elenco

L’editor costruisce l’elenco all’avvio. Unisce tre fonti in quest’ordine:

1. L’elenco integrato. Contiene un gruppo **Drop shadows**, un breve gruppo **Bootstrap classes** e le utilità Bootstrap 5, raggruppate per compito: **Display & Visibility**, **Responsive Visibility**, **Margins**, **Padding**, **Text Colors** e altro.
2. Un gruppo per ogni tema installato il cui `.info.yml` ha una chiave `dxpr_builder_classes`. Il gruppo è etichettato con il nome del tema.
3. Modifiche dai moduli, vedi [Registrare classi da un modulo](#register-classes-from-a-module).

Quindi ogni sito ha classi per lo spazio, come `mt-3` e `px-4`, per la visualizzazione, come `d-none`, e per il testo, come `text-center` e `fw-bold`. Non devi configurare niente per averle.

## Registrare classi in un tema

Aggiungi una mappatura `dxpr_builder_classes` al `.info.yml` del tema. Ogni chiave è un nome di classe, o più nomi separati da spazi; ogni valore è l’etichetta vista dagli editor. DXPR Theme registra le sue classi così:

```yaml
dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

```

1. Aggiungi la mappatura a `themes/custom/mytheme/mytheme.info.yml`:

    ```yaml
    dxpr_builder_classes:
      brand-card: 'Brand card'
      brand-card shadow-lg: 'Brand card with shadow'

    ```
2. Scrivi il CSS per le classi in una libreria che il tema carica su ogni pagina; vedi [CSS personalizzato](/it/hc/documentation/learn-dxpr-builder/customization/custom-css).
3. Svuota le cache con `drush cr`, così Drupal rilegge il file info.
4. Apri le impostazioni di un elemento e verifica che **HTML classes** mostri un gruppo con il nome del tuo tema e le due voci.

Ogni tema installato con la chiave aggiunge il suo gruppo, non solo il tema predefinito. Il gruppo porta sempre il nome del tema; il file info non può rinominarlo.

## Registrare classi da un modulo

Un modulo personalizzato può aggiungere classi, o rimuovere classi registrate da un tema, con un hook alter. Non può rimuovere le voci Bootstrap integrate, perché l’editor le aggiunge nel browser. Il codice è in [Riferimento API hook](/it/hc/documentation/learn-dxpr-builder/development/hooks-api#hook_dxpr_builder_classes_alter).

## Versione Bootstrap

L’elenco integrato è Bootstrap 5. Se il tuo tema non carica Bootstrap 5, imposta **Sideload Bootstrap files** a **Bootstrap 5** in **Bootstrap** in **DXPR Studio** > **DXPR Builder** > **General Settings**, così le classi hanno CSS dietro di sé. Vedi [Performance](/it/hc/documentation/learn-dxpr-builder/advanced/performance#bootstrap-sideloading) per ciò che carica.

## Se non vedi le tue classi

- **Il gruppo del tuo tema manca in HTML classes.** Drupal usa ancora la vecchia copia del file info del tema. Fai clic su **Clear all caches** in **Configuration** > **Development** > **Performance** (`/admin/config/development/performance`), oppure esegui `drush cr`.
- **Un tema con la chiave non aggiunge gruppi.** Contano solo i temi installati. Installa il tema in **Appearance** (`/admin/appearance`); non deve essere il tema predefinito.
- **L’elemento sembra uguale dopo aver scelto una classe.** Nessun CSS per quella classe si carica nella pagina. Aggiungi le regole a una libreria caricata dal tuo tema, vedi [CSS personalizzato](/it/hc/documentation/learn-dxpr-builder/customization/custom-css). Per le classi Bootstrap, vedi [Versione Bootstrap](#bootstrap-version).

## Prossimi passi

- [CSS personalizzato](/it/hc/documentation/learn-dxpr-builder/customization/custom-css): scrivi le regole dietro le tue classi.
- [Editor di testo](/it/hc/documentation/learn-dxpr-builder/customization/text-editor): offri classi per paragrafi e parole nell’elenco **Styles**.
- [Riferimento API hook](/it/hc/documentation/learn-dxpr-builder/development/hooks-api): gli altri hook forniti da DXPR Builder.