Jak stworzyć szablon za pomocą FreshMail Designera?

Powrót do listy poradników

1
Rozdział
Co to jest FreshMail Designer i gdzie go znajdziesz?

Wideo przewodniki dobre na start

Przygotowaliśmy serię krótkich filmików instruktażowych, które przybliżą Ci najważniejsze aspekty pracy z edytorem szablonów FreshMail Designer.

bloki zdjecia teksty
przyciski social media alty - tekst alternatywny

Co to jest FreshMail Designer?

FreshMail Designer to intuicyjny edytor szablonów newsletterów i mailingów. Nie musisz mieć doświadczenia ani praktyki w działach graficznych czy IT, aby móc własnoręcznie stworzyć profesjonalny szablon newslettera.

FreshMail Designer – czego mogę się spodziewać?

Przede wszystkim biblioteki szablonów zaprojektowanych przez najlepszych polskich designerów. Dostępne są one zupełnie za darmo, w różnych układach funkcjonalnych - po to, abyś mógł z nich korzystać i czerpać inspiracje.

Dodatkowo FreshMail Designer pozwala Ci w intuicyjny sposób edytować, przebudowywać lub tworzyć od nowa szablony wiadomości. Wszystko w metodzie drag & drop, która przypomina budowanie maila z klocków. W tym wypadku klockami jest przygotowana biblioteka gotowych bloków, które możesz w łatwy sposób wykorzystać dla swoich potrzeb.

Ponadto w łatwy sposób, bez zewnętrznych programów graficznych typu Photoshop, jesteś w stanie edytować zdjęcia, które chcesz użyć w mailu. Bez większego problemu możesz więc kadrować, zmieniać rozmiar, a także nanosić na nie napisy oraz inne grafiki. Następnie jednym ruchem umieszczać je w treści maila.

Gdzie znajdziesz Designera?

Przechodząc do trzeciego kroku Kreatora Kampanii czyli Treści, lub z poziomu biblioteki szablonów, na podstawie których możesz tworzyć własne newslettery i mailingi.

Dostajesz bowiem do wyboru możliwość stworzenia od początku własnego szablonu we FreshMail Designerze, zbudowania go na podstawie wersji dostępnej w bibliotece szablonów lub skorzystania z szablonu z już wysłanej kampanii. Opcje te dostępne są po lewej stronie menu odpowiednio: Szablony FreshMaila, Zapisane, WysłaneWysłaneŁączna liczba wszystkich wiadomości wysłanych na pojedyncze adresy email w ramach danej kampanii. Ilość ta nie uwzględnia ponownego dosyłania maili, które nie mogły zostać wcześniej dostarczone. kampanie.

W bibliotece znajdziesz ponad 140 szablonów i z dnia na dzień ich liczba będzie rosła. Przeglądając je, możesz zainspirować się i podpatrzeć, jakie pomysły w życie wcielili znakomici projektanci, którzy tworzyli te szablony.

Klikając w wybrany przez siebie szablon przechodzisz do FreshMail Designera i tym samym rozpoczynasz przygodę z własnoręcznym tworzeniem mailingu.

2
Rozdział
Jak możliwości daje Designer?

Korzystając z możliwości FreshMail Designera, masz do dyspozycji zbudowanie szablonu za pomocą bloków, grafik i stylów. Możesz wybrać elementy jedno-, dwu- i trzy- kolumnowe. Konkretne bloki odpowiadają różnym typom treści, jakie znajdą się w szablonie. Możesz wybrać element tekstowy, obrazkowy lub przycisk. Znajdziesz tu także bloki łączące w sobie każdy z powyższych rodzajów.

Panel widoczny po lewej stronie Designera to menu, za pomocą którego możesz zarządzać szablonem, który tworzysz.

Dostępne są trzy zakładki: Bloki, Grafiki i Style.

Wszystkie powyższe sekcje zostaną szczegółowo opisane w kolejnych rozdziałach, teraz tylko sygnalizując należy powiedzieć, że:

  • Bloki - to sekcja z różnorodnymi klockami, z których składać możesz szablon marzeń
  • Grafiki - to biblioteka setek grafik, które możesz za darmo wykorzystywać podczas tworzenia, dodające je do zdjęć
  • Style - pozwala ustawiać style użyte w kreacji, a także zmieniać ustawienia m.in. szerokość wiadomości, a także np. rodzaj tła szablonu.

