Hur man skapar en hybrid e-postmallar

Förväntad lästid: 6 minut(er)

Uppdaterad 7 juli 2025 10:03 EST

Lär dig hur du skapar anpassade HTML-gallerior som är kompatibla med Klaviyo:s dra-och-släpp-redigerare (dvs. hybridgallerior). Genom att följa dessa steg kan du utforma en helt anpassad HTML-e-post samtidigt som du behåller åtkomst till funktioner som endast är tillgängliga i dra-och-släpp-redigeraren (t.ex. produktblock eller Universalinnehåll-block).

Vi rekommenderar att du använder anpassad HTML endast för tekniskt kunniga marknadsförare eller för alla som har tillgång till en utvecklare. Även om vår produkt innehåller support anpassad HTML, kan vårt team på supportinte hjälpa dig att bygga upp din anpassade mall utöver den allmänna vägledning som ges i den här dokumentationen. Behöver du hjälp? nå ut till en Klaviyo partner.

För att upprätthålla säkerheten för din data, Klaviyo och supportkan teamet inte öppna dina HTML-filer.

Lägg till ett kodsnippet i din HTML-katalog

Lägg endast till ett av nedanstående kodsnippet per e-postmallar. Med ett kodsnippet kan du lägga till flera dra-och-släpp-block, så du behöver inte lägga till flera kodsnippet.

Om du t.ex. vill lägga till en bild och en tabell block med hjälp av dra-och-släpp-redigeraren följer du bara stegen Lägg till en anpassningsbar bild block nedan. När du laddat upp din mall på Klaviyo och använder den i en kampanj eller flöde, kommer du att kunna lägga till block ovanför eller under bilden block.

Lägg till en redigerbar text block

Skapa en anpassad HTML-mall med hjälp av den HTML-redigerare du föredrar.

Lägg till följande kodsnippet i din HTML-fil. Placera den där du vill lägga till din text block i din galleria.

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

I Klaviyo, navigera till Content > mall.
Välj fliken e-postmallar.
Klicka på Importera.
Ange ett namn för din mall, ladda upp din HTML-fil och importera den.
Om du öppnar köpcentret från fliken Köpcenter ser du köpcentrets kod i Klaviyo:s HTML-redigerare.
För att komma åt gallerian i Klaviyo:s drag-and-drop editor, lägg till den i en kampanj eller flöde.
Välj Drag and drop som malltyp.
Notera texten block som säger Hello world! Detta är din redigerbara text block.
Dra och släpp ytterligare block ovanför eller under texten block, efter önskemål.

Lägg till en anpassningsbar bild block

Skapa en anpassad HTML-mall med hjälp av den HTML-redigerare du föredrar.

Lägg till följande kodsnippet i din HTML-fil. Se till att placera den där du vill lägga till din bild block efter att du har importerat din galleria.

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

Alternativt kan du lägga till en förinställd bild i div:en. Om du väljer att göra det kommer din kod att se ut så här:

<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="Min bild" /></a>
    </div>
</td>

I Klaviyo, navigera till Content > mall.
Välj fliken e-postmallar.
Klicka på Importera.
Ange ett namn för din mall, ladda upp din HTML-fil och importera den.
Om du öppnar köpcentret från fliken Köpcenter ser du köpcentrets kod i Klaviyo:s HTML-redigerare.
För att komma åt gallerian i Klaviyo:s drag-and-drop editor, lägg till den i en kampanj eller flöde. I innehållssteget väljer du den mall som du importerade.
Observera bilden block, som antingen kommer att innehålla en knapp för att ladda upp en bild eller den bild du inkluderade.
Dra och släpp ytterligare block ovanför eller under bilden block, efter önskemål.

Lägg till ett Universalinnehåll block

Denna process stöds för Universalinnehåll-block, inte för universella sektioner.

