Guide till redigeraren för e-postmallar

Du kommer att lära dig

Läs mer om Klaviyos dra- och släppredigerare för e-postmallar, inklusive hur du använder mallstilar och konfigurerar varje blocktyp. 

Om block och layouter 

När du öppnar Klaviyos e-postmallredigerare kommer sidofältet att visa ett urval av block och sektionsalternativ att välja mellan. Välj mellan grundläggande block, som är tomma blad som används för att bygga e-postmeddelanden från grunden, och universalinnehåll, som är innehåll du har byggt i andra mallar och sparat för senare användning. 

I avsnittet Grundläggande hittar du ett urval av både block och layouter. Använd block för att lägga till innehåll som text, bilder eller knappar. Använd layouter (alltså sektioner och kolumner) för att gruppera och konfigurera dina block. 

Block och sektioner kan klonas, raderas eller sparas med hjälp av de ikoner som visas när du håller muspekaren över blocket eller sektionen. 

För att flytta ett block eller en sektion klickar du på objektet och drar det. 

Mallstilar

Stilhuvudfliken innehåller flera stilalternativ som gäller för hela din mall. Om du vill komma åt mallens huvudsakliga stilinställningar ska du gå bort från det block eller de sektioner du arbetar i med hjälp av knappen Klart och sedan klicka på Stilar. 

Här kan du ställa in e-postmeddelandets känsla och utseende. Om du har gått igenom konfigurationsguiden kommer det här området redan att innehålla några av dina varumärkesstilar.

Här kan du redigera följande inställningar:

• E-post 
  • Mallbakgrund
    Välj en bakgrundsfärg för din mall 
  • Bakgrundsbild
    Lägg till en bakgrundsbild (valfritt) 
  • Innehållets bakgrund
    Ange en bakgrundsfärg för innehållet i ditt e-postmeddelande – denna färg kan skilja sig från mallbakgrunden och sträcker sig bara över e-postmeddelandets innehåll 
  • Bredd
    Bredden på innehållet i ditt e-postmeddelande (600 px rekommenderas)
  • Hörnradie, marginaler, utfyllnad och kantlinje
    Lägg till avstånd och kanter i din mall 
• Text och rubriker
  Ange stilar för normal text och fyra rubrikstilar, och välj sedan en textstil från rullgardinsmenyn i valfritt textblock för att tillämpa 
• Teckensnitt
  Välj teckensnitt, teckensnittsavstånd, storlek, vikt och färg för textstilen 
• Avstånd mellan bokstäver
  Avståndet mellan varje bokstav horisontellt 
• Avstånd mellan rader
  Vertikalt avstånd mellan textrader
• Textjustering
  Välj vänster-, mitt- eller högerjustering
• Mobil
  Välj om du vill aktivera mobiloptimering (rekommenderas) eller visa samma stilar och innehåll på både dator och mobil 
• Övrigt
  • Valuta
    Välj en standardvaluta för mallen om denna skiljer sig från kontoinställningarna 

Så interagerar mallstilar med block- och sektionsstilar

Mallens stilinställningar tillämpas först på din mall, innan block eller sektionsspecifika inställningar tillämpas. Om stilarna för ett block eller en sektion står i konflikt med dina mallstilar kommer block- och sektionsstilar att användas. Om du till exempel anger en bakgrundsfärg för innehåll i stilhuvudsektionen och sedan anger en blockspecifik bakgrundsfärg kommer blockets bakgrundsfärg att användas för detta blockområde. 

Sektioner och sektionsstilar 

Allt innehåll i mallredigeraren är organiserat i sektioner. När du skapar en ny mall innehåller den som standard en eller flera sektioner, och du kan lägga till eller ta bort sektioner efter behov. 

Om du vill öppna inställningarna för en sektion ska du klicka du på området till höger eller vänster om innehållet i sektionen. Observera att om du klickar på ett block öppnas inställningarna för detta block, istället för sektionen som innehåller det. 

Varje sektion har en stilflik och en visningsalternativflik. Använd sektionens stilar för att lägga till bakgrundsbilder, utfyllnad och andra stilar i denna sektion. Använd sektionens visningsalternativ för att välja vilka enhetstyper och mottagare som ska se sektionerna. 

Läs mer om sektioner.

Sektionens stilinställningar kommer att tillämpas på din mall efter mallstilarna, men före blockspecifika stilar. Om mallstilarna står i konflikt med dina sektionsstilar kommer sektionsstilen att användas. Om inställningarna för ett block står i konflikt med stilarna för dina sektioner, kommer blockets stil att användas. 