Jeśli nie będziesz bał się eksperymentować, zobaczysz jak łatwo możesz przenosić, dobierać i zmieniać kolejność poszczególnych bloków.

W kolejnych rozdziałach przeczytasz, czym charakteryzują się poszczególne bloki, jak je używać i jak edytować oraz jak z nich korzystać, aby wyciągnąć z nich maksimum możliwości.

3
Rozdział
Jak zbudować szablon?

W Twoje ręce oddajemy kilka rodzajów bloków, czyli klocków. Tekstowy, zdjęcia, przyciski, ikony social media, odstęp, wykończenia, linie dzielące oraz kombinacja różnych powyższych. Można je filtrować za pomocą górnych przycisków.

Dodatkowo możesz dowolnie zarządzać blokami Twojej wiadomości.

W każdym szablonie masz do wyboru style bloków. Klikając po nich zobaczysz, jak zmienia się ich kolorystyka. Style dobrane są do ogólnego zamysłu szablonu, tak aby kolory czcionki jak i tła pasowały do siebie w każdej z możliwych kombinacji.

Aby dodać, którykolwiek z bloków, wystarczy przeciągnąć metodą drag and drop dany element do szablonu po prawej stronie monitora, tak jakbyś budował go z klocków. Natomiast najeżdżając myszką na ikonę krzyżyka znajdującą się obok koła zębatego, możesz w łatwy sposób przesuwać bloki.

Dzięki temu jesteś w stanie dowolnie przebudować przygotowany przez nas szablon lub stworzyć go zupełnie od nowa. Możesz oczywiście również kasować pierwotne bloki - w tym celu najedź myszką na „koło zębate”, a następnie kliknij lewym przyciskiem myszy. Dzięki temu możesz w łatwy sposób usunąć jakiś blok lub zduplikować go. Możesz także nadać mu specjalne właściwości jak kolor tła, marginesy lub styl [w zależności od szablonu, który wybierzesz, masz do dyspozycji różne rodzaje styli, które wizualnie będą pasować do całego wyglądu maila].

Jeżeli natomiast brakuje Ci przestrzeni między blokami, możesz użyć specjalnych bloków, w których nie będziesz umieszczał żadnych informacji, a będą one jedynie miały za zadanie ładnie sformatować całą wiadomość.

Możesz także, przesuwając dolną ścianę poszczególnych bloków komórek danego elementu, samemu określić jego idealny rozmiar. Gdy już stworzysz idealny fragment maila, czyli dany blok - możesz w łatwy sposób powielić go.

Możesz zapisać w bibliotece szablonów swój spersonalizowany szablon, tak aby następnym razem nie było potrzeby tworzyć go na nowo, a jedynie edytować.

Pamiętaj, że dodając poszczególne bloki do wiadomości, powinieneś patrzeć na całość maila i dbać o to, aby wyglądał profesjonalnie. Zwróć uwagę, czy dodawany blok pasuje do pozostałych.

4
Rozdział
Bloki: tekstowy

Zdjęcie w mailingu odgrywa dużą rolę, jednak to tekst ostatecznie decyduje o tym, czy kreacja była przemyślana i dobrana do grupy docelowej. Nie bagatelizuj więc tej kwestii.

Style tekstowe

Każdy szablon ma przygotowane przynajmniej 2 style bloków tekstowych. Oznacza to, że będąc w sekcji bloków tekstowych, możesz wybierać także konkretne ich style. W danym stylu zawarty jest rozmiar czcionki, jej rodzaj i kolor. Każdy styl dopasowany jest do konkretnego szablonu, tak aby szablon łączył się wizualnie w jedną całość, bez konieczności manipulowania formatowaniem tekstu.

W łatwy sposób formatuj tekst używany w mailu

