---
url: 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/customization/text-editor'
title: 'Aggiungi stili del brand e pulsanti all’editor di testo | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T03:01:04+00:00'
updated: '2026-10-24T09:09:48+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Quando gli editor fanno clic in un testo in DXPR Builder, compare una barra. Puoi riempire il suo elenco Styles con gli stili del tuo brand, come un paragrafo lead o una frase evidenziata. Puoi anche scegliere quali pulsanti vede ogni ruolo. Gli editor applicano così un aspetto brand con un clic invece di impostare dimensioni e colori a mano. I font vengono dal tuo tema; vedi Font personalizzati.'
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: 'Aggiungi stili del brand e pulsanti all’editor di testo'
      description: 'Quando gli editor fanno clic in un testo in DXPR Builder, compare una barra. Puoi riempire il suo elenco Styles con gli stili del tuo brand, come un paragrafo lead o una frase evidenziata. Puoi anche scegliere quali pulsanti vede ogni ruolo. Gli editor applicano così un aspetto brand con un clic invece di impostare dimensioni e colori a mano. I font vengono dal tuo tema; vedi Font personalizzati.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T03:01:04+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/text-editor'
      articleSection: 'Je huisstijl toepassen'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/it/hc/documentation/learn-dxpr-builder/customization/text-editor'
      description: 'Quando gli editor fanno clic in un testo in DXPR Builder, compare una barra. Puoi riempire il suo elenco Styles con gli stili del tuo brand, come un paragrafo lead o una frase evidenziata. Puoi anche scegliere quali pulsanti vede ogni ruolo. Gli editor applicano così un aspetto brand con un clic invece di impostare dimensioni e colori a mano. I font vengono dal tuo tema; vedi Font personalizzati.'
      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) # Aggiungi stili del brand e pulsanti all’editor di testo.

 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)
- [Classi di utilità](/it/hc/documentation/learn-dxpr-builder/customization/utility-classes)
- [Scegli cosa vede ogni ruolo nel builder](/it/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin)

Quando gli editor fanno clic in un testo in DXPR Builder, compare una barra. Puoi riempire il suo elenco **Styles** con gli stili del tuo brand, come un paragrafo lead o una frase evidenziata. Puoi anche scegliere quali pulsanti vede ogni ruolo. Gli editor applicano così un aspetto brand con un clic invece di impostare dimensioni e colori a mano. I font vengono dal tuo tema; vedi [Font personalizzati](/it/hc/documentation/learn-dxpr-builder/customization/custom-fonts).

## Prima di iniziare

- Per modificare gli stili, serve **Administer DXPR Builder configuration**.
- Per modificare i pulsanti della barra, serve **Administer dxpr builder profile**.
- Ogni stile ha bisogno di CSS dietro di sé. Le classi Bootstrap 5 come `lead` funzionano quando la pagina carica Bootstrap 5. Le tue classi richiedono una regola nel tema; vedi [CSS personalizzato](/it/hc/documentation/learn-dxpr-builder/customization/custom-css).

## Configurazione

1. Vai in **DXPR Studio** > **DXPR Builder** > **General Settings** (`/admin/dxpr_studio/dxpr_builder/settings`).
2. Espandi **Text Editor**. Il riquadro **Custom styles** elenca già gli stili inclusi in DXPR Builder, uno per riga.
3. Aggiungi una riga per stile nella forma `Label=element.class`, ed elimina le righe indesiderate.
4. Fai clic su **Save settings**.
5. Apri una pagina nel builder, o ricaricala se è aperta, e fai clic in un testo.
6. Fai clic su **Styles** nella barra e scegli il tuo stile.

Queste righe aggiungono quattro stili:

```text
Lead=p.lead
Event date=span.text-primary.fw-semibold
Callout=p.border-start.border-primary.border-4.ps-3
Sassy Title=h1.sassy-title

```

Ogni riga ha tre parti:

- La **label** prima di `=` è il nome visto dagli editor nell’elenco.
- L’**element** dopo `=` decide cosa copre lo stile. Un elemento blocco come `p`, `h2` o `blockquote` dà stile a un intero paragrafo o titolo. Un elemento inline come `span`, `mark` o `code` avvolge solo le parole selezionate.
- Ogni **class** segue un punto. Aggiungi più classi con più punti, come in `Callout` sopra.

I nomi di elemento usano solo lettere e cifre. I nomi di classe usano lettere, cifre, trattini e trattini bassi. Per riavere l’elenco incluso, svuota il riquadro e salva.

## Pulsanti della barra per ruolo

1. Vai in **DXPR Studio** > **DXPR Builder** > **User Profiles** (`/admin/dxpr_studio/dxpr_builder/profile`) e fai clic su **Edit** accanto al profilo per il ruolo.
2. Espandi **Text editor buttons (inline editing)**. Spunta i pulsanti per il testo modificato nella pagina.
3. Espandi **Text editor buttons (modal editing)**. Spunta i pulsanti per i riquadri di testo in una finestra delle impostazioni.
4. Fai clic su **Save**.

L’editing inline copre gli elementi Text, Alert e Blockquote. Tieni spuntato **Font style** in entrambi i gruppi per mostrare i tuoi stili personalizzati; è il nome del profilo per l’elenco **Styles**. Se togli la spunta a ogni pulsante in un gruppo, quella barra torna al set integrato. [Profili utente](/it/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin) spiega quale profilo vale per chi.

