Przewodnik po edytorze szablonów e-mailowych

Czego się dowiesz?

Dowiesz się więcej o edytorze szablonów e-maili Klaviyo typu „przeciągnij i upuść”, w tym o tym, jak używać stylów szablonów i konfigurować każdy typ bloku.

This content requires Functional cookies to be enabled.

Update Cookie Settings

Informacje o blokach i układach

Po otwarciu edytora szablonów e-mailowych Klaviyo na pasku bocznym wyświetli się lista opcji bloków i sekcji. Wybieraj spośród bloków podstawowych, które są pustymi szablonami służącymi do tworzenia e-maili od podstaw, oraz treści uniwersalnych, czyli takich, które utworzono w innych szablonach i zapisano do późniejszego wykorzystania.

W sekcji Podstawowe znajdziesz selekcję zarówno bloków, jak i układów. Bloków używa się, aby dodawać treści takie jak tekst, obrazy lub przyciski. Użyj układów (tj. sekcji i kolumn), aby grupować bloki i je konfigurować.

Bloki i sekcje można klonować, usuwać lub zapisywać za pomocą ikon, które pojawiają się po najechaniu kursorem na blok lub sekcję.

Aby przenieść blok lub sekcję, kliknij go i przeciągnij.

Style szablonów

Kliknij Edytuj style na lewym pasku bocznym, aby otworzyć opcje stylizacji dla całego Twojego szablonu.

Tutaj można ustawić wygląd i styl swojego e-maila. Jeśli udało Ci się przejść przez kreatora konfiguracji, w tym obszarze będą już dostępne niektóre style Twojej marki.

W tym miejscu można edytować następujące ustawienia:

• Adres e-mail
  • Tło szablonu
    Wybierz kolor tła dla szablonu
  • Obraz tła
    Opcjonalnie dodaj obraz tła
  • Tło treści
    Ustaw kolor tła dla treści e-maila; kolor ten może być inny niż tło szablonu i obejmuje tylko szerokość treści e-maila
  • Szerokość
    Szerokość treści wiadomości e-mail (zalecane 600 pikseli).
  • Promień narożnika, marginesy, wypełnienie i obramowanie
    Dodaj odstępy i obramowania do szablonu
• Tekst i nagłówki
  Ustaw style dla zwykłego tekstu i czterech stylów nagłówków, a następnie z menu rozwijanego wybierz styl tekstu w dowolnym bloku tekstowym, aby go zastosować.
• Czcionka
  Wybierz czcionkę, odstępy między czcionkami, rozmiar, grubość i kolor dla stylu tekstu
• Odstępy między literami
  Odstępy między każdą literą w poziomie
• Interlinia
  Pionowy odstęp między wierszami tekstu
• Wyrównanie tekstu
  Wybierz wyrównanie do lewej, do środka lub do prawej.
• Urządzenia mobilne
  Wybierz, czy chcesz włączyć optymalizację dla urządzeń mobilnych (zalecane), czy wyświetlać te same style oraz treści zarówno na komputerze, jak i na urządzeniach mobilnych.
• Inne
  • Waluta
    Wybierz domyślną walutę dla szablonu, jeśli różni się od ustawień konta

Interakcja stylów szablonów ze stylami bloków i sekcji

Ustawienia stylu szablonu zostaną zastosowane najpierw do szablonu, a dopiero potem do poszczególnych bloków lub sekcji. Jeśli style bloku lub sekcji kolidują ze stylami szablonu, użyte zostaną style bloku i sekcji. Na przykład jeśli ustawisz kolor tła treści w panelu Edytuj style, a następnie ustawisz kolor tła specyficzny dla bloku, w obszarze tego bloku zostanie użyty kolor tła bloku.

Sekcje i style sekcji

Cała treść jest podzielona w edytorze szablonów na sekcje. Gdy utworzysz nowy szablon, będzie on domyślnie zawierał 1 lub więcej sekcji, a sekcje możesz dodawać lub usuwać w razie potrzeby.

Aby otworzyć ustawienia sekcji, kliknij obszar po prawej lub lewej stronie jej zawartości. Pamiętaj, że kliknięcie bloku spowoduje otwarcie ustawień tego bloku, a nie sekcji, w której się znajduje.

Każda sekcja ma kartę Style i kartę Wyświetlanie. Użyj stylów sekcji, aby dodać obrazy tła, dopełnienie i inne style do tej sekcji. Użyj opcji wyświetlania sekcji, aby wybrać, które typy urządzeń i odbiorcy powinni widzieć sekcje.