Jeśli jednak masz inną koncepcję w ramach któregoś ze stylów, masz do dyspozycji panel edycji tekstu. Narzędzia podstawowe zazwyczaj w zupełności wystarczą do tego, abyś osiągnął bardzo dobry efekt. Dzięki nim możesz w łatwy sposób zwiększać wielkość czcionki, jej wyrównanie czy styl nagłówka. Pamiętaj, że ludzie rzadko czytają całego maila. Zazwyczaj skanują tylko wiadomość, dlatego wyróżnij swój śródtytuł za pomocą odpowiedniego predefinowanego stylu nagłówka. Pamiętaj także, aby wyróżnić najważniejsze słowa w tekście za pomocą funkcji pogrubienie lub przez zmianę koloru czcionki - tak, aby odbiorcyOdbiorcaOsoba, która wyraźnie poprosi o dołączenie do listy odbiorców, np. przez wypełnienie formularza zapisu do newslettera i wyrazi zgodę na otrzymywanie wiadomości.   zwrócili uwagę na najważniejsze informacje. Dodatkowo możesz wyrównać tekst zarówno w poziomie jak i w pionie.

Dajemy Ci także możliwość zmiany marginesów wewnątrz bloków. Używając tej bardzo przydatnej funkcji, możesz zwiększyć odstęp np. tekstu od krawędzi bloku (o samej funkcji nieco później).

Edycja tekstu

Dodawaj linki

W narzędziach podstawowych możesz również podlinkować odpowiednie słowa. Wystarczy, że zaznaczysz tekst, a następnie wstawisz link. Może to być link do strony internetowej, adres email bądź link specjalny, taki jak podgląd maila w przeglądarce lub link rezygnacji.

Narzędzia zaawansowane

Narzędzia podstawowe w zupełności wystarczają, ale jak chcesz bardziej wpłynąć na wygląd szablonu, możesz rozwinąć opcje wypełnienia komórki.

Masz więc do dyspozycji:

  • zmianę krawędzi,
  • zmianę koloru tła,
  • zmianę koloru, typu i grubości ramki
  • zaokrąglenia jej rogów.

Możesz również użyć przycisku ze znakiem + z belki, którą widziałeś powyżej. Umożliwi Ci to m.in.:

  • wstawienie personalizacjiPersonalizacjaMetoda targetowania, dzięki której odbiorca wiadomości może mieć wrażenie, że jest kierowana tylko do niego. Obejmuje ona dodawanie nazwy odbiorcy w temacie lub treści maila lub innych danych z pól dodatkowych.,
  • linku systemowego,
  • social sharingu,
  • symbolu,
  • oraz załącznikówZałącznikTekst, wideo, grafika, plik PDF lub plik dźwiękowy, który dołączany jest do wiadomości           e-mail, ale nie jest zawarty bezpośrednio w niej. Dołączanie załączników nie jest dobrym sposobem - wielu dostawców usług internetowych, czy klientów pocztowych, nie pozwala na ich odczytywanie, ponieważ hakerzy wykorzystują je do dostarczania wirusów i innych złośliwych kodów.  .

Założenie jest takie, że w ustawieniach podstawowych nie możesz zepsuć layoutu i stylu szablonu - wszystko i tak powinno do siebie pasować. Dlatego jeśli nie masz zmysłu graficznego, nie powinieneś używać dodatkowych opcji. Choć może Ci się przydać zawarta tu opcja wstawiania tagów (personalizacja, link rezygnacji, etc).

5
Rozdział
Blok: zdjęcia

Teoria, że zdjęcie powie więcej niż 1000 słów jest słuszna, także w email marketingu. W dzisiejszych czasach ludzie skanują wiadomości, a nie czytają ich, dlatego tak ważne jest abyś skutecznie przyciągnął uwagę odbiorcyOdbiorcaOsoba, która wyraźnie poprosi o dołączenie do listy odbiorców, np. przez wypełnienie formularza zapisu do newslettera i wyrazi zgodę na otrzymywanie wiadomości.  . Zdjęcia są tu więc niezwykle pomocne, bo dzięki nim możesz nadać szablonowi oryginalny wygląd i niebanalną formę.

FreshMail Designer daje Ci wszystko, czego potrzebujesz, aby móc stworzyć obraz, który oczaruje Twoich odbiorców.

Jak dodać zdjęcie?

Aby dodać własne zdjęcie do bloku, klikasz na niego dwukrotnie. Teraz możesz w łatwy i intuicyjny sposób dostosować je do swoich potrzeb oraz szablonu, który masz.

Kliknij na dodany obrazek myszką, a pojawi się dodatkowe menu. Może w nim dopasować zdjęcie, przyciąć jego wielkość regulując obszar pola graficznego lub odpowiednio przesuwając.

