Dokumentation Journey Optimizer B2B Dokumentation av Journey Optimizer B2B-version

Framtagning av e-postmallar

Last update: Mon Oct 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Skapat för:

Användare

När du har skapat en e-postmall använder du den visuella designrymden för att skapa struktur- och innehållskomponenterna i din e-postmall.

Lägga till struktur och innehåll structure-content

Om du vill starta innehållsdesignen drar du ett objekt från Structures och släpper det på arbetsytan.

Lägg till så många objekt från Structures som du behöver och redigera inställningarna för varje objekt i rutan till höger.

note tip
TIP
Välj komponenten n:nkolumn för att definiera antalet kolumner som du väljer (mellan tre och 10). Du kan också definiera bredden på varje kolumn genom att flytta pilarna under kolumnen.

Dra en struktur till arbetsytan och justera inställningarna {width="800" modal="regular"}

Varje kolumnstorlek får inte vara mindre än 10 % av strukturkomponentens totala bredd. Endast tomma kolumner kan tas bort.

Expandera avsnittet Contents och lägg till så många innehållskomponenter du behöver i en eller flera strukturkomponenter.

{width="800" modal="regular"}
Om det behövs kan du göra ytterligare anpassningar för varje komponent på flikarna Settings eller Style.

Du kan till exempel ändra textstil, utfyllnad eller marginal för varje komponent.
Om du vill lägga till villkorligt innehåll och anpassa innehållet till målprofilerna baserat på villkorliga regler, markerar du en innehållskomponent och klickar på ikonen Enable conditional content i komponentens verktygsfält.

Mer information finns i Villkorligt innehåll.

Lägg till anpassad CSS

Du kan lägga till egen anpassad CSS direkt i e-postmallens designutrymme. Använd anpassad CSS för att använda avancerad och specifik formatering, vilket ger större flexibilitet och kontroll över utseendet på innehållet. Det är en god vana att lägga till den här formateringen på den högsta nivån innan du inkluderar komponenter som bilder, knappar och text.

Med minst en innehållskomponent på arbetsytan väljer du komponenten Body i det vänstra navigeringsträdet för att komma åt den anpassade CSS-redigeraren.

Få åtkomst till brödtextformaten {width="800" modal="regular"}

Klicka på på fliken Stilar Add custom CSS till höger.

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

Popup-redigeraren Add custom CSS visas med platshållarkodkommentarer.

Ange din CSS-kod i redigeraren.

Kontrollera att den anpassade CSS-koden är giltig och följer rätt syntax. Om angiven CSS är ogiltig visas ett felmeddelande och CSS kan inte sparas. Mer information finns i CSS-giltighet.
Klicka på Save om du vill spara den anpassade CSS-koden.

Den anpassade formatmallen används för det befintliga innehållet. Du kan kontrollera att din anpassade CSS används efter dina behov. Mer information om hur du gör ändringar och justerar formatmallsprogrammet finns i Felsökning.

NOTE

Om du tar bort allt innehåll visas inte längre CSS-avsnittet på panelen Innehållsformat och den tidigare definierade anpassade CSS används inte längre. Om du lägger till innehåll igen visas avsnittet CSS styles igen och den anpassade CSS-koden tillämpas igen.

Lägg till fragment

NOTE

Fragment är inte korskompatibla mellan temaläge och manuellt läge i e-postinnehållet. Om du vill använda ett fragment i e-postinnehåll där ett tema används måste fragmentet också skapas i temaläge.

Ett visuellt fragment är en återanvändbar designkomponent som kan refereras av flera innehållsresurser i Adobe Journey Optimizer B2B edition. Det är vanligtvis ett block med innehåll som kan vara färdigskapat och snabbt infogat för att göra redigeringen snabbare och enhetligare.

I följande exempel beskrivs stegen för att lägga till fragment när du redigerar innehållet.

Om du vill öppna fragmentlistan väljer du ikonen Fragment ( ).

Du kan:
- Sortera listan.
- Bläddra, sök efter eller filtrera listan.
- Växla mellan miniatyr- och listvyer.
- Uppdatera listan så att den återspeglar något av de nyligen skapade fragmenten.
{width="700" modal="regular"}

Dra och släpp något av fragmenten i strukturekomponenten.