## Cosa vedrai

**Styles** nella barra apre un pannello con due gruppi. **Block styles** contiene gli stili per interi paragrafi e titoli, **Text styles** quelli per parole selezionate. Dopo aver scelto uno stile, il pulsante ne mostra il nome, o **Multiple styles** quando ne valgono più d’uno.

L’editor salva l’elemento e le sue classi nell’HTML della pagina, così i visitatori vedono lo stesso aspetto. Uno stile blocco è attivo solo nel suo elemento: `Sassy Title` richiede il cursore in un **Heading 1**.

## Impostazioni

Tutti i 36 pulsanti compaiono in entrambi i gruppi. Un nuovo profilo inizia con questi spuntati:

| Pulsante | Nome macchina | Predefinito inline | Predefinito modale |
|---|---|:-:|:-:|
| **AI Assistant**, **AI Tone of Voice** | `aiAgentButton`, `aiAgentToneButton` | sì | sì |
| **Bold**, **Italic** | `bold`, `italic` | sì | sì |
| **Underline**, **Strike through** | `underline`, `strikethrough` |  | sì |
| **Superscript**, **Subscript** | `superscript`, `subscript` |  | sì |
| **Remove format** | `removeFormat` | sì | sì |
| **Text color** | `fontColor` | sì | sì |
| **Background color** | `fontBackgroundColor` |  |  |
| **Font size** | `fontSize` | sì | sì |
| **Font family** | `fontFamily` |  |  |
| **HTML block format** | `heading` | sì | sì |
| **Font style** (l’elenco **Styles**) | `style` | sì | sì |
| **Align left**, **Center**, **Align right**, **Justify** | `alignment:left`, `alignment:center`, `alignment:right`, `alignment:justify` | sì | sì |
| **Insert/Remove Bullet list** | `bulletedList` | sì | sì |
| **Insert/Remove Numbered list** | `numberedList` |  | sì |
| **Outdent**, **Indent** | `outdent`, `indent` |  | sì |
| **Block quote** | `blockQuote` |  | sì |
| **Link**, **Image**, **Table** | `link`, `insertImage`, `insertTable` | sì | sì |
| **Horizontal rule**, **Character map** | `horizontalLine`, `specialCharacters` |  | sì |
| **Source code**, **Show blocks** | `sourceEditing`, `showBlocks` |  | sì |
| **Select all**, **Replace**, **Accessibility help** | `selectAll`, `findAndReplace`, `accessibilityHelp` |  |  |
| **Undo**, **Redo** | `undo`, `redo` | sì | sì |

Gli utenti i cui ruoli non corrispondono a nessun profilo attivo ricevono le barre integrate. Inline, sono **Bold**, **Italic**, **Remove format**, **HTML block format**, **Font style**, entrambi gli elenchi, **Link**, **Image**, **Table**, **Undo** e **Redo**. La barra modale aggiunge i pulsanti di sottolineatura, barrato, script, allineamento, rientro, colore e dimensione. Aggiunge anche **Block quote**, **Horizontal rule**, **Character map**, **Source code** e **Show blocks**. Quando l’AI è attiva, entrambe ricevono i due pulsanti AI.

**Font family** offre i font web-safe standard di CKEditor, non i font del tuo tema.

## Se non vedi il tuo stile

- **L’elenco Styles mostra solo gli stili inclusi.** Una riga rompe il formato, oppure una riga vuota sta tra due stili, quindi DXPR Builder ignora l’intero elenco. Correggilo in **Text Editor** in `/admin/dxpr_studio/dxpr_builder/settings` e salva.
- **Il tuo stile è disabilitato.** Uno stile blocco funziona solo nel suo elemento: `h1.sassy-title` richiede un **Heading 1**. Cambia prima il blocco con l’elenco dei titoli, oppure definisci lo stile per `p`.
- **Non c’è il pulsante Styles nella barra.** Il profilo dell’editor ha **Font style** senza spunta. Spuntalo in entrambi i gruppi di pulsanti in `/admin/dxpr_studio/dxpr_builder/profile`.
- **Lo stile si applica, ma il testo sembra uguale.** Il tema non ha CSS per la classe, oppure Bootstrap 5 non è caricato. Aggiungi la regola al tema, oppure imposta **Sideload Bootstrap files** a **Bootstrap 5** in **Bootstrap** nella pagina General Settings.
- **Gli editor vedono lo stile, i visitatori no.** **Apply text format filters to frontend content** è attivo in **Text Filters**, e il formato di testo del campo rimuove gli attributi `class`. Disattiva l’opzione, oppure dai al campo un formato che mantiene le classi; vedi [I visitatori vedono qualcosa di diverso](/it/hc/documentation/learn-dxpr-builder/troubleshooting/visitors-see-something-else).

## Prossimi passi

- [CSS personalizzato](/it/hc/documentation/learn-dxpr-builder/customization/custom-css): scrivi le regole del tema dietro le tue classi di stile.
- [Classi di utilità](/it/hc/documentation/learn-dxpr-builder/customization/utility-classes): offri classi per interi elementi nell’elenco **HTML classes**.
- [Profili utente](/it/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin): tutto il resto controllato da un profilo.