Jak działa edytor wiadomości?

Edytor umożliwia projektowanie treści oraz wyglądu wiadomości e-mail, pop-upów, wiadomości e-mail z poziomu scenariuszy oraz bannerów rekomendacji. Uproszczoną wersję edytora znajdziesz też w Ustawieniach, w sekcji Zgody > Potwierdzenia.

Z pomocą edytora stworzysz te treści od podstaw lub wybierając z bogatej biblioteki szablonów. Możesz też dodać własny projekt za pomocą wbudowanego edytora kodu HTML i CSS.

Z uproszczonej wersji edytora skorzystasz przy tworzeniu wiadomości potwierdzających oraz wiadomości e-mail z poziomu scenariusza.

Interfejs edytora składa się z trzech części: górnego paska narzędzi, panelu ustawień treści i wyglądu wiadomości oraz przestrzeni roboczej.

Przestrzeń robocza

Przestrzeń robocza zajmuje większość ekranu. Tutaj na żywo tworzysz e-maile i pop-upy i szablony wiadomości dodając kolejne bloki treści, struktury i moduły metodą przeciągnij i upuść.

W przestrzeni roboczej możesz łączyć struktury, kontenery, bloki i moduły w tzw. paski. Każdy element możesz edytować bezpośrednio w przestrzeni roboczej oraz w panelu ustawień z lewej strony.

Jeśli chcesz usunąć, zapisać, przenieść lub zduplikować dany element, lub pasek, najedź na wybrany element lub pasek i kliknij ikonę trzech kropek. Pojawi się podręczne menu ze wspomnianymi funkcjami.

Górny pasek narzędzi

Nad przestrzenią roboczą i panelem edycji znajdują się opcje pomocne w korzystaniu z edytora.

Znajdziesz tam (opisane od lewej do prawej):

1. Przyciski Cofnij i Przywróć Możesz cofnąć do pierwszej wprowadzonej zmiany w tworzonej lub edytowanej wiadomości.
2. Przycisk Szablony – dostępny tylko dla wiadomości e-mail. Przycisk uruchamia okno z dostępnymi szablonami e-maili. Gdy klikniesz wybrany szablon, automatycznie pojawi się on w Twojej przestrzeni roboczej.
3. Przycisk Użyj ponownie – dostępny tylko dla wiadomości e-mail. Przycisk wywołuje okno z tabelą utworzonych wcześniej e-maili. Kliknij ikonę Wybierz w ostatniej kolumnie, żeby dodać e-maila do przestrzeni roboczej.
4. Przycisk Edytor kodu HTML uruchamia osobne okno edycji na dole przestrzeni roboczej. W edytorze bezpośrednio wprowadzisz zmiany w tworzonym e-mailu bądź wybranym szablonie. Okno edytora zamkniesz klikając ponownie w przycisk Edytor kodu.
5. Przycisk Załącznik – dostępny tylko dla wiadomości e-mail. Umożliwia dołączenie do e-maila np. pliku pdf z cennikiem, e-booka lub grafiki.
6. Przycisk Podgląd – dostępny tylko dla wiadomości e-mail. Uruchamia okno z podglądem wiadomości w dwóch widokach – desktop i mobile.
7. Przycisk Wiadomość testowa – dostępny tylko dla wiadomości e-mail. Kliknięcie otwiera okno z tabelą list do wysyłki wiadomości. Z tego poziomu stworzysz też nową listę adresów do wysyłki wiadomości testowej.

Panel ustawień treści i wyglądu wiadomości

Z lewej strony przestrzeni roboczej znajduje się panel ustawień wiadomości. Podzielony jest na dwie części: Wygląd oraz Treść.

Wygląd wiadomości

W menu Wygląd masz dostęp do następujących ustawień:

1. Ustawienia ogólne

W tej sekcji ustawisz szerokość wiadomości. Docelowo szerokość każdej wiadomości ustawiona jest na 600 px. Możesz ustawić dowolny zakres między 320 a 900 px.

Ustawisz też domyślne odstępy dla wszystkich nowych struktur dodanych do wiadomości e-mail z zakładki Treść lub podczas dodawania nowych Pasków.

Poniżej ustawisz podstawowy font dla całej wiadomości, wybierzesz ogólny kolor tła, ustawisz też domyślne odstępy między wierszami dla wszystkich elementów tekstowych wiadomości.

