Drag & drop Email Designer


Projektowanie emaili nigdy nie było prostsze. W nowym, usprawnionym kreatorze wiadomości możesz w kilka minut stworzyć profesjonalny, responsywny szablon email.

 

Przejdź do EMAIL MARKETING => WYŚLIJ EMAIL => DODAJ NOWY => UŻYJ NOWEGO KREATORA


Główne kroki:

  1. Wybór układu i szablonu
  2. Dodawanie widgetów
  3. Podgląd i zakończenie pracy.

1. Wybór układu i szablonu

Na początku wybierz ogólny format wiadomości. W kolejnym kroku dowiesz się jak dodać do szablonu elementy graficzne (tzw. widgety).

[1] Ustawienia wiadomości – kliknij ikonę ołówka, żeby zmienić ustawienia związane z tym, jak wiadomość wyświetla się w skrzynce odbiorcy – nazwę, temat, konto, preheader i szerokość szablonu (więcej informacji pod 1.1 Ustawienia wiadomości – szczegóły). Możesz zmienić te ustawienia teraz albo później, podczas ustawiania widgetów.

[2] Układ elementów – wybierz ogólny format szablonu. Układ wpływa na to, jak elementy szablonu są ułożone względem siebie.

[3] Szablon – jeśli nie chcesz samodzielnie projektować wiadomości od podstaw, możesz wybrać jeden z gotowy szablonów.

[4] Wróć do listy – kliknij, żeby zamknąć kreator i wrócić do listy emaili.

[5] Przejdź do edycji – po wybraniu układu lub szablonu, kliknij ten przycisk, żeby przejść do dodawania elementów graficznych.

Ustawienia wiadomości – szczegóły

[1] Nazwa wiadomości – pod tą nazwą wiadomość zostanie zapisana w systemie.

[2] Temat wiadomości – do tematu możesz dodać proste ikony (przycisk po prawej).

[3] Grupa – w celu przyspieszenia procesu wysyłki możesz wybrać z rozwijanej listy grupę adresatów lub przyciskając + utwórz nową.

[4] Konto wysyłkowe – wybierz konto, z którego zostanie wysłana ta wiadomość. Kliknij [ + ], żeby stworzyć nowe konto specjalnie na potrzebę tej wysyłki (więcej informacji na temat tworzenia konta wysyłkowego).

[5] Szerokość wiadomości – przesuń suwak, żeby dostosować szerokość szablonu wiadomości. Jest to ważne ustawienie w stosunku do widgetu Grupa obrazków. Maksymalnie możesz ustawić szerokość wiadomości na 700 pikseli.

Przykład: Jeśli ustawisz szerokość wiadomości na 700 pikseli, w takim przypadku, aby szablon wiadomości się skalował łączna szerokość obrazków nie może przekraczać 700 pikseli szerokości.

[6] Kolor okna i tła wiadomości – kliknij pole wyboru koloru, żeby zmienić kolor danego elementu. Okno wiadomości to obszar, na którym znajdują się wszystkie elementy szablonu – tekst, obrazy itp. Tło to obszar znajdujący się z samego tyłu, za oknem wiadomości.

[7] Preheader – każda wiadomość na liście emaili w skrzynce odbiorczej ma widoczny Temat wiadomości oraz linijkę tekstu zaraz po temacie – tzw. preheader. Jest to pierwsza rzecz, którą odbiorca zobaczy po przeczytaniu tematu wiadomości.preheader

[8] Nazwa kampanii (do monitorowania w Google Analytics)  odznacz jeśli chcesz, by ten mailing znalazł się w Twoim Google Analytics.

Jeśli zostawisz to pole puste, miejsce preheadera zajmie pierwsza linijka tekstu w szablonie wiadomości. Z tego powodu najlepiej ustawić własny preheader i mieć nad nim kontrolę.

WSKAZÓWKA: Temat i preheader współdzielą miejsce na pasku w skrzynce odbiorczej. Na przykład, jeśli napiszesz krótszy temat, na pasku zmieści się dłuższy preheader.


2. Dodawanie widgetów do szablonów

Możesz dodać widgety do szablonu w dowolnej kolejności. Po dodaniu widgetu najedź na niego kursorem, żeby otworzyć menu kontekstowe, przesunąć element albo dodać kolejną kolumnę.

Menu jest podzielone na trzy zakładki.

