Kreator Szablonu w Selesto służy do przygotowania i testowania treści powiadomień e-mail. Nie jest to standardowy edytor tekstu, ponieważ formatowanie e-maili ma ograniczenia i może wyglądać inaczej w zależności od urządzenia oraz programu pocztowego (np. Outlook). W kreatorze tworzysz szkic, sprawdzasz podgląd w widoku desktopowym i mobilnym oraz możesz wysłać wiadomość testową na wskazany adres.

Uwaga!

Przed publikacją zawsze sprawdź finalny wygląd w wiadomości testowej.

Widok panelu tworzenia szablonów powiadomień

Nie jest to standardowy edytor tekstu

Edytor pracuje na blokach (elementach szablonu), a zachowanie kursora i wstawianie nowych elementów może różnić się od tego, co znasz z Worda lub Dokumentów Google. W niektórych sytuacjach miejsce wstawienia nowego elementu zależy od tego, który blok jest aktualnie aktywny i gdzie znajduje się kursor w jego treści. Jeśli edytor nie pozwala dodać nowej sekcji w wybranym miejscu, ustaw kursor na końcu treści elementu znajdującego się przed planowanym miejscem wstawienia, a dopiero potem użyj opcji Dodaj, aby wstawić kolejny element.

Pełna lista dostępnych opcji

Test

1. Kliknij przycisk Test w kreatorze.
2. W otwartym oknie wpisz adres e-mail odbiorcy.
3. Kliknij Wyślij, aby wysłać wiadomość testową wygenerowaną na podstawie przygotowanego szablonu.
4. Sprawdź skrzynkę odbiorczą i otwórz wiadomość testową, aby zweryfikować wygląd treści oraz działanie linków i przycisków.

Testowanie szablonu powiadomień

Na pierwszym miejscu omawiamy opcję Test. Jest ona najważniejsza, ponieważ pozwala szybko zweryfikować wprowadzone zmiany i upewnić się, że wiadomość wygląda poprawnie po wysyłce. Z tego powodu pozostałe opcje opisujemy w kolejności od prawej do lewej.

Media

1. Kliknij przycisk Media.
2. Z biblioteki mediów wybierz obraz.
3. Przeciągnij niebieski uchwyt po prawej stronie obrazu, aby ustawić jego rozmiar.

Dodawanie zdjęć w kreatorze szablonu

Wyrównanie

Przycisk Wyrównaj służy do ustawienia wyrównania tekstu w aktualnie edytowanym elemencie szablonu (np. akapicie, nagłówku lub innym bloku, w którym znajduje się kursor).

Jak używać:

1. Kliknij w tekst, aby ustawić kursor w konkretnym bloku (albo zaznacz fragment tekstu, jeśli edytor na to pozwala).

2. Kliknij Wyrównaj.

3. Wybierz jedną z opcji: Do lewej, Do środka, Do prawej lub Wyjustuj.

Wskazówka: w szablonach e-mail ten sam styl może wyglądać nieco inaczej w różnych programach pocztowych, dlatego po zmianie wyrównania warto wykonać Test i sprawdzić wiadomość na komputerze oraz telefonie.

Wyrównanie tekstu w kreatorze powiadomień

Kolor tekstu

Przycisk Kolor tekstu służy do ustawienia koloru czcionki lub tła dla zaznaczonego fragmentu lub tekstu, w którym znajduje się kursor. Po kliknięciu otwiera się panel wyboru koloru z paletą oraz możliwością wpisania kodu HEX. Zmiana jest widoczna od razu w edytowanym elemencie.

Jak używać:

1. Zaznacz tekst lub element, którego tło chcesz edytować.

2. Wybierz kolor z palety lub wpisz własny w okienku Ustaw kolor

Ustawienia koloru tekstu

Rozmiar tekstu

Przycisk Rozmiar tekstu służy do zmiany wielkości czcionki dla zaznaczonego fragmentu lub tekstu. Po kliknięciu otwiera się lista dostępnych rozmiarów do wyboru. Zmiana jest widoczna od razu w edytowanym elemencie.

