Ustawienia edytora e-maili Stripo typu „przeciągnij i upuść”

Opublikowano: 22 października 2024 · Ostatnia aktualizacja: 12 września 2026 · Autor: Marcus Biel

Po prawej stronie edytora e-maili Maildroppa znajdziesz panel ustawień wiadomości, który pozwala porządkować treść i dostosowywać wygląd e-maila. Panel jest podzielony na dwie karty: Content (treść) i Appearance (wygląd).

Karta Content

Na karcie Content projektujesz i porządkujesz treść wiadomości e-mail. Znajdziesz tu dwie główne sekcje: Structures (struktury) i Blocks (bloki).

1. Struktury

Struktury określają układ wiadomości e-mail, dzieląc treść na wiersze i kolumny. Możesz wybierać spośród gotowych układów, takich jak:

• Jedna kolumna
• Dwie kolumny
• Wiele kolumn

Nie musisz ograniczać się do gotowych opcji — możesz łączyć wiele bloków, aby stworzyć dowolny układ i w pełni dopasować go do swojego projektu.

• Przeciąganie i upuszczanie: Przeciągnij strukturę z tej sekcji do obszaru projektowania wiadomości i zacznij dodawać treść.
• Dostosowywanie: Po dodaniu struktury możesz wypełnić ją różnymi blokami treści, np. obrazami, tekstem lub przyciskami.

2. Bloki

Bloki to elementy treści, które umieszczasz w strukturach, aby zbudować wiadomość e-mail.

Dostępne typy bloków:

• Image (obraz): Przesyłaj obrazy w formatach PNG, JPG i GIF oraz dostosowuj ich wygląd.
• Text (tekst): Dodawaj i formatuj tekst, aby przekazać odbiorcom swoją wiadomość.
• Button (przycisk): Dodawaj klikalne przyciski i dostosowuj ich tekst, linki oraz style.
• Spacer (odstęp): Wstawiaj pustą przestrzeń, aby regulować odstępy między innymi blokami.
• Video (wideo): Osadzaj filmy z platform takich jak YouTube czy Vimeo.
• HTML: Dodawaj własny kod HTML i CSS, aby w bardziej zaawansowany sposób dostosować treść wiadomości.

Każdy blok możesz swobodnie dostosować, aby stworzyć wiadomość spójną z wyglądem i charakterem marki.

Szczegółowe omówienie bloków treści

Blok obrazu

Blok Image w edytorze e-maili Stripo typu „przeciągnij i upuść” pozwala dodawać obrazy do kampanii e-mailowej i je dostosowywać.

Dodawanie bloku obrazu

Blok obrazu możesz dodać do wiadomości na dwa sposoby:

Opcja 1

Najedź kursorem na obszar „Drop Content Here” w strukturze, a następnie kliknij ikonę obrazu. Wybrana struktura od razu zmieni się w blok obrazu.

Opcja 2

Przejdź do sekcji Blocks na karcie Content. Przeciągnij blok Image do wybranej struktury w układzie wiadomości. Ta metoda pozwala dokładniej określić miejsce umieszczenia obrazu.

Przesyłanie obrazu

Po dodaniu bloku obrazu możesz przesłać obraz na dwa sposoby:

Przeciągnij i upuść

Przeciągnij plik obrazu (PNG, JPG lub GIF) z komputera bezpośrednio do pola przesyłania widocznego w bloku obrazu.

Prześlij z komputera

Możesz też kliknąć ikonę chmury w bloku obrazu, aby otworzyć okno wyboru pliku i wybrać obraz z komputera (do 2 MB). Wybrany obraz pojawi się zarówno w bloku, jak i na karcie Content po prawej stronie.

Zmiana obrazu

Aby zastąpić obraz, użyj opcji Change Image na karcie Content. Kliknij okrągłą ikonę Change Image, aby przesłać nowy obraz lub wskazać obraz pod zewnętrznym adresem URL.

Edycja obrazu

Po przesłaniu obrazu możesz wprowadzić dodatkowe zmiany bezpośrednio na platformie. Wbudowany edytor obrazów Stripo pozwala poprawiać i modyfikować obrazy bez wychodzenia z edytora e-maili.

Otwieranie edytora obrazów

1. Po przesłaniu obrazu kliknij przycisk Edit Image, aby otworzyć edytor obrazów.
2. Na górnym pasku menu znajdziesz szeroki wybór narzędzi do edycji.

Dostępne narzędzia do edycji obrazu

• Filters (filtry) Jednym kliknięciem zastosuj wybrany filtr, np.:

  • Grayscale — skala szarości
  • Black & White — czerń i biel
  • Sharpen — wyostrzenie
  • Invert — odwrócenie kolorów
  • Sepia — sepia
  • Brightness — jasność
  • Color — kolor

