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).

Lägg till ett kodsnippet i din HTML-mall

Lägg bara till ett av kodsnippet som beskrivs nedan per e-postmall. Ett kodsnippet gör att du kan lägga till flera dra-och-släpp-block, så du behöver inte lägga till flera kodsnippet.

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.

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.
   

text Copy

<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-postmallar.
3. Klicka på Importera.
4. Ange ett namn för din mall, ladda upp din HTML-fil och importera den.
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. Välj Dra och släpp som malltyp.
   

1. Observera textblocket där det står Hej världen! Det här är ditt redigerbara textblock.
2. 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.
   

text Copy

<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-elementet. Om du väljer att göra det kommer din kod att se ut så här:
   

text Copy

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

1. I Klaviyo, navigera till Innehåll > Mallar.
2. Välj fliken E-postmallar.
3. Klicka på Importera.
4. Ange ett namn för din mall, ladda upp din HTML-fil och importera den.
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. I innehållssteget väljer du mallen som du importerade.
2. Notera bildblocket, som antingen innehåller en knapp för att ladda upp en bild eller den bild du inkluderade.
3. 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 bildblock efter att du har importerat din mall.
   

text Copy

<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-postmallar.
4. Klicka på Importera.
5. Ange ett namn för din mall, ladda upp din HTML-fil och importera den.
6. 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. I innehållssteget väljer du mallen som du importerade.
2. 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.
   

text Copy

<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-postmallar.
3. Klicka på Importera.
4. Ange ett namn för din mall, ladda upp din HTML-fil och importera den.
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. I innehållssteget väljer du mallen som du importerade.
2. Observera textblocket där det står Hej världen! Dra ett annat block (t.ex. ett produktblock) under det här blocket.
3. 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 Email-redigerare (dvs. drag-and-drop-redigeraren, hybridredigeraren, redigeraren för enbart text och redigeraren för anpassad HTML).

Utfall

När du har slutfört de här stegen kommer du att kunna lägga till och redigera vissa delar av en anpassad HTML-mall. Observera att du inte kan lägga till eller redigera dra-och-släpp-block i någon del av den anpassade mallen, förutom där det ursprungliga blocket placerades.

Ytterligare resurser