Så här skapar du en hybrid e-postmall

Du kommer att lära dig

Lär dig hur du skapar anpassade HTML-mallar som är kompatibla med Klaviyos dra-och-släpp-redigerare (dvs. hybridmallar). Genom att följa de här stegen kan du utforma ett helt anpassat HTML-e-postmeddelande samtidigt som du behåller åtkomst till funktioner som bara finns i dra-och-släpp-redigeraren (t.ex. produktblock eller block för Universalinnehåll).

För att bygga om en befintlig HTML-mall till en dra-och-släpp-mall kan du använda HTML-till-dra-och-släpp-konvertering. Klaviyo använder AI för att återskapa designen med redigerbara block. Granska den konverterade layouten och innehållet innan du skickar. Använd en hybridmall när du vill behålla din anpassade HTML och bara lägga till redigerbara block i specifika områden.

Lägg till ett kodsnippet i din HTML-mall

Varje kodsnippet nedan skapar 1 redigerbar region. Du kan lägga till flera dra-och-släpp-block inom den regionen. För att göra separata områden i din mall redigerbara lägger du till en snippet för varje region.

Placera varje <td> -kodsnutt i en <tr> i e-postens tabellayout. Ställ in data-klaviyo-region-width-pixels på bredden för den regionen i pixlar; i exemplen används 600.

Om du till exempel vill lägga till en bild och ett tabellblock med dra-och-släpp-redigeraren följer du bara stegen nedan för Lägg till ett anpassningsbart bildblock. När du har laddat upp din mall till Klaviyo och använder den i en kampanj eller ett flöde kan du lägga till block ovanför eller under bildblocket.

Innan du importerar en marknadsföringsmall för e-post ska du lägga till en etikett för att avsluta prenumeration, till exempel {% unsubscribe %}. Spara mallen som en .html -fil.

Lägg till ett redigerbart textblock

1. Skapa en anpassad HTML-mall med hjälp av din föredragna HTML-redigerare.
2. Lägg till följande kodsnippet i din HTML-mall. Placera det där du vill lägga till ditt textblock i din mall.
   

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. I Klaviyo, navigera till Innehåll > Mallar.
2. Välj fliken E-post: sparat.
3. Klicka på Skapa > Importera e-postmall.
4. Ange ett namn för din mall, ladda upp din HTML-fil och klicka på Importera mall.
5. Om du öppnar mallen från fliken Mall ser du mallens kod i Klaviyos HTML-redigerare.
   

1. För att få åtkomst till mallen i Klaviyos dra-och-släpp-redigerare lägger du till den i en kampanj eller ett flöde.
2. Om du uppmanas att välja en malltyp väljer du Dra och släpp.

1. I mallgalleriet väljer du E-post: sparad, väljer den mall du importerade och klickar på Använd mall.
2. Observera textblocket där det står Hej världen! Det här är ditt redigerbara textblock.
3. Dra och släpp ytterligare block ovanför eller under textblocket, som du vill.

Lägg till ett anpassningsbart bildblock

1. Skapa en anpassad HTML-mall med hjälp av din föredragna HTML-redigerare.
2. Lägg till följande kodsnippet i din HTML-mall. Se till att placera det där du vill lägga till ditt bildblock efter att du har importerat din mall.
   

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block"></div>
</td>

1. Du kan också lägga till en förinställd bild i div. Ersätt exempelbildens URL nedan med en offentligt tillgänglig bild-URL och ersätt länken och alternativtexten med din egen:

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-image-block">
        <a href="https://www.klaviyo.com/"><img src="https://example.com/my_image.png" alt="My Image" /></a>
    </div>
</td>

1. I Klaviyo, navigera till Innehåll > Mallar.
2. Välj fliken E-post: sparat.
3. Klicka på Skapa > Importera e-postmall.
4. Ange ett namn för din mall, ladda upp din HTML-fil och klicka på Importera mall.
5. Om du öppnar mallen från fliken Mall ser du mallens kod i Klaviyos HTML-redigerare.
   

1. Om du vill komma åt mallen i Klaviyo dra-och-släpp-redigerare lägger du till den i en kampanj eller ett flöde. Om du uppmanas att välja en malltyp väljer du Dra och släpp.
2. I mallgalleriet väljer du E-post: sparad, väljer den mall du importerade och klickar på Använd mall.
3. Notera bildblocket, som antingen innehåller en knapp för att ladda upp en bild eller den bild du inkluderade.
4. Dra och släpp ytterligare block ovanför eller under bildblocket, som du vill.
   

Lägg till ett universellt innehållsblock

Den här processen stöds för Universalinnehåll-block, inte universalsektioner.

1. Skapa en anpassad HTML-mall med hjälp av din föredragna HTML-redigerare.
2. Lägg till följande kodsnippet i din HTML-mall. Se till att placera det där du vill lägga till ditt Universalinnehåll-block efter att du har importerat din mall.
   