Block och blockstilar

Lägg till block inom sektioner för att fylla ditt e-postmeddelande med innehåll. De flesta innehållsblock har en stilflik där du kan konfigurera utseendet på block, och en visningsalternativflik, där du kan välja vem som ska se block och vilka enhetstyper det ska visas på. De specifika stilinställningar som är tillgängliga är olika för varje blocktyp, men samma visningsalternativ är tillgängliga för alla block. 

Stilsektioner med färgalternativ innehåller färgväljarverktyget som erbjuder flera sätt att välja en färg:

• Använd gradientfältet för att välja ton och nyans.
• Kopiera och klistra in en HEX- eller RGB-kod.
• Välj bland dina nyligen använda färger eller de färger som redan finns i denna mall.
• Använd pipettverktyget för att välja en färg var som helst i e-postkanvasen (för närvarande inte tillgängligt för text-, delnings- eller tabellblock).
  

Läs mer om visningsalternativ eller läs vidare om block och hur du använder dem. 

Text 

Använd ett textblock för att lägga till text i dina e-postmeddelanden. Välj en textstil (Normal eller Rubrik 1–4) för att tillämpa stilinställningarna från huvudmallens stilar, eller anpassa textinnehållet med textredigerarens inställningar. 

Klaviyos e-postredigerare använder UTF-8-kodningsstandarden vilket innebär att den har stöd för latinska tecken, emojis, dubbelbyte-tecken med mera.  

Du kan lägga till dynamiskt innehåll i ditt textblock för att anpassa meddelandet för varje mottagare. Läs mer om personanpassning av meddelanden. 

<style type="text/css">
    p, h1, h2, h3, h4, ol, li, ul { direction: rtl; }
</style> 

Dölj sektionen Innehåll eller bläddra förbi den för att justera blockets stilar. Välj en bakgrundsfärg för blocket eller textinnehållsytan och lägg till utfyllnad. 

Bild 

Använd ett bildblock för att infoga en bild i ditt e-postmeddelande. Du kan lägga till bilder från följande källor: 

• Bildbibliotek
  Lägg till en bild du har laddat upp tidigare genom att söka i ditt bildbibliotek
• Ladda upp bild
  Ladda upp en JPEG-, PNG- eller GIF-bild från din enhet 
• Importera en bild
  Importera en bild med hjälp av dess bild-URL
• Dynamisk bild
  Visa en anpassad bild för varje mottagare med hjälp av en dynamisk bildvariabel (till exempel genom att hänvisa till en bild-URL som lagras i en mottagares händelsedata eller som en profilegenskap)

När du har valt din bild justerar du bildinställningarna, inklusive alt-text (en beskrivning av bilden), en länkadress så att bilden blir klickbar, bildbredd, bildjustering och andra stilar. 

Delning

Använd ett delningsblock för att visa innehåll i två kolumner med valfri bredd. Innehållet på vardera sida om ett delningsblock måste antingen vara en bild eller textinnehåll. Som standard kommer ditt delningsblock att använda en 50/50-delning. Gå till fliken Delningsinställningar för att justera detta förhållande. Alternativt kan du använda kolumnlayoutet för att dela upp ditt innehåll i två eller flera kolumner. 

Knapp 

Knappblock skapar stora länkar som är mer uppenbara än vanliga textlänkar och passar utmärkt för att markera CTA-objekt (uppmaning). Eftersom de används för CTA-objekt är det en bra idé att bara använda ett fåtal i varje e-postmeddelande.

Du måste åtminstone fylla i fälten Text och URL. Texten är vad mottagaren kommer att se i knappen och URL är vart besökare kommer att föras när de klickar på knappen. Justera knappens utseende, form och storlek med hjälp av alternativen färg, hörnradie och utfyllnad. Du kan också justera blockets teckensnitt och andra stilar nedan. 

Rubrik-/länkfält 

Använd rubrik-/länkfältsblock för att lägga till en logotyp och navigationslänkar som omdirigerar till olika innehåll på din webbplats.

När du drar in block kommer du att presenteras med några vanliga rubrik-/länkfältslayouter att välja mellan. Du kan välja olika layouter för dator och mobil för bättre anpassning till varje enhets storlek. 

Lägg till de länkar i länkfältet som du behöver. Du kan ställa in enhetsvisningsinställningar för varje länk, och vi rekommenderar att du bara visar viktiga länkar i mobilen eftersom enhetens storlek är mindre. 

