Руководство по email-шаблонам: сценарии жизненного цикла, макеты, блоки текста и чек-лист проверки (2026)

Создайте многоразовые email-шаблоны для приветственных, новостных, промо, транзакционных, корзинных, послепродажных, реактивационных, анонсных и опросных кампаний.

Set Noa

Обновлено 25 авг. 2026 г.

0 посещения · 7 дн.

email templates

Руководство по email-шаблонам?

Email-шаблоны должны быть системой, а не папкой с разовыми макетами. Стройте шаблоны по задачам жизненного цикла, сохраняйте единые блоки вёрстки, аккуратно подключайте динамические данные и проверяйте отображение, ссылки, согласия и юридические требования перед каждой отправкой.

Узнать больше

Email-шаблоны: это операционная система email-маркетинга. Хороший шаблон позволяет команде запускать кампании быстрее, не собирая каждое письмо заново. Слабый шаблон создаёт обратную проблему: непоследовательный бренд, сломанную мобильную вёрстку, плохую персонализацию, отсутствующие юридические элементы и кампании, которые трудно тестировать.

Это руководство заменяет старый подход «список шаблонов» на практическую систему шаблонов. Оно сохраняет полезные категории кампаний (приветственные, новостные, промо, транзакционные, брошенная корзина, послепродажная коммуникация, реактивация, анонсы и опросы) и превращает их в многоразовые схемы с блоками текста, заметками по вёрстке, рекомендациями по динамическим данным и проверками качества.

Система email-шаблонов

Мыслите семействами шаблонов, а не отдельными письмами.

Семейство шаблонов	Задача	Многоразовые блоки	Риск при проверке
Приветственное	Сориентировать нового подписчика или пользователя	Приветствие, обещание ценности, следующий шаг, предпочтения	Перегруженность первого письма
Новостное	Упаковать регулярный контент	Главный материал, дополнительные ссылки, заметка редактора	Общие, безликие заголовки выпуска
Промо	Представить предложение	Оффер, дедлайн, товарная сетка, условия	Ложная срочность или неясные исключения
Транзакционное	Подтвердить статус или действие в аккаунте	Статус, детали, следующий шаг, поддержка	Смешивание критичных уведомлений с маркетингом
Корзина и просмотр	Вернуть интерес	Товарный блок, предложение помощи, призыв к оформлению заказа	Неверные данные о товаре или остатках
Послепродажное	Помочь после заказа	Доставка, настройка, уход, отзыв, кросс-продажа	Просьба об отзыве слишком рано
Реактивационное	Дать неактивным подписчикам выбор	Обновление предпочтений, снижение частоты, причина остаться	Текст, давящий на чувство вины
Анонс	Объяснить изменение	Что изменилось, почему это важно, что нужно сделать	Сокрытие важных деталей
Опрос	Собрать обратную связь	Вопрос, шкала оценки, поощрение, заметка о конфиденциальности	Слишком много вопросов в одном письме

У каждого семейства должны быть базовый шаблон, короткая версия и текстовая запасная версия. Базовый шаблон закрывает обычные кампании. Короткая версия подходит для срочных или транзакционных уведомлений. Текстовая версия защищает доставляемость и читаемость, когда почтовые клиенты блокируют изображения или форматирование.

Шаблоны Tajo

Четыре макета в работе

Каждая панель ниже — это настоящий HTML письма в рамке реальной ширины. Уменьшите ширину до 375 px и посмотрите, как колонки складываются друг под друга.

Следует вашей теме — переключите её в шапке, чтобы увидеть другую.

Посмотреть HTML шаблона The Letter 6 КБ, без сборки