Pasek edycji pozwala na [opisując od lewej strony], skalowanie zdjęcia, zmianę rozmiaru obrazka, nadanie oryginalnego rozmiaru, dopasowanie rozmiaru obrazka do szerokości komórki, wstawienie obrazka, wstawienie linku, usunięcie linku, zmianę koloru ramki, zmianę typu ramki, ustalenie grubości ramki, zaokrąglenie rogów zdjęcia, ustawienie marginesów obrazka lub usunięcie zdjęcia.

Zauważ, że każda ikona znajdująca się na pasku edycji ma swój opis, który pojawia się w górnej części paska. Nie musisz więc domyślać się czego dotyczy poszczególna funkcja. Czy potrzeba czegoś więcej? ;)

Pamiętaj o podlinkowaniu

Obrazki wykorzystane w mailu są bardzo często klikane przez odbiorców. Dlatego warto, abyś podlinkował każdą grafikę do strony docelowej, na którą dany news ma kierować. Dzięki temu zwiększasz skuteczności Twojego maila.

6
Rozdział
Blok: przyciski

Twój szablon zaczyna już wyglądać :)
Dodałeś już tekst i zdjęcia. Kolejny bardzo ważny element, o którym nie powinieneś zapomnieć podczas tworzenia szablonu wiadomości emailowej, to przycisk “call to actionCall to action"Wezwanie do działania", metoda wskazania potencjalnemu klientowi co powinien teraz wykonać na stronie internetowej, landing page. Najczęściej przyjmuje wygląd graficznego przycisku.”.

Podpowiedz gdzie kliknąć

Celem przycisków call to action jest zmotywowanie odbiorcyOdbiorcaOsoba, która wyraźnie poprosi o dołączenie do listy odbiorców, np. przez wypełnienie formularza zapisu do newslettera i wyrazi zgodę na otrzymywanie wiadomości.   do tego, aby kliknął w konkretnym miejscu, czego efektem jest przekierowanie go np. na stronę ze spersonalizowaną ofertą produktów w Twoim eSklepie.

Aby ułatwić dodawanie tego rodzaju przycisków we FreshMail Designerze, znajdziesz konkretne bloki przycisków w różnych wizualnych kombinacjach.

Ogromną zaletą używania bloków z przyciskami jest fakt, że zakodowane są one w taki sposób, aby przyciski były widoczna także w wersji maila przed pobraniem obrazków.

Jak edytować przyciski?

Klikając w konkretny przycisk na szablonie, pojawi się panel edycji, w którym dostępne są następujące narzędzia: zmiana rozmiaru przycisku, rodzaj, wielkość i kolor czcionki, pogrubienie oraz kursywa, podlinkowanie, zmiana koloru przycisku i tekstu wewnątrz niego, wyrównanie w pionie oraz w poziomie, kolor, typ oraz grubość ramki oraz jej zaokrąglenie.

Edycja grafik

Po ich wykorzystaniu warto sprawdzić, jak wyglądać będzie przycisk w wersji przed i po pobraniu obrazków.

Tak wyglądać będzie mail, zanim odbiorca pobierze obrazki.

Tak natomiast gdy już je pobierze.

krzyzżyk finał

Widać wiec wyraźnie, że bez względu na to, czy program pocztowy zablokuje pobieranie obrazków czy też nie, przyciski będą widoczne, a odbiorca będzie wiedział, gdzie kliknąć, aby dowiedzieć się więcej.

7
Rozdział
Blok: przyciski social media

Email marketing to tak na prawdę osobny sposób komunikacji z odbiorcami, ale można spokojnie łączyć go z innymi formami, np. social mediami.
Dlatego też FreshMail Designer daje możliwość łatwej integracji z mediami społecznościowymi.

W edytorze znajdziesz przygotowane specjalne przyciski kierujące do serwisów social mediowych typu Facebook, Twitter itp. Warto takie przyciski umieszczać w dolnej części wiadomości - dzięki temu nie rozpraszasz swoich odbiorców. Przyciski takie kierują na Twój firmowy profil w danym serwisie społecznościowym.

Przyciski mediów społecznościowych