När du har lagt till dina länkar och din logotyp kan du lägga till de sista detaljerna med hjälp av stilalternativen nedan. Du kan ändra teckensnitt, färger och mellanrum för blocket. När du är klar kan du förhandsgranska både på dator och i mobil för att se slutprodukten. 

Skugga

Använd en droppskugga för att ge djup åt ditt budskap eller framhäva ett visst område. Färgalternativen för skuggan är ljus, mörk och mörkare, och du kan ange en bakgrundsfärg och utfyllnad för blocket. 

Avdelare

Lägg till en enkel linje mellan andra innehållsblock. Välj mellan heldragna, streckade eller prickade linjer. Färg, storlek och utfyllnad är helt anpassningsbara. Detta kallades tidigare horisontell regel. 

Sociala länkar 

Länkblock till sociala medier är ett enkelt sätt att lägga till sociala medier-ikoner för Instagram, Pinterest, Facebook, X (Twitter) med mera. Klaviyo erbjuder standardfärgade ikoner för en mängd olika webbplatser, samt förenklade svart/vita eller grå alternativ. 

Om du föredrar att använda helt anpassade ikoner till sociala medier kan du använda alternativet Anpassa och ladda upp dina egna bildfiler. Om du väljer denna metod rekommenderar vi att du använder bilder som är 96 pixlar i kvadrat. För att bibehålla avstånd och justering mellan Klaviyos sociala medier-ikoner och dina anpassade bilder ska du använda ikoner som är 50 px breda och både vertikalt och horisontellt centrerade i bildfilen.

Dra ikontaggarna i sidofältet för att ändra ordningen på ikonerna. Du kan använda knappen Lägg till utrymme för att få mer detaljerad kontroll över avståndet mellan varje ikon. 

Avstånd

Utrymmesblock lägger till en anpassningsbar mängd utrymme mellan vertikalt staplade block. Om du vill anpassa utrymmet mellan block som ligger sida vid sida (till exempel i en kolumn) ska du använda vänster/höger utfyllnad. 

Produkt 

Använd ett produktblock för att lägga till rekommenderade artiklar från din webbutiks katalog. När du lägger till ett produktblock får du två alternativ: dynamiskt eller statiskt. 

Ett dynamiskt flöde uppdateras automatiskt och konfigureras via ett produktflöde. Om du vill veta mer om hur du skapar en produktfeed kan du läsa vår artikel Så här använder du produktfeeds och rekommendationer. 

Ett statiskt produktblock visar endast de katalogartiklar som du handplockar i mallredigeraren, och uppdateras inte automatiskt eller riktas mot enskilda mottagare. 

Med båda alternativen kan du anpassa blockets utseende när du har valt antingen flödet eller artiklarna. Produktblocket kan visa endast bilder eller innehålla namn och pris för varje artikel. Bläddra igenom alla alternativ på stilfliken i produktblocket för att anpassa blocket helt. 

Tabell

Tabellblock kan hjälpa dig att strukturera bilder och text inom en e-postmall. Tabellblocket ger dig möjlighet att lägga till så många kolumner eller rader som du vill (som själva kommer att justera sig, eller så kan du ange en bredd i inställningen Bredd på fliken Kolumner). 

När ett tabellblock först dras in i din mall har det en rad med två kolumner. Använd fliken Tabellinställningar för att lägga till ytterligare rader och kolumner och navigera sedan tillbaka till fliken Innehåll för att konfigurera tabellens innehåll. 

Använd cellväljaren för att öppna innehållet i en viss cell. Använd sektionen Cellinnehåll för att välja mellan text- eller bild-innehåll och lägg sedan till ditt innehåll. Observera att om du växlar fram och tillbaka mellan innehållstyperna text och bild kan du förlora innehåll som tidigare fanns i den aktuella cellen – använd ångra-knappen för att ångra dina ändringar. 

Om du vill redigera färger, teckensnitt, ramar och layout för tabellen ska du öppna fliken Tabellinställningar. 

Tabellblock används också för att visa dynamiskt innehåll, till exempel detaljerna för en lista över artiklar i mottagarens kundvagn. Läs mer om dynamiska tabellblock. 

HTML 

Lägg till anpassad kod i din mall med hjälp av HTML-block. Använd denna blocktyp när du lägger till egenkodade element, tredjepartsfunktioner som nedräkningstimrar eller anpassad CSS. Om du har problem med anpassad kod i dina e-postmeddelanden kan du lära dig hur du felsöker anpassad kod i mallar.

Recensionscitat

Om du använder Klaviyo Reviews kan du visa riktiga kundrecensioner för att erbjuda bevis från sociala medier på ditt varumärkes värde och öka konverteringsgraden. 

