Ustawienia edytora wiadomości e-mail Stripo typu „przeciągnij i upuść”

Published: 22 października 2024 · Last updated: 21 lipca 2026 · By Marcus Biel

Po prawej stronie edytora wiadomości e-mail Maildroppa znajduje się kolumna ustawień wiadomości e-mail, która zawiera narzędzia pomagające porządkować i dostosowywać treść oraz wygląd wiadomości. Kolumna jest podzielona na dwie karty: Treść i Wygląd.

Karta Treść

Karta Treść służy do projektowania i organizowania zawartości wiadomości e-mail. Zawiera dwie główne sekcje: Struktury i Bloki.

1. Struktury

Struktury określają układ wiadomości e-mail, rozmieszczając treści w wierszach i kolumnach. Możesz wybrać spośród wielu gotowych układów, takich jak:

• Jedna kolumna
• Dwie kolumny
• Wiele kolumn

Nie musisz ograniczać się do tych opcji — możesz łączyć wiele bloków, aby utworzyć dowolny niestandardowy układ i uzyskać pełną elastyczność dopasowaną do swoich potrzeb projektowych.

• Przeciągnij i upuść: Po prostu przeciągnij strukturę z tej sekcji i upuść ją w obszarze projektu wiadomości e-mail, aby rozpocząć dodawanie treści.
• Dostosowywanie: Po dodaniu struktury możesz wypełnić ją różnymi blokami treści, takimi jak obrazy, tekst lub przyciski.

2. Bloki

Bloki to elementy treści umieszczane w strukturach w celu zbudowania wiadomości e-mail.

Dostępne typy bloków:

• Obraz: Przesyłaj obrazy (PNG, JPG, GIF) i dostosowuj ich wygląd.
• Tekst: Dodawaj i formatuj tekst, aby przekazać swoją wiadomość.
• Przycisk: Dodawaj klikalne przyciski z możliwością dostosowania tekstu, linków i stylów.
• Odstęp: Wstawiaj puste miejsce, aby regulować układ między innymi blokami.
• Wideo: Osadzaj treści wideo z platform takich jak YouTube, Vimeo i innych.
• HTML: Dodawaj niestandardowy kod HTML i CSS, aby zaawansowanie dostosowywać treść wiadomości e-mail.

Każdy blok został zaprojektowany z myślą o elastyczności i możliwości dostosowania, dzięki czemu możesz tworzyć wiadomości e-mail zgodne z wyglądem i charakterem swojej marki.

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

Blok obrazu

Blok obrazu w edytorze wiadomości e-mail Stripo typu „przeciągnij i upuść” umożliwia dodawanie obrazów do kampanii e-mailowej i ich dostosowywanie.

Dodawanie bloku obrazu

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

Opcja 1

Najedź kursorem na obszar „Upuść treść tutaj” w strukturze, a następnie kliknij ikonę obrazu. Wybrana struktura zostanie natychmiast przekształcona w blok obrazu.

Opcja 2

Przejdź do sekcji Bloki na karcie Treść. Przeciągnij blok obrazu do wybranej struktury w układzie wiadomości e-mail. Ta metoda zapewnia większą kontrolę nad dokładnym miejscem umieszczenia obrazu.

Przesyłanie obrazu

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

Przeciągnij i upuść

Możesz bezpośrednio przeciągnąć plik obrazu (PNG, JPG, GIF) z komputera do pola przesyłania wyświetlanego wewnątrz bloku obrazu.

Prześlij z komputera

Możesz też kliknąć ikonę chmury w bloku obrazu, aby otworzyć przeglądarkę plików i wybrać obraz z komputera (do 2 MB). Po wybraniu obraz pojawi się zarówno w bloku, jak i w karcie Treść po prawej stronie.

Zmienianie obrazu

Aby zastąpić obraz, użyj opcji Zmień obraz dostępnej na karcie Treść. Kliknij okrągłą ikonę Zmień obraz, aby przesłać nowy obraz lub podać link do obrazu z zewnętrznego adresu URL.

Edytowanie obrazu

Po przesłaniu obrazu możesz chcieć wprowadzić dodatkowe zmiany bezpośrednio na platformie. Wbudowany Edytor obrazów Stripo pozwala ulepszać i modyfikować obrazy bez opuszczania edytora wiadomości e-mail.

Otwieranie edytora obrazów

1. Po przesłaniu obrazu kliknij przycisk Edytuj obraz. Spowoduje to otwarcie interfejsu edytora obrazów.
2. Edytor oferuje szeroki zakres narzędzi wyświetlanych na górnym pasku menu.