Aby dodać konkretne przyciski, dodaj do szablonu blok zawierający ikony social media, a następnie kliknij w nie dwukrotnie. W kolejnym kroku zaznacz, które serwisy Cię interesują oraz podaj linki do Twoich profili firmowych w danym serwisie.

Możesz także określić styl przycisków, tak aby dobrze pasował do Twojego maila.

8
Rozdział
Ostatnie szlify szablonu

Dzięki temu, że tworzysz szablon od razu w wersji graficznej, a nie w kodzie HTMLFormat HTML + TXTWiadomość, która zawiera format HTML i TXT. Programy pocztowe, które nie będą mogły odtworzyć wiadomości w formacie HTML, wyświetlą ją w formacie TXT. Należy pamiętać, że wyświetlenie wiadomości w formacie TXT uniemożliwi zraportowanie jej w kontekście otwarć., od razu widzisz efekty swojej pracy. Możesz jednak pracować na wersji z tabelkami lub wersji ostatecznej. Udostępniamy Ci opcję, dzięki której możesz podglądnąć, jak mail będzie wyglądać w programie pocztowym. Klikając w przycisk “Layout” znajdujący się w prawym górnym rogu, możesz włączać i wyłączać “linie pomocnicze”. Funkcja ta pozwoli zarówno podglądać, jak szablon wyglądać będzie na skrzynce pocztowej, jak i na bieżąco pracować na nim.

ikony fm designer

Przy tworzeniu layoutu szablonu (przenoszeniu bloków) lepiej mieć włączone linie.

wlaczone linie

 

Natomiast przy edycji treści już niekoniecznie.

wylaczone linie

Manewrując między obiema wersjami, możesz z łatwością pracować tak, aby zarówno tworzyć, jak i widzieć efekty swojej pracy w wersji ostatecznej.

Przed samą wysyłką sprawdź również, jak Twoja kreacja będzie się prezentować na urządzeniach mobilnych. Wystarczy kliknąć ikonę podglądu (ikona przedstawiająca oko) nad polem edycji szablonu.

podglad wiadomosci

Jeśli chcesz, aby Twoja praca z FreshMail Designerem była maksymalnie efektywna, na pewno ucieszy Cię wiadomość o wprowadzeniu skrótów klawiszowych dostosowanych do rodzaju systemu operacyjnego, z którego korzystasz.

ikony

Wystarczy, że klikniesz ikonę klawiatury, żeby wyświetlić pełną listę dostępnych skrótów.

9
Rozdział
Dodawanie grafik

Stwórz swoją wersję zdjęcia

FreshMail Designer pozwala także na tworzenie własnych kompozycji z grafik. Powiedzmy, że dodałeś zdjęcie produktowe, ale chciałbyś nanieść na nie tekst. Wystarczy, że przeciągniesz z menu bocznego odpowiedni blok tekstowy i możesz zacząć edytować tekst.

Co więcej, możesz go w łatwy sposób formatować używając różnych czcionek, zmieniając ich wielkość czy styl, tak aby dobrze komponował się w całości wiadomości.

Edycja tekstu

FreshMail Designer pozwala na nanoszenie na zdjęcia, które dodałeś do szablonu, uprzednio przygotowanych przez nas elementów graficznych. Spośród setek grafik możesz znaleźć takie, które zwiększą atrakcyjność Twojego przekazu. Powiedzmy, że chcesz przygotować wyprzedaż danego produktu. Wystarczy, że przeciągniesz odpowiednią grafikę, a następnie pole tekstowe, w którym umieścisz wielkość rabatu.

Zrzut ekranu 2014-11-28 o 19.43.03

Bardzo ważne jest, abyś wszystkie elementy graficzne ładnie komponował. Wykorzystując klawisze kursorów na klawiaturze, możesz każdy element przesuwać o dokładnie jeden piksel. Jeżeli będziesz to robić trzymając klawisz shift element będzie przesuwał się o 10px przy każdym kliknięciu.

Każdy element możesz powiększać i obracać za pomocą dodatkowych suwaków. Możesz także ustawić przezroczystość danej grafiki.

Możesz również wstawić do szablonu swoją własną grafikę, którą będziesz mógł nanieść na wcześniej wgrany obrazek.

10
Rozdział
Zmiana stylów w szablonie