• Resize (zmiana rozmiaru) Dostosuj wymiary obrazu. Możesz:

  • Określić szerokość i wysokość.
  • Zachować proporcje obrazu.

• Crop (przycinanie) Wybierz fragment obrazu, który chcesz zachować, i usuń niepotrzebne części.

• Transform (przekształcanie) Obracaj obraz lub odbijaj go:

  • W poziomie
  • W pionie

• Draw (rysowanie) Dodawaj na obrazie odręczne elementy, np. linie lub własne kształty.

• Text (tekst) Dodaj tekst bezpośrednio do obrazu. Dostosuj:

  • Czcionkę
  • Rozmiar
  • Kolor
  • Wyrównanie

• Shapes and Stickers (kształty i naklejki) Uatrakcyjnij obraz, nakładając na niego:

  • Gotowe kształty
  • Zabawne naklejki

• Frames (ramki) Wybierz jedną z dostępnych ramek, aby dodać obrazowi stylowe obramowanie.

• Corners (rogi) Dostosuj wygląd rogów, aby dopracować obraz.

• Background (tło) Usuń lub zastąp tło obrazu, aby uzyskać bardziej przejrzysty efekt.

Zapisywanie zmian

Po wprowadzeniu zmian kliknij przycisk Save w lewym górnym rogu edytora. Edytowany obraz automatycznie zastąpi oryginał w układzie wiadomości.

Ustawienia obrazu

Po przesłaniu obrazu możesz go dostosować za pomocą ustawień na karcie Content po prawej stronie.

Link

Dodaj link do obrazu. Możesz wybrać różne typy linków, takie jak:

• Website — strona internetowa (HTTP, HTTPS)
• Mail — wiadomość e-mail (mailto:)
• File — plik (ftp)
• Social Sharing — udostępnianie w mediach społecznościowych (Facebook, X — dawniej Twitter, LinkedIn, Pinterest)

Opcje te znajdziesz na liście rozwijanej w ustawieniach linku.

Tekst alternatywny

W polu Alternate Text dodaj tekst, który pojawi się, jeśli obraz się nie załaduje. Tekst alternatywny poprawia też dostępność: pozwala czytnikom ekranu opisać obraz odbiorcom z niepełnosprawnością wzroku.

Wyrównanie

W ustawieniu Alignment wybierz wyrównanie obrazu w kontenerze: Left (do lewej), Center (do środka) lub Right (do prawej).

Rozmiar

Dostosuj ręcznie szerokość i wysokość obrazu za pomocą przycisków plus/minus lub wpisz wybrane wymiary.

Możesz też włączyć opcję „Adjust to Width”, aby obraz automatycznie dopasowywał się do pełnej szerokości kontenera.

Obraz responsywny

Włącz opcję „Responsive Image”, aby obraz dopasowywał się do różnych rozmiarów ekranu, zwłaszcza na urządzeniach mobilnych.

Margines wewnętrzny

Ustawienie Padding pozwala dostosować odstęp między obrazem a otaczającą go treścią. Możesz ustawić jednakowy margines wewnętrzny ze wszystkich stron lub osobną wartość dla każdej z nich: Top (góra), Bottom (dół), Left (lewa) i Right (prawa).

Linki do kotwic

Możesz przypisać do obrazu link do kotwicy, aby po kliknięciu odbiorca przechodził do określonej sekcji tej samej wiadomości. Pamiętaj jednak, że takie linki mogą nie działać w niektórych programach pocztowych, np. Gmailu i Apple Mail.

Blok tekstu

Dostosuj wygląd i działanie bloków tekstu za pomocą poniższych ustawień. Każda opcja pozwala precyzyjnie określić sposób wyświetlania tekstu i dopasować go do projektu wiadomości.

Pasek narzędzi tekstu

Gdy klikniesz w blok tekstu, nad obszarem treści pojawi się pasek narzędzi tekstu. Zapewnia on szybki dostęp do najczęściej używanych opcji formatowania. Znajdziesz na nim następujące funkcje:

1. Format akapitu

W ustawieniu Paragraph Format wybierz styl akapitu: Normal dla zwykłego tekstu lub jeden z poziomów nagłówków, od Heading 1 do Heading 6, aby nadać treści przejrzystą hierarchię. Ułatwi to czytanie i uporządkuje wiadomość.

2. Krój czcionki

Domyślną czcionką jest Arial, ale możesz wybrać spośród wielu innych, w tym popularnych krojów, takich jak Georgia, Helvetica i Courier New. Wyszukiwarka pozwala szybko znaleźć konkretną czcionkę.

3. Rozmiar czcionki

Ustaw rozmiar czcionki od 8 pt do 72 pt. Domyślna wartość to 14 pt — sprawdza się w większości tekstów głównych wiadomości e-mail. Wybierz rozmiar z listy rozwijanej.