<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Letter</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#151515 !important; }
    .d-card { background-color:#1c1c1c !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a8a8a8 !important; }
    .d-rule { border-color:#3a3a3a !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f0efec;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Цитата, которую вы храните в заметках, работает усерднее вашего контент-плана.</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f0efec;">
  <tr><td align="center" style="padding:32px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td style="padding:0;">
        <img src="/_astro/letter-masthead.BcPkHvz4.png" width="600" height="250" alt="Шапка Meridian Press: концентрические синие дуги, пересечённые диагональной полосой" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:36px 88px 0 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Meridian Press · Выпуск 47</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <h1 class="h1 d-ink" style="margin:0 0 20px 0;font-size:34px;line-height:42px;font-weight:400;color:#141414;">Архив и есть продукт</h1>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Три недели назад я искал текст, написанный в 2019 году, и не нашёл его. Ни на сайте, ни в выгрузке, ни в поиске самой платформы. Тысяча двести выпусков, и единственным работающим указателем была моя память.</p>
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Вот о чём не рассказывают, когда речь о шести годах рассылки. Отправлять легко. Хранить — нет.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:8px 88px 28px 88px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr><td class="quote" style="border-left:3px solid #0084d1;padding:4px 0 4px 0;padding-left:20px;font-family:Georgia,'Times New Roman',Times,serif;">
            <p class="d-ink" style="margin:0;font-size:19px;line-height:30px;font-style:italic;color:#141414;">Всё, что вы публикуете, — это вклад. Почти никто не строит снятие.</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px;font-family:Georgia,'Times New Roman',Times,serif;">
        <p class="d-ink" style="margin:0 0 20px 0;font-size:18px;line-height:30px;color:#242424;">Поэтому на этой неделе я пересобрал старые выпуски в настоящий архив: с тегами, полнотекстовым поиском и постоянными адресами. Ушло девять дней. Число подписчиков не сдвинулось. Время на сайте выросло втрое.</p>
        <p class="d-ink" style="margin:0 0 28px 0;font-size:18px;line-height:30px;color:#242424;">Всё ниже, включая то, что не сработало.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 88px 36px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <a href="https://example.com" style="font-size:17px;line-height:24px;font-weight:600;color:#0084d1;text-decoration:underline;">Читать весь выпуск &rarr;</a>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 88px;border-top:1px solid #e4e2de;"></td></tr>

      <tr><td class="gutter" style="padding:24px 88px 40px 88px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:22px;color:#6b6b6b;">Пишется от руки каждый четверг. Ответьте — я прочту.</p>
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Meridian Press, 14 Harbour Lane, Bristol BS1 4TT<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Отписаться</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Открыть в браузере</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Следует вашей теме — переключите её в шапке, чтобы увидеть другую.

Посмотреть HTML шаблона The Digest 10 КБ, без сборки

<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Digest</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#131313 !important; }
    .d-card { background-color:#1b1b1b !important; }
    .d-ink { color:#f3f3f3 !important; }
    .d-mute { color:#a5a5a5 !important; }
    .d-rule { border-color:#333333 !important; }
    .d-chip { background-color:#10352f !important; color:#7fd8c6 !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f4f3f0;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Шесть вещей, которые стоят вашего вторника. Две — о ценах.</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f4f3f0;">
  <tr><td align="center" style="padding:28px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:6px;">

      <tr><td class="gutter" style="padding:30px 32px 22px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0">
          <tr>
            <td valign="middle" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
              <p class="d-ink" style="margin:0;font-size:20px;line-height:26px;font-weight:800;color:#141414;">The Tuesday Digest</p>
              <p class="d-mute" style="margin:4px 0 0 0;font-size:14px;line-height:20px;color:#6b6b6b;">26 августа 2026 · 6 тем · 9 мин</p>
            </td>
            <td valign="middle" align="right" class="hide-sm">
              <span class="d-chip" style="display:inline-block;background:#e2f4ef;color:#00614f;border-radius:999px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:12px;font-weight:700;padding:6px 12px;">ВЫПУСК 212</span>
            </td>
          </tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:2px solid #141414;font-size:0;line-height:0;">&nbsp;</td></tr></table></td></tr>

      <tr><td class="gutter" style="padding:0 32px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
          <tr>
            <td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
              <img src="/_astro/digest-1.gDWNYw1C.png" width="112" height="112" alt="Абстрактные бирюзовые дуги, пересечённые диагональной полосой" style="width:112px;height:112px;border-radius:4px;">
            </td>
            <td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
              <p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">01 &middot; ЦЕНЫ</p>
              <p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
                <a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">Три компании перешли на оплату по потреблению, две вернулись обратно</a>
              </p>
              <p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Обе вернувшиеся говорят одно и то же: нагрузка на поддержку выросла раньше выручки.</p>
            </td>
          </tr>
        </table>
      </td></tr>
      <tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;">&nbsp;</td></tr></table></td></tr>

      <tr><td class="gutter" style="padding:0 32px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
          <tr>
            <td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
              <img src="/_astro/digest-2.ch7Avmad.png" width="112" height="112" alt="Абстрактные бирюзовые кольца со смещённой точкой фокуса" style="width:112px;height:112px;border-radius:4px;">
            </td>
            <td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
              <p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">02 &middot; ДОСТАВЛЯЕМОСТЬ</p>
              <p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
                <a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">Правилам Gmail для массовых отправителей год. Вот что изменилось на самом деле</a>
              </p>
              <p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Доля жалоб — единственный порог, к которому кто-то вообще приблизился. Остальное было обязательным и раньше.</p>
            </td>
          </tr>
        </table>
      </td></tr>
      <tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;">&nbsp;</td></tr></table></td></tr>

      <tr><td class="gutter" style="padding:0 32px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" style="padding:22px 0;">
          <tr>
            <td class="row-thumb" width="112" valign="top" style="width:112px;padding:0;padding-right:20px;">
              <img src="/_astro/digest-3.DP0eG3wj.png" width="112" height="112" alt="Абстрактные концентрические бирюзовые дуги на молочно-белом фоне" style="width:112px;height:112px;border-radius:4px;">
            </td>
            <td valign="top" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
              <p class="d-mute" style="margin:0 0 6px 0;font-size:12px;line-height:16px;letter-spacing:.06em;text-transform:uppercase;color:#007d6a;">03 &middot; РЕМЕСЛО</p>
              <p style="margin:0 0 6px 0;font-size:18px;line-height:26px;font-weight:700;">
                <a href="https://example.com" class="d-ink" style="color:#141414;text-decoration:none;">Архив рассылки — это поисковый продукт, а не список ссылок</a>
              </p>
              <p class="d-mute" style="margin:0;font-size:16px;line-height:26px;color:#555555;">Девять дней работы, ноль прироста подписчиков, втрое больше времени на сайте. Интересен именно размен.</p>
            </td>
          </tr>
        </table>
      </td></tr>
      <tr><td class="gutter" style="padding:0 32px;"><table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr><td class="d-rule" style="border-top:1px solid #eceae6;font-size:0;line-height:0;">&nbsp;</td></tr></table></td></tr>

      <tr><td class="gutter" style="padding:24px 32px 34px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0 0 14px 0;font-size:15px;line-height:24px;color:#555555;">Ещё три ниже, включая тот про счета, на который отвечают все.</p>
        <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#007d6a" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#007d6a;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Читать все шесть</a>
<!--[if mso]></td></tr></table><![endif]-->
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #eceae6;"></td></tr>
      <tr><td class="gutter" style="padding:20px 32px 30px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">The Tuesday Digest, 9 Fitzroy Street, Manchester M1 2AL<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Отписаться</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Настройки рассылки</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Открыть в браузере</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Следует вашей теме — переключите её в шапке, чтобы увидеть другую.

Посмотреть HTML шаблона The Storefront 12 КБ, без сборки

<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Storefront</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#141210 !important; }
    .d-card { background-color:#1d1a18 !important; }
    .d-ink { color:#f5f2ef !important; }
    .d-mute { color:#aaa39d !important; }
    .d-rule { border-color:#38322d !important; }
    .d-tile { background-color:#241f1c !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#efece8;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Четыре новые работы. Гавань — тираж 40 экземпляров, до конца недели не доживёт.</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#efece8;">
  <tr><td align="center" style="padding:24px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;">

      <tr><td class="gutter" style="padding:22px 24px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>
          <td class="d-ink" style="font-size:17px;line-height:22px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#141414;">Northlight</td>
          <td align="right" class="d-mute hide-sm" style="font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;line-height:20px;color:#6b6b6b;">Осенний выпуск · 04</td>
        </tr></table>
      </td></tr>

      <tr><td style="padding:0;">
        <img src="/_astro/shop-hero.r4mykM_E.png" width="600" height="360" alt="Четыре новые работы Northlight: перекрывающиеся ржаво-красные дуги на тёплом молочно-белом фоне" style="width:100%;height:auto;max-width:600px;">
      </td></tr>

      <tr><td class="gutter" style="padding:30px 40px 0 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <h1 class="h1 d-ink" style="margin:0 0 12px 0;font-size:30px;line-height:38px;font-weight:800;color:#141414;">Четыре работы. По сорок экземпляров.</h1>
        <p class="d-mute" style="margin:0 0 22px 0;font-size:16px;line-height:26px;color:#555555;">Каждая работа этого выпуска отпечатана вручную, пронумерована и исчезает, когда заканчивается. Здесь ничего не допечатывают.</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 40px 26px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Смотреть выпуск</a>
<!--[if mso]></td></tr></table><![endif]-->
      </td></tr>

      <tr><td class="gutter" style="padding:0 32px 8px 32px;">
        <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%">
          <tr>

        <td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
            <tr><td style="padding:0;"><img src="/_astro/shop-print-1.B7Z7OyM8.png" width="272" height="272" alt="Harbour, абстрактная работа в ржаво-красном" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
            <tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
              <p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Harbour</p>
              <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm &middot; жикле на хлопковой бумаге</p>
              <p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
              <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">В корзину</a>
<!--[if mso]></td></tr></table><![endif]-->
            </td></tr>
          </table>
        </td>

        <td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
            <tr><td style="padding:0;"><img src="/_astro/shop-print-2.CMBKLJ38.png" width="272" height="272" alt="Dusk, абстрактная работа в янтарном" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
            <tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
              <p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Dusk</p>
              <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">50 × 70 cm &middot; жикле на хлопковой бумаге</p>
              <p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£85</p>
              <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">В корзину</a>
<!--[if mso]></td></tr></table><![endif]-->
            </td></tr>
          </table>
        </td>
          </tr>
          <tr>

        <td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
            <tr><td style="padding:0;"><img src="/_astro/shop-print-3.C9XLoBz6.png" width="272" height="272" alt="Tide, абстрактная работа в фиолетовом" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
            <tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
              <p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Tide</p>
              <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm &middot; жикле на хлопковой бумаге</p>
              <p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
              <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">В корзину</a>
<!--[if mso]></td></tr></table><![endif]-->
            </td></tr>
          </table>
        </td>

        <td class="stack" width="50%" valign="top" style="width:50%;padding:0 8px 16px 8px;">
          <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-tile" style="background-color:#faf9f7;border-radius:4px;">
            <tr><td style="padding:0;"><img src="/_astro/shop-print-4.jL_6WDwF.png" width="272" height="272" alt="Quarry, абстрактная работа в глубоком зелёном" class="thumb" style="width:100%;height:auto;border-radius:4px 4px 0 0;"></td></tr>
            <tr><td style="padding:16px 16px 18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
              <p class="d-ink" style="margin:0 0 2px 0;font-size:16px;line-height:22px;font-weight:700;color:#141414;">Quarry</p>
              <p class="d-mute" style="margin:0 0 10px 0;font-size:14px;line-height:20px;color:#6b6b6b;">40 × 50 cm &middot; жикле на хлопковой бумаге</p>
              <p style="margin:0 0 14px 0;font-size:18px;line-height:24px;font-weight:700;color:#b8442d;">£65</p>
              <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#b8442d" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#b8442d;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">В корзину</a>
<!--[if mso]></td></tr></table><![endif]-->
            </td></tr>
          </table>
        </td>
          </tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:6px 40px 30px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#faf9f7;border-radius:4px;">
          <tr><td style="padding:16px 20px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
            <p class="d-ink" style="margin:0;font-size:15px;line-height:24px;color:#242424;"><strong>Бесплатная доставка по Великобритании от 75 £.</strong> Варианты рам при оформлении. Возврат в течение 30 дней, без рамы.</p>
          </td></tr>
        </table>
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 40px;border-top:1px solid #ebe7e2;"></td></tr>
      <tr><td class="gutter" style="padding:20px 40px 30px 40px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Northlight Print Co., Unit 4 Wharf Road, Leeds LS10 1JQ<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Отписаться</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Открыть в браузере</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Следует вашей теме — переключите её в шапке, чтобы увидеть другую.

Посмотреть HTML шаблона The Brief 12 КБ, без сборки

<!DOCTYPE html>
<html lang="ru" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="color-scheme" content="light dark">
<meta name="supported-color-schemes" content="light dark">
<title>The Brief</title>
<style>
  body { margin:0; padding:0; width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; }
  table { border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt; }
  img { border:0; outline:none; line-height:100%; -ms-interpolation-mode:bicubic; display:block; }
  a { text-decoration:underline; }
  @media only screen and (max-width:620px) {
    .wrap { width:100% !important; }
    .stack { display:block !important; width:100% !important; max-width:100% !important; }
    .gutter { padding-left:20px !important; padding-right:20px !important; }
    .cta { display:block !important; width:100% !important; box-sizing:border-box !important; text-align:center !important; }
    .h1 { font-size:26px !important; line-height:32px !important; }
    .thumb { width:100% !important; height:auto !important; max-width:100% !important; }
    /* A digest row is the one two-column layout that should NOT stack: the
       thumbnail shrinks and stays beside the headline, because a roundup is
       read by scanning and a full-width decorative image per story destroys
       that. */
    .row-thumb { width:80px !important; }
    .row-thumb img { width:80px !important; height:80px !important; }
    .hide-sm { display:none !important; }
  }
@media (prefers-color-scheme: dark) {

    .d-bg { background-color:#121212 !important; }
    .d-card { background-color:#1a1a1a !important; }
    .d-ink { color:#f2f2f2 !important; }
    .d-mute { color:#a6a6a6 !important; }
    .d-rule { border-color:#333333 !important; }
    .d-tile { background-color:#232323 !important; }
    .d-track { background-color:#2c2c2c !important; }
  }
</style>
</head>
<body class="d-bg" style="margin:0;padding:0;background-color:#f1f0f4;">
<span style="display:none;font-size:1px;color:#fefefe;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">Доля ответов выросла на 4 пункта, и мы до сих пор не знаем почему. Лучшая гипотеза внутри.</span><span style="display:none;font-size:1px;color:#fefefe;">&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;&#8199;&#65279;&#847;</span>
<table role="presentation" cellpadding="0" cellspacing="0" border="0" width="100%" class="d-bg" style="background-color:#f1f0f4;">
  <tr><td align="center" style="padding:26px 12px;">
    <table role="presentation" cellpadding="0" cellspacing="0" border="0" width="600" class="wrap d-card" style="width:600px;max-width:600px;background-color:#ffffff;border-radius:6px;">

      <tr><td style="padding:0;background:#141414;border-radius:6px 6px 0 0;">
        <img src="/_astro/brief-band.CsaAK-Uv.png" width="600" height="150" alt="Шапка Ledger Weekly: фиолетовые дуги на почти чёрном" style="width:100%;height:auto;max-width:600px;border-radius:6px 6px 0 0;">
      </td></tr>

      <tr><td class="gutter" style="padding:26px 32px 18px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p style="margin:0 0 4px 0;font-size:12px;line-height:16px;letter-spacing:.1em;text-transform:uppercase;color:#8f83ff;">Ledger Weekly · Неделя 35</p>
        <h1 class="h1 d-ink" style="margin:0;font-size:26px;line-height:34px;font-weight:800;color:#141414;">Доля ответов сдвинулась, и никто ничего не выпускал</h1>
      </td></tr>

      <tr><td class="gutter" style="padding:0 26px 8px 26px;">
        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0"><tr>

          <td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
              <tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
                <p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">31.4%</p>
                <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Открытия</p>
                <p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">&#9650; 1,2 п.п.</p>
              </td></tr>
            </table>
          </td>

          <td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
              <tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
                <p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">8.9%</p>
                <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Клики</p>
                <p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#b8442d;">&#9660; 0,4 п.п.</p>
              </td></tr>
            </table>
          </td>

          <td class="stack" width="33.33%" valign="top" style="width:33.33%;padding:0 6px;">
            <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-tile" style="background:#f6f5f8;border-radius:4px;">
              <tr><td style="padding:18px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
                <p class="d-ink" style="margin:0 0 2px 0;font-size:30px;line-height:36px;font-weight:800;color:#141414;">6.1%</p>
                <p class="d-mute" style="margin:0 0 6px 0;font-size:13px;line-height:18px;color:#6b6b6b;">Ответы</p>
                <p style="margin:0;font-size:13px;line-height:18px;font-weight:700;color:#007d6a;">&#9650; 4,0 п.п.</p>
              </td></tr>
            </table>
          </td>
        </tr></table>
      </td></tr>

      <tr><td class="gutter" style="padding:20px 32px 0 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-ink" style="margin:0 0 18px 0;font-size:16px;line-height:26px;color:#242424;">В отправке ничего не менялось. Тот же список, тот же четверг, тот же шаблон. Единственная переменная, которую мы находим: в теме письма впервые за одиннадцать выпусков был задан вопрос.</p>
        <p class="d-mute" style="margin:0 0 10px 0;font-size:12px;line-height:16px;letter-spacing:.08em;text-transform:uppercase;color:#6b6b6b;">Ответы по сегментам</p>
      </td></tr>

      <tr><td class="gutter" style="padding:0 32px 22px 32px;">
        <table role="presentation" class="chart" width="100%" cellpadding="0" cellspacing="0" border="0">

          <tr>
            <td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Платные подписчики</td>
            <td valign="middle" style="padding:7px 0;">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
                <tr><td width="100%" style="width:100%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;">&nbsp;</td><td style="font-size:0;line-height:0;">&nbsp;</td></tr>
              </table>
            </td>
            <td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">11.2%</td>
          </tr>

          <tr>
            <td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Бесплатные, активны 90 дней</td>
            <td valign="middle" style="padding:7px 0;">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
                <tr><td width="57%" style="width:57%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;">&nbsp;</td><td style="font-size:0;line-height:0;">&nbsp;</td></tr>
              </table>
            </td>
            <td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">6.4%</td>
          </tr>

          <tr>
            <td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Бесплатные, спящие</td>
            <td valign="middle" style="padding:7px 0;">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
                <tr><td width="16%" style="width:16%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;">&nbsp;</td><td style="font-size:0;line-height:0;">&nbsp;</td></tr>
              </table>
            </td>
            <td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">1.8%</td>
          </tr>

          <tr>
            <td width="150" valign="middle" class="d-ink" style="width:150px;padding:7px 0;padding-right:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:20px;color:#242424;">Пробный период</td>
            <td valign="middle" style="padding:7px 0;">
              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" border="0" class="d-track" style="background:#ebe9f2;border-radius:2px;">
                <tr><td width="44%" style="width:44%;background:#8f83ff;border-radius:2px;font-size:0;line-height:0;height:18px;">&nbsp;</td><td style="font-size:0;line-height:0;">&nbsp;</td></tr>
              </table>
            </td>
            <td width="64" align="right" valign="middle" class="d-mute" style="width:64px;padding:7px 0;padding-left:12px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;line-height:20px;font-weight:700;color:#555555;">4.9%</td>
          </tr>
        </table>
      </td></tr>

      <tr><td class="gutter" style="padding:0 32px 28px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <!--[if mso]><table role="presentation" cellpadding="0" cellspacing="0" border="0"><tr><td bgcolor="#141414" style="border-radius:4px;"><![endif]-->
<a href="https://example.com" class="cta" style="background:#141414;border-radius:4px;color:#ffffff;display:inline-block;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:16px;font-weight:600;line-height:20px;padding:14px 28px;text-align:center;text-decoration:none;mso-padding-alt:0;">Читать полный разбор</a>
<!--[if mso]></td></tr></table><![endif]-->
      </td></tr>

      <tr><td class="gutter d-rule" style="padding:0 32px;border-top:1px solid #e9e7ee;"></td></tr>
      <tr><td class="gutter" style="padding:20px 32px 28px 32px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;">
        <p class="d-mute" style="margin:0;font-size:13px;line-height:20px;color:#8a8a8a;">Ledger Weekly, 2 Cathedral Square, Edinburgh EH1 2QN<br>
        <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Отписаться</a> &middot; <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Открыть в браузере</a></p>
      </td></tr>

    </table>
  </td></tr>
</table>
</body>
</html>

Общие блоки шаблона

Каждый многоразовый email-шаблон должен определять эти блоки до того, как команды начнут писать текст кампаний.

Хедер

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

Рекомендуемые поля хедера:

Логотип или название бренда.
Идентичность отправителя, соответствующая типу письма.
Опциональная навигация для маркетинговых шаблонов.
Безопасный для превью первый текст после прехедера.

Прехедер

Прехедер: это часть шаблона, а не запоздалая мысль. Добавьте редактируемое поле и запасное значение. Не позволяйте юридическому тексту футера или alt-тексту изображений попадать в превью во входящих.

Первый экран или лид-блок

Лид-блок отвечает на один вопрос: зачем это письмо?

Тип письма	Что должен сказать лид-блок
Приветственное	Что произойдёт дальше
Промо	В чём предложение и когда оно заканчивается
Транзакционное	Какой статус изменился
Новостное	Почему этот выпуск важен
Корзина	Что сохранено или какая помощь доступна
Опрос	Какая обратная связь нужна и зачем

Блок призыва к действию

Для большинства шаблонов используйте один основной призыв к действию. Добавляйте дополнительные ссылки только тогда, когда они решают другую полезную задачу, например «посмотреть заказ», «изменить предпочтения» или «связаться с поддержкой».

Блок динамического контента

Динамические блоки эффективны, когда используют точные данные. Они опасны, когда данные устарели, отсутствуют или слишком чувствительны для контекста почтового ящика.

Типичные динамические блоки в e-commerce:

Изображение и название товара.
Сумма корзины или количество сохранённых позиций.
Номер и статус заказа.
Баланс баллов или уровень лояльности.
Рекомендованные товары.
Тайминг повторного заказа.
Магазин или контекст доставки.

Футер

Маркетинговым шаблонам нужны отписка и управление предпочтениями. Транзакционным шаблонам всё равно нужны понятная поддержка и идентичность компании. Используйте футер как компонент, чтобы команды не забывали обязательные элементы.

Приветственные шаблоны

Приветственные шаблоны должны помочь подписчику сделать первый шаг. Сохраняйте фокус в первом письме, а остальное отдайте приветственной серии.

Простое приветствие

Используйте, когда человек подписался на рассылку, создал аккаунт или запросил материал.

Блок	Схема текста
Тема	Добро пожаловать в [Brand]
Прехедер	Начните с предпочтений и первого шага
Лид	«Вы подписаны. Вот что вы будете получать.»
Основной текст	2-3 пункта о ценности, частоте и следующем действии
Призыв к действию	Настроить предпочтения, начать настройку или посмотреть материалы
Футер	Центр предпочтений и отписка

Пример основного текста:

Добро пожаловать в [Brand]. Вы будете получать [тема или польза] [частота]. Начните с выбора предпочтений, чтобы мы присылали самые релевантные материалы.

Приветствие в e-commerce

Используйте, когда покупатель подписался после просмотра каталога, покупки или согласия на получение предложений.

Блок	Схема текста
Тема	Ваши привилегии подписчика готовы
Прехедер	Выберите предпочтения и посмотрите новинки
Лид	«Спасибо, что присоединились. Вот чего можно ожидать.»
Основной текст	Новинки, сохранённые предпочтения, ссылки на лояльность или поддержку
Призыв к действию	Смотреть новинки или настроить предпочтения
Проверка	Убедитесь в корректности скидки, дедлайна и формулировок о лояльности

Не втискивайте скидку в каждое приветственное письмо. Если предложение есть, чётко изложите условия и убедитесь, что оформление заказа соответствует письму.

Приветствие с онбордингом продукта

Используйте для SaaS, приложений, подписок и сервисов.

Блок	Схема текста
Тема	Ваш чек-лист настройки готов
Прехедер	Пройдите первые шаги за несколько минут
Лид	«Ваш аккаунт активен. Начните с этих шагов.»
Основной текст	Шаг 1, шаг 2, шаг 3 с одним призывом к действию
Призыв к действию	Завершить настройку
Проверка	Протестируйте ссылку настройки для новых, частично активных и вернувшихся пользователей

Шаблоны новостных рассылок

Шаблон рассылки должен делать выпуск удобным для беглого чтения. Сам шаблон многоразовый, но тема и лид должны меняться в каждом выпуске.

Редакционный дайджест

Лучше всего подходит для еженедельного или ежемесячного контента.

Блок	Схема текста
Тема	Эта неделя в теме [тема]
Прехедер	Обновления, которые стоят вашего времени
Лид	Заметка редактора в одно предложение
Основной блок	Главная статья или ключевой вывод
Дополнительный блок	3-5 коротких ссылок с пояснением
Призыв к действию	Прочитать полное руководство, посмотреть все обновления или ответить на письмо

Используйте этот формат, когда команда собирает несколько материалов. Держите описания короткими и добавляйте контекст «почему это важно», чтобы письмо не превращалось в простой список ссылок.

Товарная рассылка

Лучше всего подходит для e-commerce, маркетплейсов и продуктовых брендов.

Блок	Схема текста
Тема	Новинки в категории [категория]
Прехедер	Подборка по вашим сохранённым предпочтениям
Лид	Коллекция или тема
Товарная сетка	3-6 товаров, у каждого изображение, название, цена, призыв к действию
Блок поддержки	Помощь с размерами, доставкой или возвратами
Призыв к действию	Смотреть коллекцию

Тщательно проверяйте товарные сетки. Перед отправкой подтвердите наличие товаров, ссылки на изображения, цены, варианты и параметры отслеживания.

Личная рассылка

Лучше всего подходит для основателей, авторов, консультантов и экспертов.

Блок	Схема текста
Тема	Конкретное наблюдение или вопрос
Прехедер	Практический вывод внутри
Лид	Личная заметка, связанная с темой
Основной текст	Одна полезная мысль, пример или урок
Ссылки	Рекомендации по материалам, инструментам или ресурсам
Призыв к действию	Ответить, читать дальше или назначить разговор

Шаблон должен оставаться простым. Ценность создают голос и мысль, а не плотная вёрстка.

Промо-шаблоны

Промо-шаблоны должны делать механику предложения очевидной. Неоднозначность порождает обращения в поддержку и разочарованные клики.

Предложение с ограниченным сроком

Блок	Схема текста
Тема	[Предложение] заканчивается [день]
Прехедер	Подходящие товары и условия внутри
Лид	Предложение, дедлайн и аудитория
Товарный блок	Избранные товары или категории
Блок условий	Исключения, дедлайн, промокод, регион, канал
Призыв к действию	Смотреть предложение

Не используйте формулировку «последний шанс», если это на самом деле не финальное напоминание. Указывайте реальные дедлайны с часовым поясом, когда время имеет значение.

Запуск продукта

Блок	Схема текста
Тема	Представляем [товар или коллекцию]
Прехедер	Посмотрите, что нового и кому это подойдёт
Лид	Обещание продукта
Основной текст	3 преимущества, доказательства, изображения товара, наличие
Призыв к действию	Изучить новинку
Проверка	Подтвердите остатки, время запуска, варианты и посадочную страницу

Шаблоны запуска должны давать контекст: что изменилось, для кого это и почему это важно именно сейчас.

Предложение по лояльности или для VIP

Блок	Схема текста
Тема	Ваш [уровень или бонус] готов
Прехедер	Посмотрите подходящие товары и детали баланса
Лид	Статус вознаграждения
Основной текст	Баланс, вознаграждение, срок действия, как использовать
Призыв к действию	Использовать бонус
Проверка	Проверьте данные лояльности и правила списания

Упоминайте баланс баллов или уровень лояльности только тогда, когда данные точны. Добавьте запасную версию для контактов без баланса.

Транзакционные шаблоны

Транзакционным шаблонам нужна прежде всего ясность. Они не должны выглядеть как размытая реклама.

Подтверждение заказа

Блок	Схема текста
Тема	Заказ подтверждён: [номер заказа]
Прехедер	Мы пришлём трек-номер, когда заказ отправится
Лид	Статус подтверждения
Детали	Номер заказа, состав, адрес доставки, сводка по оплате
Призыв к действию	Посмотреть заказ
Поддержка	Связаться с поддержкой или изменить данные, если это разрешено

Держите рекламные кросс-продажи на втором плане. Главная задача клиента: убедиться, что заказ оформлен верно.

Уведомление о доставке

Блок	Схема текста
Тема	Ваш заказ в пути
Прехедер	Отследите доставку и посмотрите актуальный срок
Лид	Статус отправления
Детали	Служба доставки, трек-номер, ожидаемая дата, состав
Призыв к действию	Отследить посылку
Поддержка	Помощь с доставкой и примечания к адресу

Если данных отслеживания нет, используйте запасной вариант, который не показывает пустые поля.

Уведомление об аккаунте или безопасности

Блок	Схема текста
Тема	Ваш пароль был изменён
Прехедер	Если это были не вы, действуйте сейчас
Лид	Что изменилось
Детали	Время, аккаунт, следующий шаг
Призыв к действию	Защитить аккаунт
Поддержка	Связаться с поддержкой или проверить настройки безопасности

Не добавляйте рекламный контент в шаблоны безопасности. Сообщение должно читаться однозначно.

Шаблоны для корзины, просмотра и возврата покупателей в e-commerce

Шаблоны возврата зависят от качества данных. Если данные о товарах, остатках или ценах ненадёжны, используйте более мягкую версию на уровне категории.

Брошенная корзина

Блок	Схема текста
Тема	Ваша корзина сохранена
Прехедер	Отзывы и оформление заказа в одно касание
Лид	Напоминание о сохранённой корзине
Товарный блок	Изображение, название, вариант, цена, количество
Блок поддержки	Помощь с размером, возвратом, оплатой или доставкой
Призыв к действию	Вернуться в корзину
Проверка	Убедитесь в наличии товаров и работоспособности ссылки на оформление заказа

Брошенный просмотр

Блок	Схема текста
Тема	Ещё подборки в категории [категория]
Прехедер	На основе вашего недавнего визита в магазин
Лид	Полезная рекомендация
Товарный блок	Просмотренный товар или связанная категория
Призыв к действию	Продолжить просмотр
Проверка	Не персонализируйте чувствительное поведение при просмотре слишком навязчиво

Возврат товара в наличие

Блок	Схема текста
Тема	Снова в наличии: [товар]
Прехедер	Товар, о котором вы спрашивали, снова доступен
Лид	Обновление о наличии
Товарный блок	Товар, вариант, заметка об ограниченном количестве
Призыв к действию	Посмотреть товар
Проверка	Подтвердите остатки до того, как сценарий отправит письмо

Послепродажные шаблоны

Послепродажные письма должны помочь клиенту получить пользу, прежде чем что-то просить взамен.

Обучение работе с товаром

Блок	Схема текста
Тема	Как начать пользоваться товаром [товар]
Прехедер	Настройка, уход и частые вопросы
Лид	Помогите клиенту использовать покупку
Основной текст	Шаги настройки, советы по уходу, ссылки на поддержку
Призыв к действию	Читать руководство

Запрос отзыва

Блок	Схема текста
Тема	Как вам [товар]?
Прехедер	Поделитесь мнением, когда успеете попользоваться
Лид	Просьба оставить отзыв
Основной текст	Чем помогает обратная связь, ссылка на отзыв, условия поощрения
Призыв к действию	Оставить отзыв
Проверка	Запускайте только после доставки и разумного срока использования

Повторный заказ

Блок	Схема текста
Тема	Пора заказать [товар] снова?
Прехедер	На основе времени вашей предыдущей покупки
Лид	Полезное напоминание о повторном заказе
Основной текст	Товар, количество, вариант подписки, поддержка
Призыв к действию	Заказать снова
Проверка	Исключайте тех, кто уже сделал повторный заказ

Реактивационные шаблоны

Реактивационные шаблоны должны давать подписчикам контроль. Многим неактивным подписчикам нужна не более громкая скидка, а другой контент или меньше писем.

Сброс предпочтений

Блок	Схема текста
Тема	Выберите, что вы получаете
Прехедер	Выберите темы, каналы и частоту
Лид	Просьба обновить предпочтения
Основной текст	Варианты тем, варианты частоты, снижение частоты
Призыв к действию	Обновить предпочтения

Возвратное предложение

Блок	Схема текста
Тема	Всё ещё интересна категория [категория]?
Прехедер	Настройте предпочтения или посмотрите новинки
Лид	Проверка релевантности
Основной текст	Новые товары, изменившаяся ценность, опциональное поощрение
Призыв к действию	Посмотреть новинки
Проверка	Исключайте недавних покупателей, недавние жалобы и отписавшиеся контакты

Уведомление о завершении рассылки

Блок	Схема текста
Тема	Продолжать присылать материалы по теме [тема]?
Прехедер	Подтвердите интерес или поставьте письма на паузу
Лид	Понятный выбор
Основной текст	Почему подписчик получает это письмо, варианты действий
Призыв к действию	Оставить подписку
Дополнительно	Отписаться или поставить на паузу

Шаблоны анонсов

Анонсы работают, когда отвечают на вопросы: что изменилось, почему это важно и что делать дальше.

Обновление продукта

Блок	Схема текста
Тема	Новое: [функция или интеграция]
Прехедер	Что изменилось и как этим пользоваться
Лид	Краткое описание функции
Основной текст	Сценарий использования, доступность, шаги настройки
Призыв к действию	Попробовать функцию

Изменение правил или условий

Блок	Схема текста
Тема	Важное обновление документа [документ]
Прехедер	Посмотрите, что меняется [дата]
Лид	Что изменилось
Основной текст	Краткое изложение, дата вступления в силу, ссылка на полный текст
Призыв к действию	Изучить обновление
Проверка	Юридическая проверка, локализация и точность дат

Технические работы или инцидент

Блок	Схема текста
Тема	Плановые технические работы [дата]
Прехедер	Ожидаемое влияние и сроки
Лид	Статус и сроки
Основной текст	Затронутые сервисы, ожидаемая длительность, путь к поддержке
Призыв к действию	Посмотреть страницу статуса

Шаблоны опросов и обратной связи

Шаблоны опросов должны сохранять просьбу небольшой и объяснять, зачем это нужно.

Опрос NPS или удовлетворённости

Блок	Схема текста
Тема	Как прошёл ваш опыт?
Прехедер	Один быстрый вопрос поможет нам стать лучше
Лид	Просьба об обратной связи
Основной текст	Вопрос с оценкой, опциональное поле для комментария
Призыв к действию	Оставить отзыв
Проверка	Не опрашивайте одного и того же клиента слишком часто

Обратная связь по продукту

Блок	Схема текста
Тема	Помогите развивать продукт [продукт]
Прехедер	Расскажите, что улучшить дальше
Лид	Просьба, связанная с конкретным продуктом
Основной текст	Тема, ожидаемое время, заметка о конфиденциальности
Призыв к действию	Поделиться мнением

Правила адаптивной вёрстки

Почтовые клиенты сильно различаются. Шаблоны должны быть скучно устойчивыми.

Используйте эти базовые правила:

Проектируйте mobile-first с запасным вариантом в одну колонку.
Делайте так, чтобы основное сообщение было видно без изображений.
Используйте описательный alt-текст для важных изображений.
Делайте кнопки достаточно большими для удобного нажатия.
Избегайте мелкого серого текста для важных условий.
Используйте живой текст для ключевых сообщений вместо текста внутри изображений.
Сохраняйте читаемый контраст в тёмной теме.
Тестируйте Gmail, Apple Mail, Outlook и мобильные клиенты, преобладающие в вашей базе.
Включайте текстовую версию.

Доступность и юридические требования

Шаблоны должны поддерживать доступность и требования законодательства с самого начала.

Добавьте эти многоразовые проверки:

Логичный порядок заголовков.
Описательный текст ссылок.
Alt-текст для смысловых изображений.
Достаточный цветовой контраст.
Никаких призывов к действию только в виде картинки.
Понятные ссылки отписки и управления предпочтениями в маркетинговых письмах.
Точная идентичность отправителя.
Физический почтовый адрес там, где это требуется.
Тема и прехедер без введения в заблуждение.
Локализованный юридический текст футера для неанглоязычных версий.

Требования FTC по CAN-SPAM делают вводящие в заблуждение темы писем и обязательную обработку отписок не просто вопросом дизайна. Встраивайте соответствие требованиям в компоненты шаблона, чтобы авторам кампаний не приходилось помнить об этом вручную.

Динамические шаблоны с Tajo и Brevo

Tajo помогает командам на Shopify использовать реальные данные магазина внутри шаблонов Brevo. Это значит, что шаблон может подстраиваться под контекст жизненного цикла без ручных выгрузок.

Полезные динамические поля шаблона:

Сценарий	Динамические поля
Возврат корзины	Клиент, содержимое корзины, ссылка на оформление заказа, изображение товара, вариант
Брошенный просмотр	Просмотренный товар, категория, похожие товары
Послепродажная коммуникация	Заказ, статус доставки, товар, инструкция по уходу
Лояльность	Баллы, уровень, право на вознаграждение
Повторный заказ	Товар, дата последней покупки, ожидаемое окно повторного заказа
Возврат в наличие	Товар, вариант, статус остатков
Возврат клиента	Категория последней покупки, предпочтения, статус вовлечённости

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

Чек-лист проверки шаблона

Используйте его перед утверждением нового шаблона или крупного изменения существующего:

Итоговая рекомендация

Стройте email-шаблоны как продуктовую систему. Начните с задач жизненного цикла, определите многоразовые блоки, аккуратно подключите динамические данные и сделайте проверку качества частью шаблона, а не финальной суетой перед отправкой.

Для команд в e-commerce, использующих Shopify, Brevo и Tajo, самые сильные шаблоны те, что связаны с реальным контекстом клиента: корзина сохранена, товар просмотрен, заказ отправлен, вознаграждение готово, пора заказать снова или нужно обновить предпочтения. Такой контекст делает шаблоны полезными, не превращая их в хрупкие или чрезмерно персонализированные конструкции.

Часто Задаваемые Вопросы

Что такое email-шаблон?

Email-шаблон: это многоразовая структура для кампании или автоматического сообщения. Обычно он задаёт макет, контентные блоки, призыв к действию, поля персонализации, футер, элементы юридического соответствия и правила проверки.

Какие email-шаблоны бизнесу стоит создать в первую очередь?

Начните с приветственного, новостного, промо, транзакционного шаблонов, а также шаблонов брошенной корзины, послепродажной коммуникации, реактивации и центра предпочтений. Командам в e-commerce стоит добавить шаблоны брошенного просмотра, программы лояльности, повторного заказа и возврата товара в наличие.

Что делает email-шаблон многоразовым?

В многоразовых шаблонах фиксированная структура отделена от изменяемого контента. Общий хедер, футер, типографика, отступы, товарные блоки, схемы призывов к действию и юридические блоки остаются одинаковыми, а меняются только текст и данные конкретной кампании.

Как проверять email-шаблон перед отправкой?

Проверьте тему письма, прехедер, отправителя, ссылки, запасные значения персонализации, отображение на мобильных, тёмную тему, alt-текст изображений, параметры отслеживания, ссылку отписки, физический адрес и данные, которые питают динамические блоки.

Помогает ли Tajo с email-шаблонами для e-commerce?

Да. Tajo синхронизирует данные Shopify о клиентах, заказах, товарах и событиях в Brevo, поэтому шаблоны получают точный контекст жизненного цикла для сценариев возврата корзины, послепродажной коммуникации, лояльности, сегментации и повторных заказов.

Какие шаблоны писем создать первыми?

Сначала создайте приветственный, новостной, промо и транзакционный шаблоны, а также шаблоны брошенной корзины, послепродажной коммуникации, реактивации и центра предпочтений. Командам в e-commerce также нужны шаблоны брошенного просмотра, повторного заказа, программы лояльности и возврата товара в наличие.

Нужны ли ещё HTML-шаблоны писем?

Да. Большинству команд многоразовые HTML-шаблоны нужны ради единства бренда, адаптивной вёрстки, отслеживания, динамических блоков и контроля юридических требований. При этом у каждого важного шаблона должна оставаться текстовая версия.

Можно ли использовать один шаблон для всех кампаний?

Нет. Используйте общую дизайн-систему, но создавайте семейства шаблонов под конкретные задачи. Уведомление о доставке, флеш-распродажа, дайджест и сообщение об изменении правил не должны иметь одинаковую структуру контента.

Как часто нужно обновлять шаблоны?

Пересматривайте базовые шаблоны после крупных изменений бренда, продукта, юридических требований или платформы. Также возвращайтесь к ним, когда падают показатели, когда обращения в поддержку показывают непонимание или когда меняются поля динамических данных.

Чем шаблон отличается от кампании?

Шаблон: это многоразовая структура. Кампания: это конкретная отправка, которая наполняет структуру аудиторией, предложением, таймингом, текстом, товарными данными, ссылками и отслеживанием.

Как подготовить шаблоны к локализации?

Держите текстовые строки отдельно от макета, избегайте текста внутри изображений, закладывайте запас на разную длину строк, локализуйте юридический футер и проверяйте письма для языков с письмом справа налево или нелатинскими алфавитами, если это применимо.

Можно ли переиспользовать эти шаблоны в Brevo?

Да. Используйте эти структуры как брифы кампаний или требования к шаблонам в Brevo, а затем подключите динамические поля из данных о клиентах и заказах. С Tajo данные Shopify могут питать сценарии Brevo для шаблонов жизненного цикла.

Поделиться этой статьёй:

Назад ко всем статьям

business-tools

Руководство по email-шаблонам: сценарии жизненного цикла, макеты, блоки текста и чек-лист проверки (2026)

Система email-шаблонов

Четыре макета в работе

Общие блоки шаблона

Хедер

Прехедер

Первый экран или лид-блок

Блок призыва к действию

Блок динамического контента

Футер

Приветственные шаблоны

Простое приветствие

Приветствие в e-commerce

Приветствие с онбордингом продукта

Шаблоны новостных рассылок

Редакционный дайджест

Товарная рассылка

Личная рассылка

Промо-шаблоны

Предложение с ограниченным сроком

Запуск продукта

Предложение по лояльности или для VIP

Транзакционные шаблоны

Подтверждение заказа

Уведомление о доставке

Уведомление об аккаунте или безопасности

Шаблоны для корзины, просмотра и возврата покупателей в e-commerce

Брошенная корзина

Брошенный просмотр

Возврат товара в наличие

Послепродажные шаблоны

Обучение работе с товаром

Запрос отзыва

Повторный заказ

Реактивационные шаблоны

Сброс предпочтений

Возвратное предложение

Уведомление о завершении рассылки

Шаблоны анонсов

Обновление продукта

Изменение правил или условий

Технические работы или инцидент

Шаблоны опросов и обратной связи

Опрос NPS или удовлетворённости

Обратная связь по продукту

Правила адаптивной вёрстки

Доступность и юридические требования

Динамические шаблоны с Tajo и Brevo

Чек-лист проверки шаблона

Итоговая рекомендация

Похожие статьи

Часто Задаваемые Вопросы

Подайте заявку на ранний доступ

Спасибо, подписка оформлена.

Похожие статьи

Экспорт и миграция данных Brevo: как перенести данные в систему и из неё

GDPR и email-маркетинг: практическое руководство по соответствию

Страница отписки: как правильно сделать отказ в один клик

Win-back кампания в email: как вернуть ушедших клиентов в 2026 году

CRM с email-маркетингом: зачем нужны оба инструмента (и как их связать)

Email-маркетинг для начинающих: полное пошаговое руководство (2026)