Jak stworzyć hybrydowy szablon e-mailowy?

Około 6 min czytania

Zaktualizowano 7 lip 2025, 10:03 EST

Dowiedz się, jak tworzyć niestandardowe szablony HTML, które są kompatybilne z edytorem przeciągnij i upuść Klaviyo(tj. szablony hybrydowe). Postępując zgodnie z tymi krokami, możesz zaprojektować w pełni niestandardową wiadomość e-mail HTML, zachowując dostęp do funkcji dostępnych tylko w edytorze przeciągnij i upuść (np. blok produktu lub treści uniwersalne blok).

Używanie niestandardowego HTML zalecamy tylko doświadczonym technicznie marketingowcom lub każdemu, kto ma dostęp do programisty. Chociaż nasz produkt pomaga w tworzeniu niestandardowego kodu HTML, nasz zespół ds. pomocy nie jest w stanie pomóc Ci w tworzeniu niestandardowego szablonu poza oferowaniem ogólnych wskazówek zawartych w niniejszej dokumentacji. Potrzebujesz pomocy? docieraj do partnera Klaviyo .

Aby zachować bezpieczeństwo Twoich danych, Klaviyo's zespół ds. pomocy nie jest w stanie otworzyć Twoich plików HTML.

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

Dodaj tylko jeden z poniższych wycinków kodu źródłowego na szablony e-mailowe. Jeden wycinek kodu źródłowego pozwala na dodanie wielu bloków metodą "przeciągnij i upuść", więc nie musisz dodawać wielu wycinków kodu źródłowego.

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

Dodaj edytowalny blok tekstu

Utwórz niestandardowy szablon HTML za pomocą preferowanego edytora HTML.

Dodaj następujący wycinek kodu źródłowego do szablonu HTML. Umieść go tam, gdzie chcesz dodać blok tekstowy w szablonie.

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

Na stronie Klaviyo przejdź do sekcji Zawartość > szablon.
Wybierz zakładkę szablony e-mailowe.
Kliknij pozycję Importuj.
Wprowadź nazwę szablonu, prześlij plik HTML i zaimportuj go .
Jeśli otworzysz szablon z karty szablonu, zobaczysz kod szablonu w edytorze HTML Klaviyo.
Aby uzyskać dostęp do szablonu w edytorze przeciągnij i upuść Klaviyo, dodaj go do kampanii lub sekwencji.
Wybierz Przeciągnij i upuść jako typ szablonu.
Zwróć uwagę na blok tekstowy z napisem Hello world! To jest twój edytowalny blok tekstu.
Przeciągnij i upuść dodatkowy blok powyżej lub poniżej bloku tekstowego, w zależności od potrzeb.

Dodaj konfigurowalny blok obrazu

Utwórz niestandardowy szablon HTML za pomocą preferowanego edytora HTML.

Dodaj następujący wycinek kodu źródłowego do szablonu HTML. Upewnij się, że umieścisz go w miejscu, w którym chcesz dodać blok obrazu po zaimportowaniu szablonu.

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

Opcjonalnie możesz dodać wstępnie ustawiony obraz wewnątrz elementu div. Jeśli zdecydujesz się to zrobić, Twój kod będzie wyglądał następująco:

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

Na stronie Klaviyo przejdź do sekcji Zawartość > szablon.
Wybierz zakładkę szablony e-mailowe.
Kliknij pozycję Importuj.
Wprowadź nazwę szablonu, prześlij plik HTML i zaimportuj go .
Jeśli otworzysz szablon z karty szablonu, zobaczysz kod szablonu w edytorze HTML Klaviyo.
Aby uzyskać dostęp do szablonu w edytorze przeciągnij i upuść Klaviyo, dodaj go do kampanii lub sekwencji. W kroku zawartości wybierz zaimportowany szablon.
Zwróć uwagę na blok obrazu, który będzie zawierał przycisk do przesłania obrazu lub dołączony obraz.
Przeciągnij i upuść dodatkowy blok powyżej lub poniżej bloku obrazu, w zależności od potrzeb.

Dodaj treści uniwersalne blok

Proces ten jest obsługiwany dla treści uniwersalnych bloków, a nie sekcji uniwersalnych.