Jak używać:

1. Zaznacz tekst, którego rozmiar chcesz zmienić, lub ustaw kursor w miejscu, w którym chcesz pisać większym lub mniejszym tekstem.

2. Kliknij przycisk Rozmiar tekstu i wybierz odpowiedni rozmiar z listy.

Ustawienia rozmiaru tekstu

Panel styli

Przycisk Panel styli służy do edycji wyglądu zaznaczonego elementu w szablonie (np. sekcji lub bloku). Po kliknięciu otwiera się panel, w którym możesz ustawić m.in. Odstęp (padding) i Tło dla Zawartość oraz Treść, a także parametry obramowania: Szerokość obramowania, Zaokrąglenie obramowania i Kolor obramowania. Zmiany są widoczne od razu w edytowanym elemencie.

Jak używać:

1. Kliknij element w podglądzie szablonu, aby go zaznaczyć.

2. Kliknij przycisk Panel styli i ustaw potrzebne wartości (np. Odstęp (padding), Tło, obramowanie).

Wskazówka: W polach Odstęp (padding) lub margin możesz wpisać jedną wartość (zastosuje się do wszystkich stron) albo kilka wartości. Jeśli wpiszesz 4 wartości, są one interpretowane kolejno jako: góra, prawo, dół, lewo (np. 32px 20px 64px 0px). Jeśli wpiszesz 2 wartości, pierwsza dotyczy góra/dół, a druga lewo/prawo (np. 12px 24px).

Podgląd wersji mobilnej

W kreatorze możesz szybko przełączyć podgląd z widoku desktopowego na mobilny, aby sprawdzić, jak szablon skaluje się na telefonie.

Zwróć uwagę na układ kolumn, wielkość czcionek, odstępy, rozmiar obrazów oraz klikalność przycisków. Jeśli coś się „rozsypuje”, skoryguj treść lub style i odśwież podgląd, aż wersja mobilna będzie czytelna i wygodna w użyciu.

Podgląd szablonu w wersji mobilnej

Tabela

Przycisk Tabela służy do wstawiania tabeli oraz późniejszej edycji jej struktury (wiersze, kolumny, nagłówek). Po kliknięciu otwiera się menu, w którym możesz dodać tabelę, a następnie zarządzać jej układem. Zmiany są widoczne od razu w edytowanym elemencie.

Jak używać:

1. Zaznacz miejsce w treści, w którym chcesz dodać tabelę (kliknij w akapit lub ustaw kursor w wybranym miejscu).

2. Kliknij przycisk Tabela i dodaj tabelę w wybranym układzie (zależnie od dostępnych opcji w menu).

3. Aby zmienić układ tabeli, kliknij w dowolną komórkę tabeli, a następnie ponownie kliknij Tabela i wybierz jedną z opcji.

Kreator szablonów - opcje tabeli

Więcej formatowania

Przycisk Więcej formatowania rozwija dodatkowe opcje edycji, w tym Wyczyść formatowanie, które usuwa zastosowane style z zaznaczonego tekstu i przywraca domyślny wygląd.

Funkcja jest schowana pod Więcej formatowania, aby ograniczyć ryzyko przypadkowego kliknięcia i niechcianego usunięcia formatowania w trakcie pracy.

Kreator szablonu - wyczyść formatowanie

Link

Przycisk Link służy do wstawiania klikalnego odnośnika w treści szablonu. Po kliknięciu otwiera się okno, w którym podajesz adres URL, tekst linku oraz opcjonalnie możesz ustawić otwieranie w nowej zakładce.

Jak używać:

1. Zaznacz miejsce w treści, w którym chcesz wstawić link, lub zaznacz fragment tekstu, który ma stać się linkiem.

2. Kliknij przycisk Link i uzupełnij pola: URL oraz Tekst. (Opcjonalnie) zaznacz Otwórz link w nowej zakładce.

3. Kliknij Wstaw, aby dodać link do treści.

Kreator szablonu - link

