Poznaj edytor mailingów w Mailer Panel

Rozbudowany edytor mailingów w Mailer Panel pozwoli Ci na przygotowanie profesjonalnego szablonu, który możesz wykorzystać w komunikacji ze swoimi Klientami. Za jego pomocą możesz utworzyć od podstaw zupełnie nowy szablon wiadomości (Sprawdź: Tworzenie nowego szablonu wiadomości) lub też dokonać zmian w jednym z gotowych projektów (Sprawdź: Edycja istniejącego szablonu wiadomości).

Przejdź do interesującego Cię tematu:

• Budowa edytora mailingów
• Tworzenie szablonu wiadomości
• Jak ustawić nagłówki?
• Jak zredagować treść wiadomości?
• Jak wpisać tekst w wielu liniach?
• Jak podzielić tekst na akapity?
• Jak ustawić odrębne wyrównanie poszczególnych akapitów?
• Jak wyróżnić fragmenty tekstu (pogrubienie, pochylenie, podkreślenie)?
• Jak zmienić kolor czcionki pojedynczego wyrazu?
• Jak dodać klikalny link w treści?
• Jak dodać obrazek?
• Jak dodać przycisk?
• Jak umieścić w wiadomości kod HTML?
• Jak dodać możliwość wypisania się z subskrypcji mailingu?
• Jak dodać link wypisania w stopce wiadomości?
• Jak dodać treść szablonu w kilku kolumnach?

 

Budowa edytora mailingów

Edytor mailingów w Mailer Panel podzielony jest na cztery sekcje:

1. W lewym górnym rogu znajduje się menu (1) umożliwiające wybranie różnych opcji wyświetlania wprowadzanych treści. Domyślnym widokiem jest opcja Edytuj, dzięki której możliwe jest wizualne tworzenie szablonu. Kolejne opcje to: Podgląd (umożliwia zweryfikowanie jak przygotowywany szablon będzie wyglądał), Wynik HTML (podgląd kodu HTML szablonu) oraz Wynik JSON (podgląd kodu JAVA).
2. Poniżej, po lewej stronie, znajduje się pole (2) umożliwiające tworzenie i wyświetlanie treści szablonu. Zawartość szablonu dodawać można za pomocą różnego typu bloków, zróżnicowanych w zależności od ich przeznaczenia.
3. W prawym górnym rogu dostępne jest menu (3) umożliwiające pobranie przygotowywane szablonu (opcja Pobierz plik JSON) oraz zaimportowanie kodu szablonu (opcja Importuj JSON). Możesz tu także zmienić widok wyświetlania treści przygotowywanego szablonu, aby sprawdzić jak będzie on wyglądał na komputerze lub urządzeniu mobilnym. Ostatni przycisk umożliwia schowanie lub przywrócenie paska narzędziowego znajdującego się poniżej.
4. Poniżej, po prawej stronie, dostępny jest pasek narzędziowy (4) zawierający właściwości globalne szablonu oraz właściwości poszczególnego rodzaju bloków. Umożliwiający wykonanie globalnych zmian w wyglądzie szablonu, np. zmianę koloru tła czy tekstu. Umożliwia on także wykonywanie zmian w poszczególnych dodawanych blokach, np. zmianę treści tekstu, koloru i kroju czcionki, wyrównania tekstu itp.

 

Tworzenie szablonu wiadomości

Treść szablonu w edytorze tworzona jest za pomocą bloków. Bloki mogą zawierać tekst, obrazy, przyciski lub inny rodzaj treści. Dodanie nowego bloku możliwe jest po kliknięciu niebieskiej ikonki ze znaczkiem + (1). Wyświetlone zostanie menu (2), z którego należy wybrać odpowiedni typ bloku. Na początku zalecane jest dodanie dwóch podstawowych bloków, tzn. Nagłówek oraz Tekst.

Aby edytować treść i wygląd bloku, kliknij na nim (1). Zostanie on zaznaczony ramką.

Po lewej stronie zostaną wyświetlone dodatkowe przyciski (2) umożliwiające zmianę kolejności na stronie edytowanego bloku lub jego usunięcie.

Po prawej stronie, w pasku narzędziowym, wyświetlone zostaną właściwości edytowanego bloku (3).