[1] Widgety – żeby dodać element do szablonu, kliknij wybrany widget i przeciągnij go na pole edycji po lewej.

  • Tekst – blok tekstu,
  • Obrazek – grafika z galerii,
  • Przycisk – interaktywny przycisk, może być podlinkowany,
  • Obrazek+Tekst – połączenie 2 elementów w jednym bloku,
  • Obrazek+Tekst (wiersz) – połączenie 2 elementów w wierszu,
  • Obrazek+Tekst + Przycisk – połączenie 3 elementów w jednym bloku,
  • Social media – przyciski umożliwiające bezpośrednią subskrypcję profilów firmy w mediach społecznościowych (dostępne są linki typu „Follow us” i „Share this”),
  • Seperator – pozioma linia oddzielająca,
  • Link opt-out – link umożliwiający odbiorcy wypisanie się z otrzymywania kolejnych wiadomości od tego nadawcy (obowiązkowy element),
  • Podgląd – link umożliwiający odbiorcy wyświetlenie tej wiadomości w osobnym oknie przeglądarki (na przykład, jeśli odbiorca używa skrzynki odbiorczej, która nie obsługuje obrazów)
  • Grupa obrazków – eksperymentalny widget przeznaczony do tworzenia responsywnych mozaik z wcześniej pociętych grafik,
  • Ramka produktowa – widget dzięki któremu w prosty sposób możesz zamieścić w wiadomości produkty z Twojego sklepu. Dzięki możliwości wyboru typu rekomendacji możesz dodać produkty z porzuconego koszyka albo ostatnio oglądane produkty przez użytkownika, widget umożliwia zawieranie wybranych informacji o produkcie (standardowo wyświetlają się: nazwa, kategoria, cena lub opis). Jeżeli posiadasz w pliku XML wszelkie niestandardowe informacje, w zakładce Pola produktowe przeciągnij te elementy z informacjami, które chcesz dodatkowo zawrzeć przy produkcie. Dodatkowo, możesz samodzielnie ustalić ilość produktów w elemencie oraz w wierszu, a także dostosowywać wygląd ramki według Twoich preferencji.

  • Ramka produktowa (wiersz) –  widget dzięki któremu możesz w wierszu w prosty sposób zamieścić w wiadomości produkty z Twojego sklepu. Dzięki możliwości wyboru typu rekomendacji możesz dodać produkty z porzuconego koszyka albo ostatnio oglądane produkty przez użytkownika, widget umożliwia zawieranie wybranych informacji o produkcie (standardowo wyświetlają się: nazwa, kategoria, cena lub opis). Jeżeli posiadasz w pliku XML wszelkie niestandardowe informacje, w zakładce Pola produktowe przeciągnij te elementy z informacjami, które chcesz dodatkowo zawrzeć przy produkcie. Dodatkowo, możesz samodzielnie ustalić ilość produktów w elemencie, a także dostosowywać wygląd ramki według Twoich preferencji.

[2] Twoje widgety – w tej zakładce możesz tworzyć i zapisywać własne kombinacje widgetów. Jeżeli zawsze używasz np. takiej samej stopki, możesz ją zapisać w tej zakładce i dodawać ją w szybki sposób do kolejnych struktur, które będziesz tworzyć w kreatorze.

[3] Ustawienia – ustawienia wyświetlania wiadomości (dokładny opis powyżej).

Widget Obraz + Tekst

Ten zaawansowany widget pozwoli Ci dodać dwa podstawowe widgety w jednym.

Menu kontekstowe – pojawia się po najechaniu kursorem na element.

  • Pierwszy przycisk (ołówek) otwiera ustawienia elementu (już otwarte na zrzucie ekranu powyżej).
  • Drugi przycisk (dwie kartki) powiela element.
  • Trzeci przycisk (kosz na śmieci) usuwa element z szablonu.
  • Czwarty przycisk (na prawej krawędzi elementu) [ + ], ktory dodaje nową kolumnę do elementu.

[1] Marginesy – w tym miejscu możesz dostosować marginesy widgetu. Domyślnie elementy są dociśnięte do krawędzi pola, w którym się znajdują. Przesuń suwak, żeby dostosować poziomy i pionowy margines treści od krawędzi elementu. Dodatkowo w tej sekcji możesz zmienić Kolor tła widgetu. Aby to zrobić należy nacisnąć ikonę, a gdy pojawi się paleta kolorów, należy odhaczyć okienko przezroczysty.

