Dzięki Email Design Studio unikasz konieczności kodowania szablonów e-maili od zera. Wystarczy kilka kliknięć, aby zaprojektować piękny e-mail i cieszyć się wiadomościami, które wyglądają idealnie na każdym urządzeniu.
Dowiedz się, jak stworzyć e-maila w Email Design Studio >>
W Email Design Studio masz do wyboru szeroką paletę widżetów – elementów, które pozwalają zawrzeć różne rodzaje treści w szablonie e-maila, a tym samym łatwo przekazać wiadomość, którą chcesz dostarczyć odbiorcom. Po przeciągnięciu widżetu na szablon e-maila, kliknij na widżet, aby wyświetlić i skonfigurować jego ustawienia.
W tym artykule opisano wspólne ustawienia, które można skonfigurować dla większości widżetów dostępnych w Email Design Studio: rozmieszczenie, ustawienia wyświetlania, opcje edycji tekstu oraz linki.
Zobacz listę artykułów poświęconych poszczególnym widżetom Email Design Studio >>
Spis treści
1. Rozmieszczenie
W przypadku większości widżetów możesz określić rozmieszczenie w poziomie (wyrównanie) oraz odstępy.
Odstęp to odległość pomiędzy ramką widżetu a treścią zawartą w widżecie:
Możesz ustawić taki sam odstęp ze wszystkich stron bądź dopasować każdy odstęp z osobna.
PRZYKŁAD: Trzy różne opcje wyrównania (do lewej, środek, do prawej):
PRZYKŁAD: To samo wyrównanie (środek), różne odstępy (0, 25 oraz 50 pikseli od góry i od dołu):
2. Ustawienia wyświetlania
W ustawieniach każdego widżetu możesz określić, czy ma być wyświetlany na komputerach stacjonarnych i/lub urządzeniach mobilnych (tabletach i smartfonach).
WAŻNE: Jedyne wyjątki to linki opt-out oraz opt-in, których nie da się ukryć na żadnym urządzeniu i które muszą być dobrze widoczne.
W przypadku widżetu Obraz, jeżeli zaznaczysz opcję: Pokaż widżet na urządzeniach mobilnych, możesz skorzystać z możliwości skalowania obrazu w taki sposób, aby wypełnił całą szerokość kolumny:
Opcja ukrycia widżetu przydaje się zwłaszcza w przypadku elementów, które mogą zostać wyświetlone nieprawidłowo na małych ekranach tabletów i smartfonów. Opcja ta jest również przydatna, jeżeli chcesz dostosować układ responsywnej sekcji w taki sposób, aby wyglądała dobrze na urządzeniach mobilnych (np. z wykorzystaniem widżetu: Odstęp).
Domyślnie obie opcje dostępne w tej sekcji są zaznaczone. Dopasuj ustawienia do własnych potrzeb.
PRZYKŁAD: Jeżeli wprowadzisz następujące ustawienia:
widżet będzie wyświetlany na komputerach stacjonarnych, ale nie na smartfonach i tabletach.
3. Edycja i formatowanie tekstu
Niektóre widżety mogą zawierać tekst. Aby edytować tekst, kliknij na niego w wybranym miejscu.
W celu sformatowania tekstu skorzystaj z paska narzędzi, który pojawia się na górze ekranu:
Wybór dostępnych narzędzi może się różnić w zależności od widżetu, jednak zawsze znajdziesz tutaj najważniejsze opcje formatowania, które znasz z dowolnego innego edytora tekstu.
WAŻNE:
- Wiele klientów poczty elektronicznej oferuje bardzo ograniczone wsparcie dla customowych czcionek. Jeżeli zastosujesz styl spoza listy “bezpiecznych” czcionek, może ona zostać zastąpiona inną czcionką.
Zobacz listę bezpiecznych czcionek na portalu W3Schools >>
- Niektóre klienty poczty elektronicznej mogą ignorować ustawienia wysokości linii, przez co e-mail może nie być wyświetlany w pełni poprawnie. Może to stanowić problem zwłaszcza jeżeli używasz odstępów po akapicie w celu zapewnienia przejrzystości tekstu. Aby uniknąć tego rodzaju problemów, kontroluj odstępy między linijkami tekstu za pomocą innych technik (możesz np. dodać odstępy pomiędzy kilkoma widżetami: Tekst).
WSKAZÓWKA: Przed wysłaniem e-maila do właściwych odbiorców przeprowadź testy na różnych klientach poczty elektronicznej, aby upewnić się, że wiadomość jest wyświetlana poprawnie. Zwróć szczególną uwagę na Outlooka, jako że ten klient poczty jest wyjątkowo problematyczny.
WSKAZÓWKA: Możesz dodać emotikonę do dowolnego tekstu, wybierając odpowiednią opcję na górnym pasku narzędzi.
Zauważ, że są to emotikony systemowe, co oznacza, że będą one wyglądać różnie w zależności od systemu wykorzystywanego przez poszczególne urządzenia. Na przykład:
| Apple | LG | Microsoft | Samsung | |
 |  |  |  |  |
