DokumentationJourney OptimizerAnvändarhandbok om Journey Optimizer

Lägg till anpassad CSS i e-postinnehållet email-metadata

Last update: Mon Jul 07 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

  • Mellanliggande
  • Användare

När du utformar dina e-postmeddelanden kan du lägga till din egen anpassade CSS direkt i Journey Optimizer e-postmeddelandet för Designer. Med den här funktionen kan du använda avancerad och specifik formatering, vilket ger större flexibilitet och kontroll över utseendet på innehållet.

Definiera anpassad CSS define-custom-css

Följ stegen nedan om du vill lägga till anpassad CSS i ditt e-postinnehåll.

  1. Se till att det finns visst innehåll definierat i e-post-Designer genom att lägga till minst en komponent.

  2. Välj Body, antingen från Navigation tree till vänster eller ovanför den högra rutan. Avsnittet CSS styles visas till höger.

    Välj knappen Lägg till anpassad CSS {width="85%"}

    note note
    NOTE
    Avsnittet CSS styles är bara tillgängligt när det redan finns innehåll i redigeraren.

  3. Klicka på knappen Add Custom CSS.

    note note
    NOTE
    Knappen Add custom CSS är bara tillgänglig när Body är markerad. Du kan dock använda anpassade CSS-format på alla komponenter i innehållet.

  4. Ange din CSS-kod i det dedikerade textområdet som visas. Kontrollera att den anpassade CSS-koden är giltig och följer rätt syntax. Läs mer

    Ange anpassad CSS i det dedikerade textområdet {width="65%"}

    note note
    NOTE
    När du använder en mall med låst innehåll kan du inte lägga till anpassad CSS i innehållet. Knappetiketten ändras till View custom CSS och all anpassad CSS som redan finns i innehållet är skrivskyddad.

  5. Spara din egen CSS och kontrollera att din anpassade CSS används korrekt på ditt innehåll. Om så inte är fallet kontrollerar du avsnittet Felsökning.

    Välj knappen Lägg till anpassad CSS {width="85%"}

  6. Om du tar bort allt innehåll försvinner avsnittet och den tidigare definierade anpassade CSS används inte längre.

  7. Lägg tillbaka innehåll i redigeraren så att avsnittet CSS styles visas igen. Den anpassade CSS-koden används igen.

Kontrollera med giltig CSS use-valid-css

Du kan ange valfri giltig CSS-sträng i textområdet Add custom CSS. Formaterad CSS används omedelbart på innehållet.

CAUTION
Användarna ansvarar för säkerheten i sina anpassade CSS. Se till att CSS inte medför sårbarheter eller konflikter med det befintliga innehållet.
Undvik att använda CSS som oavsiktligt kan bryta layouten eller funktionaliteten i innehållet.
Exempel på CSS

Nedan finns exempel på giltig CSS.

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;
  }
}
Exempel på ogiltig CSS

Om ogiltig CSS anges visas ett felmeddelande som anger att CSS inte kan sparas. Nedan finns exempel på ogiltig CSS.

Användning av <style>-taggar accepteras inte:

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>

Ogiltig syntax, t.ex. saknade klammerparenteser, accepteras inte:

code language-css 
body {
  background: red;

Tekniskt genomförande implementation

Din anpassade CSS läggs till i slutet av avsnittet <head> som en del av en <style> -tagg med attributet data-name="global-custom", som i exemplet nedan. På så sätt säkerställs att de anpassade formaten tillämpas globalt på innehållet.

Se exempel
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>

Den anpassade CSS-koden tolkas eller valideras inte av e-postfönstret för Designer Settings. Den är helt oberoende och kan bara ändras med alternativet Add Custom CSS.

Guardrails - importerat innehåll

Om du vill använda anpassad CSS med innehåll som importerats till e-post-Designer bör du tänka på följande:

  • Om du importerar externt HTML-innehåll inklusive CSS, kommer det att finnas i Compatibility mode, där CSS styles-avsnittet inte är tillgängligt, om du inte konverterar det innehållet. Läs mer om att importera befintligt innehåll

  • Om du importerar innehåll som skapats med e-post-Designer, inklusive CSS som tillämpats med alternativet Add custom CSS, kommer den CSS som tidigare använts att vara synlig och redigerbar från samma alternativ.

Felsökning troubleshooting

Om din anpassade CSS inte används bör du överväga alternativen nedan.

  • Kontrollera att CSS-koden är giltig och fri från syntaxfel (t.ex. saknade klamrar, felaktiga egenskapsnamn). Lär dig hur

  • Kontrollera att din CSS läggs till i taggen <style> med attributet data-name="global-custom".

  • Kontrollera om stiltaggen global-custom har attributet data-disabled inställt på true. Om så är fallet används inte den anpassade CSS:en.

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

  • Kontrollera att din CSS inte åsidosätts av andra CSS-regler, inklusive alla teman som tillämpas på ditt innehåll.

    • Använd utvecklingsverktygen i webbläsaren för att inspektera innehållet och verifiera att CSS har rätt väljare som mål.

    • Överväg att lägga till !important i dina deklarationer för att säkerställa att de har företräde.

Exempel:
code language-none 
 ```css
 .acr-Form {
   background: red !important;
 }
 ```
recommendation-more-help
b22c9c5d-9208-48f4-b874-1cefb8df4d76