W zależności od typu wybranego bloku, jego właściwości będą zawierały różne pola i opcje do skonfigurowania.

 

Jak ustawić nagłówki?

Nagłówki wiadomości spełniają istotną dla odbiorcy. Atrakcyjny tytuł przyciąga uwagę, a wyróżniki zamieszczone w treści maila pomogą podzielić go na logiczne segmenty i umożliwią odbiorcy szybkie przejrzenie mailingu i odnalezienie najważniejszych informacji.

Tworzenie wiadomości zacznij od dodania bloku nagłówka. Umieść w nim tytuł wiadomości, wpisując go w polu Treść (1).

Zdefiniuj poziom (2), czyli wielkość, nagłówka. W przypadku tytułu, najlepiej stosować poziom H1. Jeśli w dalszej części wiadomości dodasz inne jej sekcje lub części tematyczne, możesz dodać kolejne bloki nagłówka, stosując, w zależności od potrzeb, poziom H2 lub H3.

Ustaw kolor (3) tekstu i tła, a także wybierz rodzaj i krój czcionki (4).

Wyrównaj tekst w poziomie (5), a w razie konieczności, zdefiniuj marginesy (6) wewnątrz bloku i ustaw odstępy (7) pomiędzy wierszami tekstu.

 

Jak zredagować treść wiadomości?

Treść jest najistotniejszym elementem mailingu. Możesz w niej zwrócić się do Klienta, przedstawić swoją ofertę, opisać nowe produkty lub usługi. Treść wiadomości zależy wyłącznie od Twojej pomysłowości.

Do zamieszczania treści w wiadomości służy przede wszystkim blok typu Tekst.

W polu Treść (1) wpisz tekst wiadomości.

Włączenie funkcji Znacznik Markdown (2) umożliwia redagowanie tekstu poprzez zastosowanie poleceń Markdown czy też języka HTML. Więcej informacji na ten temat znajdziesz w dalszej części artykułu.

Dalsze opcje edytora pozwalają ustawić kolor (3) tekstu i tła, a także wybrać rodzaj, rozmiar i krój czcionki (4).

Możesz również wyrównać tekst w poziomie (5), a w razie konieczności, zdefiniować marginesy (6) wewnątrz bloku i ustawić odstępy (7) pomiędzy wierszami tekstu.

 

Jak wpisać tekst w wielu liniach?

Standardowo, tekst wpisywany w treści bloku tekstowego wyświetlany jest jako całość, bez podziału na wiersze czy akapity. Włączenie funkcji Znacznik Markdown (1), we właściwościach bloku tekstowego, pozwala na wyświetlenie tekstu w osobnych wierszach. Wystarczy, że w treści wpisywanego tekstu (2), w miejscu, w którym chcesz, aby tekst został przeniesiony do nowego wiersza, klikniesz na klawiaturze klawisz Enter. Dzięki temu, możesz redagować treść wiadomości zupełnie jak w edytorze tekstu np. Word.

 

Jak podzielić tekst na akapity?

Każdy blok tekstu można zamieścić w osobnym akapicie, aby poprawić czytelność mailingu. Dzięki włączonej funkcji Znacznik Markdown (1), w treści bloku tekstowego możesz posługiwać się znacznikami języka HTML. W treści wiadomości (2) oddziel poszczególne jej fragmenty za pomocą znacznika:

Na przykład: jeśli chcesz, aby w osobnym akapicie znalazł się tekst „Mamy przyjemność poinformować Cię, że przygotowaliśmy ofertę specjalną dla naszych stałych Klientów.”, w treści bloku wpisz:

Ostępy pomiędzy poszczególnymi wierszami i akapitami tekstu możesz ustawić za pomocą opcji Interlinia, znajdującej się na samym dole paska narzędziowego edytora.

 

Jak ustawić odrębne wyrównanie poszczególnych akapitów?

Jeśli w ramach jednego bloku tekstowego zamieszczasz kilka akapitów tekstu, ustawienie wyrównania za pomocą opcji dostępnej w narzędziach edytora zadziała globalnie dla wszystkich akapitów. Jeśli jednak chcesz, aby każdy z akapitów wyrównany był w inny sposób, możesz osiągnąć to dzięki funkcji Znacznik Markdown.