Dowiedz się więcej o sekcjach.

Ustawienia stylów sekcji zostaną zastosowane do szablonu po stylach szablonu, ale przed stylami specyficznymi dla bloków. Jeśli style szablonu kolidują ze stylami sekcji, użyty zostanie styl sekcji. Jeśli ustawienia bloku kolidują ze stylami sekcji, użyty zostanie styl bloku.

Bloki i style bloków

Aby wypełnić e-mail treścią, dodaj w obrębie sekcji bloki. Większość bloków treści ma kartę Style, w której możesz skonfigurować wygląd bloku, oraz kartę Wyświetlanie, w której możesz wybrać, kto powinien widzieć blok i na jakich typach urządzeń ma się on wyświetlać. Konkretne ustawienia stylów są różne dla każdego typu bloku, ale te same opcje wyświetlania są dostępne dla wszystkich bloków.

Wszystkie sekcje stylów z opcjami kolorów zawierają narzędzie, które oferuje kilka sposobów wyboru koloru:

• Aby wybrać odcień i barwę, użyj pola gradientu.
• Skopiuj i wklej kod HEX lub RGB.
• Wybierz spośród ostatnio używanych kolorów lub kolorów już obecnych w tym szablonie.
• Jeśli Twoja przeglądarka obsługuje narzędzie kroplomierza, użyj go, aby wybrać kolor z dowolnego miejsca na kanwie e-maila.

Dowiedz się więcej o opcjach wyświetlania lub czytaj dalej, aby dowiedzieć się więcej o typach bloków i o tym, jak z nich korzystać.

Tekst

Użyj bloku tekstowego, aby dodać tekst do e-maila. Wybierz styl tekstu (Normalny lub Nagłówek 1–4), aby zastosować ustawienia stylu z stylów głównego szablonu, lub dostosuj treść tekstu za pomocą ustawień edytora tekstu.

Edytor e-maili w Klaviyo korzysta ze standardu kodowania UTF-8, co oznacza, że obsługuje znaki łacińskie, emoji, znaki dwubajtowe i nie tylko. 

Aby spersonalizować wiadomość dla każdego odbiorcy, możesz do bloku tekstowego dodać treści dynamiczne. Dowiedz się więcej o personalizacji wiadomości.

<style type="text/css">
    p, h1, h2, h3, h4, ol, li, ul { direction: rtl; }
</style> 

Otwórz kartę Style w bloku tekstowym, aby wybrać kolor tła bloku lub obszaru zawartości tekstowej i dodać dopełnienie.

Obraz

Aby wstawić obraz do e-maila, użyj bloku obrazu. Obrazy można dodawać z następujących źródeł:

• Biblioteka obrazów
  Przeszukaj swoją bibliotekę obrazów i dodaj obraz przesłany tam wcześniej.
• Prześlij obraz
  Prześlij ze swojego urządzenia plik JPEG, PNG lub GIF. Możesz też przesłać nieanimowany obraz WebP i przekonwertować go na PNG, gdy zostaniesz o to poproszony.
• Importuj z adresu URL
  Zaimportuj obraz, używając jego adresu URL
• Obraz dynamiczny
  Wyświetlaj niestandardowy obraz dla każdego odbiorcy, korzystając ze zmiennej obrazu dynamicznego (np. poprzez odwołanie się do adresu URL obrazu przechowywanego w danych zdarzenia odbiorcy lub jako właściwość profilu).

Po wybraniu obrazu dostosuj jego ustawienia, w tym tekst alternatywny (opis obrazu), adres linku umożliwiający klikalność obrazu, szerokość obrazu, wyrównanie i inne style.

Podział

Aby wyświetlić treść w 2 kolumnach o dowolnej szerokości, użyj bloku podziału. Dodaj obraz lub treść tekstową do każdej strony bloku podziału. Domyślnie blok podziału dzieli treść 50/50; aby dostosować tę proporcję, przejdź do karty Style. Alternatywnie możesz użyć układu Kolumny, aby wykonać podział treści na 2 lub więcej kolumn.

Przycisk

Blok przycisków pozwala tworzyć duże linki, które łatwiej zauważyć niż zwykłe linki tekstowe. Świetnie nadają się one do podkreślania ważnych wezwań do działania (CTA). Ponieważ są one używane właśnie w takim celu, prawdopodobnie w jednym e-mailu użyjesz ich tylko kilku.