textCopy

<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div data-klaviyo-universal-block="block_id_1">&nbsp;</div>
</td>

1. Ersätt block_id_1 med ID:t för ditt Universalinnehållsblock. Så här hittar du ID:t för ett Universalinnehållsblock:
   1. Gå till Innehåll > Universalinnehåll.
   2. Öppna ett universalinnehållsblock för att redigera det.
   3. URL:en för den här sidan följer det här formatet: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
   4. Kopiera block-ID:t från URL:en.
2. I Klaviyo, navigera till Innehåll > Mallar.
3. Välj fliken E-post: sparat.
4. Klicka på Skapa > Importera e-postmall.
5. Ange ett namn för din mall, ladda upp din HTML-fil och klicka på Importera mall.
6. Om du öppnar mallen från fliken Mall ser du mallens kod i Klaviyos HTML-redigerare.
   

1. Om du vill komma åt mallen i Klaviyo dra-och-släpp-redigerare lägger du till den i en kampanj eller ett flöde. Om du uppmanas att välja en malltyp väljer du Dra och släpp.
2. I mallgalleriet väljer du E-post: sparad, väljer den mall du importerade och klickar på Använd mall.
3. Lägg märke till Universalinnehåll.

Du kan lägga till flera Universalinnehåll-block med ett enda kodsnippet. Gör så genom att lägga till ytterligare ett div -element direkt efter det första i kodsnippet ovan, med ett annat blocks ID.

Lägg till ett block av en annan typ (dvs. produktblock, tabellblock)

1. Skapa en anpassad HTML-mall med hjälp av din föredragna HTML-redigerare.
2. Lägg till följande kodsnippet i din HTML-mall. Placera det där du vill lägga till dina block efter att du har importerat din mall.
   

textCopy

<td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
    <div class="klaviyo-block klaviyo-text-block">Hello world!</div>
</td>

1. I Klaviyo, navigera till Innehåll > Mallar.
2. Välj fliken E-post: sparat.
3. Klicka på Skapa > Importera e-postmall.
4. Ange ett namn för din mall, ladda upp din HTML-fil och klicka på Importera mall.
5. Om du öppnar mallen från fliken Mall ser du mallens kod i Klaviyos HTML-redigerare.
   

1. Om du vill komma åt mallen i Klaviyo dra-och-släpp-redigerare lägger du till den i en kampanj eller ett flöde. Om du uppmanas att välja en malltyp väljer du Dra och släpp.
2. I mallgalleriet väljer du E-post: sparad, väljer den mall du importerade och klickar på Använd mall.
3. Observera textblocket där det står Hej världen! Dra ett annat block (t.ex. ett produktblock) under det här blocket.
4. Ta bort textblocket och lägg till fler anpassade block efter behov.
   

Exempelkod för hybrid e-postmall

I exemplet nedan visas en funktionell HTML-fil med hybridkodsnippet för ett textblock. Använd den här koden för att testa hybridredigerarens funktionalitet.

  <html>
  <head>
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
    <title>A simple hybrid email</title>
    <style>
      body {
        background-color: #f6f6f6;
        font-family: sans-serif;
        margin: 20px;
      }
      .main {
        background: #ffffff;
        border-radius: 3px;
        width: 100%;
      }
      .container {
        margin: 0 auto !important;
        width: 600px;
      }
      .wrapper {
        box-sizing: border-box;
        padding: 15px;
      }
      table {
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <table class="main">
        <tr>
          <td class="wrapper">This is a very simple HTML email</td>
        </tr>
        <tr>
          <td class="wrapper">
            <table>
              <tr>
                <td align="center" data-klaviyo-region="true" data-klaviyo-region-width-pixels="600">
                  <div class="klaviyo-block klaviyo-text-block">
                    Hello world!
                  </div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          <td class="wrapper">{% unsubscribe %}</td>
        </tr>
      </table>
    </div>
  </body>
</html>

Emojis och hybrida e-postmallar

Från och med februari 2024 stöds alla emojis i alla Klaviyo e-postredigerare (dvs. dra-och-släpp-redigeraren, hybridredigeraren, redigeraren för enbart text och den anpassade HTML-redigeraren).

Förhandsgranska ditt hybridmejl

Förhandsgranska ditt e-postmeddelande på dator och mobil och skicka ett testmeddelande innan du skickar det till mottagarna. Kontrollera layouten, bilderna, länkarna och eventuellt dynamiskt innehåll i kampanjen eller flödet där du planerar att använda det. Vänta tills dina ändringar har sparats klart innan du lämnar redigeraren.

Utfall

När du har slutfört de här stegen kan du lägga till och redigera dra-och-släpp-block inom de regioner som definieras av dina kodsnippets. Den omgivande anpassade HTML-koden ligger kvar utanför de redigerbara områdena.

Ytterligare resurser