W przypadku ustawień kolorów wybierasz dowolną barwę z palety dostępnej pod kontrolką lub dodajesz wartość HEX (poprzedzoną #) koloru, którego chcesz użyć.

Inne dostępne ustawienia w tej sekcji to:

• Przestrzeń pod akapitem. Włączenie tej opcji automatycznie doda wolną przestrzeń między akapitami tekstu.
• Podkreślaj linki. Każdy link dodany do wiadomości zostanie podkreślony – w ten sposób będą lepiej widoczne i bardziej dostępne.
• Responsywny design. Opcja ta wspiera wyświetlanie wiadomości na urządzeniach mobilnych.  Pamiętaj jednak, że wyniki mogą być inne na różnych urządzeniach. Gdy opcja jest wyłączona, mobilna wersja wiadomości e-mail będzie wyglądać jak wersja na komputery stacjonarne.
• Kierunek tekstu RTL. Jeśli kontrolka jest aktywna, kierunek wszystkich tekstów wiadomości będzie automatycznie przechodził od prawej do lewej (Right To Left).
• Obrazek w tle. Jeśli chcesz umieścić grafikę w tle Twojej wiadomości, zrobisz to w tym miejscu aktywując kontrolkę.

2. Paski

Paski (inaczej wiersze) to grupy elementów – struktur, modułów i bloków o takim samym stylu lub funkcji. Style i funkcje pasków edytujesz w panelu głównym edytora. Pasek może składać się z dowolnej ilości elementów.

Żeby nadać paskowi funkcję np. nagłówka, treści, stopki lub obszaru informacyjnego, kliknij go
i przejdź do panelu ustawień.

Dla każdej z tych funkcji ustawisz Rozmiar tekstu, Kolor tła wiadomości i treści, Kolor fontu, Kolor linku i ustawisz Obrazek w tle.

Nowy pasek dodasz bezpośrednio w obszarze roboczym. Najedź na szare pole obok widocznego szablonu wiadomości – wyświetli się szara ramka z opisem Pasek. Kliknij ikonę + umieszczoną na dole ramki, po lewej stronie.

W taki sam sposób wywołasz pozostałe funkcje służące do zarządzania paskiem – znajdziesz je pod ikoną wielokropka, wyświetlaną na prawej krawędzi ramki. Z tego miejsca usuniesz, skopiujesz, przeniesiesz i zapiszesz pasek jako moduł.

3. Nagłówki

W sekcji Nagłówki ustawisz domyślny styl fontu, rozmiar, kolor, pogrubienie i kursywę dla nagłówków H1, H2, H3 użytych w treści wiadomości. Możesz również wybrać wielkość interlinii, czyli odstępy między nagłówkami znajdującymi się w jednym bloku tekstu.

4. Przycisk

W tej sekcji ustawisz część parametrów stosowanych domyślnie dla wszystkich przycisków wiadomości. Te parametry to Kolor przycisku, Kolor podświetlonego przycisku, Kolor fontu, Styl i rozmiar tekstu, parametry grubości i kursywy, a także ustawić Promień krawędzi (zaokrąglenia rogów), którego ustawienie domyślne to 30 px.

Ponadto w sekcji Krawędź ustawisz obramowanie przycisku i ich kolory. Możesz ustawić je indywidualnie dla każdej strony lub, jednakowe dla wszystkich boków przycisku.

Przydatną funkcją jest też ustawienie odstępu wewnętrznego, czyli odległości między krawędzią a tekstem umieszczonym w przycisku.

Obsługa przycisku Outlooka ulepsza wyświetlanie przycisków w Outlooku poprzez wstawienie specjalnego elementu kodu VML. 

5. Formatowanie mobilne

Tutaj możesz kontrolować, jak Twoje wiadomości będą prezentować się na urządzeniach mobilnych. Domyślnie stosujemy w edytorze ustawienia dla wiadomości wyświetlanych na komputerach stacjonarnych. W tej sekcji dostosujesz wszystkie wymiary do ekranów urządzeń przenośnych.

Ustawisz rozmiar tekstu nagłówka, tekstu w treści i w stopce, rozmiar tekstu obszaru informacji i elementów dla bloku Menu, a także ustawienia dla nagłówków H1, H2, H3. Dodatkowo ustawisz rozmiar tekstu w przyciskach, wymiary samych przycisków ich odstęp od krawędzi bloków.

Treść wiadomości

Do projektowania zawartości e-maila służy sekcja Treść w panelu edycji. Z jej poziomu dodasz do wiadomości struktury, bloki i moduły – główne elementy wiadomości. 

Aby stworzyć szkielet szablonu, musisz przeciągnąć do przestrzeni roboczej wybraną strukturę, z wybraną liczbą kontenerów, a następnie wypełnić ją blokami treści lub modułami.

Każdy ze wspomnianych elementów posiada własny zestaw ustawień, które wyświetlają się  po kliknięciu danego elementu w panelu po lewej stronie.

Poniższe trzy ustawienia są dostępne dla każdego elementu treści:

• Dodaj link – kotwicę – umożliwia wstawienie odnośnika do konkretnego tekstu w projektowanej wiadomości. Opcja ta nie działa: w aplikacji Gmail na iOS, Apple Mail na iOS, aplikacji Outlook na Androida, aplikacji Outlook na macOS i e-mailach AMP.
• Ukryj element – możesz wybrać, w jakich przypadkach obraz nie wyświetli się: gdy zostanie odczytany na komputerze lub na urządzeniu mobilnym. Zaznaczenie opcji Nie wyświetli obraz w obu przypadkach.

1. Struktury

Dostępne w tej sekcji struktury zawierają od 1 do 4 kontenerów. W kontenerach umieszczasz bloki treści. Kontenery wyróżnione są kolorem niebieskim. Po umieszczeniu struktury w obszarze roboczym możesz dodać do niej więcej kontenerów, maksymalnie 8.

Struktury możesz układać w dowolnej kolejności i łączyć je w paski (wiersze), którym na etapie edycji wyglądu e-maila nadajesz funkcje, np. nagłówek, tekst, stopka.

2. Bloki

Masz do dyspozycji 15 podstawowych bloków z treścią, w tym blok rekomendacji i koszyka, które wyświetlają spersonalizowane treści każdemu odbiorcy wiadomości, oraz blok HTML do osadzania niestandardowego kodu i elementów w treści wiadomości.

Jakie treści możesz dodać za pomocą bloków?

• Obraz – umożliwia dodanie obrazu z dysku lub poprzez link zewnętrzny. Możesz wstawiać obrazy w formatach PNG, JPG, GIF, o maksymalnej wielkości 2 MB.
• Tekst – umożliwia dodanie pola tekstowego do wiadomości. Tekst wprowadzisz ręcznie, wpisując go bezpośrednio w polu tekstowym lub wklejając wcześniej przygotowany akapit.
• Przycisk – umożliwia dodanie bloku graficzno-tekstowego, w roli przycisku.
• Odstęp – służy do oddzielania bloków z treścią. Stosuj je zamiast ‘enterów’ w bloku tekstowym dla lepszego wyglądu wiadomości.
• Wideo – ten blok służy do osadzania w treści wiadomości filmów dostępnych na innych platformach.
• Social – blok wyświetla domyślnie ikony czterech najpopularniejszych platform społecznościowych.
• Banner – umożliwia dodanie przygotowanej wcześniej grafiki reklamowej. Możesz dodać banner z dysku, w formatach PNG, JPG, GIF, o maksymalnej wielkości 2 GB. 
• Odmierzanie czasu – blok pozwala na umieszczenie licznika z datą i godziną.
• Menu – wyświetla poziomą listę złożoną z linków, grafik lub linków z grafikami. Możesz ich umieścić dowolną liczbę (nawet ponad 30). Rekomendujemy dodanie maksymalnie 4 pozycje dla zachowania czytelności treści i przepisowej szerokości wiadomości (600 px).
• HTML – blok umożliwia dodanie fragmentu bądź całej wiadomości w postaci kodu HTML i CSS. Blok uruchamia puste okno edytora tekstu, w którym umieszczasz kod. Upewnij się, że wprowadzony kod jest poprawny i spełnia wymagania dotyczące układu wiadomości.
• Rekomendacje – blok z treścią dynamiczną wyświetlającą użytkownikowi polecane produkty lub ofertę bazującą na jego historii zakupów w Twoim sklepie.
• Koszyk – blok z treścią dynamiczną wyświetlającą użytkownikowi zawartość porzuconego koszyka.
• Bloki AMP (karuzela, akordeon, formularz) – dostępne wkrótce – umożliwiają dodanie animacji.

3. Moduły

Moduły to wcześniej przygotowane i zapisane elementy wiadomości, np. struktura, pasek, kontener, które możesz wielokrotnie używać w wiadomościach. Używanie modułów znacznie skraca czas przygotowywania kolejnych wiadomości w edytorze. Utworzysz je ze struktur, bloków i pasków z poziomu przestrzeni roboczej.

Moduły sprawdzą się, jeśli często wykorzystujesz w swojej komunikacji powtarzające się elementy, takie jak logo, przyciski ze stałym call to action, treść stopki wiadomości lub charakterystyczny układ bloków i struktur, np. podczas promocji.