Documentazione Journey Optimizer Guida di Journey Optimizer

Aggiungere un CSS personalizzato al contenuto dell’e-mail email-metadata

Ultimo aggiornamento: 5 settembre 2026

Creato per:

Intermedio
Utente

In questa pagina: scopri come aggiungere CSS personalizzati al contenuto delle e-mail nel Designer e-mail per ottenere uno stile avanzato, come mantenere validi i CSS e come risolvere i problemi relativi agli stili non applicati.

style

shade-box

Durante la progettazione delle e-mail, puoi aggiungere CSS personalizzati direttamente all’interno di Journey Optimizer E-mail Designer. Questa funzionalità consente di applicare uno stile avanzato e specifico, per una maggiore flessibilità e controllo sull’aspetto del contenuto.

Definire CSS personalizzato define-custom-css

Per aggiungere CSS personalizzati al contenuto delle e-mail, segui i passaggi indicati di seguito.

Assicurati che nel Designer e-mail siano definiti alcuni contenuti aggiungendo almeno un componente.

Seleziona Corpo dalla Struttura di navigazione a sinistra o nella parte superiore del riquadro di destra. La sezione Stili CSS viene visualizzata a destra.

Seleziona il pulsante Aggiungi CSS personalizzato {width="85%"}

note
NOTE
La sezione Stili CSS è disponibile solo se il contenuto è già presente nell'editor.

Fai clic sul pulsante Aggiungi CSS personalizzato.

note
NOTE
Il pulsante Aggiungi CSS personalizzato è disponibile solo quando è selezionato Corpo. Tuttavia, puoi applicare stili CSS personalizzati a tutti i componenti all’interno del contenuto.

Inserisci il codice CSS nell’area di testo dedicata visualizzata. Assicurati che il CSS personalizzato sia valido e che segua la sintassi corretta. Ulteriori informazioni

Inserisci CSS personalizzato nell'area di testo dedicata {width="65%"}

note
NOTE
Quando si utilizza un modello con contenuto bloccato, non è possibile aggiungere CSS personalizzato al contenuto. L'etichetta del pulsante diventa Visualizza CSS personalizzato ed eventuali CSS personalizzati già presenti nel contenuto sono di sola lettura.

Salva il CSS personalizzato e verifica che il CSS personalizzato sia applicato correttamente al contenuto. In caso contrario, controllare la sezione Risoluzione dei problemi.

{width="85%"}
Se rimuovi tutto il contenuto, la sezione scompare e non viene più applicato il CSS personalizzato definito in precedenza.
Aggiungi nuovamente il contenuto all’editor per visualizzare nuovamente la sezione Stili CSS. Il CSS personalizzato viene applicato nuovamente.

Assicurati di utilizzare CSS valido use-valid-css

È possibile immettere qualsiasi stringa CSS valida nell’area di testo Aggiungi CSS personalizzato. I file CSS formattati correttamente vengono applicati immediatamente al contenuto.

CAUTION

Gli utenti sono responsabili della sicurezza dei CSS personalizzati. Assicurati che il CSS non introduca vulnerabilità o conflitti con il contenuto esistente.

Evita l’utilizzo di CSS che potrebbero interrompere involontariamente il layout o la funzionalità del contenuto.

Esempi di CSS

Di seguito sono riportati alcuni esempi di CSS validi.

code language-css

.acr-component[data-component-id="form"] {
  display: flex;
  justify-content: center;
  background: none;
}

.acr-Form {
  width: 100%;
  padding: 20px 100px;
  border-spacing: 0px 8px;
  box-sizing: border-box;
  margin: 0;
}

.acr-Form .spectrum-FieldLabel {
  width: 20%;
}

.acr-Form.spectrum-Form--labelsAbove .spectrum-FieldLabel,
.acr-Form [data-form-item="checkbox"] .spectrum-FieldLabel {
  width: auto;
}