4. Linki (przekierowania)
Możesz dodać link do następujących widżetów:
- Tekst – zaznacz fragment tekstu i wybierz opcję Wstaw link na górnym pasku narzędzi,
- Obraz,
- Przycisk,
- Zawartość HTML – możesz zawrzeć linki w swoim niestandardowym kodzie,
- Ikona,
- Tabela – możesz dodać link zarówno do tekstu, jak i do obrazów umieszczonych w tabeli,
- Social Media – podaj odpowiednie adresy URL w ustawieniach widżetu, w sekcji Zawartość widżetu,
- Gwiazdki – możesz dodać jeden link dla całego widżetu (czyli wspólny link dla wszystkich gwiazdek),
- Tak/Nie – możesz dodać osobne linki dla każdego z przycisków: Tak i Nie,
- Ocena/NPS – możesz dodać taki sam link dla całego widżetu lub osobne linki dla poszczególnych przycisków,
- Zob. również WAŻNE na końcu artykułu.
Opcja dodania linku jest dostępna w ustawieniach poszczególnych widżetów:
Po kliknięciu na Dodaj link otworzy się nowe okno. Zacznij od wybrania rodzaju linku, jaki chcesz wstawić.
Do wyboru masz następujące opcje:
- Adres URL (strona WWW) – standardowy odnośnik do strony internetowej. Adres URL musi zawierać protokół (https://).
- Inny protokół – zaawansowana opcja, która pozwala ci użyć w linku dowolnego protokołu. Wiele klientów poczty elektronicznej nie wspiera tej opcji.
- Zadzwoń (tel:) – jeżeli odbiorca e-maila kliknie na taki link, w zależności od tego, z jakiego urządzenia korzysta, zobaczy ekran wyboru numeru telefonu lub prośbę o wybranie aplikacji, z której może zadzwonić.
- Wyślij SMS (sms:) – ta opcja działa jedynie na niektórych klientach poczty elektronicznej. Jeżeli odbiorca e-maila kliknie na taki link, zobaczy ekran wysyłki wiadomości tekstowych.
- Wyślij e-mail (mailto:) – po kliknięciu na taki link odbiorca e-maila zobaczy nowe okno z domyślnym klientem pocztowym (w zależności od indywidualnej konfiguracji systemu).
Po wybraniu typu linku, wprowadź odpowiednią wartość w polu poniżej, na przykład:
W przypadku niektórych typów linku możesz również zdefiniować dodatkowe ustawienia:
- W przypadku Adresu URL (strona WWW) możesz:
- dodać parametr utm_content,
- określić tagi, które zostaną przypisane do Kontaktu po kliknięciu na ten link w wiadomości e-mail. Pamiętaj, że tagi muszą się składać z co najmniej 3 znaków. Jako separatora używaj znaku “_” (a nie spacji), np. ZABAWKI_PIES.
- W przypadku Wyślij SMS (sms:), poza podaniem numeru telefonu możesz określić domyślną treść wiadomości.
- W przypadku Wyślij e-mail (mailto:), poza podaniem adresu e-mail, możesz określić domyślny temat wiadomości.
Kiedy twój link będzie w pełni skonfigurowany, kliknij Zapisz, aby dodać link do widżetu.
Aby dodać link do fragmentu tekstu, zaznacz go przy pomocy kursora myszy i wybierz opcję wstawiania linku na górnym pasku narzędzi:
Wybierz rodzaj linku z listy:
Wprowadź odpowiednią wartość w polu poniżej, a w razie potrzeby określ ustawienia dodatkowe. Następnie kliknij Zapisz, aby dodać link do widżetu.
WAŻNE:
- Następujące widżety: Link opt-in, Link opt-out oraz Podgląd WWW domyślnie zawierają odpowiedni link. Nie musisz konfigurować zawartych w nich odnośników w żaden sposób, możesz jednak zedytować i sformatować sam tekst. Możesz również określić, na jaką stronę zostanie przekierowany odbiorca po kliknięciu na twój link opt-in/opt-out.
- Jeżeli chcesz dodać do e-maila miniaturkę wideo, umieść link do YouTube w ustawieniach widżetu Wideo.
- Jeżeli chcesz użyć widżetu Social Media, koniecznie uzupełnij sekcję Zawartość widżetu adresami URL twoich profili w mediach społecznościowych.
Dobrym pomysłem jest dodanie gotowego widżetu Social Media do Biblioteki, dzięki czemu unikniesz powtarzania całej konfiguracji w przyszłości.
- Nie można dodać linku do widżetu: Personalizowany Baner. Wszelkie linki możesz skonfigurować w kreatorze Personalizowanych Banerów.
Więcej informacji znajdziesz w artykule poświęconym widżetowi: Personalizowany Baner >>
- Nie musisz dodawać linków do przycisków zawartych w Ramkach Produktowych (czy to Statycznych, czy to Dynamicznych). Linki do odpowiednich produktów zostaną automatycznie zaciągnięte z twojego Katalogu Produktowego / Feedu Produktowego XML.