Edytor stylów, dostępny po kliknięciu w “Style” po lewej stronie u góry, pozwala kontrolować wygląd wszystkich bloków w bardzo łatwy sposób. Każdy blok ma przypisany jeden z wariantów stylu, które możesz wybierać podczas tworzenia bloku, lub klikając w “koło zębate” z opcjami każdego bloku. W tym miejscu będziesz mógł zmienić “globalnie” formatowanie dla danego wariantu.

Co mogę zmienić?

W każdym wariancie stylu dostępne do zmiany są:

Teksty i linki - po kliknięciu w przycisk edycji, możesz zmienić czcionkę każdego ze stylów formatowania tekstu, a także określić odstęp między wierszami i między literami. Możesz również określić wygląd linków i zmienić domyślny kolor tła bloków w edytowanym wariancie.

Dzięki edytorowi stylów możesz także zmienić rodzaj czcionki danego tekstu. Aby to zrobić wystarczy, że klikniesz w ołówek w konkretnym stylu, a następnie wybierzesz interesującą Cię czcionkę. Pamiętaj jednak, że zmiana ta jest obowiązująca dla danego stylu, w konkretnym wariancie, więc czcionki nie zmieniasz tylko w jednym bloku, a całościowo w konkretnym stylu.

Edytor styli

Przyciski - tu możesz edytować używane na przyciskach: czcionkę, kolor przycisku, zaokrąglanie rogów, ramkę oraz marginesy wewnętrzne.

Przyciski

Tło - o nim za chwilę.

Szerokość wiadomości i marginesy - możesz tu ustawić szerokość całej wiadomości oraz marginesy wewnętrzne i zewnętrzne bloków. Zalecana szerokość to 600px. Daje ona pewność, że u większości odbiorców Twój mailing wyświetli się perfekcyjnie. :) Daje Ci to też komfort zaprojektowania takiego szablonu, który będzie dedykowany urządzeniom, na których najczęściej pracują Twoi odbiorcyOdbiorcaOsoba, która wyraźnie poprosi o dołączenie do listy odbiorców, np. przez wypełnienie formularza zapisu do newslettera i wyrazi zgodę na otrzymywanie wiadomości.   np. komputery stacjonarne lub urządzenia mobilne.

Szerokość wiadomości

Linia oddzielająca - w tym miejscu możesz określić wygląd bloków specjalnych, w których występuje linia oddzielająca (zmienić jej grubość czy wyrównanie).

Linie oddzielające

 

11
Rozdział
Dodawanie tła do szablonu

Gdy już szablon wygląda tak jak chciałeś, możesz jeszcze dzięki FreshMail Designerowi wzbogacić go o tło.

Jak dodać tło szablonu?

Aby mailing oprócz tego, że jest kolorowy w środku, był też ozdobiony dookoła, wystarczy wejść w zakładkę “Style” > “Tło” i wybrać interesującą Cię “tapetę”.

Zmień tło

Rodzaje tapet

Można wyróżnić trzy rodzaje tła:

  • ze zdjęciem u góry - zdjęcie widoczne jest wtedy u góry wiadomości, a pozostała przestrzeń zabarwiona jest kolorem pasującym do niego.
  • z powielanym motywem - dany styl powiela się zarówno w pionie, jak i w poziomie dając efekt całościowego wypełnienia tła wiadomości.
  • ze strukturą w danym kolorze - wybierając najpierw strukturę a następnie dany jej kolor, możesz wybrać tło, które sprosta Twoim oczekiwaniom.

Z testów, które wykonaliśmy wynika jednak, że Outlook ma problemy z wyświetlaniem pierwszego rodzaju tła. To znaczy, ze zdjęcie widoczne u góry może się nie wyświetlić u odbiorców, którzy korzystać będą z programu pocztowego jakim jest Outlook.

12
Rozdział
ALTy czyli tekst pod obrazkiem

Większość programów pocztowych nie pobiera automatycznie grafiki w mailu. Dlatego, aby zwiększyć skuteczność Twojego, przekazu warto przygotować atrakcyjny tekst, który zobaczą odbiorcyOdbiorcaOsoba, która wyraźnie poprosi o dołączenie do listy odbiorców, np. przez wypełnienie formularza zapisu do newslettera i wyrazi zgodę na otrzymywanie wiadomości.   w momencie otworzenia maila - zanim pobiorą grafikę. To tak zwane teksty alternatywne, w skrócie ALTy.