Formatowanie tekstu

Formatowanie tekstu zawiera podstawowe opcje edycji wyglądu tekstu:

1. Podkreślenie

2. Przekreślenie

3. Kursywa

4. Pogrubienie

Kreator szablonu - formatowanie tekstu

HTML

Przycisk HTML pozwala podejrzeć kod HTML aktualnego szablonu.

Pamiętaj:

To nie jest edytor strony WWW - szablony e-mail mają swoje ograniczenia i nie wszystkie elementy lub style wklejone bezpośrednio w HTML zostaną poprawnie wyrenderowane w wiadomości.

Na przykład:

Lista dodana ręcznie jako kod HTML może nie pojawić się w finalnym e-mailu - w takim przypadku dodaj listę najpierw z paska narzędzi, a dopiero potem ewentualnie dopracuj treść.

Podobnie ze stylami - część stylów ustawionych w sekcji HTML może zostać pominięta przez mechanizm wysyłki lub programy pocztowe.

Kreator szablonu - widok HTML

Dodaj

Tekst, nagłówki i listy

Tekst i listy to zestaw elementów do wstawiania treści tekstowych w szablonie:
- Tekst
- Nagłówek 1, Nagłówek 2, Nagłówek 3,
- Lista punktowa oraz Lista numerowana.

Kreator szablonu - Dodaj: Tekst, Nagłówek 1-3, Lista punktowa i Lista numerowana

Kreator szablonu - Dodaj: Tekst, Nagłówek, Lista

Układ

Układy kolumn pozwalają wstawić gotowy układ treści oparty o kolumny.

Kreator szablonu - Dodaj: Układ (kolumny 1-4, 60/40, 40/60)

Przycisk

Przycisk służy do dodania w szablonie klikalnego elementu typu CTA (call to action), który kieruje odbiorcę do wybranego miejsca (np. konkretnej strony w sklepie). Element warto stosować, gdy chcesz, aby odbiorca wykonał jedno, konkretne działanie bez szukania linku w treści.

Jak używać:

1. Ustaw kursor w miejscu, w którym chcesz dodać przycisk.

2. Kliknij + i wybierz Przycisk.

Przykładowe zastosowania:

- Sprawdź status zamówienia {{orderID}}>

- Przejdź do płatności

- Zobacz szczegóły zamówienia {{orderID}}

- Skontaktuj się z <a href="www.twoj-sklep.pl/kontakt">nami</a>

- Twój kod rabatowy {{code}}

Kreator szablonu - Dodaj: Przycisk

Tabela zwrotu

Element Tabela zwrotu służy do wstawienia w szablonie gotowej tabeli z informacjami o zwrocie. Po dodaniu w treści pojawia się placeholder #RETURN_TABLE# (nie zmieniaj jego treści!), który w wysłanej wiadomości zostanie automatycznie uzupełniony danymi dotyczącymi zwrotu.

Jak używać:

1. Ustaw kursor w miejscu, w którym chcesz wstawić tabelę zwrotu.

2. Kliknij + i wybierz Tabela zwrotu.

Kreator szablonu - tabela zwrotu

Przykład tabeli zwrotu:

Kreator szablonu - przykład tabeli zwrotu

Tabela zamówienia

Element Tabela zamówienia służy do wstawienia w szablonie gotowej tabeli z informacjami o zamówieniu. Po dodaniu w treści pojawia się placeholder #ORDER_TABLE# (nie zmieniaj jego treści!), który w wysłanej wiadomości zostanie automatycznie uzupełniony danymi dotyczącymi zamówienia.

Jak używać:

1. Ustaw kursor w miejscu, w którym chcesz wstawić tabelę zamówienia.

2. Kliknij + i wybierz Tabela zamówienia.

Kreator szablonu - Dodaj: Tabela zamówienia

Przykład tabeli zamówienia:

Kreator szablonu - wygląd tabeli zamówienia w mailu

Pliki elektroniczne