Wypełnij przynajmniej pola Tekst i Adres linku. Tekst oznacza to, co odbiorca lub odbiorczyni zobaczą na przycisku, a adres URL to miejsce, do którego użytkownik zostanie przeniesiony po kliknięciu przycisku. Wygląd, kształt i rozmiar przycisku spersonalizujesz za pomocą opcji koloru, promienia narożnika oraz dopełnienia. Poniżej możesz także dostosować czcionkę bloku i inne style.

Nagłówek/pasek linków

Użyj bloku nagłówka/paska linków, aby dodać logo i linki nawigacyjne, które przekierowują odbiorców do różnych treści na Twojej stronie.

Po przeciągnięciu bloku wyświetlą się popularne układy nagłówka/paska linków do wyboru. Aby lepiej dopasować treść do rozmiaru każdego urządzenia, możesz wybrać różne układy dla komputerów i urządzeń mobilnych.

Dodaj do paska linków dowolne łącza. Możesz skonfigurować ustawienia wyświetlania na urządzeniu dla każdego linku. Ze względu na mniejszy rozmiar ekranu zalecamy wyświetlanie na urządzeniach mobilnych tylko kluczowych linków.

Po dodaniu linków i logo dopieść wygląd bloku, korzystając z poniższych opcji stylu. Można zmienić jego czcionkę, kolory i odstępy. Gdy wszystko będzie gotowe, wyświetl podgląd zarówno na komputerze, jak i na urządzeniu mobilnym, aby zobaczyć efekt końcowy.

Rzucanie cienia

Użyj efektu rzucania cienia („drop shadow”), aby dodać do wiadomości głębi lub podkreślić określony obszar. Opcje kolorów dla cienia obejmują jasny, średni i ciemny, a także możesz ustawić kolor tła i dopełnienie dla bloku.

Separator

Dodaj pomiędzy pozostałymi blokami treści prostą linię. Do wyboru są linie jednolite ciągłe, kreskowane lub kropkowane. Ich kolor, rozmiar i dopełnienie są w pełni konfigurowalne. Dawniej opcję tę nazywano linią poziomą.

Link do mediów społecznościowych

Blok linków do mediów społecznościowych pozwala z łatwością dodać do wiadomości ikony przenoszące do Twoich kont na portalach Instagram, Pinterest, Facebook, X (Twitter) i innych. Klaviyo oferuje standardowe ikony dla różnych witryn w pełnym kolorze, a także uproszczone wersje w kolorze czarnym, białym lub szarym.

Jeśli wolisz korzystać z niestandardowych ikon mediów społecznościowych, użyj opcji niestandardowej i prześlij własne pliki graficzne. W takiej sytuacji zalecamy, by obrazów miały rozmiar 96 px na 96 px. Aby zachować odpowiednie odstępy i wyrównanie między ikonami mediów społecznościowych dostarczanymi przez Klaviyo a Twoimi niestandardowymi obrazami, użyj ikon o szerokości 50 pikseli, wyśrodkowanych w pliku obrazu zarówno w pionie, jak i w poziomie.

Aby zmienić kolejność ikon, przeciągaj ich etykiety na pasku bocznym. Możesz użyć przycisku Dodaj separator, aby uzyskać bardziej szczegółową kontrolę nad odstępem między każdą ikoną.

Odstęp

Blok odstępu dodaje między pionowo ułożonymi blokami konfigurowalną ilość miejsca. Aby dostosować odstęp między blokami znajdującymi się obok siebie (np. w kolumnie), użyj dopełnienia z lewej/prawej strony.

Produkt

Użyj bloku produktów, aby dodać polecane pozycje z katalogu sklepu. Po dodaniu bloku produktów dostępne będą dwie opcje: blok dynamiczny lub statyczny.

Dynamiczny feed aktualizuje się automatycznie i jest konfigurowany za pomocą feedu produktowego. Więcej informacji o konfigurowaniu feedu produktowego znajdziesz w naszym artykule Jak korzystać z feedów produktowych i rekomendacji.

Statyczny blok produktów wyświetla tylko pozycje katalogowe wybrane ręcznie w edytorze szablonu i nie będzie aktualizowany automatycznie ani kierowany do poszczególnych odbiorców.