[2] Układ – wybierz jeden z dwóch możliwych układów pól w widgecie.

[3] Obraz – w tym miejscu możesz załadować obrazek oraz dostosować dodatkowe ustawienia obrazu.

[4] Pole tekstowe – w tym miejscu możesz wprowadzić dowolną ilość edytowalnego tekstu.

 – ten przycisk umożliwia powielenie tego samego widgetu, który pojawi się obok oryginalnego w tym samym wierszu.

Wybierz obraz

[1] Zmień – w tym miejscu możesz załadować obrazek z domyślnej galerii lub wgrać swój własny.

[2] URL obrazka – obraz może być podlinkowany do dowolnego adresu URL, na przykład zdjęcie produktu może zawierać link do strony tego produktu.

[3] Alternatywny tekst obrazka – inaczej atrybut alt, czyli tekst zastępczy obrazu, który pojawi się w jego miejscu, jeśli obraz nie wyświetli się poprawnie u odbiorcy.

Ustawienia pola tekstowego

W polu tekstowym możesz wprowadzać dowolną ilość tekstu. Zmiany, które dokonujesz, możesz śledzić na bieżąco po lewej stronie ekranu na podglądzie widżetu. Określ typ oraz rozmiar czcionki, a także zmieniaj jej kolory, kolor tła, pogrubienie, kursywę, podkreślenie, czy przekreślenie. Ustawiaj również wyrównanie, punktory. Opcjonalnie możesz zamieszczać linki w tekście, włącznie z linkiem wypisującym.

Widget Grupa Obrazów

Ten zaawansowany widget pozwoli Ci połączyć obrazy różnych rozmiarów w spójną całość. Treści graficzne na stronie będą wyświetlały się responsywnie lub będą się skalować, w zależności od Twoich preferencji. Układaj je w złożone mozaiki, a każdy element podlinkuj do wybranej przez Ciebie strony internetowej. Powielaj je, przesuwaj w wybrane miejsce na ekranie,  i dostosowuj manualnie ich rozmiary (szerokość i wysokość).

[1] Wybierz z galerii – wybierz z domyślnej galerii obraz lub załaduj swój własny.

[2] Zmień – klikając ten przycisk zostaniesz przekierowany do domyślnej galerii, gdzie będziesz mógł wybrać obraz.

[3] Kosz – klikając ten przycisk usuniesz obraz.

[4] URL obrazka – obraz może być podlinkowany do dowolnego adresu URL, na przykład zdjęcie produtu może zawierać link do strony tego produktu.

[5] Alternatywny tekst obrazka – inaczej atrybut alt, czyli tekst zastępczy obrazu, który pojawi się w jego miejscu, jeśli obraz nie wyświetli się poprawnie u odbiorcy.

[1] Dodaj kolumnę – ten przycisk umożliwi Ci dodanie dodatkowej kolumny, która dopasuje się do rozmiaru najwyższego obrazka w kolumnie, w przypadku kiedy obrazki w wiadomości będą skalowane. Jednak w przypadku zachowania się obrazków responsywnie na stronie, wówczas obrazek dostosowuje

do każdej kolumny dostosowuje się obrazek

[2] Dopasuj wysokość  kliknij jeżeli chcesz dopasować wysokość szablonu wiadomości do wysokości grupy obrazków.

 

 – dodaj nowe, mniejsze pole z obrazkiem wewnątrz pola obrazka.

 – dodaj nowe główne pole, w którym załadujesz obrazek. Dzięki temu przyciskowi obrazki dodane w tym polu będą skalowane, to znaczy, że nie będą przemieszczać się na dół, gdy będzie ograniczone pole wyświetlania (np. w przypadku, gdy użytkownik wyświetli wiadomość na smartfonie).

 – dostosowuj szerokość lub wysokość obrazka.


3. Podgląd i zakończenie pracy

Kiedy skończysz pracę nad swoim projektem, kliknij Podgląd na górnym pasku, żeby zobaczyć swoją wiadomość na różnych typach ekranów.

 

[1] – wybierz jedną z trzech opcji wyświetlania wiadomości: dla ekranu komputera, tabletu oraz smartphona.

[2] Powrót do edycji – wróć do trybu edycji, by skorygować wiadomość lub jeśli wszystko jest w porządku.

Jeśli wszystko wygląda OK, kliknij Zapisz i zakończ, który znajdziesz na górnym pasku.

aby otrzymywać
newsletter

Śledź nas