Реклама мешает? Идти Без рекламы Сегодня 

Генератор шаблона электронной почты на языке HTML

РазработчикТекст

[iotools_html_email_template_generator]

Гид

Генератор шаблона электронной почты на языке HTML

Создайте адаптивный HTML-электронный письмо с встроенными стилями, собирая модульные блоки — заголовок, главный блок, изображение, текст тела, кнопку, разделитель и подвал — с живым предварительным просмотром на рабочем столе и мобильном устройстве. Результат использует таблицы и условия MSO, чтобы корректно отображался в Outlook, Gmail, Apple Mail и других почтовых клиентах.

Как использовать

Установите заголовок письма, предзаголовок, семейство шрифтов и бренд, цвет фона и текста на верхней части формы.
Включите или отключите нужные блоки и заполните содержимое каждого блока — логотип и слоган, заголовок и подзаголовок главного блока, URL изображения, абзацы текста, кнопка с призывом к действию, разделитель и подвал.
Следите за обновлением живого предварительного просмотра справа. Переключайтесь между шириной рабочего стола и мобильного устройства, чтобы проверить оба варианта отображения.
Нажмите Копировать HTML-код чтобы получить встроенный CSS HTML, или Скачать .html чтобы сохранить его как файл, готовый к вставке в вашу систему доставки писем, отправителя или инструмент для кампаний.

Возможности

Модульные блоки — Включайте или отключайте заголовок, главный блок, изображение, текст тела, кнопку, разделитель и подвал независимо.
Встроенный CSS вывод — Все стили встроены и основаны на таблицах, поэтому нет внешних стилей и нет проблем с отображением в Outlook или Gmail.
Условия MSO — Включены специальные элементы для Microsoft Outlook (движок Word), чтобы сохранить правильные ширины и интервалы на Windows Outlook.
Живой предварительный просмотр — Предварительный просмотр на рабочем столе (600 пикселей) и мобильном устройстве (360 пикселей) отображается в изолированном iframe.
Настройка бренда — Цветовые палитры для акцентов, фона и текста, а также четыре шаблона шрифтов.
Один клик для экспорта — Скопируйте HTML в буфер обмена или скачайте готовый к отправке файл .html файл.
Работает в вашем браузере — Ничего не загружается или не сохраняется. Генерация происходит полностью на стороне клиента.

 Часто задаваемые вопросы

Почему HTML-письма используют таблицы вместо современных систем flexbox или grid?

Многие почтовые клиенты — особенно Microsoft Outlook на Windows — отображают сообщения с помощью движка Word, который поддерживает очень ограниченный набор CSS и игнорирует flexbox, grid и большинство правил позиционирования. Вложенные таблицы остаются единственной системой разметки, которая корректно отображается во всех клиентах, включая Gmail, Outlook, Apple Mail, Yahoo и мобильные почтовые сервисы. Именно поэтому производственные HTML-письма выглядят как веб-макеты из 2003 года: это наименьший общий знаменатель, который выживает в каждом движке отображения.
Что такое MSO-условия и почему письма нуждаются в них?

MSO-условия — это HTML-комментарии, которые интерпретируются только Microsoft Outlook (движок Word). Они выглядят так:  и позволяют отправлять разметку или стили, специально настроенные для Outlook, без влияния на другие клиенты. Они часто используются для установки фиксированной ширины контейнера с помощью "призрачной таблицы", исправления VML для кнопок и фонов и отключения функций, которые Outlook отображает неправильно. Без них разметка часто сжимается или растягивается неправильно в Outlook, даже если она выглядит идеально во всех других клиентах.
Почему CSS в письмах должен быть встроен, а не объявлен в теге style?

Несколько крупных почтовых клиентов — особенно Gmail в прошлом — удаляют <style> блоки или применяют их неравномерно, особенно на мобильных устройствах и в пересылаемых письмах. Встраивание перемещает каждое правило на элемент, к которому оно относится через атрибут style , который уважается всеми клиентами. Стоит отметить, что это приводит к увеличению объёма кода и сложности поддержки, поэтому существуют инструменты — включая этот генератор — для автоматического встраивания стилей из более высокого уровня шаблона.
Что такое предзаголовок и как он влияет на открытие писем?

Предзаголовок — это краткий фрагмент текста, который отображается после заголовка в большинстве предпросмотров ящика. По умолчанию он берётся из первого видимого текста в теле письма, что часто является вступлением или шаблоном, который не использует этот слот. Включение скрытого элемента предзаголовка в начале HTML позволяет точно контролировать, что отображается там. Хорошо написанный предзаголовок дополняет заголовок и коррелирует с более высокими показателями открытия в большинстве тестов A/B, проведённых крупными системами доставки писем.