4. Formatowanie tekstu

Sformatuj tekst za pomocą następujących opcji:

• Bold (B): Pogrubia tekst, aby go wyróżnić.
• Italic (I): Nadaje tekstowi kursywę, zmieniając jego wygląd.
• Underline (U): Podkreśla tekst — to formatowanie często stosowane przy hiperłączach.
• Strikethrough (S): Przekreśla tekst, co przydaje się do oznaczania zmian lub usuniętych treści.

5. Zaawansowane formatowanie tekstu (menu z trzema kropkami)

Kliknij trzy kropki na pasku narzędzi, aby wyświetlić dodatkowe opcje:

• Subscript: Indeks dolny — umieszcza tekst poniżej linii bazowej, np. w przypisach lub wzorach chemicznych.
• Superscript: Indeks górny — umieszcza tekst powyżej linii bazowej, np. w wykładnikach potęg lub oznaczeniach liczebników porządkowych.
• Remove Formatting: Usuwa zastosowane formatowanie i przywraca domyślny styl tekstu.

6. Kolor tekstu i tła

• Text Color: Kliknij ten przycisk, aby wybrać kolor tekstu z palety lub dokładnie go określić, wpisując kod szesnastkowy.
• Background Color: Wybierz kolor tła, którym chcesz wyróżnić tekst.

7. Wyrównanie tekstu

Wybierz wyrównanie tekstu w bloku:

• Align Left: Wyrównuje tekst do lewej.
• Center: Wyśrodkowuje tekst.
• Align Right: Wyrównuje tekst do prawej.
• Justify: Justuje tekst, równomiernie rozkładając go na szerokości bloku.

8. Listy

Twórz listy uporządkowane (numerowane) i nieuporządkowane (punktowane):

• Insert/Remove Bulleted List: Dodaje lub usuwa wypunktowanie.
• Insert/Remove Numbered List: Dodaje lub usuwa numerację listy.

9. Zawijanie wierszy

Włącz lub wyłącz zawijanie wierszy w bloku tekstu. Gdy ta opcja jest włączona, tekst z długich wierszy automatycznie przechodzi do kolejnego wiersza.

10. Wcięcie

Dostosuj wcięcie tekstu:
- **Increase Indent**: Odsuwa tekst od marginesu, co przydaje się przy podpunktach lub cytatach.
- **Decrease Indent**: Zmniejsza wcięcie, przybliżając tekst do lewego marginesu.
![Wcięcie tekstu](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Wstawianie hiperłącza

Sprawdź, jak dodawać i edytować hiperłącza w treści wiadomości oraz nimi zarządzać.

Dodawanie lub edycja linku krok po kroku

a) Zaznacz tekst

Zaznacz tekst, który chcesz zamienić w hiperłącze.

b) Kliknij ikonę linku

Na pasku narzędzi tekstu kliknij ikonę linku.

c) Edytuj link w panelu ustawień

W panelu ustawień po prawej stronie pojawią się opcje linku:

• Pole linku: Wpisz adres URL lub wybierz jedną z gotowych opcji.
• Tag: Dodaj tagi, aby oznaczać subskrybentów lub uruchamiać automatyzacje.

Poprawianie linków po wysłaniu kampanii

Wyobraź sobie: kampania trafia do 2365 subskrybentów, a potem okazuje się, że jeden z linków nie działa przez zwykłą literówkę. Taki błąd może przekreślić sprzedaż w Black Friday.

Na szczęście w Maildroppa możesz poprawić niedziałające linki — nawet gdy wiadomość została już wysłana do subskrybentów.

a) Otwórz podgląd kampanii

Znajdź wysłaną kampanię na liście, kliknij trzy kropki i wybierz View Campaign.

b) Zmień linki lub tagi

Przewiń do listy linków w szczegółach kampanii, aby:

• Zaktualizować adresy docelowe linków: Popraw nieprawidłowe adresy URL.
• Zarządzać tagami: Dodaj lub usuń tagi używane w automatyzacjach.

Uwaga: Aby zmieniać adresy docelowe linków, w ustawieniach kampanii musi być włączona opcja Click Tracking (śledzenie kliknięć).

Dostosowywanie wyglądu linku

W panelu ustawień po prawej stronie możesz dostosować wygląd linku:

• Link Color: Wybierz kolor lub wpisz kod szesnastkowy.

• Underline Links: Włącz lub wyłącz podkreślenie linków, aby uzyskać bardziej przejrzysty wygląd.

12. Tagi personalizacji

Używaj tagów personalizacji, aby dodawać dynamiczną treść, np. imię odbiorcy lub wartości innych pól niestandardowych.

