[Beta]{class="badge informative"}
Använd varumärkesteman för e-postinnehåll email-brand-themes
Med teman kan icke-tekniska designers skapa återanvändbara riktlinjer för design av e-postinnehåll som passar ett visst varumärke och en viss stil. Teman ger marknadsförarna möjlighet att snabbare och enklare dra nytta av visuellt tilltalande, varumärkesenhetliga e-postmeddelanden och tillhandahålla avancerade anpassningsalternativ för unika designbehov.
Riktlinjer och begränsningar för teman themes-guidelines
När du arbetar med teman bör du tänka på följande riktlinjer och begränsningar:
-
När du skapar en e-postmall eller en e-postmall från en tom arbetsyta (designa från grunden) kan du välja Temalläge för att börja bygga innehåll med ett tema och tillämpa en specifik formatering som passar ditt varumärke och din design. Om du väljer Manuellt läge kan du inte använda ett tema om du inte återställer designen för e-post- eller e-postmallen.
-
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.
-
Ändringar av ett anpassat tema överlappar inte automatiskt alla e-postmeddelanden eller e-postmallar som redan använder det. Redigera innehållet för var och en för att uppdatera temat.
-
Om du tar bort ett tema påverkar det inte e-post eller e-postmallar där det redan användes.
Skapa ett varumärkestema create-theme
Definiera ditt eget varumärkestema som du kan använda för e-post och e-postmallar i ditt framtida e-postinnehåll.
-
Du kommer åt temaverktygen på något av följande sätt:
-
Skapa en ny e-postmall och klicka på Edit email template för att starta sidan Design your template.
-
Klicka på … More överst till höger i designområdet för e-postinnehåll och välj Change your design.
{width="700" modal="regular"}
Klicka på Change template i bekräftelsedialogrutan för att öppna designsidan.
-
-
Välj Create or edit themes på designsidan.
{width="800" modal="regular"}
-
Välj standardtemat eller använd något av Adobe-teman som utgångspunkt.
note note NOTE Om du vill använda ett av dina anpassade teman (My themes) som utgångspunkt kan du duplicera det och ändra temanamnet när du redigerar temat. -
Klicka på Create.
{width="750" modal="regular"}
Sidan Create a theme innehåller en arbetsyta med befintliga element av alla typer av text, knappar och behållare från starttemat.
-
Använd rätt navigering för att komma åt de olika tematiska formatflikarna och ändra temainställningarna:
De visuella elementen ändras på arbetsytan när du definierar de nya temainställningarna. Om resultatet inte blir det du vill ha kan du klicka på ikonen Ångra (
{width="16"} ) längst ned på den högra panelen. Klicka på ikonen Gör om (
{width="16"} ) för att tillämpa ändringen igen.
-
När temadefinitionen är klar klickar du på Save.
-
Klicka på Close om du vill gå tillbaka till sidan Create a theme och sedan Cancel om du vill gå tillbaka till designsidan.
Du kan sedan välja Design from scratch för att öppna det visuella designområdet och använda temat för e-postmeddelandet eller mallen.
Allmänna inställningar
Definiera de grundläggande parametrarna för ditt tema på fliken General settings:
-
Ange en unik Theme name.
-
Justera Viewport width för e-postinnehållet (brödtexten). Använd upp- och nedpilarna för att öka eller minska bredden eller ange värdet (i pixlar).
Färger
Välj fliken Colors och använd inställningarna för att definiera temafärgpaletten.
-
Klicka på Edit om du vill visa den färgpalett som innehåller färgerna för ditt tema.
Välj en Preset om du vill använda ett färgschema för temat eller justera varje färg i uppsättningen. Du kan också använda en kombination av båda.
{width="350"}
För den markerade färgrutan högst upp kan du ange färgen genom att ange ett känt RGB-, NML-, NMI- eller hexadecimalt värde. Du kan också använda färgreglaget och färgfältet för att välja färgen.
Klicka på pilen Bakåt för att stänga färgpalettverktygen.
-
Klicka på Add variant om du vill skapa flera färgvarianter, till exempel ett ljust- och mörkt-läge, där varje variant har sin egen färgpalett och nya kontroller. Du kan ha upp till sex varianter.
Klicka på ikonen Redigera (
) för varje variant. Du kan använda standardpaletten eller andra anpassade färger. {width="450"}
För varje färg som du vill ändra för varianten flyttar du reglaget åt vänster eller höger för att inaktivera eller aktivera den. Om du vill ange en aktiverad färginställning klickar du på färgrutan för att välja färgen.
{width="450"}
accordion Variantfärginställningar Inställningarna grupperas efter typ:
table 0-row-3 1-row-3 2-row-3 3-row-3 4-row-3 Typ Inställningar Beskrivning General {width="300"}
De här inställningarna bestämmer färgerna för brödtext, strukturer, behållare, bakgrunder, länkar, rutnät och kanter. Headings {width="300"}
De här inställningarna gäller för Heading-element, där du kan ange text- och kantfärger för var och en av de sex rubriknivåerna. Expandera varje rubriknivå som du vill ange färg för varianten.Paragraphs {width="300"}
De här inställningarna gäller för Paragraph-element, där du kan ange text- och kantfärger för var och en av tre stycketyper. Expandera varje stycketext som du vill ange variantens färg.Buttons {width="300"}
Inställningarna gäller för knappelement, där du kan ange fyllningsfärg, kantfärg och textfärg för var och en av de tre knappförinställningarna: Primär, Sekundär och Tertiär.
Textinställningar
På fliken Text settings kan du ange globala teckensnittstyper, format och storlekar som du vill använda för temat. Om du vill ha mer detaljerad kontroll kan du även redigera de här parametrarna för rubriker och stycketyper.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Typ | Inställningar | Beskrivning |
| Global |
|
Ange Font library till Standard eller Google Fonts. Välj sedan den teckensnittsfamilj som du vill använda. Dessa globala textinställningar används genomgående, såvida du inte anger olika textformat för rubriknivåer och stycketyper. |
| Headings |
|
För rubriknivån som du vill ange väljer du H1, H2 och så vidare. Ange Font library till Standard eller Google Fonts. Välj sedan teckensnittsfamilj, storlek och stil. Välj Text alignment: Vänster, Centrerad, Höger eller Justerad. |
| Paragraphs |
|
För rubriknivån som du vill ange väljer du P1, HP och så vidare. Ange Font library till Standard eller Google Fonts. Välj sedan teckensnittsfamilj, storlek och stil. Justera Line height efter behov. Välj Text alignment: Vänster, Centrerad, Höger eller Justerad. |
Mellanrum och kantlinje
På fliken Spacing kan du ange utfyllnad och marginal för de olika elementtyperna. Välj innehållstyp för Select type. Ange sedan utfyllnaden, marginalerna, hörnen och kanterna som är tillämpliga för den elementtypen.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Typ | Inställningar | Beskrivning |
| Margins |
|
Välj ikonen Marginal om du vill visa inställningar som replikerar CSS margin -parametern, som styr utrymmet utanför en komponentkant och separerar det från andra komponenter/element. Det skapar en lucka runt komponenten för att påverka dess placering och layouten för det omgivande innehållet. Ange marginalvärdena i pixlar efter dina designbehov. Du kan ange marginalen för alla sidor, den översta, den vänstra eller högra sidan av komponenten oberoende av varandra. Klicka på ikonerna Lås och Lås upp för att synkronisera eller ta bort synkroniseringen av de övre, nedre och högra marginalvärdena. |
| Paddings |
|
Välj ikonen Utfyllnad om du vill visa inställningar som replikerar CSS padding -parametern, som är mellanrummet mellan innehållet i en komponent/ett element och dess kantlinje. Utfyllnaden ger internt avstånd som du kan använda för att styra avståndet mellan innehållet och komponentens kant. Ange utfyllnadsvärdena i pixlar enligt dina designbehov. Du kan ange utfyllnaden för alla sidor, längst ned, till vänster till höger eller varje sida av komponenten separat. Klicka på ikonerna Lås och Lås upp om du vill synkronisera eller ta bort synkroniseringen för utfyllnadsvärdena längst upp, längst ned och till höger. |
| Corners |
|
Välj ikonen Hörn om du vill visa inställningar som replikerar CSS border-radius -parametern, som definierar radien för komponent-/elementhörnen. Ange det numeriska värdet enligt kurvan som du vill använda för hörnen. Värdet 0 (standard) ger ett fyrkantigt hörn. |
Flytta reglaget Border åt höger för att aktivera visningsalternativen för kantlinjer och ange dem enligt dina designvillkor:
-
Om du vill ange Border size (linjebredd) klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar.
-
Om du vill ange Border style väljer du ett värde i listan med standard-CSS
border-style-värden, till exempel Heldragen, Prickad och Streckad. -
Om du vill avgöra var kantlinjen visas markerar du varje Border position-kryssruta.
Knappar
På fliken Buttons kan du ange olika attribut (andra än färg) för knappelement, till exempel kantradie (form), text och storlek. Du kan ändra inställningarna för var och en av de tre knappförinställningarna: Primary,Secondary och Tertiary.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Typ | Inställningar | Beskrivning |
| Text |
|
Ange Font library till Standard eller Google Fonts. Välj sedan teckensnittsfamilj, storlek och stil. Välj Text alignment: Vänster, Centrerad, Höger eller Justerad. |
| Border |
|
Flytta Border-växeln åt höger för att aktivera visningsalternativen för knappens kantlinje och ange dem enligt dina designvillkor. Ange Border size (linjebredd) genom att öka eller minska antalet pixlar. Ange Border style genom att välja ett värde i listan med standard-CSS border-style-värden, till exempel Heldragen, Prickad och Streckad. |
| Size |
|
För alternativet Height klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar höjden på knappen efter dess innehåll. Använd växlingsknappen för Width för att ange bredden i pixlar eller procent. Om du vill ange en procentbredd använder du skjutreglaget för att ange procentvärdet. Procentvärdet avgör knappstorleken baserat på innehållsrutan i behållarblocket, som inte inkluderar utfyllnad och kanter. Värdet 50 anger till exempel knappbredden till 50 % av den innehållna bredden. Om du vill ha en pixelbaserad bredd klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar knappens bredd efter dess innehåll. |
Delare
På fliken Divider kan du ange inställningar för linjeformat och behållare för en delarkomponent.
| table 0-row-3 1-row-3 2-row-3 3-row-3 | ||
|---|---|---|
| Typ | Inställningar | Beskrivning |
| Line |
|
Ange Border style genom att välja ett värde i listan med standard-CSS border-style-värden, till exempel Heldragen, Prickad och Streckad. |
| Container size |
|
För alternativet Height klickar du på upp- och nedpilsikonerna för att öka eller minska antalet pixlar för komponenten/elementet. Ett tomt värde (Auto) är standardvärdet och ändrar höjden efter dess innehåll (linjeformat). Använd växlingsknappen för Width för att ange bredden i pixlar eller procent. Om du vill ange en procentbredd använder du skjutreglaget för att ange procentvärdet. Procentvärdet avgör elementbredden baserat på innehållsrutan i behållarblocket. Värdet 50 anger till exempel att delarens bredd ska vara 50 % av den innehållna bredden. Om du vill ha en pixelbaserad bredd klickar du på upp- och nedpilarna för att öka eller minska antalet pixlar. Ett tomt värde (Auto) är standardvärdet och ändrar bredden på avgränsaren efter dess innehåll. |
| Alignment |
|
Välj den vågräta justeringen i behållarblocket: Vänster, Centrerad eller Höger. |
Stödraster
På fliken Grid kan du kontrollera kolumn- och radmellanrum för ett rutnätselement:
-
Column gap - Klicka på upp- och nedpilsikonerna för att antingen öka eller minska antalet pixlar för mellanrummet mellan rutnätskolumnerna. Du kan också ange ett tal i fältet.
-
Rows gap - Klicka på upp- och nedpilarna för att antingen öka eller minska antalet pixlar för mellanrummet mellan rutnätsraderna. Du kan också ange ett tal i fältet.
Redigera ett tema
Du kan redigera ett tema med samma arbetsflöde och verktyg som du använder när du skapar ett tema. Skillnaden är att du väljer fliken My themes och väljer det anpassade tema som du vill ändra.
Använd listen till höger för att navigera mellan de olika flikarna och ändra temainställningarna:
De visuella elementen som visas ändras när du ändrar inställningarna. Om resultatet på arbetsytan inte blir som du vill kan du klicka på ikonen Ångra (
Klicka på Save när dina temaändringar är slutförda.
Hantera egna teman
Du kan hantera dina anpassade teman med samma arbetsflöde och verktyg som du använder när du skapar ett tema. Skillnaden är att du väljer fliken My themes och hanterar dina teman i listan som visas.
Om du har en stor lista med anpassade teman kan du använda fältet Sök och andra filter för att minska den visade listan. När du hanterar listan med tillgängliga teman kan du när som helst redigera, ta bort eller duplicera ett anpassat tema.
Redigera ett tema
-
Välj det tema som du vill ändra och klicka på Edit överst till höger.
{width="750" modal="regular"}
-
Använd navigeringen till höger för att använda de olika formatflikarna och ändra temainställningarna:
{width="800" modal="regular"}
De visuella elementen som visas ändras när du ändrar inställningarna. Om resultatet på arbetsytan inte är vad du vill ha kan du klicka på ikonen Ångra längst ned på den högra listen. Klicka på ikonen Gör om för att tillämpa ändringen igen.
-
Klicka på Save när dina temaändringar är slutförda.
Ta bort eller duplicera ett tema
När du hittar temat klickar du på ikonen Mer meny (…) längst ned till höger på temakortet och väljer den åtgärd som du vill utföra:
-
Duplicate - Välj den här åtgärden om du vill duplicera temat. Det nya temat är identiskt med Kopian av som har lagts till i namnet på originalet. Du kan ändra namnet när du redigerar temat.
-
Delete - Välj den här åtgärden om du vill ta bort det anpassade temat. Klicka på Delete i bekräftelsedialogrutan.
note note NOTE Om du tar bort temat påverkas inte e-post- eller e-postmallar där det redan används.
Använd ett tema för att skapa e-postinnehåll use-email-theme
När du skapar en ny e-post- eller e-postmall kan du välja att använda ett varumärkestema som effektiviserar innehållsutvecklingsprocessen och ser till att designen anpassas till definierade standarder. För ett nytt fragment kan du även tillämpa ett tema innan du sparar fragmentet. Fragmentet är fortfarande i temaläge och är kompatibelt att lägga till i e-postmeddelanden och e-postmallar som också är i temaläge.
-
Välj någon av följande åtgärder:
-
Välj en e-postmall som innehåller ett tema (skapad i temaläge). Temat som är specifikt för varje mall tillämpas automatiskt.
-
Använd alternativet Design from scratch och välj Use Themes för att börja med ett fördefinierat formattema.
{width="450"}
note important IMPORTANT Om du väljer läget Manual Styling måste du återställa e-postdesignen för att använda ett tema. Om du väljer läget Themes är bara fragment som också har skapats i läget_ Teman _tillgängliga för att läggas till i e-postinnehållet.
-
-
Klicka på ikonen Teman (
) till höger i e-postdesignområdet. {width="600" modal="regular"}
Standardtemat eller det tema som används för mallen visas. Du kan växla mellan färgvarianterna för det här temat.
-
Klicka på pilen bredvid temat som visas för att visa en lista över tillgängliga anpassade teman och Adobe-teman.
-
Klicka på My themes och välj ett anpassat tema.
{width="325"}
-
Klicka utanför listan.
Det nyligen valda anpassade temat använder formaten på alla e-postkomponenter på arbetsytan. Du kan växla mellan färgvarianterna.
-
Om du behöver åsidosätta temaformaten för en markerad komponent klickar du på ikonen Lås upp komponentformat (
). {width="600" modal="regular"}
Klicka på Unlock i bekräftelsedialogrutan.
Välj fliken Styles i den högra panelen för att ändra inställningarna för komponenten.
{width="600" modal="regular"}
Ändra temat för ditt e-postinnehåll
Du kan ändra temat när som helst för e-post- eller e-postmallar som skapats i temaläge. E-postinnehållet ändras inte, men formaten uppdateras för att återspegla det nya temat.
-
Öppna e-post- eller e-postmallen i designområdet.
-
Klicka på ikonen Teman (
) till höger.Det använda temat visas på den högra panelen.
-
Klicka på pilen bredvid temat som visas för att visa en lista över tillgängliga anpassade teman och Adobe-teman.
-
Välj ett annat tema.
-
Klicka utanför listan.
Det valda temat använder formaten på alla e-postkomponenter på arbetsytan. Du kan växla mellan färgvarianterna.