Redigeraren återger fragmentet i avsnittet/elementet i e-poststrukturen.

note tip
TIP
Om du vill lägga till fragmentet så att det upptar hela den vågräta layouten i e-postmeddelandet lägger du till en 1:1-kolumnstruktur och drar och släpper fragmentet i den.

Fragmentets innehåll uppdateras dynamiskt i strukturen för att visa hur innehållet visas i innehållet.

recommendation-more-help

Redigerbara fält i anpassningsbara fragment

Ett visuellt fragment kan innehålla redigerbara fält som du kan anpassa. Med anpassade fält kan du ändra parametrar när du infogar fragmentet i innehållet och skapa en anpassad upplevelse utan att det ursprungliga fragmentet påverkas. Ramförfattaren kan utforma fragmentet för anpassning av text-, bild- och knappkomponenter. Om ett inkluderat fragment innehåller komponenter med redigerbara fält kan du ändra standardvärdena och anpassa det för innehållet.

Markera fragmentkomponenten.

Inställningarna som visas till höger innehåller redigerbara fält med standardvärdena.

{width="700" modal="regular"}
Ändra eventuella redigerbara fält efter behov.

style

shade-box

När mallen har sparats visas den på fragmentinformationssidan när du väljer fliken Used By i sammanfattningen.

Lägga till bildresurser

I redigeraren för visuellt innehåll väljer du ikonen Marketo Engage Assets ( ) eller ikonen Experience Manager Assets ( ) i det vänstra navigeringsfältet. Från resursväljaren kan du välja resurser som lagras direkt i källbiblioteket.

NOTE

Om du har Adobe Experience Manager som molntjänster har du tillgång till databaserna för både Marketo Engage Design Studio och Adobe Experience Manager Assets as a Cloud Service när ditt användarkonto har de behörigheter som krävs. Dessa databaser är separata och inte synkroniserade. Du kan använda bildresurser från båda källorna.

Lägg till en ny resurs genom att dra och släppa bildresursen i en strukturkomponent.

{width="800" modal="regular"}
Ersätt en befintlig bildresurs genom att markera den på arbetsytan och klicka på Select an asset i verktygen för bildkällan.

{width="600" modal="regular"}

Mer information om hur du använder resurser från din källtyp finns i Använda resurser för innehållsredigering.

Navigera mellan lager, inställningar och format

När du arbetar med innehållet i den visuella designrymden kan du komma åt komponenter, kolumner och innehållselement med hjälp av navigeringsträdet. Klicka på ikonen Navigation tree( ) till vänster för att visa trädet.

Åtkomst till innehållslagren {width="800" modal="regular"}

I följande exempel visas stegen för att justera utfyllnad och lodrät justering inuti en strukturkomponent med kolumner.

Markera kolumnen i strukturkomponenten direkt på arbetsytan eller med navigeringsträdet som visas till vänster.
Klicka på verktyget Select a column i kolumnverktygsfältet och välj det som du vill redigera.

Du kan också välja det i strukturträdet. De redigerbara parametrarna för den kolumnen visas på flikarna Settings och Styles till höger.

{width="800" modal="regular"}
Om du vill redigera kolumnegenskaperna klickar du på fliken Styles till höger och ändrar dem efter dina behov:
- Ändra bakgrundsfärgen för Background efter behov.
  
  Avmarkera kryssrutan för en genomskinlig bakgrund. Aktivera inställningen Background image om du vill använda en bild som bakgrund i stället för en heltäckande färg.
- För Alignment väljer du ikonen Överkant, Mitten eller Nederkant .
- För Padding definierar du utfyllnaden för alla sidor.
  
  Välj Different padding for each side om du vill finjustera utfyllnaden. Klicka på ikonen Lås om du vill avbryta synkroniseringen.
- Utöka avsnittet Advanced för att definiera infogade format för kolumnen.
{width="700" modal="regular"}
Om det behövs upprepar du de här stegen för att justera justeringen och utfyllnaden för de andra kolumnerna i komponenten.
Spara ändringarna.

Anpassa innehåll

Journey Optimizer B2B edition använder en infogad enkel syntax som gör att du kan skapa uttryck med anpassat innehåll omgivet av klammerparenteser {}. Du kan lägga till flera uttryck i samma innehåll eller fält utan begränsningar.