Element Pliki elektroniczne służy do wstawienia w szablonie sekcji z linkami do pobrania plików przypisanych do zakupionych produktów elektronicznych. Po dodaniu w treści pojawia się placeholder #ELECTRONIC_FILES# (nie zmieniaj jego treści!), który w wysłanej wiadomości zostanie automatycznie uzupełniony linkami wygenerowanymi dla konkretnego zakupu (zamówienia).

Jak używać:

1. Ustaw kursor w miejscu, w którym chcesz wyświetlić klientowi linki do pobrania.

2. Kliknij + i wybierz Pliki elektroniczne.

Kreator szablonu - Dodaj: Pliki elektroniczne

Przykład: wygląd elementu Pliki elektroniczne w mailu

Kreator szablonu - wygląd elementu Pliki elektroniczne w mailu

Kody rabatowe

Element Kod rabatowy służy do wstawienia w szablonie sekcji z kodem lub kodami rabatowymi. Po dodaniu w treści pojawia się placeholder #DISCOUNT_CODE# (nie zmieniaj jego treści!), który w wysłanej wiadomości zostanie automatycznie uzupełniony wygenerowanym kodem rabatowym dla klienta.

Jak używać:

1. Ustaw kursor w miejscu, w którym chcesz wyświetlić kod rabatowy.

2. Kliknij + i wybierz Kod rabatowy.

Ustawienia kodów rabatowych znajdziesz tutaj.

Kreator szablonu - Dodaj: Kod rabatowy

3. Wyświetli się okienko, w którym należy wybrać kod rabatowy.

Kreator szablonu - okno wyboru kodu rabatowego

Przykład kodu rabatowego w mailu:

Kreator szablonu - przykład kodu rabatowego w mailu

Zawartość paczki

Element Zawartość paczki służy do wstawienia w szablonie tabeli z produktami znajdującymi się w paczce. Po dodaniu w treści pojawia się placeholder #PACKAGE_PRODUCTS# (nie zmieniaj jego treści!), który w wysłanej wiadomości zostanie automatycznie uzupełniony listą produktów z danej paczki (np. w wiadomości o wysyłce lub częściowej wysyłce).

Jak używać:

1. Ustaw kursor w miejscu, w którym chcesz wyświetlić klientowi zawartość paczki.

2. Kliknij + i wybierz Zawartość paczki.

Kreator szablonu - Dodaj: Zawartość paczki

Przykład elementu w wiadomości e-mail:

Przykład elementu "Zawartość paczki" w wiadomości e-mail

Zmienne

Każde powiadomienie ma własny zestaw zmiennych dynamicznych w formacie {{nazwa}}, które możesz wstawić do szablonu, aby spersonalizować treść (np. {{clientName}}, {{order_number}}). Te znaczniki działają jak wywołania funkcji w systemie — podstawiają konkretne dane klienta i zamówienia.

Nie usuwaj tych znaczników, jeśli chcesz zachować pełną personalizację wiadomości.

Widok zmiennych w szablonie

Pełna lista zmiennych:

{{clientName}} – wstawia imię i nazwisko podane przy składaniu zamówienia.

{{orderId}} – numer zamówienia.

{{payment}} – metoda płatności użyta przy zamówieniu.

{{delivery}} – wybrany sposób dostawy.

{{deliveryAddress}} – adres dostawy podany przez klienta.

{{orderDetails}} – zestawienie pozycji i wartości zamówienia.

{{code}} – kod rabatowy przypisany do tej wiadomości.

{{returnDetails}} – informacje o zgłoszonym zwrocie.

{{productName}} – nazwa produktu (np. w powiadomieniu o ponownej dostępności).

{{password}} - nowe hasło wygenerowane dla konta klienta.

{{trackingNumber}} - ręcznie dodany numer przesyłki.

{{comment}} - powód anulowania zamówienia.

{{reason}} - powód odrzucenia zwrotu/reklamacji.

{{pointsChange}} - zmiana punktów lojalnościowych.

{{pointsBalance}} - sumaryczna ilość punktów lojalnościowych klienta.