.acr-Form .spectrum-Textfield {
  width: 100%;
}

#acr-form-error,
#acr-form-confirmation {
  width: 100%;
  padding: var(--spectrum-global-dimension-static-size-500);
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: var(--spectrum-global-dimension-static-size-200);
}

.spectrum-Form-item.is-required .spectrum-FieldLabel:after{
  content: '*';
  font-size: 1.25rem;
  margin-left: 5px;
  position: absolute;
}

/* Error field placeholder */
.spectrum-HelpText {
  display: none !important;
}

.spectrum-HelpText.is-invalid,
.is-invalid ~ .spectrum-HelpText {
  display: flex !important;
}

code language-css
`@media only screen and (min-width: 600px) { .acr-paragraph-1 { width: 100% !important; } }`

Esempi di CSS non valido

Se viene immesso un CSS non valido, viene visualizzato un messaggio di errore che indica che il CSS non può essere salvato. Di seguito sono riportati alcuni esempi di file CSS non validi.

L’utilizzo di <style> tag non è accettato:

code language-html
`<style type="text/css"> .acr-Form { width: 100%; padding: 20px 100px; border-spacing: 0px 8px; box-sizing: border-box; margin: 0; } </style>`

Sintassi non valida, ad esempio parentesi graffe mancanti, non accettata:

code language-css
`body { background: red;`

Implementazione tecnica implementation

Il file CSS personalizzato viene aggiunto alla fine della sezione <head> come parte di un tag <style> con l’attributo data-name="global-custom", come nell’esempio seguente. In questo modo gli stili personalizzati vengono applicati globalmente al contenuto.

Vedi esempio

code language-html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="content-version" content="3.3.31">
    <meta name="x-apple-disable-message-reformatting">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <style data-name="default" type="text/css">
      td { padding: 0; }
      th { font-weight: normal; }
    </style>
    <style data-name="grid" type="text/css">
      .acr-grid-table { width: 100%; }
    </style>
    <style data-name="acr-theme" type="text/css" data-theme="default" data-variant="0">
      body { margin: 0; font-family: Arial; }
    </style>
    <style data-name="media-default-max-width-500px" type="text/css">
      @media screen and (max-width: 500px) {
        body { width: 100% !important; }
      }
    </style>
    <style data-name="global-custom" type="text/css">
      /* Add you custom CSS here */
    </style>
  </head>
  <body>
    <!-- Minimal content -->
  </body>
</html>

Il file CSS personalizzato non viene interpretato o convalidato dal riquadro Impostazioni di E-mail Designer. È completamente indipendente e può essere modificata solo tramite l’opzione Aggiungi CSS personalizzato.

Guardrail - Contenuto importato

Se desideri utilizzare CSS personalizzati con il contenuto importato nel Designer e-mail, considera quanto segue:

Se si importa contenuto HTML esterno, inclusi i file CSS, a meno che non si converta tale contenuto, verrà attivata la modalità di compatibilità, in cui la sezione Stili CSS non è disponibile. Ulteriori informazioni sull’importazione di contenuto esistente
Se si importa contenuto creato con il Designer e-mail, inclusi i CSS applicati tramite l’opzione Aggiungi CSS personalizzato, i CSS applicati in precedenza saranno visibili e modificabili dalla stessa opzione.

Risoluzione dei problemi troubleshooting

Se il CSS personalizzato non è applicato, considera le opzioni seguenti.

Assicurati che il CSS sia valido e privo di errori di sintassi (ad esempio parentesi graffe mancanti, nomi di proprietà errati). Scopri come
Verifica che il tuo CSS sia stato aggiunto al tag <style> con l’attributo data-name="global-custom".

Verificare se l’attributo data-disabled del tag di stile global-custom è impostato su true. In questo caso, il CSS personalizzato non viene applicato.

accordion

Ad esempio:

code language-html
`<style data-name="global-custom" type="text/css" data-disabled="true"> body: { color: red; } </style>`

