Tworzenie szablonu e-mail

Zanim utworzymy wiadomość, musimy najpierw stworzyć szablon. W szablonie możemy zawrzeć szkielet wiadomości – stałe części, jak logo, stopka, układ + pola, w nawiasach klamrowych, np. {naglowek} {baner} {tresc} {produkt}. W szablonie można również stworzyć całą wiadomość, w przypadku, gdy informacje zawarte w szablonie będą dotyczyć jednorazowego mailingu. Wtedy przy tworzeniu wiadomości wystarczy wybrać przygotowany szablon i zapisać.

WAŻNE: Dodanie możliwości wypisania się z mailingu w szablonie jest obowiązkowe Więcej informacji

Przejdź do E-MAIL MARKETING => LISTA SZABLONÓW


Spis treści:

  1. Importuj ZIP lub dodaj nowy szablon.
  2. Dodaj elementy do szablonu
  3. Podstawy tworzenia szablonów
  4. Zapisz szablon
  5. Wskazówki dotyczace szablonów HTML

1. Importuj ZIP lub dodaj nowy szablon

Możemy stworzyć szablon na dwa sposoby:

[1] Szukaj – wpisz wybraną frazę w polu, żeby odszukać w bazie gotowy szablon.

[2] Importuj ZIP – importując gotowy kod szablonu wraz z grafikami z pliku ZIP. Pakujemy w ZIP index.html + grafiki, a nie folder z szablonem.

Jak prawidłowo przygotować plik .zip do importu:

– nazwy obrazków jak i samego kodu nie mogą zawierać polskich znaków
– obrazki i html muszą znajdować się w tym samym folderze
– kodowanie UTF-8
– rozszerzenia w kodzie piszemy .jpg .png (błędnie: .JPG .PNG)
– usuwamy folder MAC jeśli jest

[3] Dodaj nowy szablon – pozwala na stworzenie szablonu w starym kreatorze, bądź wgranie szablonu przygotowanego w kodzie html.

Aby stworzyć szablon w nowym kreatorze należy przejść do E-MAIL MARKETING.

Dowiedz się więcej o kreatorze Drag & Drop >>


2. Dodaj elementy do szablonu

Po kliknięciu przycisku Dodaj nowy szablon, przechodzimy do widoku edytora szablonów:

[1] Nazwa – należy wprowadzić nazwę, pozwalającą na identyfikację szablonu w programie

[2] Grupa – wybrać grupę w której ma się znajdować szablon – domyślnie jest to grupa default. Przy tworzeniu szablonu możemy dodać potrzebną grupę korzystając z przycisku lub wybrać jedną z istniejących,

[3] Szablon jest współdzielony – zaznaczenie tej opcji spowoduje, że szablon będzie dostępny i widoczny na innych kontach użytkowników,

[4] Porzucony koszyk – zaznaczenie tej opcji spowoduje, że będzie można dołączyć w e-mailu produkty z porzuconego koszyka

[5] Ten szablon jest dynamiczny – należy zaznaczyć, gdy przygotowany szablon jest dynamiczny (opcja zaawansowana),

[6] Użyj treści e-mail z URL – wybór tej opcji pozwala na wgranie szablonu, który znajduje się na serwerze zewnętrznym. W pojawiającym się oknie należy wkleić adres URL, pod którym znajduje się szablon. Jeśli w zakodowanym szablonie znajduje się informacja o temacie (w atrybucie title), to przy wysyłce temat wiadomości będzie pobierany z tego atrybutu ignorując temat wiadomości wprowadzony w systemie SALESmanago.

Tworzenie_szablonu_3


3. Podstawy tworzenia szablonów

a) Dodawanie obrazków
Aby dodać obrazek do szablonu z naszego dysku, należy kliknąć przycisk galerii :

dodawanie_szablonu3

Po kliknięciu przycisku pojawia się okno galerii:

Z domyślnej galerii wybierz obrazek, a następnie kliknij przycisk Wybierz. Możesz również załadować swój własny obrazek, klikając przycisk Dodaj plik, który znajduje się w prawym górnym roku po zwinięciu panelu z obrazkiem:

Obrazek pojawia się w naszym e-mailu:

Więcej informacji o dodawaniu obrazków in-line

b) Dodawanie pól szablonu

Pole szablonu, to miejsce które w trakcie tworzenia docelowego e-maila będziemy mogli wypełnić unikatową treścią. Dodajemy je przyciskiem:

dodawanie_szablonu6

