DocumentaçãoJourney OptimizerGuia do Journey Optimizer

Adicionar CSS personalizado ao conteúdo do email email-metadata

Última atualização: 5 de setembro de 2026

Criado para:

  • Intermediário
  • Usuário

Nesta página: saiba como adicionar CSS personalizado ao seu conteúdo de email no Designer de Email para obter um estilo avançado, como manter seu CSS válido e como solucionar problemas de estilos que não são aplicados.

style
shade-box

Ao criar seus emails, você pode adicionar seu próprio CSS personalizado diretamente no Journey Optimizer Designer de email. Esse recurso permite aplicar estilos avançados e específicos para obter mais flexibilidade e controle sobre a aparência do conteúdo.

Definir CSS personalizado define-custom-css

Para adicionar CSS personalizado ao seu conteúdo de email, siga as etapas abaixo.

  1. Verifique se há conteúdo definido no Designer de email adicionando pelo menos um componente.

  2. Selecione Corpo, na Árvore de navegação à esquerda ou na parte superior do painel direito. A seção Estilos CSS é exibida à direita.

    Selecione o botão Adicionar CSS personalizado {width="85%"}

    note
    NOTE
    A seção Estilos CSS só está disponível quando o conteúdo já está presente no editor.

  3. Clique no botão Adicionar CSS personalizado.

    note
    NOTE
    O botão Adicionar CSS personalizado só está disponível quando Corpo é selecionado. No entanto, você pode aplicar estilos CSS personalizados a todos os componentes dentro do conteúdo.

  4. Insira seu código CSS na área de texto dedicada que aparece. Verifique se o CSS personalizado é válido e segue a sintaxe apropriada. Saiba mais

    Inserir CSS personalizado na área de texto dedicada {width="65%"}

    note
    NOTE
    Ao usar um modelo com conteúdo bloqueado, não é possível adicionar CSS personalizado ao seu conteúdo. O rótulo do botão é alterado para Exibir CSS personalizado e qualquer CSS personalizado já presente no conteúdo é somente leitura.

  5. Salve seu CSS personalizado e verifique se o CSS personalizado foi aplicado corretamente ao conteúdo. Se esse não for o caso, verifique a seção Solução de problemas.

    Selecione o botão Adicionar CSS personalizado {width="85%"}

  6. Se você remover todo o conteúdo, a seção desaparecerá e o CSS personalizado definido anteriormente não será mais aplicado.

  7. Adicione conteúdo de volta ao editor para que a seção Estilos CSS reapareça. O CSS personalizado é aplicado novamente.

Assegure o uso de CSS válido use-valid-css

Você pode inserir qualquer string CSS válida na área de texto Adicionar CSS personalizado. O CSS adequadamente formatado é aplicado imediatamente ao conteúdo.

CAUTION
Os usuários são responsáveis pela segurança de seus CSS personalizados. Certifique-se de que o CSS não introduza vulnerabilidades ou conflitos com o conteúdo existente.
Evite usar CSS que possa quebrar involuntariamente o layout ou a funcionalidade do conteúdo.
Exemplos de CSS

Abaixo estão exemplos de CSS válido.

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;
  }
}
Exemplos de CSS inválido

Se um CSS inválido for inserido, uma mensagem de erro será exibida, indicando que o CSS não pode ser salvo. Abaixo estão exemplos de CSS inválido.

O uso de <style> tags não é aceito:

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>

Sintaxe inválida, como chaves ausentes, não é aceita:

code language-css 
body {
  background: red;

Implementação técnica implementation

Seu CSS personalizado é adicionado ao final da seção <head> como parte de uma marca <style> com o atributo data-name="global-custom", como no exemplo abaixo. Isso garante que os estilos personalizados sejam aplicados globalmente ao conteúdo.

Ver exemplo
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>

O CSS personalizado não é interpretado ou validado pelo painel Configurações do Email Designer. Ela é totalmente independente e só pode ser modificada por meio da opção Adicionar CSS personalizado.

Grades de Proteção - Conteúdo importado

Se você quiser usar o CSS personalizado com o conteúdo importado para o Designer de email, considere o seguinte:

  • Se você importar conteúdo externo do HTML, incluindo CSS, a menos que converta esse conteúdo, ele estará no Modo de compatibilidade, onde a seção Estilos CSS não está disponível. Saiba mais sobre como importar conteúdo existente

  • Se você estiver importando conteúdo criado com o Designer de email, incluindo CSS aplicado por meio da opção Adicionar CSS personalizado, o CSS aplicado anteriormente ficará visível e poderá ser editado pela mesma opção.

Solução de problemas troubleshooting

Se o CSS personalizado não for aplicado, considere as opções abaixo.

  • Verifique se o CSS é válido e está livre de erros de sintaxe (como chaves ausentes, nomes de propriedades incorretos). Saiba como

  • Verifique se o CSS está sendo adicionado à tag <style> com o atributo data-name="global-custom".

  • Verifique se a marca de estilo global-custom tem o atributo data-disabled definido como true. Se esse for o caso, o CSS personalizado não será aplicado.

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

  • Certifique-se de que seu CSS não seja substituído por outras regras CSS, incluindo qualquer tema aplicado ao seu conteúdo.

    • Use as ferramentas de desenvolvedor do navegador para inspecionar o conteúdo e verificar se o CSS está direcionando os seletores corretos.

    • Considere adicionar !important às suas declarações para garantir que elas tenham prioridade.

      accordion
      Por exemplo:
      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