Assicurati che il tuo CSS non sia sovrascritto da altre regole CSS, incluso qualsiasi tema applicato al contenuto.

Utilizza gli strumenti di sviluppo del browser per esaminare il contenuto e verificare che i CSS stiano eseguendo il targeting dei selettori corretti.

Prendi in considerazione l’aggiunta di !important alle tue dichiarazioni per assicurarti che abbiano la precedenza.

accordion

Ad esempio:

code language-css
`.acr-Form { background: red !important; }`

AI Knowledge Reference

This section contains structured knowledge intended to support interpretation, retrieval, and question answering related to this topic.

For complete understanding, this information should be combined with the documentation on this page. Neither source is intended to stand alone; the page describes the feature, while this section provides additional context that helps disambiguate terminology, intent, applicability, and constraints.

TL;DR: This page explains how to add custom CSS to email content in the Email Designer for advanced styling, how to keep the CSS valid, how it is implemented in the HTML, and how to troubleshoot styles that are not applied.

Intents:

Add custom CSS to email content for advanced and specific styling
Ensure the entered CSS is valid so it is applied and can be saved
Understand where custom CSS is injected in the generated HTML
Troubleshoot custom CSS that is not applied
Understand custom CSS behavior with imported content

Glossary:

Add Custom CSS: The Email Designer option (available when Body is selected) to enter custom CSS in a dedicated text area (product-specific)
CSS styles section: The section, shown when Body is selected and content is present, from which custom CSS is added (product-specific)
global-custom: The data-name="global-custom" <style> tag added to the end of the <head> where custom CSS is placed (product-specific)
Compatibility mode: The mode for imported external HTML content (unless converted) in which the CSS styles section is not available (product-specific)

Guardrails:

The CSS styles section is only available when content is already present in the editor; the Add custom CSS button is only available when Body is selected.
Custom CSS must be valid and follow proper syntax; invalid CSS (for example using <style> tags, or syntax errors such as missing braces) triggers an error message and cannot be saved.
When using a template with locked content, you cannot add custom CSS; the button changes to View custom CSS and existing custom CSS is read-only.
If you remove all content, the CSS styles section disappears and the previously defined custom CSS is no longer applied; adding content back reapplies it.
For imported external HTML content in Compatibility mode (unless converted), the CSS styles section is not available.
Users are responsible for the security of their custom CSS and should ensure it does not introduce vulnerabilities or break the layout.
Custom CSS is not interpreted or validated by the Settings pane; it is independent and can only be modified through the Add Custom CSS option.

Terminology:

Canonical name: Custom CSS — Acronym: CSS — variants: Add Custom CSS, custom CSS styles
Synonyms: “Add custom CSS” = “Add Custom CSS” (button); becomes “View custom CSS” for locked content
Do not confuse: “custom CSS” (global-custom style tag) ≠ default/system-generated CSS styles (other data-name style tags such as default, grid, acr-theme)
Do not confuse: “Compatibility mode” (imported external HTML, no CSS styles section) ≠ content created with the Email Designer (custom CSS visible and editable)

FAQ:

Q: Why is the Add custom CSS button missing? — The CSS styles section requires content in the editor, and the button is only available when Body is selected.
Q: What happens if my CSS is invalid? — An error message is displayed indicating the CSS cannot be saved; <style> tags and syntax errors such as missing braces are not accepted.
Q: Where is my custom CSS added in the HTML? — To the end of the <head> section as a <style data-name="global-custom"> tag.
Q: My custom CSS is not applied — what should I check? — Verify the CSS is valid, that it is in the global-custom style tag, that data-disabled is not set to true, and that it is not overridden by other rules including an applied theme; consider adding !important.
Q: Can I add custom CSS to a template with locked content? — No; the button becomes View custom CSS and any existing custom CSS is read-only.

recommendation-more-help

journey-optimizer-help