На этой странице
Создавать рассылку с нуля — задача не для слабонервных. Вы смотрите на пустой редактор, не зная, как структурировать контент, какой макет использовать и как сделать всё профессионально, не тратя часы на дизайн.
Шаблоны рассылок решают эту проблему. Они обеспечивают проверенную структуру и профессиональный дизайн, который можно настроить под собственный контент, брендинг и изображения. Лучшие шаблоны адаптированы для мобильных, совместимы с разными почтовыми клиентами и спроектированы с учётом конверсии.
В этом руководстве рассматриваются 15 бесплатных дизайнов шаблонов рассылок, организованных по отраслям и сценариям использования. Для каждого типа шаблона объясняются принципы дизайна, рекомендуемая структура контента и советы по настройке.
Что делает шаблон рассылки эффективным
Прежде чем перейти к конкретным шаблонам, важно понять, что отличает хороший шаблон от отличного.
Технические требования
| Требование | Почему это важно |
|---|---|
| Адаптивность для мобильных | 60%+ писем открывают на мобильных устройствах |
| Кросс-клиентская совместимость | Правильно отображается в Gmail, Outlook, Apple Mail и др. |
| Быстрая загрузка | Изображения до 1 МБ всего; шаблон до 100 КБ |
| Поддержка тёмного режима | Растущее распространение в почтовых клиентах |
| Доступность | Совместимость со скринридерами, достаточный контраст |
| Веб-безопасные шрифты | Последовательное отображение на разных платформах |
Принципы дизайна
Визуальная иерархия. Наиболее важный контент должен быть наиболее заметным. Используйте размер, цвет и позиционирование для направления взгляда читателя сверху вниз.
Просматриваемый макет. Большинство получателей писем просматривают, а не читают. Используйте заголовки, маркеры, короткие абзацы и чёткие разделители для удобства восприятия.
Последовательный брендинг. Рассылку должны узнавать мгновенно. Используйте цвета, логотип и типографику бренда последовательно в каждом выпуске.
Одна колонка на мобильном. Многоколоночные макеты могут сломаться на мобильных устройствах. Используйте одноколоночный макет или убедитесь, что многоколоночные разделы правильно складываются на маленьких экранах.
Четыре макета в работе
Каждая панель ниже — это настоящий HTML письма в рамке реальной ширины. Уменьшите ширину до 375 px и посмотрите, как колонки складываются друг под друга.
Следует вашей теме — переключите её в шапке, чтобы увидеть другую.
Посмотреть HTML шаблона The Letter
<!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;"> ͏ ͏ ͏ ͏ ͏</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;">Читать весь выпуск →</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> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Открыть в браузере</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Следует вашей теме — переключите её в шапке, чтобы увидеть другую.
Посмотреть HTML шаблона The Digest
<!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;"> ͏ ͏ ͏ ͏ ͏</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;"> </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 · ЦЕНЫ</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;"> </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 · ДОСТАВЛЯЕМОСТЬ</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;"> </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 · РЕМЕСЛО</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;"> </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> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Настройки рассылки</a> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Открыть в браузере</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Следует вашей теме — переключите её в шапке, чтобы увидеть другую.
Посмотреть HTML шаблона The Storefront
<!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;"> ͏ ͏ ͏ ͏ ͏</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 · жикле на хлопковой бумаге</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 · жикле на хлопковой бумаге</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 · жикле на хлопковой бумаге</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 · жикле на хлопковой бумаге</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> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Открыть в браузере</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> Следует вашей теме — переключите её в шапке, чтобы увидеть другую.
Посмотреть HTML шаблона The Brief
<!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;"> ͏ ͏ ͏ ͏ ͏</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;">▲ 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;">▼ 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;">▲ 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;"> </td><td style="font-size:0;line-height:0;"> </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;"> </td><td style="font-size:0;line-height:0;"> </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;"> </td><td style="font-size:0;line-height:0;"> </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;"> </td><td style="font-size:0;line-height:0;"> </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> · <a href="https://example.com" class="d-mute" style="color:#8a8a8a;">Открыть в браузере</a></p>
</td></tr>
</table>
</td></tr>
</table>
</body>
</html> 15 бесплатных дизайнов шаблонов рассылок
1. Классическое корпоративное обновление
Лучше всего для: B2B компаний, агентств, профессиональных услуг
Этот шаблон следует понятной структуре:
- Логотип компании и шапка
- Краткое редакционное вступление (2-3 предложения)
- 3-4 контентных блока с заголовками, короткими описаниями и CTA
- Подвал со ссылками на соцсети и отпиской
Примечания по дизайну: Чистый, профессиональный макет с достаточным белым пространством. Используйте основной цвет бренда для заголовков и кнопок CTA. Ограничьте изображения одним hero-изображением и маленькими миниатюрами для контентных блоков.
Структура контента:
- Личное приветствие от члена команды
- Избранная статья или объявление
- 2-3 второстепенных элемента контента
- Раздел быстрых ссылок или ресурсов
- Подвал с контактной информацией
2. Витрина товаров интернет-магазина
Лучше всего для: интернет-магазинов, ритейл-брендов, DTC компаний
Товарно-ориентированный макет, разработанный для стимулирования продаж:
- Hero-баннер с избранным товаром или акцией
- Товарная сетка (2x2 или 3x1) с изображениями, названиями, ценами и кнопками «Купить»
- Раздел отзывов клиентов
- Второстепенная акция или новинки
Примечания по дизайну: Крупные, качественные фотографии товаров обязательны. Используйте сеточный макет, который складывается в одну колонку на мобильном. Цена и кнопки CTA должны быть видны сразу.
Для e-commerce брендов, использующих Tajo с Brevo, эти шаблоны можно динамически заполнять персонализированными рекомендациями товаров на основе истории просмотров и покупок каждого подписчика. Смотрите наше руководство по email-маркетингу для электронной коммерции для стратегий персонализации.
3. Контентный дайджест
Лучше всего для: медиакомпаний, создателей контента, изданий
Контентно-насыщенный шаблон для демонстрации нескольких статей:
- Избранная статья с крупным изображением и анонсом
- Список из 5-8 дополнительных статей с заголовками и однострочными описаниями
- Метки категорий для каждой статьи
- Выделение «Самое популярное» или «Выбор редактора»
Примечания по дизайну: Приоритизируйте читаемость с чистой типографикой и достаточным межстрочным интервалом. Используйте последовательное форматирование для каждой записи, чтобы читатели могли быстро просматривать дайджест.
4. Личная рассылка
Лучше всего для: предпринимателей, лидеров мнений, консультантов
Минималистичный, текстовый шаблон, ощущающийся как личное письмо:
- Фотография и имя автора
- Длинный письменный контент (500-800 слов)
- Минимум изображений и дизайнерских элементов
- Простые текстовые ссылки вместо стилизованных кнопок
- Личное завершение
Примечания по дизайну: Этот шаблон выигрывает за счёт простоты. Используйте одноколоночный макет, стандартные шрифты и минималистичное оформление. Цель — ощущение личного письма, а не маркетинговой коммуникации.
5. Обновление SaaS-продукта
Лучше всего для: программных компаний, технологических стартапов, инструментов для разработчиков
Функционально-ориентированный макет для коммуникации об обновлениях продукта:
- Шапка с номером версии или названием обновления
- Демонстрация функции со скриншотом или GIF
- Маркированный список улучшений и исправлений
- Анонс «Что будет дальше»
- CTA для тестирования новых функций
Примечания по дизайну: Включайте скриншоты или изображения интерфейса, чтобы показывать, а не рассказывать. Используйте чистый, современный дизайн, отражающий эстетику вашего программного обеспечения.
6. Приглашение на мероприятие
Лучше всего для: организаторов мероприятий, конференций, вебинаров
Однозадачный шаблон, ориентированный на стимулирование регистраций:
- Название мероприятия и визуальный брендинг
- Дата, время и место (или виртуальная платформа)
- Анонсы спикеров с фотографиями и биографиями
- Обзор программы
- Заметный CTA для регистрации
- Срочность через раннюю птицу или ограниченные места
Примечания по дизайну: Кнопка CTA должна появляться не менее двух раз — один раз в первом экране и один раз после деталей. При необходимости используйте таймеры обратного отсчёта или язык срочности.
7. Еженедельный дайджест
Лучше всего для: отраслевых рассылок, кураторских издателей контента
Структурированный шаблон для курирования контента из интернета:
- Заметка редактора (2-3 предложения)
- 5-10 кураторских ссылок с указанием источника, заголовком и кратким комментарием
- Пронумерованные или категоризированные разделы
- Раздел «Спонсор» или «Избранное» при монетизации
- Опрос читателей или приглашение к обратной связи
Примечания по дизайну: Чёткая нумерация и последовательное форматирование каждого кураторского элемента помогают читателям ориентироваться. Используйте тонкие рамки или фоновые цвета для разделения разделов.
8. Отчёт о влиянии некоммерческой организации
Лучше всего для: благотворительных организаций, НКО, социальных предприятий
Шаблон для обмена историями влияния и стимулирования пожертвований:
- Заголовок со статистикой влияния («Мы помогли 1 000 семей в этом месяце»)
- История с фотографией (один благополучатель или проект)
- Индикатор прогресса к цели кампании
- Возможности для волонтёрства или мероприятия
- Кнопка CTA для пожертвования
Примечания по дизайну: Выносите на первый план эмоциональное воздействие через фотографию и реальные истории. Используйте визуализацию данных (индикаторы прогресса, статистику) для демонстрации конкретных результатов.
9. Сезонная акция
Лучше всего для: ритейла, гостиничного бизнеса, сезонных бизнесов
Визуально богатый шаблон для праздничных и сезонных кампаний:
- Полноширинное сезонное hero-изображение
- Акционное предложение с чёткими условиями
- Подборка товаров или подарочный гид
- Дедлайн или элемент обратного отсчёта
- Несколько CTA по всему письму
Примечания по дизайну: Яркие цвета и сезонные изображения создают срочность. Убедитесь, что акционное предложение сразу понятно без прокрутки. Тщательно тестируйте шаблон, так как письма с большим количеством изображений могут иметь проблемы с отображением.
10. Серия образовательного контента
Лучше всего для: онлайн-курсов, коучинговых бизнесов, образовательных учреждений
Структурированный шаблон для доставки образовательного контента:
- Номер урока и название серии
- Ключевой вывод или цель обучения
- Основной контент с чёткими разделами
- Практическое задание или задание для выполнения
- Индикатор прогресса (Урок 3 из 8)
- CTA на следующий урок или связанный ресурс
Примечания по дизайну: Используйте последовательную структуру для всех уроков серии, чтобы подписчики знали, чего ожидать. Включайте индикатор прогресса для мотивации к завершению.
11. Объявление о недвижимости
Лучше всего для: агентов по недвижимости, управляющих компаний
Шаблон, ориентированный на недвижимость, с богатыми визуальными элементами:
- Избранный объект с галереей крупных фотографий
- Характеристики объекта (цена, спальни, ванные, площадь)
- 3-4 дополнительных объекта в сеточном формате
- Обзор рынка или анонс района
- Контактная информация агента с фотографией
Примечания по дизайну: Качественные фотографии объектов необходимы. Включайте ключевые детали (цена, площадь, местоположение), видимые сразу без перехода по ссылке.
12. Ресторан или общепит
Лучше всего для: ресторанов, доставки еды, кейтеринга
Визуально аппетитный шаблон:
- Hero-изображение с избранным блюдом или пунктом меню
- Недельные специальные предложения или новые позиции меню
- CTA для бронирования или заказа
- Выделение отзыва клиента
- Информация о расположении и часах работы
Примечания по дизайну: Фотографии еды должны быть профессиональными и аппетитными. Используйте тёплые цвета и щедрые отступы. Основной CTA (заказ, бронирование, визит) должен быть невозможно пропустить.
13. Фитнес и велнес
Лучше всего для: тренажёрных залов, персональных тренеров, велнес-брендов
Энергичный шаблон, ориентированный на мотивацию и действие:
- Мотивирующее hero-изображение
- Тренировка недели или велнес-совет
- Расписание занятий или предстоящие события
- История участника или трансформация
- CTA для бронирования или членства
Примечания по дизайну: Используйте фотографии в движении и жирную типографику. Сохраняйте мотивирующий тон, не будучи навязчивым.
14. Портфолио агентства
Лучше всего для: креативных агентств, фрилансеров, дизайн-студий
Шаблон в стиле портфолио для демонстрации последних работ:
- Избранный проект с крупными визуальными материалами и кратким кейсом
- 2-3 дополнительных последних проекта в сетке
- Отзыв клиента
- Обновления о команде или найме
- CTA для связи с потенциальными клиентами
Примечания по дизайну: Пусть работы говорят сами за себя через крупные, качественные визуальные материалы. Минимизируйте текст и концентрируйтесь на результатах и достижениях, а не на описании процесса.
15. Сообщественная рассылка
Лучше всего для: членских организаций, онлайн-сообществ, местных бизнесов
Шаблон, ориентированный на сообщество, поощряющий вовлечённость:
- Новости и объявления сообщества
- Анонс участника или интервью
- Календарь предстоящих событий
- Темы для обсуждения или опрос
- Раздел пользовательского контента
- CTA «Присоединиться/Участвовать»
Примечания по дизайну: Включайте фотографии и имена участников (с разрешения) для укрепления связи сообщества. Используйте тёплый, инклюзивный тон и поощряйте ответы и участие.
Где найти бесплатные шаблоны рассылок
Платформы email-маркетинга
Большинство платформ email-маркетинга включают бесплатные шаблоны в свои тарифы:
| Платформа | Бесплатных шаблонов | Уровень настройки | Доступен бесплатный тариф |
|---|---|---|---|
| Brevo | 60+ | Drag-and-drop редактор | Да |
| Mailchimp | 100+ | Drag-and-drop редактор | Да (ограниченно) |
| HubSpot | 45+ | Drag-and-drop редактор | Да |
| MailerLite | 80+ | Drag-and-drop редактор | Да |
| Constant Contact | 200+ | Drag-and-drop редактор | Нет |
Библиотека шаблонов Brevo особенно хорошо подходит для e-commerce бизнесов: шаблоны разработаны для анонсов товаров, подтверждений заказов и рекламных кампаний с интеграцией данных магазина через Tajo.
Сторонние источники шаблонов
- Litmus Community: бесплатные, протестированные шаблоны с данными кросс-клиентской совместимости
- Really Good Emails: кураторская галерея реальных примеров рассылок для вдохновения
- Stripo: бесплатный конструктор email-шаблонов с 1 500+ дизайнами
- BeeFree: drag-and-drop редактор с 200+ бесплатными адаптивными шаблонами
- MJML: open-source фреймворк для создания адаптивных email-шаблонов с помощью кода
Настройка шаблонов под ваш бренд
Обязательные настройки
Каждый шаблон требует следующих изменений перед использованием:
- Логотип и корпоративные цвета: замените дефолтный брендинг своим
- Типографика: используйте шрифты бренда (с веб-безопасными запасными вариантами)
- Информация в подвале: обновите данными вашего бизнеса и юридическими требованиями
- Ссылки на соцсети: добавьте реальные профили
- Ссылка на отписку: обязательна по закону в каждом маркетинговом письме
Расширенные настройки
Когда вы освоите шаблон, рассмотрите следующие улучшения:
- Динамические блоки контента: показывайте разный контент разным сегментам подписчиков
- Токены персонализации: вставляйте имена, местоположения или предпочтения подписчиков
- Условные разделы: показывайте или скрывайте разделы на основе атрибутов подписчика
- Интерактивные элементы: добавляйте опросы, анкеты или интерактивность на базе AMP
Лучшие практики шаблонов рассылок
Тестируйте перед отправкой. Минимально отправляйте тестовые письма в Gmail, Outlook, Apple Mail и Yahoo. Используйте инструменты, такие как Litmus или Email on Acid, для всестороннего кросс-клиентского тестирования.
Оптимизируйте изображения. Сжимайте все изображения для ускорения загрузки. Добавляйте альтернативный текст к каждому изображению на случай блокировки почтовым клиентом.
Держите размер файла небольшим. Общий размер письма (HTML + изображения) должен оставаться в пределах 100 КБ для HTML и 1 МБ для всего контента. Большие письма рискуют быть обрезанными Gmail или заблокированными спам-фильтрами.
Сохраняйте последовательность. Используйте одну и ту же структуру шаблона для каждого выпуска рассылки. Подписчики вырабатывают привычки чтения вокруг знакомых макетов, и последовательность строит доверие.
Включайте простой текст. Всегда предоставляйте простую текстовую альтернативу для почтовых клиентов, не отображающих HTML. Большинство платформ генерирует это автоматически, но проверьте читаемость.
Регулярно тестируйте доставляемость email. Красивый шаблон бесполезен, если попадает в спам. Мониторьте репутацию отправителя и аутентификацию (SPF, DKIM, DMARC) наряду с дизайнерскими усилиями.
Начало работы
Выберите шаблон, соответствующий вашей отрасли и стилю контента. Начните с минимальных настроек — корпоративных цветов, логотипа и подвала — и отправьте первый выпуск. По мере того как вы узнаёте, что резонирует с аудиторией через данные об open rate и кликах, совершенствуйте дизайн и структуру контента.
Лучший шаблон рассылки — не самый визуально впечатляющий. Это тот, который ваша аудитория читает последовательно, по которому регулярно переходит по ссылкам и которого ждёт с нетерпением.
Часто Задаваемые Вопросы
Где найти бесплатные шаблоны рассылок?
Бесплатные шаблоны рассылок доступны через платформы email-маркетинга: Brevo, Mailchimp, HubSpot, а также на маркетплейсах шаблонов Litmus Community, Email on Acid и Really Good Emails. Большинство платформ предлагают 50+ бесплатных шаблонов для настройки.
Что делает шаблон рассылки хорошим?
Хороший шаблон рассылки адаптирован для мобильных устройств, правильно отображается в разных почтовых клиентах, имеет чёткую визуальную иерархию, использует веб-безопасные шрифты и хорошо структурированные разделы. Он должен быстро загружаться с оптимизированными изображениями и поддерживать тёмный режим.
Можно ли использовать бесплатные шаблоны рассылок в коммерческих целях?
Да, большинство бесплатных шаблонов рассылок от платформ email-маркетинга лицензированы для коммерческого использования. Шаблоны от сторонних сайтов могут иметь различные лицензии, поэтому проверяйте условия перед использованием в деловой коммуникации.