Як надіслати HTML-лист

Доволі часто простий текстовий імейл виглядає нудно, одноманітно та непривабливо. У такому випадку спеціалісти рекомендують скористатися яскравими конвертуючими HTML-шаблонами імейлів. Якщо ви користуєтеся Snov.io, то в нас для вас гарні новини! Ви можете надсилати HTML-імейли за допомогою нашої платформи. А тепер давайте дізнаємося, як створити та надіслати HTML-лист у Snov.io.

Зміст:

Крок 1. Створіть HTML-імейл

Створення HTML-листа — кропітка робота, яка може займати доволі багато часу. Проте якщо ви полюбляєте складні та цікаві задачі або якщо ви просто хочете створити унікальний лист, який не буде схожим на будь-який інший, створення такого імейлу — це саме те, що вам потрібно!

Якщо ж ви хочете заощадити час, ви можете скористатися готовими шаблонами листів. Ось декілька платформ, на яких ви можете щось вибрати саме те, що вам потрібно:

Перша річ, що вам необхідно знати про HTL-листи: будь-який лист містить дві основні частини, шапку або хедер (head) та контентну частину (body).

Шапка (хедер)

У хедері зазначаються мета-теґи та заголовок. Тут також міститься вся основна інформація, стилізоване оформлення тексту, а також медіа та CSS-анімація. Усі вони знаходяться у теґах <head> та </head>.

Приклад хедеру імейлу:

Head

  1. Елемент <!DOCTYPE> повідомляє про тип документа. Він дає браузерному рушію інформацію про те, згідно з якими правилами необхідно читати HTML та CSS. Незважаючи на те, що деякі поштові клієнти (Gmail, Outlook, Yahoo! Mail) замінюють код власним, професіонали рекомендують все ж таки додавати цей елемент до ваших листів.
  2. Теґ <meta http-equiv=”Content-Type” /> інформує про те, яким чином необхідно опрацьовувати та розпізнавати символи в імейлі.
  3. Атрибут “text/html” вказує на те, що рядки тексту розпізнаються як HTML.
  4. <title></title> — це заголовок імейлу. Цю частину отримувачі побачать у вкладці браузера, коли відкриють лист.
  5. <meta name = “viewport” /> слугує для створення адаптивного HTML-імейлу. Він інформує девайс, на якому відкривають імейл, про необхідний масштаб.

Контента (основна) частина

Контента (основна) частина — це головна частина імейлу, яка містить всю необхідну отримувачу інформацію. Вона знаходиться в теґах <body> та </body> та починається з форматування.

З метою коректного відображення імейлу у всіх поштових клієнтах, рекомендується форматувати его використовуючи таблиці з вбудованими таблицями.

Створіть щонайменше дві таблиці: контейнер шаблону та таблицю змісту листа.

Контейнер шаблону імейлу — це головна таблиця. Її ширина повинна бути 100%. Зробивши це, ви покриєте весь простір листа. Професіонали рекомендують зазначати відступи (margin, padding, cell padding, cell spacing) зі значенням 0. Це дозволить вам уникнути непотрібних пустих місць всередині таблиці.

Таблиця змісту листа знаходиться всередині головної таблиці. Налаштовуйте її ширину до 700 пікселів. Це значення — загальноприйнятий стандарт, яким користуються більшість поштових клієнтів. Вирівнюйте текст по центру.

Наприклад:

Body

Залежно від вибраного вами шаблону, ви можете додавати текст, зображення, кнопки (CTA), а також змінювати кольори. Вставляйте кожен блок тексту або елемент до окремої секції та застосовуйте рядкове стилізоване оформлення тексту.

Ось як виглядає структура блоку змісту та кнопка, додана окремою таблицею:

Content

Заверште свій імейл футером. Це заключна частина вашого листа. Пам’ятайте, що для цієї частини імейлу характерним та важливим є додавання інформації про відправника, а також посилання відписки. Також ви можете додати посилання на свої профілі у соціальних мережах або будь-яку іншу корисну інформацію.

Footer

Вітаю вас! Ви створили HTML-імейл! Тепер ви можете вставити його до своєї тригерної розсилки.

Крок 2. Надішліть HTML-імейл за допомогою Snov.io

У своєму акаунті Snov.io створіть тригерну розсилку. Додайте елемент «Імейл».

Email

Натисніть на кнопку «Вихідний код» та вставте код свого HTML-імейлу до вікна, що відкрилося.

Source code

Натисніть «Ok».

Insert source code

Щоб переконатися, що імейл гарно виглядає, ми рекомендуємо вам надіслати тестовий імейл.

Send test email

Відкрийте тестовий імейл на мобільному телефоні та ноутбуці. Також ми рекомендуємо перевірити його щонайменше в двох різних браузерах та поштових клієнтах.

Ознайомтеся з рекомендаціями для створення HTML-імейлів у цій статті.

Якщо у вас залишились запитання, напишіть нам і ми охоче допоможемо вам!

Чи була стаття корисною?
2 0