W przypadku obu powyższych opcji po wybraniu feedu lub pozycji można spersonalizować wygląd bloku. Blok produktów może wyświetlać tylko zdjęcia lub zawierać nazwę i cenę każdej pozycji. Aby w pełni dostosować blok, przewiń wszystkie opcje na karcie stylów bloku produktów.

Kupon

Użyj bloku kuponu, aby wyświetlić kod kuponu w wiadomości e-mail:

1. Przeciągnij blok kupon na kanwę.
2. Jeśli Twoje konto nie ma jeszcze kuponów, kliknij Utwórz kupon w ustawieniach bloku, aby go utworzyć, a następnie wróć do tego bloku w edytorze.
3. Wybierz ostatnio użyty kupon lub kliknij Wyświetl wszystkie, aby wyszukać lub przefiltrować listę kuponów, a następnie kliknij Wybierz przy kuponie, którego chcesz użyć.

Blok wyświetla kod przypisany do każdego odbiorcy z wybranego kuponu. Jeśli odbiorcy nie przypisano jeszcze kodu, Klaviyo przypisuje go w ramach wysyłania wiadomości. Działa to tak samo jak wstawianie kuponu za pomocą znacznika szablonu, ale z wbudowanymi opcjami edycji stylu.

Możesz dodać tekst nagłówka, aby zapewnić kontekst dla kuponu i dostosować wygląd bloku, w tym styl tekstu kuponu, kolor tła i obramowanie.

Tabela

Bloki tabeli mogą pomóc Ci uporządkować obrazy i tekstu w szablonach e-mailowych. Dodaj kolumny lub wiersze w razie potrzeby. Odstępy między kolumnami są ustawiane automatycznie albo możesz ustawić szerokość każdej kolumny w sekcji Kolumny na karcie Style.

Gdy blok tabeli zostanie po raz pierwszy przeciągnięty do Twojego szablonu, ma jeden wiersz z dwiema kolumnami. Aby dodać dodatkowe wiersze i kolumny, użyj karty Style, a następnie wróć do karty Treść, aby skonfigurować zawartość tabeli.

Aby otworzyć zawartość określonej komórki, użyj sekcji Selektor komórek. Sekcja Treść komórek pozwala wybrać zawartość tekstową lub graficzną, a następnie dodaj do niej treść. Pamiętaj, że przełączanie się między typami treści tekstowej i graficznej może spowodować utratę zawartości, która wcześniej znajdowała się w tej komórce – aby cofnąć zmiany, użyj przycisku Cofnij.

Aby edytować kolory, czcionki, obramowania i układ tabeli, otwórz kartę Style.

Bloki tabel są również używane do wyświetlania dynamicznej zawartości takiej jak szczegóły listy produktów w koszyku odbiorcy. Dowiedz się więcej o blokach tabel dynamicznych.

HTML

Dodaj niestandardowy kod do szablonu za pomocą bloku HTML. Użyj tego typu bloku podczas dodawania niestandardowych elementów, funkcji innych firm takich jak liczniki czasu lub niestandardowych CSS. Jeśli masz problem z niestandardowym kodem w e-mailu, dowiedz się, jak rozwiązać problem z niestandardowym kodem w szablonach.

Cytat z recenzji

Jeśli korzystasz z Klaviyo Reviews, użyj bloku cytatu z opinią, aby wyróżnić opinie klientów w e-mailu.

Blok cytatów z recenzji oferuje wybór recenzji do wyróżnienia w Twoich wiadomościach. Jeśli nie masz jeszcze możliwości wyboru recenzji, może to wynikać z tego, że:

• Twoje filtry wykluczają opinie, które chcesz zobaczyć. Selektor opinii zaczyna z wybranymi opiniami z oceną 5 gwiazdek; dostosuj ocenę i inne filtry, aby poszerzyć wybór.
• Na Twoim koncie nie ma wystarczającej liczby recenzji o wysokiej jakości, więc nie ma z czego wybierać. Wróć później, aby zobaczyć wybrane opinie.
• Twoje recenzje nie zostały jeszcze przetworzone. Jeżeli chcesz wyróżnić nową recenzję, zanim spróbujesz ponownie, odczekaj kilka godzin.
• Recenzje na Twoim koncie nie są zweryfikowane. Aby recenzja została zweryfikowana, musi zostać przesłana za pośrednictwem spersonalizowanego linku w sekwencji prośby o recenzję Klaviyo Reviews lub oznaczona jako zweryfikowana w przesłanym pliku CSV z recenzjami z innej platformy. Niezweryfikowane recenzje, w tym recenzje przesłane bezpośrednio na Twoją stronę, nie kwalifikują się do uwzględnienia w bloku cytatów z recenzji.

