Przewodnik po edytorze szablonów e-mailowych

Czego się dowiesz?

Lepiej poznasz edytor szablonów e-mailowych Klaviyo typu „przeciągnij i upuść”, a także zrozumiesz, jak korzystać ze stylów szablonów i konfigurować każdy typ bloku. 

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 takimi, 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. Układy (tj. sekcje i kolumny) przeznaczone są do grupowania bloków i ich konfigurowania. 

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 dany element i go przeciągnij. 

Style szablonów

Główna karta Style zawiera kilka opcji stylizacji, które będą miały zastosowanie do całego szablonu. Aby uzyskać dostęp do głównych ustawień stylów szablonu, wyjdź z bloku lub sekcji, w których pracujesz, używając przycisku Gotowe, a następnie kliknij kartę Style. 

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:

• 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 wiadomości. 
  • Szerokość
    Oznacza szerokość treści e-maila (zalecane 600 px).
  • Promień narożnika, Marginesy, Dopełnienie i Obramowanie
    Dodaj do szablonu odstępy i obramowanie. 
• 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 dla stylu tekstu czcionkę, odstęp między czcionkami, rozmiar, grubość i koloru. 
• Odstępy między literami
  Wybierz poziomy odstępy między literami. 
• Interlinia
  Wyznacz 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ę ona od tej figurującej w ustawieniach 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żeli kolor tła treści ustawisz w głównej sekcji Style, a następnie wybierzesz kolor specyficzny dla bloku, dla obszaru 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ł co najmniej jedną sekcję. Możesz dodawać lub usuwać sekcje według potrzeb. 

Aby otworzyć ustawienia sekcji, kliknij obszar po prawej lub lewej stronie jej zawartości. Należy pamiętać, że kliknięcie bloku spowoduje otwarcie ustawień tego bloku, a nie zawierającej go sekcji. 

Każda sekcja ma karty Style oraz Opcje wyświetlania. Aby dodać do sekcji obrazy tła, dopełnienie i inne style, użyj karty Style. Opcje wyświetlania sekcji pozwolą Ci wybrać, które typy urządzeń i którzy odbiorcy powinni widzieć poszczególne 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żeli 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 zawiera kartę Style, w której można skonfigurować wygląd bloku, oraz kartę Opcje wyświetlania, w której można 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.
• Użyj pipety, aby pobrać kolor z dowolnego miejsca w obszarze roboczym e-maila (obecnie opcja niedostępna w przypadku bloków tekstowych, podziału oraz tabeli).
  

Poznaj więcej opcji wyświetlania lub czytaj dalej, aby poszerzyć swoją wiedzę o typach bloków i ich zastosowaniach. 

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 głównego szablonu, lub dostosuj treść tekstu za pomocą ustawień edytora tekstu. 

W edytorze e-maili Klaviyo wykorzystuje się standard kodowania UTF-8, co oznacza, że obsługiwane są znaki łacińskie, emotikony, znaki dwubajtowe i wiele innych.  

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> 

Zwiń sekcję Treść lub przewiń ją, aby dostosować style bloku. Wybierz kolor tła dla bloku lub obszaru zawartości tekstowej i dodaj dopełnienie. 

Obrazy 

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. 
• Importuj obraz
  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 dwóch kolumnach o dowolnej szerokości, użyj bloku podziału. Treść po obu stronach bloku podziału musi być obrazem albo tekstem. Domyślnie blok podziału dzieli treść 50/50. Aby spersonalizować ten współczynnik, przejdź do karty Ustawienia podziału. Do podziału treści na co najmniej dwie kolumny można też użyć układu Kolumny. 

Przyciski 

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 URL. 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. Ustawienia wyświetlania na urządzeniu można skonfigurować dla każdego linku. Ze względu na mały rozmiar urządzeń mobilnych zalecamy, aby na tego rodzaju urządzeniach wyświetlać tylko kluczowe linki. 

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 blok będzie już gotowy, wyświetl rezultat swojej pracy za pomocą podglądu zarówno na komputerze, jak i urządzeniu mobilnym. 

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, ciemny i ciemniejszy. Można również ustawić kolor tła oraz dopełnienie 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ą. 

Linki 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 zaawansowaną 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, które znajdują się obok siebie (np. w kolumnie), użyj dopełnienia z lewej/prawej strony. 

