Jak utworzyć hybrydowy szablon e-mail

Czego się dowiesz?

Dowiedz się, jak tworzyć niestandardowe szablony HTML zgodne z edytorem przeciągnij i upuść w Klaviyo (tj. szablony hybrydowe). Postępując zgodnie z tymi krokami, możesz zaprojektować w pełni niestandardową wiadomość e-mail w formacie HTML, zachowując dostęp do funkcji dostępnych wyłącznie w edytorze przeciągnij i upuść (np. bloki produktów lub bloki treści uniwersalnych).

Aby przebudować istniejący szablon HTML na szablon z funkcją „przeciągnij i upuść”, użyj konwersji HTML na „przeciągnij i upuść”. Klaviyo używa AI do odtworzenia projektu za pomocą edytowalnych bloków. Przed wysłaniem zweryfikuj przekonwertowany układ i treści. Użyj szablonu hybrydowego, jeśli chcesz zachować niestandardowy HTML i dodać edytowalne bloki tylko w określonych obszarach.

Dodaj wycinek kodu źródłowego do szablonu HTML

Każdy wycinek kodu źródłowego poniżej tworzy 1 edytowalny obszar. W tym obszarze możesz dodać wiele bloków przeciągnij i upuść. Aby poszczególne obszary szablonu były edytowalne, dodaj wycinek dla każdego obszaru.

Umieść każdy fragment kodu <td> wewnątrz elementu <tr> w układzie tabeli w Twoim e-mailu. Ustaw data-klaviyo-region-width-pixels na szerokość tego obszaru w pikselach; w przykładach użyto 600.

Na przykład jeśli chcesz dodać obraz i blok tabeli za pomocą edytora typu „przeciągnij i upuść”, po prostu wykonaj poniższe kroki Dodaj konfigurowalny blok obrazu. Po przesłaniu szablonu do Klaviyo i użyciu go w kampanii lub sekwencji będzie można dodać bloki powyżej lub poniżej bloku obrazu.

Przed zaimportowaniem szablonu marketingowej wiadomości e-mail dodaj znacznik „wycofać subskrypcję”, np. {% unsubscribe %}. Zapisz swój szablon jako plik .html.

Dodaj edytowalny blok tekstowy

1. Utwórz niestandardowy szablon HTML za pomocą preferowanego edytora HTML.
2. Dodaj następujący wycinek kodu źródłowego do szablonu HTML. Umieść go w dowolnym miejscu w szablonie, w którym chcesz dodać blok tekstu.
   

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. W Klaviyo przejdź do Treść > Szablony.
2. Wybierz kartę E-mail: zapisane.
3. Kliknij Utwórz > Importuj szablon e-maila.
4. Wpisz nazwę szablonu, prześlij plik HTML i kliknij Importuj szablon.
5. Jeśli otworzysz szablon z karty Szablon, zobaczysz kod szablonu w edytorze HTML Klaviyo.
   

1. Aby uzyskać dostęp do szablonu w edytorze typu „przeciągnij i upuść” Klaviyo, dodaj go do kampanii lub sekwencji.
2. Jeśli pojawi się prośba o wybranie typu szablonu, wybierz Przeciągnij i upuść.

1. W galerii szablonów wybierz E-mail: zapisane, wybierz zaimportowany szablon i kliknij Użyj szablonu.
2. Zwróć uwagę na blok tekstu z napisem Hello world! To jest edytowalny blok tekstowy.
3. Przeciągnij i upuść dodatkowe bloki nad lub pod blokiem tekstu, zgodnie z potrzebami.

Dodaj blok obrazu z możliwością dostosowania

1. Utwórz niestandardowy szablon HTML za pomocą preferowanego edytora HTML.
2. Dodaj następujący wycinek kodu źródłowego do szablonu HTML. Pamiętaj, aby umieścić go w miejscu, w którym po zaimportowaniu szablonu chcesz dodać blok obrazu.
   

textCopy

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

1. Opcjonalnie dodaj gotowy obraz wewnątrz div. Zastąp przykładowy adres URL obrazu poniżej publicznie dostępnym adresem URL obrazu, a także zastąp link i tekst alternatywny własnymi:

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. W Klaviyo przejdź do Treść > Szablony.
2. Wybierz kartę E-mail: zapisane.
3. Kliknij Utwórz > Importuj szablon e-maila.
4. Wpisz nazwę szablonu, prześlij plik HTML i kliknij Importuj szablon.
5. Jeśli otworzysz szablon z karty Szablon, zobaczysz kod szablonu w edytorze HTML Klaviyo.
   

1. Aby uzyskać dostęp do szablonu w edytorze „przeciągnij i upuść” w Klaviyo, dodaj go do kampanii lub sekwencji. Jeśli pojawi się prośba o wybranie typu szablonu, wybierz Przeciągnij i upuść.
2. W galerii szablonów wybierz E-mail: zapisane, wybierz zaimportowany szablon i kliknij Użyj szablonu.
3. Zwróć uwagę na blok obrazu, który będzie zawierał przycisk do przesłania obrazu albo obraz, który został dodany.
4. Przeciągnij i upuść dodatkowe bloki nad lub pod blokiem obrazu, według potrzeb.
   