• Otwórz listę rozwijaną Personalization Tags na pasku narzędzi. Wybierz standardowe pole, np. First Name (imię), Email (adres e-mail) lub Country (kraj), albo zdefiniuj własne pola, aby dostosować wiadomość do każdego odbiorcy.

13. Emoji

Dodaj emoji, aby wizualnie urozmaicić tekst.

• Kliknij ikonę emoji na pasku narzędzi, aby otworzyć listę podzieloną na kategorie i łatwo znaleźć odpowiedni symbol.
• Uwaga dotycząca zgodności: Testuj wiadomości w programach pocztowych, takich jak Outlook — niektóre z nich mogą nie wyświetlać emoji prawidłowo.

14. Tabela i znaki specjalne

Kliknij trzy kropki na końcu paska narzędzi, aby wyświetlić bardziej zaawansowane opcje.

Wstawianie tabeli

Twórz i dostosowuj tabele, aby urozmaicić układ wiadomości.

• Określ liczbę wierszy i kolumn, odstępy między komórkami, margines wewnętrzny oraz grubość obramowania.

Wstawianie znaków specjalnych

Dodawaj do tekstu symbole, litery ze znakami diakrytycznymi i inne niestandardowe znaki.

• Otwórz opcję Special Characters, aby przejrzeć szeroki wybór znaków.

Dodatkowe ustawienia bloku tekstu (prawy panel)

W prawym panelu możesz szczegółowo dostosować wygląd i działanie bloków tekstu. Dostępne są następujące ustawienia:

1. Kolor tekstu

W ustawieniu Text Color wybierz kolor tekstu za pomocą selektora kolorów lub wpisz kod szesnastkowy.

2. Kolor tła

W ustawieniu Background Color wybierz kolor tła bloku tekstu. Domyślnie tło jest przezroczyste.

3. Ustawienia linków

Jeśli blok tekstu zawiera linki, w ustawieniach pojawiają się dodatkowe opcje:

• Link Color: Dostosuj kolor linków za pomocą selektora kolorów lub kodu szesnastkowego.

• Underline Links: Włącz lub wyłącz podkreślenie linków w bloku tekstu.

• Edycja linku: Zaznacz link w obszarze treści, aby zmienić jego adres URL w panelu ustawień. Możesz też przypisać lub zaktualizować tagi linku za pomocą listy rozwijanej „Tags”.

4. Wyrównanie

W ustawieniu Alignment wybierz wyrównanie bloku tekstu w kontenerze: Left (do lewej), Center (do środka) lub Right (do prawej).

5. Stała wysokość

Włącz opcję Fixed Height, aby nadać blokowi tekstu stałą wysokość. Możesz też określić wyrównanie tekstu w pionie: Top (do góry), Middle (do środka) lub Bottom (do dołu).

6. Interlinia

W ustawieniu Line Spacing określ odstęp między wierszami tekstu. Wybierz Tight (mały), Normal (standardowy) lub Wide (duży).

7. Margines wewnętrzny

W ustawieniu Padding dostosuj przestrzeń wokół bloku tekstu. Ustaw jednakowy margines wewnętrzny lub osobne wartości dla każdej strony: Top (góra), Bottom (dół), Left (lewa) i Right (prawa).

8. Linki do kotwic

Twórz linki do kotwic, aby umożliwić czytelnikom przechodzenie do konkretnych sekcji wiadomości. Pamiętaj, że niektóre programy pocztowe nie obsługują takich linków.

Blok przycisku

Blok Button pozwala dodać do wiadomości klikalny przycisk oraz dostosować jego działanie i wygląd.

Ustawienia linku

Opcja Link określa, co się stanie, gdy odbiorca kliknie przycisk.

Dostępne typy linków

• Normal Site Link (HTTP lub HTTPS): Przenosi użytkownika na stronę internetową.
• Mail Link: Otwiera program pocztowy użytkownika, aby umożliwić napisanie nowej wiadomości e-mail.
• File Link (FTP, FTPS): Prowadzi do pliku na serwerze FTP.
• Skype: Rozpoczyna połączenie lub czat w Skypie.
• Telephone (tel): Rozpoczyna połączenie telefoniczne na urządzeniach obsługujących tę funkcję.
• SMS: Otwiera aplikację do wiadomości z uzupełnionym numerem odbiorcy.
• Viber: Otwiera aplikację Viber, aby wysłać wiadomość lub nawiązać połączenie.
• Another Protocol Type: Pozwala wskazać własny protokół, którego nie ma na liście.

Opcje udostępniania w mediach społecznościowych

Możesz też skonfigurować przycisk do udostępniania treści w mediach społecznościowych lub przez e-mail:

• Facebook
• X (dawniej Twitter)
• LinkedIn
• Pinterest
• Email Sharing — udostępnianie przez e-mail

Pole adresu URL

Obok typu linku znajduje się pole adresu URL. Wpisz w nim adres odpowiedni dla wybranego typu linku — zwykle zaczynający się od https://.