Dostępne narzędzia edycji obrazu

• Filtry Stosuj różne filtry jednym kliknięciem, takie jak:

  • Skala szarości
  • Czarno-biały
  • Wyostrzenie
  • Odwrócenie
  • Sepia
  • Jasność
  • Kolor

• Zmień rozmiar Dostosuj wymiary obrazu. Możesz:

  • Określić konkretną szerokość i wysokość.
  • Zachować proporcje.

• Przytnij Wybierz fragment obrazu, który ma pozostać, i usuń niechciane części.

• Przekształć Obracaj lub odbijaj obraz:

  • Poziomo
  • Pionowo

• Rysuj Użyj narzędzia do rysowania, aby dodawać odręczne elementy, takie jak linie lub niestandardowe kształty, na obrazie.

• Tekst Dodawaj tekst bezpośrednio do obrazu. Dostosuj:

  • Czcionkę
  • Rozmiar
  • Kolor
  • Wyrównanie

• Kształty i naklejki Uatrakcyjnij obraz, nakładając:

  • Gotowe kształty
  • Zabawne naklejki

• Ramki Wybierz jedną z dostępnych ramek, aby nadać obrazowi stylową obwódkę.

• Rogi Dostosuj styl rogów, aby uzyskać dopracowany wygląd.

• Tło Usuń lub zastąp tło obrazu, aby uzyskać czystszy wygląd.

Zapisywanie zmian

Po wprowadzeniu żądanych zmian kliknij przycisk Zapisz w lewym górnym rogu edytora. Edytowany obraz automatycznie zastąpi oryginał w układzie wiadomości e-mail.

Ustawienia obrazu

Po przesłaniu obrazu możesz go dostosować za pomocą opcji Ustawienia obrazu dostępnych na karcie Treść po prawej stronie.

Link

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

• Strona internetowa (HTTP, HTTPS)
• Poczta (mailto:)
• Plik (ftp)
• Udostępnianie w mediach społecznościowych (Facebook, X (dawniej Twitter), LinkedIn, Pinterest)

Opcje te znajdziesz na liście rozwijanej ustawień linku.

Tekst alternatywny

Dodaj tekst alternatywny wyświetlany, jeśli obraz się nie załaduje. Tekst ten jest również przydatny w kontekście dostępności, ponieważ umożliwia czytnikom ekranu opisanie obrazu odbiorcom z niepełnosprawnością wzroku.

Wyrównanie

Wybierz sposób wyrównania obrazu w jego kontenerze. Możesz wyrównać go do Lewej, Środka lub Prawej.

Rozmiar

Dostosuj ręcznie szerokość i wysokość obrazu za pomocą przycisków plus/minus lub wpisując żądane wymiary.

Możesz także włączyć opcję „Dopasuj do szerokości”, aby obraz automatycznie dopasowywał się do pełnej szerokości kontenera.

Obraz responsywny

Włącz opcję „Obraz responsywny”, aby obraz dopasowywał się do różnych rozmiarów ekranu, szczególnie na urządzeniach mobilnych.

Margines wewnętrzny

Dostosuj margines wewnętrzny wokół obrazu, aby kontrolować ilość miejsca między obrazem a otaczającą treścią. Możesz zastosować jednakowy margines ze wszystkich stron lub dostosować go osobno dla każdej strony (Góra, Dół, Lewo, Prawo).

Linki zakotwiczone

Możesz przypisać do obrazu link zakotwiczony, który po kliknięciu pozwoli odbiorcom przejść do konkretnej sekcji w tej samej wiadomości e-mail. Pamiętaj jednak, że linki zakotwiczone mogą nie działać w niektórych klientach poczty, takich jak Gmail i Apple Mail.

Blok tekstu

Uatrakcyjnij bloki tekstu, dostosowując ich wygląd i funkcjonalność za pomocą poniższych ustawień. Każda opcja pozwala precyzyjnie określić sposób wyświetlania tekstu, dzięki czemu idealnie dopasujesz go do swoich preferencji projektowych.

Pasek narzędzi tekstu

Po kliknięciu w blok tekstu nad obszarem treści pojawi się pasek narzędzi tekstu, zapewniający szybki dostęp do wielu popularnych opcji formatowania tekstu. Dostępne funkcje:

1. Format akapitu

Ustaw styl akapitu, wybierając opcje takie jak Normalny dla zwykłego tekstu lub różne poziomy nagłówków (Nagłówek 1 do Nagłówka 6) w celu utworzenia uporządkowanej hierarchii w wiadomości e-mail. Pomaga to zwiększyć czytelność i uporządkowanie treści.