Dodaj blok treści uniwersalnych

Ten proces jest obsługiwany w przypadku bloków treści uniwersalnych, nie uniwersalnych sekcji.

1. Utwórz niestandardowy szablon HTML za pomocą preferowanego edytora HTML.
2. Dodaj poniższy wycinek kodu źródłowego do swojego szablonu HTML. Pamiętaj, aby umieścić go w miejscu, w którym po zaimportowaniu szablonu chcesz dodać blok treści uniwersalnych.
   

textCopy

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

1. Zastąp block_id_1 identyfikatorem swojego bloku treści uniwersalnych. Aby znaleźć identyfikator bloku treści uniwersalnych:
   1. Przejdź do Treść > Treści uniwersalne.
   2. Otwórz blok treści uniwersalnych, aby go edytować.
   3. Adres URL tej strony będzie mieć następujący format: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
   4. Skopiuj identyfikator bloku z adresu URL.
2. W Klaviyo przejdź do Treść > Szablony.
3. Wybierz kartę E-mail: zapisane.
4. Kliknij Utwórz > Importuj szablon e-maila.
5. Wpisz nazwę szablonu, prześlij plik HTML i kliknij Importuj szablon.
6. Jeśli otworzysz szablon z karty Szablon, zobaczysz kod szablonu w edytorze HTML Klaviyo.
   

1. Aby uzyskać dostęp do szablonu w edytorze „przeciągnij i upuść” w Klaviyo, dodaj go do kampanii lub sekwencji. Jeśli pojawi się prośba o wybranie typu szablonu, wybierz Przeciągnij i upuść.
2. W galerii szablonów wybierz E-mail: zapisane, wybierz zaimportowany szablon i kliknij Użyj szablonu.
3. Zwróć uwagę na blok(i) treści uniwersalnych.

Możesz dodać wiele bloków treści uniwersalnych za pomocą jednego wycinka kodu źródłowego. Aby to zrobić, dodaj kolejny element div bezpośrednio po pierwszym w wycinku kodu źródłowego powyżej, używając identyfikatora innego bloku.

Dodaj blok innego typu (np. blok produktu, blok tabeli)

1. Utwórz niestandardowy szablon HTML za pomocą preferowanego edytora HTML.
2. Dodaj następujący wycinek kodu źródłowego do szablonu HTML. Umieść go tam, gdzie chcesz dodać blok(i) po zaimportowaniu szablonu.
   

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. W Klaviyo przejdź do Treść > Szablony.
2. Wybierz kartę E-mail: zapisane.
3. Kliknij Utwórz > Importuj szablon e-maila.
4. Wpisz nazwę szablonu, prześlij plik HTML i kliknij Importuj szablon.
5. Jeśli otworzysz szablon z karty Szablon, zobaczysz kod szablonu w edytorze HTML Klaviyo.
   

1. Aby uzyskać dostęp do szablonu w edytorze „przeciągnij i upuść” w Klaviyo, dodaj go do kampanii lub sekwencji. Jeśli pojawi się prośba o wybranie typu szablonu, wybierz Przeciągnij i upuść.
2. W galerii szablonów wybierz E-mail: zapisane, wybierz zaimportowany szablon i kliknij Użyj szablonu.
3. Zwróć uwagę na blok tekstu z napisem Hello world! Przeciągnij kolejny blok (np. blok produktu) pod ten blok.
4. Usuń blok tekstu i dodaj dodatkowe bloki niestandardowe według uznania.
   

Przykładowy kod szablonu hybrydowego e-maila

Poniższy przykład przedstawia działający plik HTML z hybrydowym wycinkiem kodu źródłowego dla bloku tekstowego. Użyj tego kodu, aby przetestować funkcjonalność edytora hybrydowego.

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

Emotikony i hybrydowe szablony e-maili

Od lutego 2024 r. wszystkie emotikony są obsługiwane we wszystkich edytorach Klaviyo Email (tj. w edytorze typu „przeciągnij i upuść”, edytorze hybrydowym, edytorze tylko tekstowym oraz niestandardowym edytorze HTML).

Podgląd hybrydowego e-maila

Sprawdź podgląd e-maila na komputerze i urządzeniu mobilnym oraz wyślij e-mail testowy, zanim wyślesz go do odbiorców. Sprawdź układ, obrazy, linki oraz wszelkie treści dynamiczne w kampanii lub sekwencji, w której planujesz go użyć. Poczekaj, aż Twoje zmiany zakończą się zapisywać, zanim opuścisz edytor.

Rezultat

Po wykonaniu tych kroków możesz dodawać i edytować bloki „przeciągnij i upuść” w obszarach zdefiniowanych przez Twój wycinek kodu źródłowego. Otaczający niestandardowy kod HTML pozostaje poza tymi edytowalnymi obszarami.

Dodatkowe źródła