Etykieta przycisku

Dostosuj tekst przycisku do wezwania do działania. Domyślna etykieta to „Button”, ale możesz ją zmienić np. na „Dowiedz się więcej”, „Zapisz się teraz” lub „Kup teraz”.

Styl tekstu

Ustawienia Text Style pozwalają dostosować wygląd tekstu na przycisku.

Wybór czcionki

Możesz wybrać jedną z wielu standardowych czcionek, w tym:

• Arial
• Comic Sans MS
• Courier New
• Georgia
• Helvetica
• Lucida Sans Unicode
• Tahoma
• Times New Roman
• Trebuchet MS
• Verdana

Dostępne są też czcionki niestandardowe:

• Arvo
• Lato
• Lora
• Merriweather
• Merriweather Sans
• Noticia Text
• Open Sans
• Playfair Display
• Roboto
• Source Sans Pro

U góry listy czcionek znajduje się pole wyszukiwania, które pozwala szybko znaleźć wybrany krój.

Rozmiar i formatowanie czcionki

• Font Size: Wybierz rozmiar od 8 do 72, zależnie od tego, jak bardzo chcesz wyróżnić tekst przycisku.
• Formatowanie tekstu: Zastosuj Bold (pogrubienie) lub Italic (kursywę), klikając ikonę „B” lub „I”, aby wyróżnić tekst przycisku.

Ustawienia kolorów

Dostosuj wygląd przycisku, zmieniając jego kolory.