Kolumny

Użyj bloku Podział lub układu Kolumny, aby dodać kolumny do swoich szablonów e-maili. Blok podziału umieszcza treści tekstowe lub obrazy w dwóch kolumnach i pozwala precyzyjnie dostosować szerokość każdej kolumny.

W przypadku układu kolumnowego do każdej kolumny można dodać dowolny typ treści, ale ogranicza się on do kilku wstępnie wybranych opcji szerokości kolumn. Jednak układ kolumnowy pozwala na zastosowanie od 1 do 4 kolumn.

Po dodaniu do szablonu kolumny upuść do każdej z nich blok treści, aby ją wypełnić. Nie musisz ograniczać się do tylko 1 bloku treści na kolumnę: dodaj tyle bloków treści, ile chcesz, układając je jeden nad drugim.

Wideo

Bloki wideo wyświetlają w Twoim e-mailu połączoną miniaturę. Gdy odbiorca kliknie miniaturę, otworzy się strona filmu, do której prowadzi link.

Aby dodać blok wideo, wklej adres URL filmu w ustawieniach bloku. Klaviyo pobiera miniaturę dla obsługiwanych adresów URL YouTube, Vimeo i TikTok.

Jeśli nie wyświetla się miniatura lub Twój film jest hostowany gdzie indziej, wybierz lub prześlij obraz miniatury. Włącz Pokaż przycisk odtwarzania w ustawieniach bloku, aby dodać nakładkę z przyciskiem odtwarzania.

Dlaczego wideo nie odtwarza się bezpośrednio z poziomu e-maila?

Większość popularnych klientów poczty e-mail (np. Gmail) osadzone treści takie jak filmy postrzega jako zagrożenie dla bezpieczeństwa. Te klienty poczty e-mail często całkowicie usuwają ten osadzony kod, a odbiorcy nie zobaczą wyświetlonej treści po otwarciu e-maila.

Ponieważ osadzone wideo nie jest niezawodnie wyświetlane wśród głównych klientów poczty e-mail, Klaviyo nie obsługuje bezpośrednio osadzonego wideo.

Treści uniwersalne

Korzystając z ikony gwiazdki, możesz zapisywać bloki lub sekcje w szablonach, aby używać ich w innych szablonach. Jeśli zapiszesz blok lub sekcję, pojawią się one w karcie Uniwersalne Twoich bloków z szablonami e-mailowymi. Gdy wprowadzasz do uniwersalnych bloku lub sekcji zmiany, będzie można zdecydować o zastosowaniu tych zmian we wszystkich wystąpieniach zapisanej treści. Po edytowaniu we wszystkich wystąpieniach kliknij Opublikuj zmiany, przejrzyj wiadomości, których to dotyczy, i potwierdź publikację.

Dowiedz się więcej o tym, jak korzystać z zapisanych treściach uniwersalnych.

Cofanie i ponawianie działania

Jeśli podczas edycji szablonu popełnisz błąd, użyj przycisku Cofnij, aby wrócić do jego starszej wersji. Możesz także użyć przycisku Ponów i wrócić do nowszej wersji szablonu. Twój szablon będzie automatycznie zapisywany podczas edycji, a przyciski Cofnij/Ponów będą na bieżąco rejestrować zmiany. Wprowadzone wcześniej zmiany są jednak uwzględniane dopiero w trakcie sesji edycji. Jeśli wyjdziesz z szablonu i wrócisz do niego później, przycisk Cofnij będzie wyłączony do momentu wprowadzenia kolejnych zmian.

Podgląd e-maila

Kliknij Podgląd, aby sprawdzić układ wiadomości e-mail i spersonalizowane treści. Jeśli tworzysz szablon wielokrotnego użytku, wybierz dane podglądu na podstawie tego, jak e-mail będzie wysyłany. Skorzystaj z poniższej tabeli, aby wybrać odpowiednie dane.

Po wybraniu danych podglądu sprawdź układ na komputerze i na urządzeniach mobilnych. Aby sprawdzić e-mail w skrzynce odbiorczej, wpisz adres e-mail odbiorcy testowego na pasku bocznym podglądu i kliknij Wyślij test. Otwórz testowy e-mail, aby sprawdzić jego układ i linki.

Dodatkowe źródła