Aggiungi stili del brand e pulsanti all’editor di testo.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

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.

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.

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:

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 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.

La barra del testo di un elemento Text il cui pulsante Styles dice Lead, sopra il paragrafo con il cursore dentro, ora impostato nello stile Lead più grande sopra un paragrafo normale

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.

Prossimi passi