DocumentazioneMarketo EngageGuida di Marketo

Aggiungere un CSS personalizzato al contenuto dell’e-mail custom-css

Last update: Tue Aug 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Argomenti:

Creato per:

  • Intermedio

Aggiungi un CSS personalizzato direttamente in Marketo Engage Email Designer per uno stile avanzato e specifico.

Definire CSS personalizzato define-custom-css

  1. Assicurati che nel Designer e-mail sia definito del contenuto aggiungendo almeno un componente.

  2. Selezionare Body da Navigation tree a sinistra o nel riquadro di destra. CSS styles viene visualizzato a destra.

    {width="800" modal="regular"}

    note note
    NOTE
    La sezione CSS styles è disponibile solo quando il contenuto è presente nell'editor.

  3. Fare clic sul pulsante + Add custom CSS.

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

  4. Inserisci il codice CSS nell’area di testo dedicata visualizzata. Verificare che il file CSS personalizzato sia valido e che segua la sintassi corretta. Al termine, fai clic su Salva.

    note note
    NOTE
    Non puoi aggiungere CSS personalizzati al contenuto quando utilizzi un modello con contenuto bloccato. L'etichetta del pulsante diventa View custom CSS ed eventuali CSS personalizzati visualizzati sono di sola lettura.

  5. Assicurati che il CSS sia applicabile al contenuto. In caso contrario, controllare la sezione Risoluzione dei problemi.

    note note
    NOTE
    Se rimuovi tutto il contenuto, la sezione scompare e non viene più applicato il CSS personalizzato definito in precedenza. Aggiungere nuovamente il contenuto per visualizzare di nuovo la sezione CSS styles. Il CSS personalizzato viene applicato nuovamente.

Utilizzo di CSS validi using-valid-css

È possibile immettere qualsiasi stringa CSS valida nell'area di testo Add custom CSS. I file CSS formattati correttamente vengono applicati immediatamente al contenuto.

CAUTION
Sei responsabile della sicurezza del CSS personalizzato. 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 validi

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 file CSS non valido, viene visualizzato un messaggio di errore che indica che il file 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 CSS personalizzato non viene interpretato o convalidato dal riquadro Settings di E-mail Designer. È completamente indipendente e può essere modificata solo tramite l'opzione Add Custom CSS.

Guardrail - Contenuto importato guardrails

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, il contenuto si troverà in Compatibility mode, dove la sezione CSS styles non è disponibile.

  • Se l'importazione del contenuto creato con E-mail Designer include CSS applicati tramite l'opzione Add custom CSS, il CSS applicato in precedenza sarà visibile e modificabile dalla stessa opzione.

Risoluzione dei problemi troubleshooting

Se il CSS personalizzato non è applicato, prova i suggerimenti riportati di seguito.

  • Assicurati che il CSS sia valido e privo di errori di sintassi (ad esempio parentesi graffe mancanti, nomi di proprietà errati). Scopri come

  • Verificare che il file CSS venga aggiunto al tag <style> con l'attributo data-name="global-custom".

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

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

  • Assicurati che il CSS non sia sostituito da altre regole CSS.

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

Ad esempio:
code language-none 
 ```css
 .acr-Form {
   background: red !important;
 }
 ```
NOTE
Il supporto Marketo Engage non è configurato per assistere nella risoluzione dei problemi relativi ai file CSS personalizzati. Per assistenza CSS, consulta uno sviluppatore web.
recommendation-more-help
94ec3174-1d6c-4f51-822d-5424bedeecac