2. Rodzina czcionek

Domyślną czcionką jest Arial, ale możesz wybrać spośród wielu czcionek, w tym popularnych opcji takich jak Georgia, Helvetica i Courier New. Dostępna jest również funkcja wyszukiwania, która pozwala szybko znaleźć konkretną czcionkę.

3. Rozmiar czcionki

Dostosuj rozmiar czcionki od 8pt do 72pt. Domyślna wartość to 14pt, która sprawdza się w przypadku większości tekstów głównych wiadomości e-mail. Użyj listy rozwijanej, aby szybko ustawić żądany rozmiar czcionki.

4. Styl tekstu

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

• Pogrubienie (B): Wyróżnia tekst, nadając mu pogrubiony wygląd.
• Kursywa (I): Pochyla tekst, nadając mu bardziej stylizowany wygląd.
• Podkreślenie (U): Podkreśla tekst, co jest często używane w przypadku hiperłączy.
• Przekreślenie (S): Przekreśla tekst, co jest przydatne przy edycji lub oznaczaniu usuniętej treści.

5. Zaawansowane stylizowanie tekstu (menu z trzema kropkami)

Kliknięcie trzech kropek na pasku narzędzi rozwija dodatkowe opcje:

• Indeks dolny: Umieszcza tekst poniżej linii bazowej (przydatne w przypisach lub wzorach chemicznych).
• Indeks górny: Umieszcza tekst powyżej linii bazowej (często używane w wykładnikach lub liczebnikach porządkowych).
• Usuń formatowanie: Usuwa zastosowane formatowanie i przywraca domyślny styl tekstu.

6. Kolor tekstu i tła

• Kolor tekstu: Kliknij przycisk Kolor tekstu, aby wybrać kolor z palety lub wprowadzić kod szesnastkowy w celu precyzyjnego określenia koloru tekstu.
• Kolor tła: Wybierz kolor tła (wyróżnienia) tekstu.

7. Wyrównanie tekstu

Wyrównaj tekst w bloku:

• Wyrównaj do lewej: Wyrównuje tekst do lewej.
• Wyśrodkuj: Wyśrodkowuje tekst.
• Wyrównaj do prawej: Wyrównuje tekst do prawej.
• Wyjustuj: Równomiernie rozkłada tekst na szerokości bloku.

8. Listy

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

• Wstaw/usuń listę punktowaną: Dodaje lub usuwa punkty.
• Wstaw/usuń listę numerowaną: Dodaje lub usuwa listę numerowaną.

9. Zawijanie wierszy

Włącz lub wyłącz zawijanie wierszy w bloku tekstu. Po włączeniu długie wiersze tekstu automatycznie przechodzą do następnego wiersza.

10. Wcięcie

Dostosuj wcięcie tekstu:
- **Zwiększ wcięcie**: Odsuwa tekst od marginesu, co jest przydatne w przypadku podpunktów lub cytatów.
- **Zmniejsz wcięcie**: Redukuje wcięcie, przybliżając tekst do lewego marginesu.
![Wcięcie tekstu](https://cms.maildroppa.com/assets/0146b155-9fe5-4495-be1c-19dcf1427639)

11. Wstaw hiperłącze

Dowiedz się, jak dodawać, edytować i zarządzać hiperłączami w treści wiadomości e-mail.

Kroki dodawania lub edytowania linku

a) Zaznacz tekst

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

b) Kliknij ikonę linku

Na pasku narzędzi tekstu kliknij ikonę linku.

c) Edytuj link w panelu ustawień

Po prawej stronie pojawi się panel ustawień z opcjami linku:

• Pole linku: Wprowadź adres URL lub wybierz jedną ze wstępnie zdefiniowanych opcji.
• Tag: Dodawaj tagi, aby oznaczać subskrybentów lub uruchamiać automatyzacje.

Naprawianie linków po wysłaniu

Nie ma nic gorszego niż wysłanie nowej kampanii do 2365 subskrybentów i odkrycie, że jeden z linków nie działa z powodu zwykłej literówki. Pożegnaj się ze sprzedażą w Czarny Piątek!

Na szczęście umożliwiliśmy naprawianie niedziałających linków — nawet po wysłaniu wiadomości do subskrybentów.

a) Wyświetl kampanię

Znajdź wysłaną kampanię w widoku ogólnym, kliknij trzy kropki i wybierz Wyświetl kampanię.

b) Modyfikuj linki lub tagi

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

• Zaktualizować adresy docelowe linków: Naprawić nieprawidłowe adresy URL.
• Zarządzać tagami: Dodawać lub usuwać tagi używane w automatyzacjach.

