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

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

Do każdego szablonu e-maila dodaj tylko jeden z wycinków kodu źródłowego opisanych poniżej. Jeden wycinek kodu źródłowego pozwala dodać wiele bloków typu przeciągnij i upuść, więc nie trzeba dodawać wielu wycinków kodu źródłowego.

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.

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.
   

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. W Klaviyo przejdź do Treść > Szablony.
2. Wybierz kartę Szablony e-maili.
3. Kliknij pozycję Importuj.
4. Wpisz nazwę szablonu, prześlij plik HTML i zaimportuj go.
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. Wybierz Przeciągnij i upuść jako typ szablonu.
   

1. Zwróć uwagę na blok tekstu z napisem Hello world! To jest edytowalny blok tekstowy.
2. 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.
   

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. Opcjonalnie możesz dodać wstępnie ustawiony obraz w div. Jeśli zdecydujesz się to zrobić, Twój kod będzie wyglądał tak:
   

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. W Klaviyo przejdź do Treść > Szablony.
2. Wybierz kartę Szablony e-maili.
3. Kliknij pozycję Importuj.
4. Wprowadź nazwę szablonu, prześlij plik HTML i zaimportuj go.
5. Jeśli otworzysz szablon z karty Szablon, zobaczysz kod szablonu w edytorze HTML Klaviyo.
   

1. Aby uzyskać dostęp do szablonu w edytorze Klaviyo typu „przeciągnij i upuść”, dodaj go do kampanii lub sekwencji. W kroku dotyczącym treści wybierz zaimportowany szablon.
2. Zwróć uwagę na blok obrazu, który będzie zawierał przycisk do przesłania obrazu albo obraz, który został dodany.
3. 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 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.
   

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. 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ę Szablony e-maili.
4. Kliknij pozycję Importuj.
5. Wprowadź nazwę szablonu, prześlij plik HTML i zaimportuj go.
6. Jeśli otworzysz szablon z karty Szablon, zobaczysz kod szablonu w edytorze HTML Klaviyo.
   

1. Aby uzyskać dostęp do szablonu w edytorze Klaviyo typu „przeciągnij i upuść”, dodaj go do kampanii lub sekwencji. W kroku dotyczącym treści wybierz zaimportowany szablon.
2. 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.
   

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. W Klaviyo przejdź do Treść > Szablony.
2. Wybierz kartę Szablony e-maili.
3. Kliknij pozycję Importuj.
4. Wprowadź nazwę szablonu, prześlij plik HTML i zaimportuj go.
5. Jeśli otworzysz szablon z karty Szablon, zobaczysz kod szablonu w edytorze HTML Klaviyo.
   

1. Aby uzyskać dostęp do szablonu w edytorze Klaviyo typu „przeciągnij i upuść”, dodaj go do kampanii lub sekwencji. W kroku dotyczącym treści wybierz zaimportowany szablon.
2. Zwróć uwagę na blok tekstu z napisem Hello world! Przeciągnij kolejny blok (np. blok produktu) pod ten blok.
3. 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 emoji są obsługiwane we wszystkich edytorach Klaviyo Email (tj. w edytorze typu przeciągnij i upuść, edytorze hybrydowym, edytorze tekstowym oraz edytorze niestandardowego HTML).

Rezultat

Po wykonaniu tych kroków będzie można dodawać i edytować niektóre obszary niestandardowego szablonu HTML. Pamiętaj, że nie można dodawać ani edytować bloków typu „przeciągnij i upuść” w żadnym obszarze niestandardowego szablonu, z wyjątkiem miejsca, w którym został umieszczony początkowy blok.