W ramach użytego wcześniej znacznika <p> możesz dopisać polecenie, które pozwoli Ci na odrębne wyrównanie poszczególnych akapitów tekstu. Konstrukcja polecenia będzie następująca:

Przy powyższej składni polecenia, akapit zostanie wyśrodkowany. Jeśli chcesz wyrównać tekst w inny sposób, w miejsce center wpisz:

• left – jeśli tekst ma być wyrównany do lewej (1),
• right – jeśli tekst ma być wyrównany do prawej (2),
• justify – jeśli tekst ma zostać wyjustowany, czyli wyrównany od obu marginesów.

Polecenie wpisz w miejsce początkowego znacznika <p>, dla każdego akapitu osobno. Jeśli chcesz, aby wyrównanie któregoś z akapitów ustawiane było przy pomocy opcji w narzędziach edytora, pozostaw znacznik <p> bez zmiany.

Efekt wyrównania akapitów sprawdzisz na podglądzie szablonu (3).

 

Jak wyróżnić fragmenty tekstu (pogrubienie, pochylenie, podkreślenie)?

Warto jest zwrócić uwagę odbiorców wiadomości na najważniejsze jej fragmenty, poprzez ich wyróżnienie. Podstawowe narzędzia dostępne w edytorze pozwalają jedynie na globalną zmianę koloru czy grubości czcionki w całym tekście. Włączając funkcję Znacznik Markdown możesz jednak dostosować wyróżnienia do własnych potrzeb, dzięki użyciu poleceń Markdown lub języka HTML.

Za pomocą poleceń Markdown, wpisywanych w polu treści wiadomości (1), możesz ustawić pogrubienie lub pochylenie tekstu. Możesz je jednak stosować wyłącznie wtedy, gdy wyróżniany fragment nie znajduje się pomiędzy znacznikami HTML <p> </p>.

Pogrubienie tekstu możesz wykonać wpisując przed i po wyróżnianym fragmencie dwie gwiazdki:

Pochylenie tekstu osiągniesz, wpisując przed i po wyróżnianym fragmencie jedną gwiazdkę:

Możesz także jednocześnie pogrubić i pochylić tekst, wpisując trzy gwiazdki:

Na podglądzie szablonu zobaczysz efekt wprowadzanych poleceń (2).

Dzięki poleceniom języka HTML, oprócz pogrubienia czy pochylenia tekstu, możesz go również np. podkreślić. Polecenia te możesz stosować, zarówno gdy wyróżniany fragment znajduje się pomiędzy znacznikami <p> </p>, jak i gdy nie został nimi objęty.

Aby pogrubić tekst, przed i po wyróżnianym fragmencie dodaj znaczniki b lub strong:

Możesz stosować zamiennie znaczniki b lub strong, jednak pamiętaj, że jeśli przed wyróżnianym fragmentem użyjesz znacznika b, po wyróżnieniu również musisz wpisać b. Analogicznie, jeśli chcesz użyć znacznika strong, musisz go umieścić i przed i po wyróżnieniu.

Jeśli chcesz pochylić tekst, przed i po wyróżnianym fragmencie dodaj znaczniki i lub em:

Podobnie, jak w przypadku znaczników pogrubienia tekstu, znaczników pochylenia i oraz em możesz używać zamiennie. Pamiętaj jednak, aby przed i po wyróżnianym fragmencie wpisać ten sam znacznik.

W celu podkreślenia fragmentu tekstu, przed nim i po nim dodaj znacznik u:

 

Polecenia HTML wpisuj w polu treści (1) wiadomości. Ich efekt zobaczysz na podglądzie szablonu (2).

Wyróżniając fragmenty tekstu zachowaj umiar. Zaznaczenie kluczowych informacji przyciągnie wzrok, jednak użycie zbyt wielu wyróżnień może pogorszyć czytelność wiadomości.

 

Jak zmienić kolor czcionki pojedynczego wyrazu?

Opcja narzędzi edytora pozwala na ustawienie koloru czcionki dla całego tekstu zamieszczonego wewnątrz danego bloku. Jeśli jednak chcesz, aby część tekstu, lub nawet jeden wyraz, wyświetlane były w innym kolorze, niż pozostały tekst, możesz osiągnąć to dzięki włączeniu Znacznika Markdown.