Uwaga: Aby korzystać z funkcji zmiany docelowych adresów linków, upewnij się, że w ustawieniach kampanii włączono Śledzenie kliknięć.

Dostosowywanie wyglądu linku

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

• Kolor linku: Wybierz kolor lub wprowadź kod szesnastkowy.

• Podkreślanie linków: Włącz lub wyłącz podkreślenia, aby uzyskać bardziej przejrzysty wygląd.

12. Tagi personalizacji

Używaj tagów personalizacji, aby dodawać dynamiczne treści, takie jak imię odbiorcy lub inne pola niestandardowe.

• Otwórz listę rozwijaną Tagi personalizacji na pasku narzędzi, aby wybrać popularne pola, takie jak Imię, E-mail lub Kraj, albo zdefiniować pola niestandardowe, aby dopasować wiadomości e-mail do każdego odbiorcy.

13. Emoji

Dodaj tekstowi atrakcyjności wizualnej, używając emoji.

• Kliknij ikonę emoji na pasku narzędzi, aby otworzyć posegregowaną kategoriami listę emoji.
• Uwaga dotycząca zgodności: Przetestuj wiadomości e-mail w wybranych klientach, takich jak Outlook, ponieważ niektóre z nich mogą nie wyświetlać emoji prawidłowo.

14. Tabela i znaki specjalne

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

Wstawianie tabeli

Twórz i dostosowuj tabele, aby wzbogacić układ wiadomości e-mail.

• W razie potrzeby określ liczbę wierszy, kolumn, odstępy między komórkami, margines wewnętrzny i grubość obramowania.

Wstawianie znaków specjalnych

Wzbogać tekst o symbole, znaki diakrytyczne i inne niestandardowe znaki.

• Otwórz opcję Znaki specjalne, aby przeglądać szeroki wybór znaków.

Dodatkowe ustawienia bloku tekstu (prawy panel)

Prawy panel zapewnia szeroką kontrolę nad wyglądem i funkcjonalnością bloków tekstu. Dostępne ustawienia:

1. Kolor tekstu

Określ kolor tekstu za pomocą próbnika kolorów lub wpisując kod szesnastkowy.

2. Kolor tła

Ustaw niestandardowy kolor tła bloku tekstu. Domyślnie tło jest przezroczyste.

3. Ustawienia dotyczące linków

Gdy blok tekstu zawiera linki, w ustawieniach pojawiają się dodatkowe opcje:

• Kolor linku: Dostosuj kolor linków za pomocą próbnika kolorów lub kodu szesnastkowego.

• Podkreślanie linków: Włącz lub wyłącz opcję podkreślania linków w bloku tekstu.

• Edycja linku: Zaznacz link w obszarze treści, aby edytować jego adres URL w panelu ustawień. Możesz również przypisywać lub aktualizować tagi linku za pomocą listy rozwijanej oznaczonej „Tagi”.

4. Wyrównanie

Wyrównaj blok tekstu w jego kontenerze: Do lewej, Do środka lub Do prawej.

5. Stała wysokość

Ustaw stałą wysokość bloku tekstu, włączając tę opcję. Możesz również kontrolować pionowe wyrównanie tekstu: Góra, Środek lub Dół.

6. Odstępy między wierszami

Kontroluj przestrzeń między wierszami tekstu. Wybierz opcję Wąskie, Normalne lub Szerokie.

7. Margines wewnętrzny

Dostosuj przestrzeń wokół bloku tekstu. Zastosuj jednakowy margines lub dostosuj każdą stronę osobno: Góra, Dół, Lewo i Prawo.

8. Linki zakotwiczone

Twórz linki zakotwiczone, aby umożliwić czytelnikom przechodzenie do konkretnych sekcji wiadomości e-mail. Pamiętaj, że niektóre klienty poczty nie obsługują linków zakotwiczonych.

Blok przycisku

Blok przycisku umożliwia dodanie do wiadomości e-mail klikalnego przycisku z ustawieniami funkcjonalności i wyglądu, które można dostosować.

Ustawienia linku

Opcja Link określa działanie uruchamiane po kliknięciu przycisku przez odbiorcę.

Dostępne typy linków