Pobierz obrazki

Treść takiego przekazu powinna albo odwoływać się do oferty, jaką chcesz przedstawić, lub powinna w inny sposób zaintrygować odbiorcę, tak aby chciał pobrać obrazki.

Jak edytować ALTy?

Aby edytować ALTy wystarczy w prawym górnym rogu kliknąć w przycisk “obrazki”. Spowoduje to wygaszenie wszystkich zdjęć i zobaczysz wersję maila, którą dostanie odbiorca zanim “pobierze obrazki”.

Zapisz szablon

Teksty te można w łatwy sposób formatować, zarówno co do wielkości czcionki jak i jej stylu. Warto także pomyśleć nad tłem pola pod obrazkiem - aby bardzo wyraźnie przyciągało ono uwagę odbiorców.

13
Rozdział
Responsywność szablonu

Każdy szablon opuszczający edytor jest szablonem responsywnym. Oznacza to, że o tym jak dana wiadomość zostanie wyświetlona decyduje urządzenie, którego odbiorcaOdbiorcaOsoba, która wyraźnie poprosi o dołączenie do listy odbiorców, np. przez wypełnienie formularza zapisu do newslettera i wyrazi zgodę na otrzymywanie wiadomości.   użyje do jej odczytania. Technologia responsywności pozwala mieć pewność, że nasze mailingi poprawnie wyświetlą się w różnych rozdzielczościach ekranów komputerów i urządzeń mobilnych.

O tym trzeba wiedzieć tworząc responsywne mailingi

Aby osiągnąć satysfakcjonujące efekty, należy odpowiednio przygotować szablon oraz wziąć pod uwagę kilka wskazówek. Resposnywność polega przede wszystkim na zmianie układu mailingu na tryb jednokolumnowy dla mniejszych urządzeń - miej to na uwadze planując swoje kampanie. Oto lista innych rzeczy, o których powinieneś wiedzieć tworząc mailing:

Co to jest punkt przełamania?

To moment, w którym układ maila zmienia się w jednokolumnowy. Następuje to przy szerokości 480px. W przypadku większych i mniejszych szerokości mail skalowany jest proporcjonalnie.

responsywność1

Jak przełamuje się szablon?

Szablon zawsze łamie się obszarze poszczególnych bloków:

  • bloki jednokomórkowe -> po prostu się zwężają
  • bloki dwukomórkowe -> prawa komórka schodzi pod lewą komórkę

resp_desig_graficznie_02

  • blok trzykomórkowe -> środkowa komórka schodzi pod lewą a prawa pod środkową

resp_desig_graficznie_06 

Co dzieje się ze znikającą częścią?

Puste komórki pełniące funkcje marginesów wewnętrznych oraz zewnętrznych są ukrywane przy szerokości mniejszej niż 480px.

resp_desig_graficznie_10

Jak zachowują się treści?

Treści umieszczone w komórkach obok siebie zostaną po złamaniu przeniesione pod spód.

resp_desig_graficznie_14

Jak zachowują się grafiki?

Wszystkie zdjęcia dopasowują się do szerokości ekranu. Aby obrazki nie traciły na jakości:

  • obrazy o szerokości mniejszej niż 200px są wyśrodkowane,
  • obrazy o szerokości większej niż 200px są rozciągane do szerokości komórki.

resp_desig_graficznie_17

resp_desig_graficznie_20

Co dzieje się z obramowaniem oraz zaokrąglonymi rogami?

Designer dopasowuje parametry zaokrągleń w taki sposób, że nawet dwie połączone ramką komórki wyświetlają się poprawnie w widoku responsywnym.

resp_desig_graficznie_22

Co dzieje się z odstępami?

Mailing dopasowywany jest do całej szerokości ekranu, więc treści, którym nie zapewniono wewnętrznych marginesów, mogą pojawić się tuż przy krawędzi. Dlatego lepiej jest zastosować marginesy wewnętrzne. 

resp_desig_graficznie_25

resp_desig_graficznie_28

Responsywne szablony we FreshMail Designerze

Wszystkie szablony stworzone we FreshMail Designerze są responsywne. Używając tego narzędzia nie musisz się więc martwić, czy Twoja wiadomość dobrze wyświetli się na urządzeniu mobilnym.