Exempel:

Hello {{lead.firstName}} {{lead.lastName}}
Hello {%= lead.mktoName ?: "Marketer" %}

NOTE

Journey Optimizer B2B edition följer nu syntaxen kamelcase för personaliseringstoken i e-postmeddelanden för att matcha övriga Adobe Experience Platform-program för en enhetlig upplevelse. Detta tokenformat är helt kompatibelt med Handlebars-mallsspråket. Alla tokens som lades till före den här ändringen uppdateras automatiskt.

När du bearbetar innehållet ersätter Journey Optimizer B2B edition uttrycket med data som finns i Experience Platform-databasen. Det första exemplet blir Hello John Doe.

I följande exempel beskrivs stegen för att anpassa innehåll med hjälp av lead-/kontoattribut och systemtokens.

Markera textkomponenten och klicka på ikonen Lägg till anpassning i verktygsfältet.

{width="600"}

Den här åtgärden öppnar dialogrutan Redigera Personalization.
Lägg till en token genom att klicka på plustecknet ( + ) bredvid den.

Om du vill lägga till en variabel med en reservtext (standardtext som visas när fältet inte är tillgängligt för en lead) klickar du på ikonen Mer ( … ) och väljer Insert with fallback text.

{width="700" modal="regular"}
Lägg till eventuella ytterligare variabler eller annan statisk text som du vill ta med.
Klicka på Save.

Personaliseringsskriptet visas i den visuella designrymden. Du kan markera den för att göra ändringar vid behov.

{width="600"}

Redigera länkad URL-spårning

Klicka på ikonen Links( ) till vänster om du vill visa alla länkade URL:er i ditt innehåll som ska spåras.
Om det behövs klickar du på ikonen Redigera ( ) och ändrar Tracking Type eller Label.

Du kan också lägga till taggar för en länk.

Klicka på ikonen Redigera för att komma åt länkspårning {width="500"}

Använda format i mörkt läge

Använd mörkt läge för att granska din e-postvisning för ett mörkt tema i en e-postklient. I ett mörkt läge eller tema kan en e-postklient eller app som stöder det visa e-postmeddelanden med mörkare bakgrund och ljusare färger för text, knappar och andra visuella element. Överst till höger på arbetsytan ändrar du väljaren till Mörkt läge ( ). Förhandsgranska och definiera sedan specifika anpassade inställningar som ska användas för visning av e-postklienter när deras mörka tema är aktiverat.

Designarbetsyta för e-post visar väljaren för mörkt läge och e-postinnehåll som visas i mörkt läge {width="700" modal="regular"}

Mer information om formatet för mörkt läge och de effektivaste strategierna finns i Mörkt läge för e-postinnehåll.

Visningsalternativ

Utnyttja de alternativ för visning och innehållsvalidering som finns i det visuella designutrymmet.

Zooma in/ut i innehållet genom förinställda zoomalternativ.
Växla mellan att visa innehållet på datorer, mobiler eller endast text/normal text.
- Klicka på ikonen Ögon om du vill förhandsgranska innehåll på olika enheter.
- Välj en av de färdiga enheterna eller ange anpassade dimensioner för att förhandsgranska innehållet.

Fler alternativ

På menyn More … högst upp i e-postdesignområdet kan du utföra följande åtgärder:

Klicka på Mer för att komma åt mallåtgärder {width="500"}

Reset template - Klicka på det här alternativet om du vill rensa arbetsytan till en tom platta och starta om skapandet av innehåll.
Save as fragment - Spara alla eller delar av mallen som ett fragment som kan återanvändas i flera e-postmallar eller e-postmallar. Du anger ett namn och en beskrivning för fragmentet och sparar det i listan över tillgängliga fragment.
Change your design - Återgå till sidan Designa din e-post. Därifrån kan du välja en annan mall för att starta om designprocessen. Du kan också välja att designa innehållet från grunden med en tom arbetsyta (Klassiskt läge) eller med ett varumärkestema (Temalläge).
Export HTML - Hämta innehållet på den visuella arbetsytan till ditt lokala system i HTML-format som paketerats som en zip-fil.

6ef00091-a233-4243-8773-0da8461f7ef0