Skapa en anpassad HTML-mall med hjälp av den HTML-redigerare du föredrar.
Lägg till följande kodsnippet i din HTML-fil. Se till att placera den där du vill lägga till din bild block efter att du har importerat din galleria.
```
<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> 
    <div data-klaviyo-universal-block="block_id_1"> & nbsp;<div>
</td>
```
Byt ut block_id_1 mot ID:t för ditt Universalinnehåll block. För att hitta ett Universalinnehåll block's ID:
1. Navigera till Content > Universalinnehåll.
2. Öppna ett Universalinnehåll block för att redigera det.
3. URL:en för den här sidan kommer att ha följande format: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
4. Kopiera block-ID:t från webbadressen.
I Klaviyo, navigera till Content > mall.
Välj fliken e-postmallar.
Klicka på Importera.
Ange ett namn för din mall, ladda upp din HTML-fil och importera den.
Om du öppnar köpcentret från fliken Köpcenter ser du köpcentrets kod i Klaviyo:s HTML-redigerare.
För att komma åt gallerian i Klaviyo:s drag-and-drop editor, lägg till den i en kampanj eller flöde. I innehållssteget väljer du den mall som du importerade.
Notera Universalinnehåll block(s).

Du kan lägga till flera Universalinnehåll-block med ett enda kodsnippet. För att göra det, lägg till en annan div element omedelbart efter den första i kodsnippet ovan, med ett annat block's ID.

Lägg till en block av en annan typ (t.ex. produkt block, tabell block)

Skapa en anpassad HTML-mall med hjälp av den HTML-redigerare du föredrar.

Lägg till följande kodsnippet i din HTML-fil. Placera den där du vill lägga till ditt/dina block efter att du har importerat din mall.

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

I Klaviyo, navigera till Content > mall.
Välj fliken e-postmallar.
Klicka på Importera.
Ange ett namn för din mall, ladda upp din HTML-fil och importera den.
Om du öppnar köpcentret från fliken Köpcenter ser du köpcentrets kod i Klaviyo:s HTML-redigerare.
För att komma åt gallerian i Klaviyo:s drag-and-drop editor, lägg till den i en kampanj eller flöde. I innehållssteget väljer du den mall som du importerade.
Notera texten block som säger Hello world! Dra en annan block (t.ex. en produkt block) under denna block.
Ta bort texten block och lägg till ytterligare anpassade block, efter önskemål.

Exempel på hybrid e-postmallar-kod

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

  <html>
  <head>
    < meta content="width=device-width, initial-scale=1.0" name="visningsområde" />
    <title>En enkel hybrid e-post</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;
      }
      .omslag </style>
  </head>
  <body>
    <tr>
          </td>
        </tr>
        <tr>
          <table>
              <tr>
                {
        box-sizing: border-box;
        padding: 15px;
      }
      table   /style   /head   body   div class= container    table class= main    tr   td class= wrapper  Detta är en mycket enkel HTML-e-post /td   /t>
 <>
 <" {
        width: 100%;
      }
    <>
 <>
 <>
 <"">
 <"">
 <>
 <""><>
 <" >
           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 xml-ph-0032@d></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. dra-och-släpp-redigeraren, hybridredigeraren, endast text-redigeraren och den anpassade HTML-redigeraren).

Utfall

När du har slutfört dessa steg kan du lägga till och redigera vissa områden i en anpassad HTML-mall. Observera att du inte kan lägga till eller redigera drag-and-drop-block i något område av den anpassade gallerian, förutom där den ursprungliga block placerades.

Ytterligare resurser

Var den här artikeln till hjälp?

Använd endast detta formulär för feedback på artiklar. Lär dig hur du kontaktar support.

Utforska mer från Klaviyo

Community

Få kontakt med kollegor, partner och Klaviyo-experter för att hitta inspiration, dela insikter och få svar på alla dina frågor.

Besök communityn

Live-utbildning

Delta i en livesession med Klaviyo-experter för att lära dig om bästa praxis, hur man konfigurerar viktiga funktioner och mer.

Registrera dig nu

Support

Få tillgång till support via ditt konto.

E-postsupport (gratis provperiod och betalkonton) Tillgänglig dygnet runt, alla dagar i veckan

Chatt/virtuell hjälp
Tillgängligheten varierar beroende på plats och abonnemangstyp

Logga in