DocumentaciónJourney OptimizerGuía de Journey Optimizer

Añadir CSS personalizadas al contenido del correo electrónico email-metadata

Última actualización: 5 de septiembre de 2026

Creado para:

  • Intermedio
  • Usuario

En esta página: Aprenda a agregar CSS personalizado al contenido del correo electrónico en el Designer de correo electrónico para un estilo avanzado, a mantener el CSS válido y a solucionar problemas con los estilos que no se aplican.

style
shade-box

Al diseñar los correos electrónicos, puede agregar su propio CSS personalizado directamente en Journey Optimizer Email Designer. Esta capacidad le permite aplicar estilos avanzados y específicos para obtener una mayor flexibilidad y control sobre el aspecto del contenido.

Definir CSS personalizado define-custom-css

Para añadir CSS personalizado al contenido del correo electrónico, siga los pasos a continuación.

  1. Asegúrese de que haya contenido definido en el Designer de correo electrónico agregando al menos un componente.

  2. Seleccione Cuerpo, ya sea en el árbol de navegación a la izquierda o en la parte superior del panel derecho. La sección estilos CSS se muestra a la derecha.

    Seleccione el botón Agregar CSS personalizado {width="85%"}

    note
    NOTE
    La sección estilos CSS solo está disponible cuando el contenido ya está presente en el editor.

  3. Haga clic en el botón Agregar CSS personalizado.

    note
    NOTE
    El botón Agregar CSS personalizado solo está disponible cuando se selecciona Cuerpo. Sin embargo, puede aplicar estilos CSS personalizados a todos los componentes del contenido.

  4. Introduzca su código CSS en el área de texto dedicada que aparece. Asegúrese de que CSS personalizado sea válido y siga la sintaxis adecuada. Más información

    Escriba CSS personalizado en el área de texto dedicada {width="65%"}

    note
    NOTE
    Al usar una plantilla con contenido bloqueado, no se puede agregar CSS personalizado al contenido. La etiqueta del botón cambia a Ver CSS personalizado y cualquier CSS personalizado que ya esté presente en el contenido es de solo lectura.

  5. Guarde el CSS personalizado y compruebe que el CSS personalizado se aplica correctamente al contenido. Si no es así, consulte la sección Solución de problemas.

    Seleccione el botón Agregar CSS personalizado {width="85%"}

  6. Si elimina todo el contenido, la sección desaparece y ya no se aplica el CSS personalizado definido anteriormente.

  7. Vuelva a agregar contenido al editor para que vuelva a aparecer la sección estilos CSS. Se vuelve a aplicar el CSS personalizado.

Asegúrese de utilizar CSS válido use-valid-css

Puede introducir cualquier cadena CSS válida en el área de texto Agregar CSS personalizado. El CSS con el formato correcto se aplica inmediatamente al contenido.

CAUTION
Los usuarios son responsables de la seguridad de su CSS personalizado. Asegúrese de que CSS no introduzca vulnerabilidades ni conflictos con el contenido existente.
Evite utilizar CSS que pudiera romper involuntariamente el diseño o la funcionalidad del contenido.
Ejemplos de CSS

A continuación se muestran ejemplos 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;
  }
}
Ejemplos de CSS no válido

Si se introduce un CSS no válido, se muestra un mensaje de error que indica que el CSS no se puede guardar. A continuación se muestran ejemplos de CSS no válido.

No se acepta el uso de etiquetas <style>:

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>

No se acepta sintaxis no válida como llaves que faltan:

code language-css 
body {
  background: red;

Implementación técnica implementation

Su CSS personalizado se agrega al final de la sección <head> como parte de una etiqueta <style> con el atributo data-name="global-custom", como en el ejemplo siguiente. Esto garantiza que los estilos personalizados se apliquen globalmente al contenido.

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

El panel Configuración de Designer de correo electrónico no interpreta ni valida la CSS personalizada. Es totalmente independiente y solo se puede modificar mediante la opción Agregar CSS personalizado.

Protecciones: contenido importado

Si desea utilizar CSS personalizado con contenido importado en el Designer de correo electrónico, tenga en cuenta lo siguiente:

  • Si importa contenido externo de HTML, incluido CSS, a menos que convierta ese contenido, estará en modo de compatibilidad, donde la sección estilos CSS no está disponible. Más información sobre cómo importar contenido existente

  • Si se importa contenido creado con el Designer de correo electrónico, incluido CSS aplicado a través de la opción Agregar CSS personalizado, el CSS aplicado anteriormente se podrá ver y editar desde la misma opción.

Resolución de problemas troubleshooting

Si no se aplica el CSS personalizado, tenga en cuenta las siguientes opciones.

  • Asegúrese de que el CSS sea válido y esté libre de errores de sintaxis (como llaves que faltan, nombres de propiedad incorrectos). Descubra cómo

  • Asegúrese de que su CSS se agrega a la etiqueta <style> con el atributo data-name="global-custom".

  • Compruebe si la etiqueta de estilo global-custom tiene el atributo data-disabled establecido en true. En este caso, no se aplica el CSS personalizado.

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

  • Asegúrese de que otras reglas CSS no anulen su CSS, incluido cualquier tema aplicado al contenido.

    • Utilice las herramientas para desarrolladores del navegador para inspeccionar el contenido y comprobar que el CSS está dirigido a los selectores correctos.

    • Considere agregar !important a sus declaraciones para asegurarse de que tengan prioridad.

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