Kolor fragmentu możesz zmienić, zamieszczając przed i po wyróżnianym fragmencie, polecenie HTML dotyczące stylu. Co istotne, polecenie to możesz stosować, zarówno gdy wyróżniany fragment znajduje się pomiędzy znacznikami <p> </p>, jak i gdy nie został nimi objęty. Powinno ono mieć konstrukcję:

Przy powyższej składni polecenia, kolor zmienianego fragmentu tekstu zostanie zmieniony na czerwony. W miejsce nazwy koloru red, wpisz angielski odpowiednik koloru, jaki chcesz aby tekst miał po zmianie. Zamiast nazwy koloru, możesz wpisać także jego parametr w zapisie szesnastkowym, np.:

Przy takim zapisie, kolor tekstu zostanie zmieniony na zielony.

Polecenie HTML wpisuj w polu treści (1) wiadomości. Jego efekt zobaczysz na podglądzie szablonu (2).

 

Jak dodać klikalny link w treści?

Korzystając ze Znacznika Markdown możesz umieścić klikalny link w treści swojej wiadomości. Wystarczy, że wpiszesz pełny adres URL (łącznie z https:// lub http://) swojej strony w polu treści (1). Mechanizm automatycznie przekształci wpisany adres URL w klikalny link.

Link możesz wywołać również przy pomocy polecenia HTML (2). Składnia takiego polecenia powinna być następująca:

W miejscu adresu https://www.nazwa.pl wpisz pełny adres URL swojej strony, do której ma przejść odbiorca mailingu. W miejscu Oferta specjalna! wpisz opis linku, który będzie widoczny w wiadomości. Może to być powtórzony adres URL Twojej strony lub alternatywny, wybrany przez Ciebie opis. Pamiętaj jednak, aby ten opis nie był zbyt długi.

Podlinkowany adres swojej strony zobaczysz na podglądzie szablonu (3).

 

Jak dodać obrazek?

Aby dodać obrazek, jako typ bloku wybierz Obraz. Wczytane zostanie domyślne zdjęcie. Możesz je zastąpić, klikając we właściwościach bloku po prawej stronie przycisk Dodaj obraz (1). Wyświetlone zostanie okno umożliwiające wybranie z dysku pliku graficznego.

Po jego załadowaniu, możesz wpisać tekst alternatywny (2), jaki wyświetlany będzie po najechaniu kursorem na obrazek.

Jeśli chcesz, aby po kliknięciu w obrazek otwarta została strona, np. kierująca do Twojego produktu, w polu Docelowy adres URL obrazu (3) wpisz pełny adres URL, do którego obrazek ma odsyłać.

Poniżej możesz także określić rozmiary obrazka (4) w pikselach, ustawić jego wyrównanie pionowe (5) wewnątrz bloku, wybrać kolor tła (6), ustawić wyrównanie poziome (7) obrazka oraz zdefiniować marginesy wewnątrz bloku (8).

 

Jak dodać przycisk?

Jeśli w swoim mailingu chcesz dodać przycisk, jako typ dodawanego bloku wybierz Przycisk.

We właściwościach bloku po prawej stronie możesz zmienić wyświetlany na przycisk tekst (1), a także podać Adres URL (2), na jaki Twój Klient będzie przekierowywany po kliknięciu przycisku.

Kolejna sekcja ustawień pozwoli Ci wybrać szerokość przycisku (3), jego rozmiar (4) oraz styl (5). Jeśli wybierzesz pełną szerokość przycisku, będzie on wyświetlany na całą szerokość strony. Wybranie automatycznej szerokości pozwoli na jej dostosowanie do długości wpisanego tekstu.

Niżej możesz ustawić kolory (6) tekstu wpisanego w przycisk, samego przycisku oraz tła bloku, w którym przycisk się znajduje.

Następna sekcja (7) umożliwi wybranie rodzaju, rozmiaru i kroju czcionki tekstu znajdującego się na przycisku.

Niżej możesz ustawić wyrównanie (8) przycisku w poziomie oraz zdefiniować marginesy (9) wewnątrz bloku. Jeśli na przycisku wpiszesz dłuższy opis, możesz zdefiniować odstępy pomiędzy wierszami tekstu (10).

 

Jak umieścić w wiadomości kod HTML?

Jeśli w treści szablonu chcesz dodać swój kod HTML, jako typ dodawanego bloku wybierz HTML.

We właściwościach bloku po prawej stronie, w polu Treść (1) wpisz lub wklej swój kod HTML.

Poniżej możesz wybrać kolor (2) tekstu i tła, a także zdefiniować ustawienia dotyczące czcionki (3), tzn. jej rodzaj i rozmiar.

Niżej możesz ustawić wyrównanie (4) tekstu w poziomie oraz zdefiniować marginesy (5) wewnątrz bloku. Możesz również ustawić odstępy (6) pomiędzy liniami tekstu i akapitami.

Wewnątrz tego bloku możesz używać poleceń języka HTML, dowolnie dostosowując swój tekst.

 

Jak dodać możliwość wypisania się z subskrypcji mailingu?

Jeśli chcesz umożliwić Twoimi klientom wypisanie się z grupy odbiorców Twojego mailingu, możesz wykonać to za pomocą dedykowanego bloku. Dodając blok, jako jego typ wybierz Link unsubscribe. Blok taki najlepiej jest dodać na samym dole wiadomości, jako jej stopkę, lub tuż ponad nią.

We właściwościach bloku po prawej stronie, wpisz treść (1) rezygnacji widoczną na tworzonym szablonie.

Poniżej wybierz kolory (2) tekstu, przycisku i tła.

Następnie zdefiniuj ustawienia czcionki (3), tzn. jej rodzaj, rozmiar i krój, a także wybierz wyrównanie (4) tekstu w poziomie.

W razie konieczności, ustaw marginesy (5) wewnątrz bloku oraz odstępy (6) pomiędzy liniami tekstu.

Po kliknięciu w tak zdefiniowany Link unsubscribe odbiorca wejdzie na specjalną stronę, na której będzie mógł ostatecznie potwierdzić swoją decyzję. W zależności od wybranej przez Ciebie opcji Ustawień Link unsubscribe adres e-mail odbiorcy zostanie usunięty z grupy odbiorców, do której wysłany został mailing, lub zostanie usunięty ze wszystkich grup odbiorców, w których był dodany i dodatkowo znajdzie się na czarnej liście.

 

Jak dodać link wypisania w stopce wiadomości?

Jeżeli posiadasz dodaną w bloku tekstowym treść stopki informacyjnej swojego mailingu i chcesz w niej zawrzeć link wypisania się z subskrypcji wiadomości, włącz funkcję Znacznik Markdown (1), a następnie, w treści stopki (2), w miejscu, w którym znajduje się wpis [kliknij tutaj], zamieść poniższy wpis:

Informację kliknij tutaj możesz zmienić na dowolne, wybrane przez siebie określenie.

Na podglądzie szablonu zobaczysz, że wpis kliknij tutaj zamienił się w link. Po jego kliknięciu, Twój klient wejdzie na specjalną stronę, na której będzie mógł ostatecznie potwierdzić swoją decyzję. W zależności od wybranej przez Ciebie opcji Ustawień Link unsubscribe jego adres e-mail zostanie usunięty z grupy odbiorców, do której wysłany został mailing, lub zostanie usunięty ze wszystkich grup odbiorców, w których był dodany i dodatkowo znajdzie się na czarnej liście.

 

Jak dodać treść szablonu w kilku kolumnach?

Jeśli chcesz, aby treść Twojego szablonu wyświetlana była w kilku kolumnach, jako typ dodawanego bloku wybierz Kolumny.

We właściwościach bloku po prawej stronie wybierz liczbę kolumn (1), ich szerokość (2), a także odstęp między poszczególnymi kolumnami (3).

Niżej wybierz wyrównanie kolumn w pionie (4), kolor tła (5) oraz zdefiniuj marginesy (6) wewnątrz bloku.

Wewnątrz bloku pojawią się przyciski + (7) umożliwiające wybranie typów poszczególnych bloków wewnętrznych.

Treść i właściwości poszczególnych bloków wewnętrznych możesz edytować identycznie jak bloków głównych, po kliknięciu na nie.