Przewodnik po edytorze szablonów e-mailowych

Czego się dowiesz?

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

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 do wyboru. Wybierz między podstawowymi blokami, które są pustymi szablonami służącymi do tworzenia e-maili od podstaw, a treściami uniwersalnymi, które są treściami utworzonymi w innych szablonach i zapisanymi do późniejszego wykorzystania. 

W sekcji Podstawowe znajdziesz wybór zarówno bloków, jak i układów. Użyj bloków, aby dodać zawartość, taką jak tekst, obrazy lub przyciski. Używaj układów (tj. sekcji i kolumn) do grupowania bloków i konfigurowania ich. 

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

Style szablonów

Główna zakładka 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 zakładkę Style. 

W tym miejscu możesz ustawić wygląd i styl swojej wiadomości e-mail. 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ść
    Szerokość treści e-maila (zalecane 600 px).
  • Promień narożnika, Marginesy, Dopełnienie i Obramowanie
    Dodawaj odstępy i obramowanie do szablonu. 
• Tekst i nagłówki
  Ustaw style dla zwykłego tekstu i czterech stylów nagłówków, a następnie wybierz styl tekstu z menu rozwijanego w dowolnym bloku tekstowym, aby go zastosować. 
• Czcionka
  Wybór czcionki, odstępów między czcionkami, rozmiaru, grubości i koloru dla stylu tekstu. 
• Odstępy między literami
  Odstępy między literami w poziomie. 
• Interlinia
  Pionowe odstępy 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ę na urządzeniach mobilnych (zalecane), czy wyświetlać te same style i treści zarówno na komputerze, jak i na urządzeniach mobilnych. 
• Inne
  • Waluta
    Wybierz domyślną walutę dla szablonu, jeśli jest inna niż 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śli ustawisz kolor tła treści w głównej sekcji Style, a następnie ustawisz kolor tła specyficzny dla bloku, wtedy kolor tła bloku zostanie użyty dla obszaru tego bloku. 

Sekcje i style sekcji 

Cała treść w edytorze szablonów jest podzielona 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 zakładkę Style i zakładkę Opcje wyświetlania. Użyj stylów sekcji, aby dodać do niej obrazy tła, dopełnienie i inne style. Użyj opcji wyświetlania sekcji, aby wybrać, które typy urządzeń i którzy 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 koliduje 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

W obrębie sekcji dodaj bloki, aby wypełnić e-mail treścią. Większość bloków treści posiada zakładkę Style, w której można skonfigurować wygląd bloku, oraz zakładkę Opcje wyświetlania, w której można wybrać, kto powinien widzieć blok i na jakich typach urządzeń ma się on wyświetlać. Specyficzne 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 style sekcji z opcjami kolorów zawierają narzędzie, które oferuje kilka sposobów wyboru koloru:

• Użyj pola gradientu, aby wybrać odcień i barwę.
• 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 niedostępne w przypadku bloków tekstu, podziału i 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. 

Edytor e-maili Klaviyo wykorzystuje standard kodowania UTF-8, co oznacza, że obsługuje znaki łacińskie, emotikony, znaki dwubajtowe i wiele innych.  

Możesz dodać treści dynamiczne do bloku tekstowego, aby spersonalizować wiadomość dla każdego odbiorcy. 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 

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

• Biblioteka obrazów
  Dodaj obraz przesłany w przeszłości, przeszukując bibliotekę obrazów.
• Prześlij obraz
  Prześlij plik JPEG, PNG lub GIF ze swojego urządzenia. 
• 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, aby obraz był klikalny, szerokość obrazu, wyrównanie i inne style. 

Podział

Użyj bloku podziału, aby wyświetlić treść w dwóch kolumnach o dowolnej szerokości. Zawartość po obu stronach bloku podziału musi być albo obrazem, albo tekstem. Domyślnie blok podziału będzie używał podziału 50/50. Przejdź do zakładki Ustawienia podziału, aby dostosować ten współczynnik. Ewentualnie można użyć układu Kolumny, aby podzielić zawartość na co najmniej dwie kolumny. 

Przyciski 

Blok przycisków tworzy duże linki, które łatwiej zauważyć niż zwykłe linki tekstowe i świetnie nadają się do podkreślania ważnych wezwań do działania (CTA). Ponieważ są one używane do wezwań do działania, prawdopodobnie będą pojawiać się w e-mailach tylko parę razy.

Wypełnij przynajmniej pola Tekst i Adres URL. Tekst jest tym, co odbiorca zobaczy na przycisku, a adres URL to miejsce, do którego zostanie przeniesiony użytkownik po kliknięciu przycisku. Dostosuj wygląd, kształt i rozmiar przycisku za pomocą opcji koloru, promienia narożnika i dopełnienia. Możesz także dostosować czcionkę bloku i inne style poniżej. 

Pasek nagłówkowy/linków 

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

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

Dodaj dowolne linki do paska linków. Możesz skonfigurować ustawienia wyświetlania na urządzeniu dla każdego linku. My zalecamy wyświetlanie tylko kluczowych linków na urządzeniach mobilnych, ponieważ rozmiar takiego urządzenia jest mniejszy. 