Utwórz niestandardowy szablon HTML za pomocą preferowanego edytora HTML.
Dodaj następujący wycinek kodu źródłowego do szablonu HTML. Upewnij się, że umieścisz go w miejscu, w którym chcesz dodać blok obrazu po zaimportowaniu szablonu.
```
<td data-klaviyo-region="true" data-klaviyo-region-width-pixels="600"> 
    <div data-klaviyo-universal-block="block_id_1"> & nbsp;<div>
</td>
```
Zastąp block_id_1 identyfikatorem treści uniwersalnego bloku. Aby znaleźć identyfikator treści uniwersalnego bloku:
1. Przejdź do treści > treści uniwersalne.
2. Otwórz treści uniwersalne blok, aby je edytować.
3. Adres URL tej strony będzie miał następujący format: https://www.klaviyo.com/email-template-editor/universal/block/BLOCK_ID.
4. Skopiuj identyfikator bloku z adresu URL.
Na stronie Klaviyo przejdź do sekcji Zawartość > szablon.
Wybierz zakładkę szablony e-mailowe.
Kliknij pozycję Importuj.
Wprowadź nazwę szablonu, prześlij plik HTML i zaimportuj go .
Jeśli otworzysz szablon z karty szablonu, zobaczysz kod szablonu w edytorze HTML Klaviyo.
Aby uzyskać dostęp do szablonu w edytorze przeciągnij i upuść Klaviyo, dodaj go do kampanii lub sekwencji. W kroku zawartości wybierz zaimportowany szablon.
Zwróć uwagę na treści uniwersalnych bloków.

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

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

Utwórz niestandardowy szablon HTML za pomocą preferowanego edytora HTML.

Dodaj następujący wycinek kodu źródłowego do szablonu HTML. Umieść go w miejscu, w którym chcesz dodać blok(i) po zaimportowaniu szablonu.

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

Na stronie Klaviyo przejdź do sekcji Zawartość > szablon.
Wybierz zakładkę szablony e-mailowe.
Kliknij pozycję Importuj.
Wprowadź nazwę szablonu, prześlij plik HTML i zaimportuj go .
Jeśli otworzysz szablon z karty szablonu, zobaczysz kod szablonu w edytorze HTML Klaviyo.
Aby uzyskać dostęp do szablonu w edytorze przeciągnij i upuść Klaviyo, dodaj go do kampanii lub sekwencji. W kroku zawartości wybierz zaimportowany szablon.
Zwróć uwagę na blok tekstowy z napisem Hello world! Przeciągnij inny blok (np. blok produktu) poniżej tego bloku.
Usuń blok tekstowy i dodaj dodatkowy niestandardowy blok, zgodnie z potrzebami.

Przykładowy hybrydowy kod szablony e-mailowe

Poniższy przykład przedstawia funkcjonalny 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="rzutnia" />
    <title>Prosty hybrydowy e-mail</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 </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  To jest bardzo prosty e-mail HTML /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   Witaj świecie!                 <>
 <>
 <"""""">
 <"">
                  <>
 <>
 <>
</div>
                </td>
              </tr>
            </table>
          </td>
        </tr>
        <tr>
          < td class="wrapper">{% unsubscribe %}</td>
        </tr>
      < /table xml-ph-0032@d></table>
    </div>
  </body>
</html>

Emoji i hybrydowe szablony e-mailowe

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 tekstowym i niestandardowym edytorze HTML).

Rezultat

Po wykonaniu tych kroków będziesz mógł dodawać i edytować określone obszary niestandardowego szablonu HTML. Pamiętaj, że nie możesz 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.

Dodatkowe źródła

Czy ten artykuł był pomocny?

Ten formularz służy tylko do przesyłania opinii na temat artykułów. Dowiedz się, jak skontaktować się z zespołem ds. pomocy.

Dowiedz się od Klaviyo więcej

Społeczność

Nawiązuj kontakty z osobami na podobnych stanowiskach, partnerami oraz ekspertami i ekspertkami Klaviyo – inspirujcie się nawzajem, wymieniajcie spostrzeżeniami i pomagajcie szukać odpowiedzi na nurtujące Was pytania.

Odwiedź stronę społeczności

Szkolenie na żywo

Chcesz poznać najlepsze praktyki, nauczyć się konfigurować najważniejsze funkcje i nie tylko? Dołącz do sesji na żywo z udziałem ekspertów i ekspertek Klaviyo.

Zarejestruj się teraz

Pomoc

Uzyskaj wsparcie za pośrednictwem konta.

E-mail do zespołu ds. pomocy (konta w bezpłatnym okresie próbnym oraz konta płatne) Całodobowa dostępność

Czat/wirtualna pomoc
Dostępność różni się w–zależności od lokalizacji i typu planu.

Zaloguj się