W pojawiającym się okienku podajemy nazwę pola (np. nagłówek) i operację zatwierdzamy klawiszem Wstaw. Nazwa pola nie może zawierać spacji oraz polskich znaków.

Pole pojawia się w naszym e-mailu:

Oczywiście pola możemy też wpisać ręcznie, pamiętając o zastosowaniu nawiasów klamrowych.

W SALESmanago istnieje możliwość edycji źródła kodu HTML szablonu. Edytor ten uruchamiamy przyciskiem HTML lub Przełącz tryb edycji. Na dole artykułu znajdują się porady dotyczące kodu html pod programy pocztowe.

c) Dodawanie stylów CSS

CSS to język służący do opisu formy prezentacji. Poprzez CSS możemy ustawiać takie parametry jak: rozmiar, grubość, kolor czy krój czcionki, kolor tła, odstępy między elementami.

W przypadku, gdy chcemy samodzielnie stworzyć szablon mailingowy za pomocą edytora kodu html należy pamiętać, aby umieszczać style CSS liniowo. Wyjątek od tej reguły stanowią maile RWD, dla których deklaracje media queries odpowiadające za poprawne wyświetlanie się e-maili na różnych rozdzielczościach należy umieścić w sekcji head w znacznikach <style> i </style>.


4. Zapisz szablon

Gotowy szablon zapisujemy. Zawsze możemy wrócić do jego edycji wchodząc na listę szablonów E-MAIL MARKETING => LISTA SZABLONÓW i klikając przycisk EDYTUJ. Możemy również usunąć szablon oraz go duplikować, a następnie edytować kopię.

Po zapisaniu szablonu przechodzimy do utworzenia wiadomości e-mail


5. Wskazówki dotyczące szablonów HTML

Zalecamy tworzenie szablonu w html. Poniżej kilka porad odnośnie tworzenia kodu szablonu:

  • najlepiej by szablon był jak najprostszy, bez CSS,
  • treści powinny być zawarte w tabelkach, nie w div’ach,
  • do pociętych grafik należy dodać style=”display: block; border: 0px”,
  • szerokość tabelki nie powinna przekraczać 680px,
  • każdy obrazek powinien mieć określoną szerokość, zalecane jest dodawanie obrazów o wymiarach jakie chcesz mieć w mailu,
  • nie dodawaj tekstu na obrazach, w przypadku większości programów pocztowych występuje błąd z wyświetlaniem,
  • nie dodawaj video, możesz zastąpić grafiką z ikoną play która będzie podlinkowana do danej treści,
  • nie zamieszczaj skryptów, ramek, czy animacji flash,
  • nie umieszczaj formularzy, ani ankiet,
  • kod MUSI być zgodny ze standardem W3C dla html 4.01. Jeśli pojawią się błędy w kodzie, szablon nie wyświetli się poprawnie,
  • polskie czcionki należy kodować w standardzie charset=utf-8”,
  • w obrazkach warto stosować ALT’y. Opis z ALT pojawi się przed pobraniem obrazków w programie pocztowym oraz po najechaniu kursorem na grafikę. Będą one widoczne w przypadku gdy obrazek nie będzie wyświetlony,
  • rozważ dodanie do szablonu linku preview – hiperłącza, które pozwoli odbiorcy otworzyć email w oknie przeglądarki gdyby wiadomość nie wyświetliła się poprawnie w skrzynce.
  • style w kodzie HTML dodawaj liniowo,
  • zalecamy stosowanie czcionek bezpiecznych np. Arial, Tahoma, Georgia, Verdana,
  • w e-mailiach z reguły nie stosujemy float, możesz go ominąć stosując align=”left”,
  • e-maile responsywne charakteryzują się prostotą, uproszczona konstrukcja zapewni Ci poprawne wyświetlanie na większości urządzeń podobnie jak w mailach nieresponsywnych ich struktura złożona jest z tabel z wykorzystaniem atrybutów align, szerokości oraz media queries,
  • strukturę całego e-maila budujemy za pomocą <table> i jego elementów <tr> <td>, w przypadku wykorzystania znacznika <div> może wystąpić wiele problemów związanych z rozmieszczeniem kolumn i wierszy maila,
  • do grafik należy dodać style=”display: block; border: 0px”,
  • nie zalecamy stosowania cieni, gradientów, border-radius, border, czy background: url, gdyż niektóre programy pocztowe nie obsługują tych stylów,
Jeżeli potrzebujesz więcej informacji na powyższy temat skontaktuj się z nami: support@salesmanago.com +48 533 600 808
Luty 02 2024 Marzec 12 2024