• Zwykły link do strony (HTTP lub HTTPS): Przekierowuje użytkownika na stronę internetową.
• Link pocztowy: Otwiera klienta poczty użytkownika i tworzy nową wiadomość e-mail.
• Link do pliku (FTP, FTPS): Prowadzi do pliku na serwerze FTP.
• Skype: Rozpoczyna rozmowę lub czat w Skypie.
• Telefon (tel): Rozpoczyna połączenie telefoniczne na zgodnych urządzeniach.
• SMS: Otwiera aplikację wiadomości z wstępnie wprowadzonym numerem odbiorcy.
• Viber: Otwiera aplikację Viber w celu wysłania wiadomości lub wykonania połączenia.
• Inny typ protokołu: Określ niestandardowy protokół, którego nie ma na powyższej liście.

Opcje udostępniania w mediach społecznościowych

Możesz również skonfigurować przycisk do udostępniania w mediach społecznościowych lub poczcie e-mail:

• Facebook
• X (dawniej Twitter)
• LinkedIn
• Pinterest
• Udostępnianie e-mail

Pole URL

Obok typu linku znajduje się Pole URL (zwykle zaczynające się od https://), w którym możesz wprowadzić konkretny adres odpowiadający danemu typowi linku.

Etykieta przycisku

Dostosuj etykietę przycisku, aby odzwierciedlała wezwanie do działania. Domyślna etykieta to „Przycisk”, ale możesz zmienić ją na przykład na „Dowiedz się więcej”, „Zasubskrybuj teraz” lub „Kup teraz”.

Styl tekstu

Ustawienia Stylu tekstu umożliwiają dostosowanie wyglądu tekstu przycisku.

Wybór czcionki

Wybierz spośród wielu standardowych czcionek, w tym:

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

W przypadku czcionek niestandardowych dostępne są również:

• 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 pomaga szybko znaleźć konkretną czcionkę.

Rozmiar i formatowanie czcionki

• Rozmiar czcionki: Wybierz wartość od 8 do 72, zależnie od tego, jak wyraźnie ma być widoczny tekst przycisku.
• Formatowanie tekstu: Zastosuj Pogrubienie lub Kursywę, używając ikon „B” lub „I”, aby wyróżnić tekst przycisku.

Ustawienia kolorów

Dostosuj wygląd przycisku, zmieniając ustawienia kolorów.

1. Kolor przycisku: Zmień kolor tła przycisku. Domyślnie jest zielony (#31cb4b). Użyj pola kodu szesnastkowego lub próbnika kolorów, aby wybrać nowy kolor.

2. Kolor tekstu: Określ kolor tekstu przycisku. Domyślnie jest biały (#ffffff). Wybierz kolor, który dobrze kontrastuje z tłem przycisku, aby zapewnić czytelność.

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

Promień obramowania

Kontroluj zaokrąglenie rogów przycisku za pomocą ustawienia Promień obramowania.

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

Uwaga: Aby zapewnić prawidłowe wyświetlanie zaokrąglonych rogów w programie Microsoft Outlook, włącz opcję „Obsługa programu Outlook” na karcie Wygląd.

Wyrównanie

Ustaw położenie przycisku w obszarze treści za pomocą ustawienia Wyrównanie.

• Opcje: Do lewej, Do środka, Do prawej.
• Typowe zastosowanie: Wyrównanie do środka służy do wyróżnienia, a wyrównanie do lewej lub prawej — do zachowania spójności projektu.

Stała wysokość

Włącz opcję Stała wysokość, aby zachować spójne wymiary przycisku.

1. Domyślnie: Wyłączone.
2. Minimalna wysokość: 44 piksele.
3. Pionowe wyrównanie treści: Po włączeniu stałej wysokości wyrównaj zawartość przycisku do Góry, Środka lub Dołu, aby precyzyjnie określić jej położenie.

Przycisk z ikoną

Opcja Przycisk z ikoną pozwala umieścić ikonę obok tekstu przycisku, zwiększając atrakcyjność wizualną i wzmacniając wezwanie do działania. Ta funkcja jest domyślnie wyłączona.

• Obsługiwane formaty: Przesyłaj ikony w formacie PNG, JPG lub GIF, o maksymalnym rozmiarze pliku 2 MB.
• Położenie ikony: Wybierz wyświetlanie ikony 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. Ograniczenie to wynika ze sposobu renderowania wiadomości HTML przez te klienty poczty. Weź to pod uwagę, jeśli duża część odbiorców korzysta z tych klientów.

Ustawienia obramowania

Dostosuj obramowanie przycisku, aby nadać mu dodatkowy styl i podkreślenie.

• Szerokość obramowania: Ustaw szerokość każdej strony (lewej, prawej, górnej i dolnej) osobno, maksymalnie do 40 pikseli.
• Styl obramowania: Wybierz styl Ciągły, Przerywany lub Kropkowany.
• Kolor obramowania: Użyj próbnika kolorów lub wprowadź kod szesnastkowy, aby dopasować kolor obramowania do marki lub schematu projektu.

Margines wewnętrzny przycisku

Dostosuj przestrzeń wewnątrz przycisku, między treścią (tekstem i ikoną) a obramowaniem przycisku.

• Opcje dostosowywania: Określ wartości marginesu wewnętrznego dla stron Lewej, Prawej, Górnej i Dolnej, maksymalnie do 99 pikseli.
• Wpływ: Margines wewnętrzny wpływa na ogólny rozmiar przycisku i położenie treści w jego obrębie.

Margines zewnętrzny przycisku

Kontroluj przestrzeń wokół przycisku, aby dostosować jego położenie względem innych elementów układu wiadomości e-mail.

• Opcje dostosowywania: Ustaw wartości marginesu zewnętrznego dla stron Lewej, Prawej, Górnej i Dolnej, maksymalnie do 40 pikseli.
• Zastosowanie: Zapewnia, że przycisk nie będzie znajdować się zbyt blisko innych treści ani krawędzi wiadomości e-mail.

Dodaj link zakotwiczony

Używaj linków zakotwiczonych, aby kierować czytelników do konkretnych sekcji w tej samej wiadomości e-mail, zapewniając szybką nawigację w dłuższych newsletterach.

• Nazwa kotwicy: Zdefiniuj miejsce docelowe w wiadomości e-mail i połącz z nim przycisk. Po kliknięciu wiadomość przewinie się do określonej sekcji, ułatwiając użytkownikowi nawigację.

Ważne: Linki zakotwiczone nie są obsługiwane przez niektóre klienty poczty, w tym:

• Aplikację Gmail na iOS
• Apple Mail na iOS
• Aplikację Outlook na Androida
• Aplikację Outlook na macOS
• Wiadomości AMP

Dokładnie przetestuj wiadomość e-mail, aby zapewnić działanie w różnych klientach poczty i ocenić, czy ta funkcja odpowiada potrzebom odbiorców.

Blok odstępu

Blok odstępu umożliwia dodawanie regulowanej przestrzeni w treści wiadomości e-mail oraz kontrolowanie jej rozmiaru, wyrównania, wyglądu i wewnętrznych odstępów. Poniżej opisano dwa typy odstępów: Zwykły odstęp i Dynamiczny odstęp.

1. Zwykły odstęp

Zwykły odstęp to element w postaci linii, który wizualnie oddziela sekcje wiadomości e-mail.

Najważniejsze ustawienia

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

   • Grubość: Dostosuj za pomocą przycisków + i - (wartość początkowa: 1).
   • Styl: Wybierz ciągły, przerywany lub kropkowany.
   • Kolor: Ustaw niestandardowy kolor za pomocą kodu szesnastkowego lub próbnika kolorów (domyślnie: #cccccc).

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

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

4. Margines wewnętrzny Kontroluj wewnętrzne odstępy wokół elementu odstępu:

   • Domyślnie: Margines wewnętrzny jest ustawiony na 20 ze wszystkich stron.
   • Użyj przełącznika Więcej, aby określić margines dla poszczególnych stron:
     • Góra
     • Prawo
     • Dół
     • Lewo

Zastosowanie

Zwykły odstęp idealnie nadaje się do tworzenia przejrzystych, wizualnych podziałów między sekcjami wiadomości e-mail, zapewniając uporządkowany i profesjonalny układ.

2. Dynamiczny odstęp

Dynamiczny odstęp to niewidoczny blok pustej przestrzeni, który służy do tworzenia oddechu w układzie wiadomości e-mail.

Najważniejsze funkcje

1. Dostosowywanie wysokości Dostosuj wysokość bezpośrednio w obszarze treści lub za pomocą panelu sterowania, używając przycisków + i -. Wysokość określa ilość pionowej przestrzeni dodanej między sekcjami.

2. Kolor tła Domyślnie odstęp ma przezroczyste tło, ale możesz zastosować niestandardowy kolor tła za pomocą kodu szesnastkowego lub próbnika kolorów. Dzięki temu odstęp może w razie potrzeby pełnić funkcję widocznego bloku.

3. Responsywność Opcja Responsywny odstęp zapewnia dynamiczne dopasowanie odstępu do różnych rozmiarów ekranu, co pozwala uzyskać optymalny układ na różnych urządzeniach. Ta funkcja jest domyślnie włączona.

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

• Dynamiczny odstęp: Dodaje pustą przestrzeń bez widocznej linii.
• Zwykły odstęp: Zawiera ustawienia dotyczące linii, takie jak:
  • Szerokość linii
  • Wyrównanie
  • Style linii
  • Margines wewnętrzny

Dynamiczny odstęp nie obsługuje tych funkcji i służy wyłącznie do oddzielania elementów bez użycia elementów wizualnych.

3. Dodaj link zakotwiczony

Linki zakotwiczone można stosować w obu typach odstępów, umożliwiając użytkownikom przejście bezpośrednio do miejsca odstępu z innej części wiadomości e-mail. Jest to szczególnie przydatne do tworzenia nawigacji wewnątrz dłuższych newsletterów.

Uwaga: Linki zakotwiczone nie są obsługiwane przez niektóre klienty poczty, w tym:

• Microsoft Outlook
• Gmail (na urządzeniach mobilnych)

Blok wideo

Blok wideo umożliwia osadzanie filmów w wiadomości e-mail oraz dostosowywanie ich wyglądu i działania. Obsługuje linki do filmów z platform takich jak YouTube i Vimeo, zapewniając elastyczność i kontrolę nad sposobem prezentacji wideo.

1. Link do wideo

Dodaj adres URL filmu w polu Link do wideo. Obsługiwane platformy to między innymi YouTube, Vimeo i inne usługi umożliwiające osadzanie treści.

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

  • Automatycznie generowany jest obraz podglądu z użyciem miniatury filmu z danej platformy.
  • Pole Tekst alternatywny jest automatycznie wypełniane tytułem lub opisem filmu (jeśli są dostępne).

• Pola edytowalne: W razie potrzeby możesz ręcznie edytować lub zastąpić wygenerowany obraz podglądu i tekst.

2. Tekst alternatywny

Pole Tekst alternatywny zapewnia dostępność, wyświetlając opis filmu, jeśli nie uda się go załadować.

• Jest automatycznie wypełniane po dodaniu obsługiwanego adresu URL filmu.
• Można je dostosować do potrzeb treści.

3. Niestandardowa miniatura

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

• Jak włączyć: Włącz opcję Niestandardowa miniatura.
• Obsługiwane formaty: PNG, JPG lub GIF.
• Kiedy używać: Zastąp wygenerowaną miniaturę, gdy nie pasuje do projektu wiadomości e-mail.

4. Przycisk odtwarzania

Dostosuj nakładany na miniaturę filmu przycisk odtwarzania.

• Dostępne opcje:
  • Wybierz styl przycisku odtwarzania YouTube, Vimeo lub inny.
  • Wybierz „Brak”, aby całkowicie ukryć przycisk odtwarzania.

5. Rozmiar

Dostosuj wymiary filmu do projektu wiadomości e-mail.

• Szerokość i wysokość: Użyj przycisków + i - lub ręcznie wpisz wartości, aby kontrolować rozmiar.
• Responsywny projekt: Upewnij się, że film prawidłowo dopasowuje się do różnych urządzeń.

6. Dopasuj do szerokości

Włącz przełącznik Dopasuj do szerokości, aby film automatycznie dopasowywał się do szerokości kontenera. Zapewnia to responsywny wygląd filmu na różnych urządzeniach.

7. Obraz responsywny

Przełącznik Obraz responsywny zapewnia dopasowanie miniatury filmu do szerokości ekranu na urządzeniach mobilnych.

• Uwaga: Responsywność zależy od obsługi przez urządzenie i klienta poczty.

8. Wyrównanie

Użyj ustawienia Wyrównanie, aby kontrolować poziome położenie filmu w bloku:

• Lewo: Wyrównuje film do lewej.
• Środek: Wyśrodkowuje film.
• Prawo: Wyrównuje film do prawej.

9. Opcje dotyczące urządzeń mobilnych

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

1. Ukryj element na urządzeniach mobilnych W razie potrzeby ukryj blok wideo na urządzeniach mobilnych.

   • Uwaga: Ta funkcja zależy od obsługi zapytań medialnych i może nie działać we wszystkich klientach poczty.

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

   • Użyj przełącznika Więcej, aby ustawić osobne wartości marginesu dla:
     • Góry
     • Prawej
     • Dołu
     • Lewej

10. Uwzględnij w AMPHTML lub HTML

Wybierz, w których wersjach wiadomości e-mail ma pojawić się blok wideo:

• AMPHTML i HTML
• Tylko AMPHTML
• Tylko HTML

Opcja ta gwarantuje odpowiednie uwzględnienie filmu w zależności od dostarczanej wersji wiadomości e-mail.

Blok HTML

Blok HTML umożliwia wstawianie niestandardowego kodu HTML i CSS do wiadomości e-mail, zapewniając elastyczność zaawansowanego dostosowywania przy zachowaniu zgodności z klientami poczty. Niezależnie od tego, czy dodajesz pojedynczy element HTML, czy projektujesz całą wiadomość e-mail, ten blok jest narzędziem do tworzenia dopasowanych projektów.

1. Interfejs edytora kodu

Po wybraniu bloku HTML w panelu treści pojawi się czarne okno edytora kodu. Edytor umożliwia pisanie, wklejanie i modyfikowanie niestandardowego kodu. Zawiera dwie sekcje:

• Sekcja HTML: Dodawaj lub edytuj strukturę HTML wiadomości e-mail.
• Sekcja CSS: Otwórz osobny edytor CSS, aby stylizować treść.

2. Dostosowywanie rozmiaru czcionki

Dostosuj rozmiar czcionki kodu w edytorze, aby poprawić czytelność:

• Użyj przycisku A+, aby zwiększyć rozmiar czcionki.
• Użyj przycisku A-, aby zmniejszyć rozmiar czcionki.

3. Dostosowywanie rozmiaru okna edytora

Zmień rozmiar okna edytora kodu zgodnie ze swoimi preferencjami pracy:

• Jak dostosować:
  • Najedź kursorem na trzy kropki u góry, pośrodku okna edytora.
  • Przeciągnij suwak w górę lub w dół, aby zwiększyć albo zmniejszyć rozmiar edytora.

Funkcja ta jest szczególnie przydatna podczas pracy z większymi lub bardziej szczegółowymi blokami kodu.

4. Edytor CSS

Edytor CSS umożliwia zarządzanie stylami treści HTML i jest dostępny za pomocą przycisku w prawym górnym rogu edytora kodu.

Ważne kwestie:

• Ograniczona obsługa: Wiele klientów poczty nie obsługuje zaawansowanych funkcji CSS, takich jak Flexbox, Grid czy zapytania medialne.
• Korzystaj z podstaw: Używaj podstawowego CSS inline, aby zapewnić maksymalną zgodność.
• Wstępnie skonfigurowane style: Unikaj usuwania wstępnie skonfigurowanych stylów, ponieważ zapewniają one prawidłowe renderowanie w głównych klientach poczty.

5. Zgodność z klientami poczty

HTML wiadomości e-mail wymaga szczególnej uwagi ze względu na przestarzałe silniki renderowania w wielu klientach poczty.

Najważniejsze wytyczne:

• Używaj układów opartych na tabelach zamiast układów opartych na elementach <div>, aby zapewnić lepszą obsługę.
• Unikaj zaawansowanych funkcji CSS, takich jak animacje, Flexbox czy Grid.
• Spodziewaj się niespójnego działania zapytań medialnych i drobnych właściwości CSS.
• Testowanie: Zawsze testuj wiadomości e-mail w wielu klientach (np. Gmail, Outlook, Apple Mail), aby zapewnić prawidłowe renderowanie.

6. Margines wewnętrzny

Ustawienie Margines wewnętrzny dostosowuje przestrzeń wokół treści HTML:

• Domyślny margines wewnętrzny: Domyślnie ustawiony na 0.
• Niestandardowy margines wewnętrzny: Włącz przełącznik Więcej, aby dostosować margines osobno dla:
  • Góry
  • Prawej
  • Dołu
  • Lewej

Funkcja ta idealnie nadaje się do wyrównywania treści HTML w układzie wiadomości e-mail.

7. Dodaj link zakotwiczony

Funkcja Dodaj link zakotwiczony umożliwia utworzenie klikalnego linku w innym miejscu wiadomości e-mail, który prowadzi do bloku HTML.

Jak używać:

• Włącz opcję i wprowadź nazwę kotwicy w polu.

Ograniczenia:

• Linki zakotwiczone nie są obsługiwane przez niektóre klienty poczty, takie jak:
  • Aplikacja Gmail na iOS
  • Apple Mail na iOS
  • Aplikacja Outlook (Android i macOS)
  • Wiadomości AMP

8. Pisanie niestandardowego kodu HTML

Edytor HTML służy do pisania lub wklejania niestandardowej struktury HTML wiadomości e-mail.

Najlepsze praktyki:

• Używaj prostego, szeroko obsługiwanego kodu HTML.
• Unikaj złożonych układów i funkcji, takich jak elementy <div>.
• Stosuj układy oparte na tabelach, aby zapewnić lepszą zgodność.

9. Wskazówki dotyczące sukcesu

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