Produkty 

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 o konfigurowaniu feedu produktowego przeczytasz w artykule na temat korzystania z feedu produktowego i rekomendacji. 

Statyczny blok produktów wyświetla tylko pozycje katalogowe wybrane ręcznie w edytorze szablonów. Nie będzie on aktualizował się automatycznie ani targetował indywidualnych odbiorców. 

W przypadku obu powyższych opcji po wybraniu feedu lub pozycji można dostosować 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 spersonalizować blok, przewiń wszystkie opcje na karcie stylów bloku produktów. 

Tabela

Bloki tabeli mogą pomóc Ci uporządkować obrazy i tekstu w szablonach e-mailowych. Blok tabeli zapewnia elastyczność w dodawaniu dowolnej liczby kolumn i wierszy, których rozmiar będzie automatycznie dopasowywał się do treści (ewentualnie szerokość można ustawić w ustawieniu Szerokość na karcie Kolumny). 

Kiedy blok tabeli zostaje przeciągany do szablonu po raz pierwszy, ma jeden wiersz z dwiema kolumnami. Aby dodać do niego dodatkowe wiersze i kolumny, użyj karty Ustawienia tabeli, 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 przywrócić zmiany, użyj przycisku cofania. 

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

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 tabelach 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 problemy z niestandardowym kodem w e-mailu, dowiedz się, jak rozwiązywać problemy z niestandardowym kodem w szablonach.

Cytat z recenzji

Jeżeli korzystasz z Klaviyo Reviews, używaj prawdziwych opinii klientów, ponieważ stanowią one społeczny dowód wartości Twojej marki i zwiększają wskaźnik konwersji. 

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 stać za tym kilka przyczyn: 

• Na Twoim koncie nie ma wystarczającej liczby recenzji o wysokiej jakości, więc nie ma z czego wybierać. Pozostaje uzbroić się w cierpliwość. 
• 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 z sekwencji prośby o recenzję lub oznaczona jako zweryfikowana w pliku CSV z recenzjami przesłanym 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

Istnieją dwa różne bloki, których można użyć do przeciągania kolumn do szablonów e-mailowych: blok podziału i układ kolumnowy. W przypadku bloku podziału masz do dyspozycji tylko tekst i obrazy w dwóch kolumnach, ale możesz precyzyjnie dostosowywać 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. Zaletą układu kolumnowego jest to, że pozwala on umieszczać od jednej do czterech kolumn. 

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

Wideo

Blok wideo tworzy w e-mailu wygląd imitujący nagranie osadzone. Kiedy odbiorca kliknie jednak przycisk odtwarzania, otworzy się nowa karta przeglądarki i rozpocznie się odtwarzanie filmu. 

Aby dodać blok wideo, skopiuj adres URL filmu z serwisów Youtube, Vimeo, TikTok lub wybranej platformy hostingu wideo. Jeżeli film pochodzi z Youtube’a, Klaviyo automatycznie wybierze miniaturkę. 

Jeśli wideo pochodzi z innego źródła, miniaturkę musisz przesłać ręcznie. Na miniaturze filmu pojawi się przycisk odtwarzania – funkcję tę można wyłączyć w ustawieniach bloku.

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. Często taki osadzony kod zostaje całkowicie wycięty, a po otwarciu e-maila odbiorcy nie zobaczą treści. 

Sukces naszych klientów jest dla Klaviyo niezwykle istotny. Ponieważ w naszych testach wykazano, że wideo często nie jest wyświetlane przez wiele popularnych klientów poczty e-mail, nie obsługujemy osadzania wideo bezpośrednio w wiadomości.

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.

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żeli opuścisz szablon i powrócisz do niego później, do czasu wprowadzenia nowych zmian przycisk Cofnij będzie wyłączony. 

Podgląd e-maila 

Aby wyświetlić podgląd e-maila w skrzynce odbiorcy, użyj przycisku Wyświetl podgląd i testuj. Jeśli e-mail tworzysz w karcie Szablony e-mailowe, pamiętaj, by wyświetlić podgląd wiadomości – pozwoli Ci on zobaczyć, jak e-mail będzie wyglądać z perspektywy odbiorcy. Aby określić najlepszy sposób podglądu, skorzystaj z poniższej tabeli: 

Dodatkowe źródła

• Informacje dotyczące personalizacji wiadomości
• Tworzenie szablonów podstawowych
• Szkolenie: Edytor szablonów e-mailowych: pierwsze kroki