E-maile marketingowe wyglądają inaczej w Outlooku

Jeśli używasz zaktualizowanego klasycznego edytora emaili do tworzenia swoich emaili marketingowych, możesz zauważyć rozbieżności w sposobie renderowania emaili w Outlooku, z powodu ograniczonego wsparcia Outlooka dla CSS.

Jeśli zauważysz, że pozycjonowanie wiadomości e-mail lub odstępy wyglądają źle w Outlooku, wykonaj poniższe kroki rozwiązywania problemów.

Dowiedz się więcej na temat projektowania wiadomości e-mail w społeczności projektantów HubSpot.

Uwaga: Pomoc techniczna HubSpot nie może obsługiwać niestandardowo kodowanych szablonów wiadomości e-mail. Jeśli korzystasz z niestandardowego szablonu, skontaktuj się z dostawcą, który go utworzył. Możesz także nawiązać kontakt z innymi użytkownikami i projektantami HubSpot w Społeczności.

Odstępy

Istnieją dwie metody dostosowywania odstępów wokół obrazów w programie Outlook: przy użyciu hspace lub vspace oraz przy użyciu tabel.

Używanie hspace i vspace

Atrybut HTML vspace definiuje pionową przestrzeń i doda równe odstępy do góry i dołu Twojego obrazu. Atrybut hspace definiuje przestrzeń poziomą i doda równe odstępy po prawej i lewej stronie obrazu.

• Na koncie HubSpot przejdź do Marketing > E-mail.

• Najedź kursorem na nazwę wiadomości e-mail, a następnie kliknij przycisk Edytuj.

• Kliknij w moduł treści, a następnie kliknij Zaawansowane > Kod źródłowy.

• Na końcu kodu obrazka dodaj jeden lub oba z poniższych kodów: hspace="10" vspace="10", zastępując 10 żądaną ilością odstępów.

Używanie tabel

Możesz użyć 3-kolumnowej tabeli, aby równomiernie rozmieścić obraz, odstępy i tekst:

• Na koncie HubSpot przejdź do Marketing > E-mail.

• Najedź kursorem na nazwę wiadomości e-mail, a następnie kliknij przycisk Edytuj.

• Na pasku narzędzi edytora tekstu bogatego kliknij kolejno polecenia Wstaw > Tabela. Utwórz tabelę 3x1.
  
  

• Na pasku narzędzi edytora tekstu bogatego kliknij kolejno opcje Zaawansowane > Kod źródłowy....

• W pustej komórce podaj szerokość, np. <td width="10">, określającą odstęp między obrazem a tekstem.

• Określ rodzinę czcionek, rozmiar czcionki, kolor czcionki i wysokość linii, takie jak style="font-family: sans-serif; font-size:15px; line-height: 1.5em; color: #0000", ponieważ Outlook doda własną stylizację, gdy nie zostanie określona.

Rozwiązywanie problemów z nieoczekiwanymi poziomymi liniami pojawiającymi się w wiadomościach e-mail

Ze względu na znany błąd w niektórych wersjach Outlooka, pomiędzy sekcjami w twojej wiadomości e-mail może pojawić się pozioma linia. Choć nie ma jednoznacznego sposobu na rozwiązanie tego problemu, możesz spróbować następujących kroków zaradczych:

• Ustaw kolor tła wiadomości e-mail tak, aby był taki sam jak kolor jej treści.
• Zaktualizuj rozmiar czcionki i wysokość linii, aby były parzyste.
• Dołącz następujące style CSS do sekcji head szablonu wiadomości e-mail:

ms-text-size-adjust: none; mso-line-height-rule: exactly;