Recensionscitatblocket erbjuder ett urval av recensioner som visas i dina meddelanden. Om du ännu inte kan välja en recension kan det bero på följande: 

• Det finns inte tillräckligt många recensioner av hög kvalitet i ditt konto att välja mellan. Kom tillbaka vid ett senare tillfälle för att se ett bättre urval av recensioner. 
• Dina recensioner har ännu inte behandlats. Om du vill visa upp en helt ny recension ska du vänta några timmar och sedan försöka igen.
• Recensionerna i ditt konto är inte verifierade. För att kunna verifieras måste en recension skickas in via en personlig länk i ett Klaviyo-recensionsflöde eller markeras som verifierad i en uppladdad CSV-fil med recensioner från en annan plattform. Overifierade recensioner, inklusive recensioner som skickats in direkt till din webbplats, kan inte inkluderas i ett recensionscitatblock.

Kolumner

Det finns två olika block du kan använda för att dra in kolumner i dina e-postmallar: delningsblock och kolumnlayout. Med ett delningsblock är du begränsad till text- och bildinnehåll i två kolumner, men du kan justera varje kolumns bredd exakt. 

Med en kolumnlayout kan du lägga till alla typer av innehåll i varje kolumn, men du är begränsad till en handfull förvalda kolumnbreddsalternativ. Kolumnlayouten möjliggör emellertid mellan en och fyra kolumner. 

När du har lagt till kolumner i din mall släpper du innehållsblock i varje kolumn för att fylla den. Du är inte begränsad till bara ett innehållsblock per kolumn – lägg till så många innehållsblock du vill, staplade ovanpå varandra. 

Video

Videoblock skapar utseendet på en video inbäddad i ett e-postmeddelande. När en mottagare klickar på play-knappen öppnas en ny flik och videon spelas upp. 

Om du vill lägga till ett videoblock kopierar du webbadressen till videon från Youtube, Vimeo, TikTok eller en annan videoplattform du väljer. Om din video kommer från Youtube kommer Klaviyo automatiskt att välja en miniatyrbild. 

Om du använder en video från någon annan källa måste du också ladda upp en miniatyrbild av videon. En uppspelningsknapp kommer att läggas på videominiatyren, som du kan inaktivera i blockinställningarna.

Varför spelas inte videon upp direkt i e-postmeddelandet? 

De flesta större e-postklienter (till exempel Gmail) ser inbäddat innehåll med till exempel videor som ett säkerhetshot. Dessa e-postklienter kommer ofta att ta bort den inbäddade koden helt och hållet och din mottagare kommer inte att se innehållet renderat när hen öppnar ditt e-postmeddelande. 

Vi på Klaviyo har förbundit oss att ge våra kunder bästa möjliga förutsättningar för framgång. Eftersom våra tester visar att video inte renderas på ett tillförlitligt sätt hos alla större e-postklienter erbjuder vi inte stöd för direktinbäddad video.

Universalinnehåll

Du kan spara block eller sektioner i en mall för användning i en annan mall med hjälp av stjärnikonen. Om du sparar block eller sektioner kommer de att visas i fliken Universal i ditt e-postmallblock. När du gör ändringar i universalblock- eller sektioner kan du välja att tillämpa ändringarna på alla instanser i det sparade innehållet.

Läs mer om hur du använder sparat universalinnehåll.

Ångra och göra om

Om du gör ett misstag när du redigerar dina mallar kan du använda ångra-knappen för att återställa det. Du kan också använda gör om-knappen för att återkalla ändringen. Din mall sparas automatiskt under hela redigeringssessionen och knapparna Ångra/Gör om loggar dina ändringar så länge du redigerar mallen. Tidigare ändringar kommer emellertid bara att visas under din redigeringssession. Om du lämnar mallen och kommer tillbaka till den senare kommer Ångra-knappen att vara inaktiverad tills du gör ändringar. 

Förhandsgranska ditt e-postmeddelande 

Använd knappen Förhandsgranska och testa för att förhandsgranska hur ditt e-postmeddelande kommer att se ut i mottagarens inkorg. Om du bygger ett e-postmeddelande i e-postmallfliken ska du se till att förhandsgranska e-postmeddelandet baserat på hur det kommer att skickas. Använd tabellen nedan för att identifiera det bästa sättet att förhandsgranska. 

Ytterligare resurser

• Referens för personanpassning av meddelanden
• Så skapar du en basmall
• Kurs: Komma igång med e-postmallredigeraren