Po dodaniu linków i logo dopieść ostatnie szlify, korzystając z poniższych opcji stylu. Można zmienić czcionkę, kolory i odstępy dla bloku. Gdy będzie gotowy, wyświetl podgląd zarówno na komputerze, jak i urządzeniu mobilnym, aby zobaczyć rezultat. 

Rzucanie cienia

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

Separator

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

Linki do mediów społecznościowych 

Blok linków społecznościowych to łatwy sposób na dodanie ikon przenoszących do Twoich kont na portalach Instagram, Pinterest, Facebook, X (Twitter) i innych. Klaviyo oferuje standardowe ikony w pełnym kolorze dla różnych witryn, a także uproszczone wersje w kolorze czarnym, białym lub szarym. 

Jeśli wolisz używać w pełni niestandardowych ikon mediów społecznościowych, użyj opcji niestandardowej i prześlij własne pliki graficzne. Jeśli wybierzesz tę drogę, zalecamy użycie obrazów o rozmiarze 96 px na 96 px. Aby zachować 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 i wyśrodkowanych zarówno w pionie, jak i w poziomie w pliku obrazu.

Przeciągaj etykiety ikon na pasku bocznym, aby zmienić kolejność ikon. Możesz użyć przycisku Dodaj separator, aby uzyskać bardziej zaawansowaną kontrolę nad odstępem między każdą ikoną. 

Odstęp

Blok separatora dodaje konfigurowalną ilość miejsca między pionowo ułożonymi blokami. 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 są dwie opcje: blok dynamiczny lub statyczny. 

Dynamiczny feed aktualizuje się automatycznie i jest konfigurowany za pomocą feedu produktowego. Aby dowiedzieć się więcej o konfigurowaniu feedu produktowego, przeczytaj artykuł o korzystaniu z feedu produktowego i rekomendacji. 

Statyczny blok produktów wyświetla tylko pozycje katalogowe wybrane ręcznie w edytorze szablonów i nie będzie aktualizowany automatycznie ani targetowany na indywidualnych odbiorców. 

W przypadku obu 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. Przewiń wszystkie opcje na karcie stylów bloku produktów, aby w pełni spersonalizować blok. 

Tabela

Bloki tabeli mogą pomóc w uporządkowaniu obrazów 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 można ustawić szerokość w ustawieniu Szerokość na karcie Kolumny). 

Gdy blok tabeli jest po raz pierwszy przeciągany do szablonu, ma jeden wiersz z dwiema kolumnami. Użyj zakładki Ustawienia tabeli, aby dodać dodatkowe wiersze i kolumny, a następnie przejdź z powrotem do zakładki Treść, aby skonfigurować zawartość tabeli. 

Użyj sekcji Selektor komórek, aby otworzyć zawartość określonej komórki. Użyj sekcji Treść komórek, aby wybrać zawartość tekstową lub graficzną, a następnie dodaj zawartość. Należy pamiętać, że przełączanie się między typami zawartości tekstowej i graficznej może spowodować utratę zawartości, która wcześniej znajdowała się w tej komórce – użyj przycisku cofania, aby przywrócić zmiany. 

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 niestandardowe 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śli korzystasz z Klaviyo Reviews, korzystaj z 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, oto przykładowe przyczyny: 

• 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śli chcesz wyróżnić nową recenzję, odczekaj kilka godzin, zanim spróbujesz ponownie.
• 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ę lub oznaczona jako zweryfikowana w przesłanym pliku CSV z recenzjami z innej platformy. Niezweryfikowane recenzje, w tym recenzje przesłane bezpośrednio do Twojej witryny, 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 szablonu 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 można dodać dowolny typ treści do każdej kolumny, ale jest on ograniczony do kilku wstępnie wybranych opcji szerokości kolumn. Zaletą układu kolumnowego jest to, że pozwala na umieszczenie od jednej do czterech kolumn. 

Po dodaniu kolumn do szablonu upuść blok treści do każdej kolumny, 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 wygląd imitujący nagranie osadzone w e-mailu. Gdy jednak odbiorca kliknie 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śli film pochodzi z Youtube’a, Klaviyo automatycznie wybierze miniaturkę. 

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

Dlaczego wideo nie jest odtwarzane bezpośrednio z poziomu e-maila? 

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

Dokładamy wszelkich starań, abyś Ty, jako nasz klient, odniósł sukces. Ponieważ nasze testy wykazały, ż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ę w zakładce Uniwersalne Twoich bloków z szablonami e-mailowymi. Gdy wprowadzasz zmiany w uniwersalnym bloku lub sekcji, możesz zdecydować o zastosowaniu tych zmian we wszystkich wystąpieniach zapisanej treści.

Dowiedz się więcej o korzystaniu z zapisanych treściach uniwersalnych.

Cofanie i ponawianie działania

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

Podgląd e-maila 

Użyj przycisku Wyświetl podgląd i testuj, aby wyświetlić podgląd e-maila w skrzynce odbiorcy. Jeśli tworzysz e-mail w zakładce Szablony e-mailowe, pamiętaj o wyświetleniu podglądu wiadomości, aby zobaczyć, jak będzie wyglądać z perspektywy odbiorcy. Skorzystaj z poniższej tabeli, aby określić najlepszy sposób podglądu. 

Dodatkowe źródła

• Odniesienie do personalizacji wiadomości
• Tworzenie szablonów podstawowych
• Szkolenie: Pierwsze kroki z edytorem szablonów e-mailowych