Забираем понравившиеся HTML Email шаблоны себе | Переиспользуй с умом!
Узнайте, как скопировать HTML шаблон письма из любого письма в Gmail, Яндекс.Почте или Mail.ru за 2 минуты. Бесплатное расширение, работает оффлайн.
Продолжаю рассказывать про удобное расширение для браузера html2email.
Введение
Вы когда-нибудь получали красиво оформленное письмо от компании и хотели создать что-то подобное для своих клиентов? Многие маркетологи и бизнесмены сталкиваются с необходимостью создавать профессиональные HTML-шаблоны для email-рассылок, но не знают, с чего начать.
Создание HTML-шаблонов с нуля может занять много времени и требует знаний веб-разработки. Однако существует простой и бесплатный способ копировать готовые HTML-шаблоны прямо из писем, которые вы получаете.
В этой статье мы покажем, как использовать расширение HTML to email для Chrome, чтобы извлекать HTML-контент из любых писем и сохранять его как шаблон для дальнейшего использования. Этот метод работает с Gmail, Яндекс.Почтой, Mail.ru и другими популярными почтовыми клиентами.
Требования
Перед началом работы вам понадобится:
- Браузер Google Chrome (расширение работает только в Chrome)
- Аккаунт в одном из почтовых сервисов: Gmail, Yahoo, Яндекс.Почта или Mail.ru
- Доступ к Chrome Web Store для установки расширения
- Пример письма с HTML-оформлением, которое вы хотите скопировать
Время выполнения: 2-3 минуты для установки и первого использования
Уровень сложности: Начальный (не требуется знание программирования)
Расширение полностью бесплатное и работает оффлайн, поэтому вам не понадобится постоянное интернет-соединение после установки.
Пошаговая инструкция (ссылка на видео в конце поста)
Шаг 1-2: Установка и Закрепление расширения HTML to email
Всё интуитивно понятно, но можете прочитать предыдущие посты про эти пункты если нужны детали.
Шаг 3: Подготовка письма для копирования
Откройте ваш почтовый клиент (Яндекс.Почта, Gmail или Mail.ru) и найдите письмо с HTML-оформлением, которое вы хотите скопировать.
Важно: Перезагрузите страницу почтового клиента после установки расширения, чтобы изменения применились корректно.
Шаг 4: Извлечение HTML-контента
Когда вы нашли подходящее письмо:
- Нажмите кнопку "Ответить" или "Переслать" (неважно, какая именно)
- Удалите весь лишний текст из письма, чтобы остался только HTML-контент, который вы хотите скопировать
- Нажмите на иконку расширения HTML to email на панели инструментов браузера
- Расширение автоматически подгрузит HTML-контент активного письма
Шаг 5: Сохранение шаблона
После того как HTML-контент загружен, вы можете:
- Скопировать HTML-код в буфер обмена
- Сохранить его как файл на вашем компьютере
- Использовать сразу в новом письме
Шаг 6: Использование сохранённого шаблона
Для повторного использования шаблона:
- Создайте новое письмо в вашем почтовом клиенте
- Вставьте сохранённый HTML-шаблон
- Замените текст, изображения и ссылки на свои данные
- Откройте письмо в HTML-режиме (если доступно) для дополнительного редактирования
- Обязательно отправьте письмо себе перед отправкой клиентам, чтобы проверить корректность отображения
Дополнительные возможности работы с шаблонами:
После того как вы скопировали HTML-шаблон, вы можете использовать его различными способами.
Например, если вы работаете с несколькими клиентами и хотите отправлять им письма в едином стиле, сохранённый шаблон станет отличной основой.
Вы можете создать библиотеку шаблонов для разных типов писем: приветственные письма, уведомления о заказах, рекламные рассылки и так далее. Каждый раз, когда вы видите интересный дизайн письма, просто скопируйте его с помощью расширения и сохраните для будущего использования.
Работа с изображениями в шаблонах:
Один из важных моментов при использовании скопированных шаблонов - это работа с изображениями. Когда вы копируете HTML из письма, все изображения остаются со ссылками на оригинальные серверы. Это означает, что если вы отправите письмо с такими изображениями, они будут загружаться с серверов компании, от которой вы получили оригинальное письмо.
Чтобы избежать проблем, вам нужно:
- Загрузить все изображения на свой сервер или в облачное хранилище (например, Google Drive, Dropbox, или специализированные сервисы для email-изображений)
- Заменить все ссылки на изображения в HTML-коде на ваши собственные ссылки
- Убедиться, что изображения имеют правильные размеры и формат (рекомендуется использовать JPG или PNG)
Советы и лучшие практики
Советы по работе с HTML-шаблонами:
✅ Проверяйте изображения: Все изображения в скопированных шаблонах ссылаются на оригинальные источники (например, на серверы Яндекс, если вы копировали письмо от Яндекс.Еды). Обязательно замените их на свои изображения, размещённые на вашем сервере или в облачном хранилище.
✅ Обновляйте ссылки: Проверьте все ссылки в шаблоне и замените их на актуальные ссылки на ваш сайт или нужные страницы.
✅ Тестируйте на разных устройствах: Отправляйте тестовые письма себе и проверяйте их отображение на компьютере, планшете и смартфоне, чтобы убедиться в корректной работе на всех устройствах.
✅ Используйте простые шаблоны: Начинайте с простых шаблонов без сложной вёрстки - они лучше работают в разных почтовых клиентах.
✅ Сохраняйте библиотеку шаблонов: Создайте папку на компьютере для сохранения понравившихся HTML-шаблонов, чтобы быстро находить их при необходимости.
✅ Используйте версионирование: Если вы часто редактируете шаблоны, сохраняйте их с версиями (например, "шаблон-приветствие-v1", "шаблон-приветствие-v2"), чтобы иметь возможность вернуться к предыдущей версии при необходимости.
✅ Оптимизируйте размер файлов: HTML-шаблоны могут быть довольно большими. Убедитесь, что вы удаляете ненужный код и комментарии перед сохранением, чтобы файлы были компактными и быстрее загружались.
✅ Тестируйте совместимость: Разные почтовые клиенты могут отображать HTML по-разному. Протестируйте ваши шаблоны в Gmail, Outlook, Apple Mail и других популярных клиентах, чтобы убедиться в корректном отображении.
Всем спасибо за внимание! Надеюсь делюсь полезным контентом!
Сайт html2email ниже (если версии под Gmail\Yahoo и под Яндекс\Mail.ru)