Email Template Builder: HTML-письма

Что такое Email Template Builder?

Email Template Builder — это визуальный блочный редактор для создания адаптивных HTML-шаблонов email прямо в браузере. Вы добавляете блоки контента — заголовки, текстовые абзацы, кнопки, изображения, разделители, двухколоночные макеты и подвалы — упорядочиваете их с помощью кнопок вверх/вниз и редактируете каждый через панель свойств. По мере создания обновляется живой предпросмотр в iframe. По завершении инструмент генерирует полноценное HTML-письмо на основе таблиц с инлайн CSS, совместимое с Gmail, Outlook и Apple Mail. Никакого дизайнерского ПО, никакого кодинга и никакой учётной записи не требуется.

Основные возможности

• Визуальный блочный редактор писем — Создавайте письмо, добавляя и упорядочивая блоки контента. Семь типов блоков: заголовок, текст, кнопка, изображение, разделитель, две колонки и подвал.
• Блоки заголовка, текста, кнопки, изображения, разделителя и подвала — Каждый блок имеет собственную панель свойств. Блоки заголовка имеют пикеры цвета фона и текста. Текстовые блоки позволяют выбрать размер шрифта (12–24 пикселя) и выравнивание (по левому краю, по центру, по правому краю). Блоки кнопок принимают метку, URL и пару цветов. Блоки изображений принимают URL, альтернативный текст и ширину.
• Живой предпросмотр с переключением мобильный/десктоп — Панель редактора включает предпросмотр в iframe в реальном времени. Переключайтесь между десктопом (полная ширина) и мобильным (375 пикселей) без выхода из вкладки редактора.
• Настройка цветов, шрифтов и отступов — Глобальные настройки письма управляют фоном тела письма (по умолчанию #f4f4f4), фоном контента (#ffffff), основным цветом, максимальной шириной (480, 600 или 640 пикселей) и гарнитурой шрифта (Arial, Georgia, Helvetica или Verdana).
• Экспорт чистого адаптивного HTML — Вкладка HTML отображает полный сгенерированный исходный код: макет на основе таблиц, соответствующий стандартам, с инлайн CSS, текстом прехедера, запасными кнопками MSO VML для Outlook и адаптивным медиазапросом, сворачивающимся до полной ширины на экранах менее 600 пикселей.
• Копирование HTML в буфер обмена — Кнопка «Копировать HTML» копирует всю сгенерированную строку HTML одним нажатием, с состоянием подтверждения «Скопировано!».
• Готовые стартовые шаблоны — Три стартовых шаблона загружаются мгновенно: Приветствие, Рассылка и Промо. Каждый включает предварительно настроенные блоки для своей цели. Приветствие и Рассылка используют ваш текущий основной цвет; Промо использует собственный красный акцент.
• 100% на стороне клиента — Никакой контент письма не передаётся на серверы. Работает полностью офлайн после загрузки страницы.

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

Шаг 1: Настройка глобальных параметров

Откройте Скоро: Email Template Builder и найдите карточку «Настройки письма» в левой панели. Заполните:

• Строка темы — Становится тегом <title> в экспортированном HTML (видна в некоторых почтовых клиентах и используется для доступности).
• Текст прехедера — Скрытая строка предпросмотра, отображаемая после темы в предпросмотрах почтового ящика. По умолчанию "Текст предпросмотра, отображаемый в почтовом ящике...". Установите убедительное однострочное краткое содержание.
• Фон тела / Фон контента — Пикеры цвета позволяют ввести шестнадцатеричное значение или использовать нативный пикер цвета. Стандартный светло-серый фон тела (#f4f4f4) на белом контенте (#ffffff) соответствует визуальному паттерну большинства крупных брендов.
• Основной цвет — Автоматически используется как фон по умолчанию для новых блоков заголовков и кнопок.
• Максимальная ширина — Выберите 480 пикселей (компактный), 600 пикселей (стандартный, по умолчанию) или 640 пикселей (шире).
• Гарнитура шрифта — Arial (по умолчанию), Georgia, Helvetica или Verdana.

Шаг 2: Загрузить шаблон или добавить блоки

Вариант А: Загрузить стартовый шаблон. Нажмите «Приветствие», «Рассылка» или «Промо» в карточке «Стартовые шаблоны». Редактор загружает полный набор предварительно настроенных блоков для этого варианта использования. Шаблон Приветствие включает заголовок, текстовый блок приветствия, кнопку CTA «Начать», разделитель и подвал. Шаблон Промо использует жёстко заданный красный (#e53e3e) цвет заголовка и кнопки, а также включает заполнитель изображения. Стартовые шаблоны Приветствие и Рассылка используют ваш текущий основной цвет; шаблон Промо использует собственную красную цветовую схему.

Вариант Б: Создать с нуля. Нажмите на любой тип блока в карточке «Добавить блок». Доступные блоки: Заголовок, Текст, Кнопка, Изображение, Разделитель, Две колонки, Подвал. Каждый новый блок появляется в конце списка и автоматически открывает панель редактирования.

Шаг 3: Редактирование каждого блока

Нажмите на блок в списке «Блоки», чтобы открыть его редактор. Изменения мгновенно отражаются в живом предпросмотре.

• Блок заголовка: Текстовые поля для заголовка и подзаголовка, а также пикеры цвета фона и текста.
• Текстовый блок: Текстовая область для контента (переносы строк создают отдельные теги <p>), выпадающий список размера шрифта (от 12 до 24 пикселей) и выравнивание по левому краю/по центру/по правому краю.
• Блок кнопки: Текст метки, URL назначения, цвет фона кнопки и цвет текста кнопки. Сгенерированный HTML включает разметку MSO VML, чтобы Outlook отображал настоящую кнопку, а не простую ссылку.
• Блок изображения: URL изображения (или загрузите локальный файл), альтернативный текст и ширина (например, 100% или 400px). Загружённые изображения встраиваются как URI данных Base64.
• Блок разделителя: Пикер цвета и поле ввода толщины (1–10 пикселей).
• Блок колонок: Две отдельные текстовые области для контента левой и правой колонки.
• Блок подвала: Текстовая область для текста подвала (переносы строк становятся отдельными абзацами), пара полей метки ссылки и URL ссылки (например, для добавления ссылки отписки), а также пикеры цвета фона и текста.

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

Шаг 4: Предпросмотр и экспорт

Переключитесь на вкладку Предпросмотр для просмотра письма на всю страницу. Используйте переключатель Десктоп/Мобильный для проверки адаптивного макета при 375 пикселях.

Переключитесь на вкладку HTML-код для просмотра сгенерированного исходного кода. Нажмите на текстовую область для выделения всего текста или нажмите «Копировать HTML» для копирования в буфер обмена. Код готов для вставки в любой ESP (провайдер услуг рассылки), например Mailchimp, SendGrid или HubSpot.

Практические примеры

Пример 1: Анонс запуска продукта

Начните со стартового шаблона «Промо». Замените текст заголовка на название вашего продукта и слоган запуска. Обновите фон заголовка #e53e3e на цвет вашего бренда с помощью пикера цвета. Замените URL заполнителя изображения на скриншот вашего продукта. Отредактируйте текстовый блок, описав ключевое преимущество в одном-двух предложениях. Обновите метку кнопки («Оформить предзаказ») и URL. Задайте текст прехедера "Представляем [Продукт] — доступен уже сегодня." Экспортируйте HTML и вставьте в ваш ESP.

Пример 2: Еженедельная рассылка

Загрузите шаблон «Рассылка». Задайте тему "Еженедельный дайджест — неделя от 3 марта 2026 г.". Отредактируйте текстовый блок главного материала, добавив свою ведущую статью. Добавьте второй блок «Две колонки» ниже для двух более коротких материалов рядом. Добавьте блок «Кнопка» с текстом «Читать весь архив» со ссылкой на ваш сайт. Скорректируйте текст подвала, включив ссылку отписки и физический почтовый адрес в соответствии с требованиями CAN-SPAM.

Пример 3: Серия приветственных писем

Используйте шаблон «Приветствие». Измените подзаголовок шапки на "Ваш аккаунт готов." Отредактируйте основной текст в три коротких абзаца: что может делать пользователь, где найти помощь и как связаться с поддержкой. Замените URL кнопки «Начать» на реальный URL онбординга. Переключитесь на вкладку Предпросмотр, переключитесь на мобильный вид и убедитесь, что весь текст читается при 375 пикселях. Экспортируйте и загрузите в рабочий процесс автоматизации вашего ESP.

Советы и лучшие практики

Задайте основной цвет до загрузки шаблона. Стартовые шаблоны применяют ваш текущий основной цвет к новым блокам заголовков и кнопок. Изменение основного цвета после загрузки шаблона не обновляет существующие блоки ретроактивно — пикер цвета каждого блока редактируется независимо.

Используйте поле прехедера. Многие конструкторы его игнорируют, но текст прехедера напрямую влияет на показатели открываемости. Сгенерированный HTML скрывает его с помощью display:none; ... max-height:0px; overflow:hidden — он не будет виден в письме визуально, но отобразится в предпросмотрах почтового ящика.

Размеры шрифта менее 14 пикселей плохо читаются на мобильных. Выпадающий список размера шрифта в текстовом блоке снижается до 12 пикселей. На практике используйте 14 пикселей или больше для основного текста. Используйте 12 пикселей только для юридических оговорок или мелкого шрифта подвала.

Протестируйте максимальную ширину 600 пикселей. Стандартная максимальная ширина 600 пикселей хорошо работает во всех основных клиентах. Вариант 480 пикселей подходит для дизайнов с узким макетом; 640 пикселей уместны только для клиентов, которые не применяют собственные ограничения ширины.

Кнопки VML для Outlook не требуют дополнительных шагов. Сгенерированный HTML уже содержит блок условного комментария MSO VML вокруг каждой кнопки. При вставке в ESP убедитесь, что ESP не удаляет HTML-комментарии, так как разметка VML зависит от них.

Распространённые проблемы и их решения

Живой предпросмотр показывает пустую белую область. Это происходит до добавления блоков. Добавьте хотя бы один блок или загрузите стартовый шаблон — iframe заполнится немедленно.

Блок изображения показывает сломанное изображение. Инструмент отображает URL изображения напрямую в теге <img>. Убедитесь, что URL общедоступен (не за аутентификацией) и использует HTTPS. Введённый альтернативный текст включается в экспортированный HTML для обеспечения доступности.

Скопированный HTML показывает сломанный макет в Outlook. Убедитесь, что в настройке гарнитуры шрифта используется веб-безопасный стек (например, Arial, Helvetica, sans-serif). Веб-шрифты (Google Fonts, пользовательские шрифты) не отображаются в Outlook. Все четыре варианта шрифтов в инструменте — веб-безопасные стеки.

Блок двух колонок сворачивается в одну колонку на мобильных. Это ожидаемое поведение условных комментариев MSO и блочно-строчного макета. На экранах менее 600 пикселей медиазапрос устанавливает .email-container в width: 100%, и блочно-строчные колонки шириной 48% естественно переносятся. Нет возможности принудительно расположить колонки рядом на мобильных.

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

Конфиденциальность и безопасность

Email Template Builder создаёт и предпросматривает HTML-письмо полностью в вашем браузере. Никакой контент шаблонов, строки тем или URL изображений не передаются на серверы. Живой предпросмотр использует iframe с sandbox="allow-same-origin" — в предпросмотре не выполняются никакие скрипты. Инструмент работает полностью офлайн после загрузки страницы, что делает его безопасным для конфиденциального маркетингового контента или клиентских материалов.

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

Бесплатен ли Email Template Builder? Да. Полный блочный редактор, все семь типов блоков, три стартовых шаблона, живой предпросмотр и экспорт HTML полностью бесплатны без необходимости создания учётной записи. Откройте инструмент по адресу Скоро: /web/social/email-template-builder.

Работает ли Email Template Builder офлайн? Да, после загрузки страницы. Вся генерация HTML происходит в JavaScript на вашем устройстве. Живой предпросмотр загружает URL изображений из их источника (для чего требуется подключение), но редактор, управление блоками и экспорт HTML — всё работает офлайн.

Безопасны ли мои данные в Email Template Builder? Контент вашего письма, строки тем и дизайнерские решения никогда не покидают ваш браузер. Инструмент генерирует HTML локально и не отправляет никаких запросов к серверу с вашими данными. Создавать конфиденциальные клиентские письма или эксклюзивный кампаниевый контент — безопасно.

Какие почтовые клиенты поддерживает сгенерированный HTML? Инструмент генерирует HTML на основе таблиц с инлайн CSS — метод вёрстки с наиболее широкой совместимостью с почтовыми клиентами. Он включает условные обозначения MSO VML для отображения кнопок в Outlook и адаптивный медиазапрос для мобильных клиентов. Разработан для Gmail, Outlook (2016–2024), Apple Mail и Yahoo Mail.

Можно ли добавить более семи типов блоков? Текущий редактор поддерживает семь типов блоков: заголовок, текст, кнопка, изображение, разделитель, колонки и подвал. Вы можете добавлять один и тот же тип блока несколько раз для создания сложных макетов — например, чередующиеся текстовые блоки и блоки изображений или несколько блоков кнопок.

Как добавить ссылку отписки? Добавьте блок подвала. Редактор подвала включает выделенное поле метки ссылки и поле URL ссылки. Введите текст ссылки (например, «Отписаться») и URL назначения. Сгенерированный HTML отображает это как кликабельный тег <a> под текстом подвала. Вы также можете заменить URL тегом слияния отписки вашего ESP после экспорта.

Что такое поле текста прехедера? Текст прехедера — короткая строка (как правило, 40–130 символов), которую почтовые клиенты отображают после строки темы в списке почтового ящика. В отрендеренном письме он скрыт с помощью CSS. Инструмент включает его в сгенерированный HTML внутри <div> с display:none и max-height:0px.

Можно ли сохранять созданные шаблоны? Да. Поддержатели Glyph Widgets могут использовать PresetsPanel для сохранения и загрузки полного состояния редактора — всех блоков, настроек и контента — в виде именованного пресета, хранящегося в локальном IndexedDB браузера.

Какую максимальную ширину следует использовать? 600 пикселей — отраслевой стандарт, который корректно работает во всех основных клиентах. Используйте 480 пикселей для более узкого и сфокусированного макета. Используйте 640 пикселей только если вы подтвердили, что ваш целевой ESP и клиенты корректно с ним справляются — некоторые старые версии Outlook применяют собственные ограничения ширины.

Поддерживает ли инструмент пользовательские шрифты? Нет. Все четыре гарнитуры в выпадающем списке шрифтов — веб-безопасные стеки: Arial, Georgia, Helvetica и Verdana. Веб-шрифты не поддерживаются, поскольку большинство почтовых клиентов — особенно Outlook — не загружают внешние файлы шрифтов.

Связанные инструменты

• Скоро: Email Extractor — Извлекайте и проверяйте адреса электронной почты из любого текста, затем используйте их с шаблонами, созданными здесь.
• Скоро: Social Meta Tags — Генерируйте теги Open Graph и Twitter Card для оптимизации внешнего вида посадочных страниц ваших кампаний при публикации в социальных сетях.
• Скоро: Hashtag Generator — Генерируйте релевантные хэштеги для публикаций в социальных сетях, направляющих трафик на ваши формы подписки.

Попробуйте Email Template Builder прямо сейчас: Скоро: Email Template Builder от Glyph Widgets