1. Button Color: Zmień kolor tła przycisku. Domyślnie jest zielony (#31cb4b). Wybierz nowy kolor za pomocą selektora kolorów lub wpisz kod szesnastkowy.

2. Text Color: Określ kolor tekstu na przycisku. Domyślnie jest biały (#ffffff). Wybierz kolor dobrze kontrastujący z tłem przycisku, aby tekst był czytelny.

3. Background Color: Dostosuj tło kontenera przycisku. Domyślnie jest przezroczyste, ale możesz je zmienić, aby przycisk wyróżniał się na tle wiadomości.

Zaokrąglenie rogów

Ustawienie Border Radius pozwala określić stopień zaokrąglenia rogów przycisku.

• Wartość domyślna: 30 (umiarkowanie zaokrąglone rogi).
• Zakres: Od 0 (prostokątne rogi) do 100 (przycisk w kształcie kapsułki).

Uwaga: Aby zaokrąglone rogi wyświetlały się prawidłowo w programie Microsoft Outlook, włącz opcję „Support of Outlook” na karcie Appearance.

Wyrównanie

W ustawieniu Alignment określ położenie przycisku w obszarze treści.

• Opcje: Left (do lewej), Center (do środka), Right (do prawej).
• Typowe zastosowanie: Wyśrodkowanie pomaga wyróżnić przycisk, a wyrównanie do lewej lub prawej pozwala zachować spójność układu.

Stała wysokość

Włącz opcję Fixed Height, aby zachować jednakowe wymiary przycisku.

1. Domyślnie: Opcja jest wyłączona.
2. Minimalna wysokość: 44 piksele.
3. Wyrównanie zawartości w pionie: Po włączeniu stałej wysokości możesz precyzyjnie ustawić zawartość przycisku, wybierając Top (do góry), Middle (do środka) lub Bottom (do dołu).

Przycisk z ikoną

Opcja Button with Icon pozwala umieścić ikonę obok tekstu przycisku, aby uatrakcyjnić jego wygląd i wzmocnić wezwanie do działania. Jest domyślnie wyłączona.

• Obsługiwane formaty: Przesyłaj ikony w formatach PNG, JPG lub GIF, o maksymalnym rozmiarze pliku 2 MB.
• Położenie ikony: Wybierz Left lub Right, aby umieścić ikonę po lewej lub prawej stronie tekstu przycisku.

Uwaga: Ikony nie są wyświetlane w niektórych wersjach programu Microsoft Outlook dla systemu Windows, w tym:

• Outlook 2002, 2007, 2010, 2013, 2016 i 2019. Wynika to ze sposobu renderowania wiadomości HTML przez te programy pocztowe. Weź to pod uwagę, jeśli korzysta z nich duża część odbiorców.

Ustawienia obramowania

Dostosuj obramowanie, aby nadać przyciskowi wybrany styl i go wyróżnić.

• Border Width: Ustaw grubość obramowania osobno dla każdej strony (lewej, prawej, górnej i dolnej), maksymalnie do 40 pikseli.
• Border Style: Wybierz linię Solid (ciągłą), Dashed (przerywaną) lub Dotted (kropkowaną).
• Border Color: Użyj selektora kolorów lub wpisz kod szesnastkowy, aby dopasować kolor obramowania do marki lub kolorystyki projektu.

Odstępy wewnątrz przycisku

Dostosuj przestrzeń między zawartością przycisku (tekstem i ikoną) a jego obramowaniem.

• Opcje dostosowywania: Ustaw margines wewnętrzny dla każdej strony: Left (lewa), Right (prawa), Top (góra) i Bottom (dół). Maksymalna wartość to 99 pikseli.
• Wpływ na wygląd: Margines wewnętrzny zmienia całkowity rozmiar przycisku i położenie jego zawartości.

Odstępy wokół przycisku

Dostosuj przestrzeń wokół przycisku, aby określić jego położenie względem innych elementów wiadomości.

• Opcje dostosowywania: Ustaw odstępy po każdej stronie: Left (lewa), Right (prawa), Top (góra) i Bottom (dół). Maksymalna wartość to 40 pikseli.
• Zastosowanie: Pozwala odsunąć przycisk od pozostałej treści i krawędzi wiadomości.

Dodawanie linku do kotwicy

Linki do kotwic kierują czytelników do konkretnych sekcji tej samej wiadomości i ułatwiają nawigację w dłuższych newsletterach.

• Nazwa kotwicy: Zdefiniuj miejsce docelowe w wiadomości i połącz z nim przycisk. Po kliknięciu wiadomość przewinie się do wskazanej sekcji, ułatwiając odbiorcy nawigację.

Ważne: Linki do kotwic nie są obsługiwane w niektórych aplikacjach pocztowych i formatach wiadomości, w tym:

• W aplikacji Gmail na iOS
• W Apple Mail na iOS
• W aplikacji Outlook na Androida
• W aplikacji Outlook na macOS
• W wiadomościach AMP

Dokładnie przetestuj wiadomość w różnych programach pocztowych, aby sprawdzić działanie tej funkcji i ocenić, czy odpowiada potrzebom odbiorców.

Blok odstępu

Blok Spacer pozwala dodawać odstępy w treści wiadomości oraz dostosowywać ich rozmiar, wyrównanie, wygląd i margines wewnętrzny. Poniżej znajdziesz opis dwóch typów: Normal Spacer (zwykły odstęp) i Dynamic Spacer (dynamiczny odstęp).

1. Zwykły odstęp

Normal Spacer ma postać linii, która wizualnie oddziela sekcje wiadomości.

Najważniejsze ustawienia

1. Grubość i styl linii Dostosuj grubość, styl i kolor linii:

   • Grubość: Użyj przycisków + i - (wartość początkowa: 1).
   • Styl: Wybierz linię solid (ciągłą), dashed (przerywaną) lub dotted (kropkowaną).
   • Kolor: Ustaw własny kolor za pomocą kodu szesnastkowego lub selektora kolorów (domyślnie: #cccccc).

2. Szerokość Określ, jaką część szerokości obszaru treści ma zajmować linia. Dostosuj jej szerokość w pikselach za pomocą przycisków + i -.

3. Wyrównanie Wyrównaj linię do lewej, do środka lub do prawej, aby dopasować ją do układu.

4. Margines wewnętrzny Dostosuj odstępy wewnętrzne wokół linii:

   • Domyślnie: Margines wewnętrzny wynosi 20 ze wszystkich stron.
   • Włącz przełącznik More, aby ustawić osobne wartości dla każdej strony:
     • Top — góra
     • Right — prawa
     • Bottom — dół
     • Left — lewa

Zastosowanie

Normal Spacer sprawdza się, gdy chcesz wyraźnie oddzielić sekcje wiadomości i nadać jej uporządkowany, profesjonalny wygląd.

2. Dynamiczny odstęp

Dynamic Spacer to niewidoczny blok pustej przestrzeni, który pozwala zwiększyć odstępy między elementami i nadać układowi wiadomości więcej lekkości.

Najważniejsze funkcje

1. Dostosowywanie wysokości Zmień wysokość bezpośrednio w obszarze treści lub w panelu ustawień za pomocą przycisków + i -. Wysokość określa ilość pionowej przestrzeni dodanej między sekcjami.

2. Kolor tła Domyślnie blok ma przezroczyste tło, ale możesz nadać mu własny kolor za pomocą kodu szesnastkowego lub selektora kolorów. Dzięki temu w razie potrzeby odstęp może stać się widocznym elementem układu.

3. Responsywność Opcja Responsive Spacer sprawia, że odstęp dynamicznie dopasowuje się do różnych rozmiarów ekranu, aby układ dobrze wyglądał na różnych urządzeniach. Jest domyślnie włączona.

Najważniejsze różnice między zwykłym a dynamicznym odstępem

• Dynamic Spacer: Dodaje pustą przestrzeń bez widocznej linii.
• Normal Spacer: Udostępnia ustawienia linii, takie jak:
  • Szerokość linii
  • Wyrównanie
  • Styl linii
  • Margines wewnętrzny

Dynamic Spacer nie obsługuje tych ustawień — służy wyłącznie do oddzielania elementów pustą przestrzenią, bez widocznych dodatków.

3. Dodawanie linku do kotwicy

W obu typach odstępów możesz stosować linki do kotwic, aby umożliwić odbiorcom przejście do miejsca danego odstępu z innej części wiadomości. To szczególnie przydatne w nawigacji po dłuższych newsletterach.

Uwaga: Linki do kotwic nie są obsługiwane przez niektóre programy pocztowe, w tym:

• Microsoft Outlook
• Gmail na urządzeniach mobilnych

Blok wideo

Blok Video pozwala osadzać filmy w wiadomości oraz dostosowywać ich wygląd i działanie. Obsługuje linki do filmów z platform takich jak YouTube i Vimeo, dzięki czemu możesz swobodnie określić sposób prezentacji wideo.

1. Link do wideo

Wpisz adres URL filmu w polu Link to Video. Obsługiwane platformy to m.in. YouTube, Vimeo i inne serwisy umożliwiające osadzanie treści.

• Automatyczne działanie: Po dodaniu prawidłowego adresu URL:

  • Automatycznie powstaje obraz podglądu na podstawie miniatury filmu z danej platformy.
  • Pole Alternate Text zostaje automatycznie uzupełnione tytułem lub opisem filmu, jeśli są dostępne.

• Możliwość edycji: W razie potrzeby możesz ręcznie zmienić lub zastąpić wygenerowany obraz podglądu i tekst.

2. Tekst alternatywny

Pole Alternate Text wspiera dostępność: zawarty w nim opis filmu pojawia się, gdy nie uda się go załadować.

• Uzupełnia się automatycznie po dodaniu obsługiwanego adresu URL filmu.
• Możesz zmienić jego treść, aby dopasować ją do wiadomości.

3. Własna miniatura

Prześlij własny obraz, aby zastąpić domyślny podgląd filmu.

• Jak włączyć: Włącz opcję Custom Thumbnail.
• Obsługiwane formaty: PNG, JPG i GIF.
• Kiedy używać: Zastąp automatycznie wygenerowaną miniaturę, jeśli nie pasuje do projektu wiadomości.

4. Przycisk odtwarzania

Dostosuj przycisk odtwarzania widoczny na miniaturze filmu.

• Dostępne opcje:
  • Wybierz przycisk w stylu YouTube, Vimeo lub jeden z pozostałych stylów.
  • Wybierz „None”, aby całkowicie ukryć przycisk odtwarzania.

5. Rozmiar

Dostosuj wymiary filmu do projektu wiadomości.

• Szerokość i wysokość: Użyj przycisków + i - lub wpisz wartości ręcznie.
• Responsywność: Sprawdź, czy film prawidłowo dopasowuje się do różnych urządzeń.

6. Dopasowanie do szerokości

Włącz przełącznik Adjust to Width, aby film automatycznie dopasowywał się do szerokości kontenera. Dzięki temu zachowa responsywny układ na różnych urządzeniach.

7. Obraz responsywny

Przełącznik Responsive Image sprawia, że miniatura filmu dopasowuje się do szerokości ekranu na urządzeniach mobilnych.

• Uwaga: Responsywność zależy od obsługi tej funkcji przez urządzenie i program pocztowy.

8. Wyrównanie

Użyj ustawienia Alignment, aby określić poziome położenie filmu w bloku:

• Left: Wyrównuje film do lewej.
• Center: Wyśrodkowuje film.
• Right: Wyrównuje film do prawej.

9. Ustawienia dla urządzeń mobilnych

Dostosuj działanie i wygląd filmu na urządzeniach mobilnych:

1. Hide Element on Mobile W razie potrzeby ukryj blok wideo na urządzeniach mobilnych.

   • Uwaga: Ta funkcja wymaga obsługi zapytań o media (media queries) i może nie działać we wszystkich programach pocztowych.

2. Mobile Padding Dostosuj margines wewnętrzny wokół filmu na ekranach urządzeń mobilnych.

   • Włącz przełącznik More, aby ustawić osobne wartości dla każdej strony:
     • Top — góra
     • Right — prawa
     • Bottom — dół
     • Left — lewa

10. Wyświetlanie w AMPHTML lub HTML

Wybierz, w których wersjach wiadomości ma pojawiać się blok wideo:

• W AMPHTML i HTML
• Tylko w AMPHTML
• Tylko w HTML

Ta opcja pozwala uwzględnić film odpowiednio do dostarczanej wersji wiadomości.

Blok HTML

Blok HTML pozwala wstawiać własny kod HTML i CSS do wiadomości. Umożliwia zaawansowane dostosowywanie projektu z uwzględnieniem zgodności z programami pocztowymi. Możesz go używać zarówno do dodania pojedynczego elementu HTML, jak i do zaprojektowania całej wiadomości.

1. Interfejs edytora kodu

Gdy wybierzesz blok HTML, w panelu treści pojawi się czarne okno edytora kodu. Możesz w nim pisać, wklejać i modyfikować własny kod. Edytor zawiera dwie sekcje:

• Sekcja HTML: Dodawaj lub edytuj strukturę HTML wiadomości.
• Sekcja CSS: Otwórz osobny edytor CSS, aby nadać treści odpowiedni wygląd.

2. Zmiana rozmiaru czcionki

Dostosuj rozmiar czcionki kodu w edytorze, aby wygodniej go czytać:

• Kliknij przycisk A+, aby zwiększyć rozmiar czcionki.
• Kliknij przycisk A-, aby zmniejszyć rozmiar czcionki.

3. Zmiana rozmiaru okna edytora

Dostosuj rozmiar okna edytora kodu do swoich potrzeb:

• Jak zmienić rozmiar:
  • Najedź kursorem na trzy kropki pośrodku górnej krawędzi okna edytora.
  • Przeciągnij suwak w górę lub w dół, aby powiększyć lub pomniejszyć okno.

Ta funkcja szczególnie przydaje się podczas pracy z większymi lub bardziej rozbudowanymi blokami kodu.

4. Edytor CSS

Edytor CSS pozwala zarządzać stylami treści HTML. Otworzysz go przyciskiem w prawym górnym rogu edytora kodu.

O czym warto pamiętać:

• Ograniczona obsługa: Wiele programów pocztowych nie obsługuje zaawansowanych funkcji CSS, takich jak Flexbox, Grid czy zapytania o media (media queries).
• Podstawowe rozwiązania: Stosuj podstawowe style CSS inline, aby uzyskać jak najszerszą zgodność.
• Wstępnie skonfigurowane style: Nie usuwaj gotowych stylów — zapewniają prawidłowe wyświetlanie wiadomości w najpopularniejszych programach pocztowych.

5. Zgodność z programami pocztowymi

Kod HTML wiadomości e-mail wymaga szczególnej uwagi, ponieważ wiele programów pocztowych korzysta z przestarzałych silników renderowania.

Najważniejsze wskazówki:

• Stosuj układy oparte na tabelach zamiast układów opartych na elementach <div>, aby uzyskać lepszą zgodność.
• Unikaj zaawansowanych funkcji CSS, takich jak animacje, Flexbox czy Grid.
• Pamiętaj, że zapytania o media i niektóre drobne właściwości CSS mogą działać różnie w poszczególnych programach.
• Testowanie: Zawsze testuj wiadomości w kilku programach pocztowych (np. Gmail, Outlook, Apple Mail), aby upewnić się, że wyświetlają się prawidłowo.

6. Margines wewnętrzny

Ustawienie Padding pozwala dostosować przestrzeń wokół treści HTML:

• Wartość domyślna: 0.
• Własne wartości: Włącz przełącznik More, aby ustawić osobny margines wewnętrzny dla każdej strony:
  • Top — góra
  • Right — prawa
  • Bottom — dół
  • Left — lewa

Ta funkcja ułatwia wyrównanie treści HTML w układzie wiadomości.

7. Dodawanie linku do kotwicy

Funkcja Add Anchor Link pozwala utworzyć w innym miejscu wiadomości klikalny link prowadzący do bloku HTML.

Jak używać:

• Włącz tę opcję i wpisz w polu nazwę kotwicy.

Ograniczenia:

• Linki do kotwic nie są obsługiwane w niektórych aplikacjach pocztowych i formatach wiadomości, takich jak:
  • Aplikacja Gmail na iOS
  • Apple Mail na iOS
  • Aplikacja Outlook (Android i macOS)
  • Wiadomości AMP

8. Tworzenie własnego kodu HTML

Edytor HTML służy do pisania lub wklejania własnej struktury HTML wiadomości.

Dobre praktyki:

• Używaj prostego kodu HTML, obsługiwanego przez większość programów pocztowych.
• Unikaj złożonych układów i rozwiązań, takich jak elementy <div>.
• Stosuj układy oparte na tabelach, aby uzyskać lepszą zgodność.

9. Praktyczne wskazówki

1. Zacznij od małych kroków: Jeśli dopiero zaczynasz tworzyć e-maile w HTML, używaj bloku HTML do pojedynczych sekcji.
2. Sprawdzaj poprawność kodu: Upewnij się, że kod HTML spełnia wymagania programów pocztowych.
3. Dokładnie testuj: Korzystaj z narzędzi do podglądu i testowania wiadomości w różnych programach pocztowych i na różnych urządzeniach.