Конструктор html писем с выгрузкой
Обновлено: 27.04.2024
В новой короткой серии публикаций мы расскажем о некоторых полезных инструментах и методах для разработчиков и дизайнеров. На этот раз мы рассмотрим шаблоны и инструменты для создания и разработки электронных писем в формате HTML.
Начало работы с электронной почтой в формате HTML
Если вы просто пытаетесь понять все, что происходит за кулисами причудливого мира электронной почты в формате HTML, Кейти Г. О’Коннор опубликовала прекрасное руководство о том, как начать кодирование электронных писем. В статье представлены курсы, учебные пособия и просто общие рекомендации, которые следует учитывать при создании и разработке электронных писем — все в виде подробного одностраничного руководства. На SmashingMag, Ли Манро также опубликовал подробное руководство по созданию и отправке электронных писем в формате HTML.
В качестве альтернативы, Как кодировать электронные письма в HTML для любого устройства — это очень подробное руководство по созданию надежного шаблона электронной почты в формате HTML и его тестированию, а также практический пример создания шаблона информационного бюллетеня с нуля. В общем, это очень основательный обзор всего, что вам нужно знать, чтобы начать правильно работать.
У Джейсона Родригеса есть подробный видеокурс по электронной почте в формате HTML (платный), в котором есть практически все, что нужно знать, от доступности до устранения неполадок, рабочих процессов и инструментов.
Языки и фреймворки электронной почты HTML
Написание чистых писем, обеспечивающих удобство работы со всеми популярными почтовыми клиентами, может оказаться трудоемкой задачей. HEML здесь, чтобы изменить это. Язык разметки с открытым исходным кодом дает вам естественные возможности HTML без необходимости иметь дело со всеми причудами электронной почты. Нет никаких особых правил или парадигм стиля, которые нужно освоить, поэтому, если вы знаете HTML и CSS, то можем начинать.
Языки и платформы электронной почты HTML
Написание чистых, отзывчивых писем, обеспечивающих удобство работы со всеми популярными почтовыми клиентами, может оказаться трудоемкой задачей. HEML здесь, чтобы изменить это. Язык разметки с открытым исходным кодом дает вам естественные возможности HTML без необходимости иметь дело со всеми причудами электронной почты. Нет никаких особых правил или парадигм стиля, которые нужно освоить, поэтому, если вы знаете HTML и CSS, вы готовы начать.
MJML основан на той же идее упрощения процесса создания адаптивных электронных писем. Язык разметки основан на семантическом синтаксисе, который упрощает процесс, в то время как движок с открытым исходным кодом выполняет тяжелую работу и переводит написанный вами MJML в адаптивный HTML. Вы можете начать с пошагового руководства через MJML. Библиотека стандартных компонентов экономит ваше время и упрощает кодовую базу электронной почты.
HTML-платформа электронной почты на основе Tailwind CSS
Заставить электронную почту HTML работать с почтовыми клиентами — непростая задача. К счастью, существует множество надежных инструментов, шаблонов и фреймворков, которые упростят выполнение вашей работы. Например, Maizzle — это фреймворк, который помогает быстро создавать электронные письма в формате HTML с помощью Tailwind CSS и расширенной пост-обработкой. Он также предоставляет несколько готовых проектов (Maizzle Starters ), с которых вы можете начать прямо сейчас.
Maizzle использует фреймворк Tailwind CSS, чтобы дизайнеры и разработчики могли легко создавать прототипы электронных писем с помощью HTML и CSS. Он также поставляется с красивыми шаблонами, если вы не хотите разрабатывать каждое письмо с нуля. В качестве альтернативы вы можете также рассмотреть MJML.
«Пуленепробиваемые» шаблоны электронной почты HTML
Cerberus и HTML Email предоставляют небольшие коллекции надежных и надежных шаблонов для адаптивных электронных писем HTML, которые хорошо протестированы в более чем 50 почтовых клиентах, включая Gmail, Outlook, Yahoo, AOL и многие другие. EmailFrame.work позволяет создавать адаптивные HTML-шаблоны электронной почты с предварительно созданными параметрами сетки и базовыми компонентами, которые поддерживаются более чем в 60+ почтовых клиентах.
Codedmails включает 60 шаблонов и тем электронной почты, написанных на MJML и протестированных на совместимость. Весь код доступен на Github , а шаблоны можно использовать бесплатно для некоммерческих проектов, а исходные файлы MJML предоставляются за дополнительную плату.
Stripo , Chamaileon , Postcards , Topol.io , GoodEmailCode , Pixelbuddha и Bee Free — все содержат множество бесплатных HTML-шаблонов электронной почты, Litmus предоставляет адаптивные шаблоны электронной почты для информационных бюллетеней, обновлений продуктов и квитанций, а CampaignMonitor имеет бесплатный конструктор HTML-шаблонов электронной почты drag’n’drop функциональностью.
Поддержка функций электронной почты в формате HTML
Вы можете ввести функцию, чтобы увидеть, насколько хорошо она поддерживается , проверить индекс функций, сравнить почтовые клиенты или просмотреть таблицу показателей поддержки почтовых клиентов, которая ранжирует почтовые клиенты на основе их поддержки. Полные данные также доступны в виде файла JSON.
Репозиторий ошибок электронной почты
Apple Mail не показывает встроенные SVG-файлы, Gmail не отображает электронные письма во всю ширину, Outlook меняет поведение анимированных Gif-файлов — все мы знаем, как странно иногда себя ведут почтовые клиенты.
Чтобы помочь вам понять, что происходит, когда вы сталкиваетесь с подобными ошибками, Реми Парментье поддерживает Email Bugs , репозиторий GitHub для некорректного поведения почтового клиента. Он не только упрощает жизнь дизайнерам электронной почты, предоставляя место для обсуждения ошибок, но также пытается сообщать о каждой ошибке в соответствующую компанию и исправлять их навсегда. Но на всякий случай, если это невозможно, « Как настроить таргетинг на почтовых клиентов » предоставляет обзор обходных путей для работы с конкретными почтовыми клиентами.
Генератор ссылок Mailto
Старые добрые HTML-ссылки могут делать больше, чем мы обычно им приписываем. Мы можем использовать префикс mailto:, но на самом деле создание кода может быть довольно неприятным. Mailtolink.me делает это за нас, и делает это хорошо: он генерирует фрагмент для ссылок mailto, включая CC, BCC, строку темы и основной текст.
Подсказка выбора почтового клиента Mailto
Иногда, когда вы нажимаете на адрес электронной почты, может открываться приложение, которое ваши клиенты на самом деле не используют. Вот почему принято копировать и вставлять адреса электронной почты вместо того, чтобы напрямую переходить по ссылкам. Чтобы избежать этого, мы можем использовать Mailgo и MailtoUI .
Вместо открытия собственного почтового клиента оба инструмента запрашивают модальное окно , позволяющее пользователю выбрать одну из предпочтительных служб или скопировать и вставить ссылку. Кроме того, Mailgo может обращаться ко всем ссылкам tel, позволяя им открывать Telegram, WhatsApp, Skype, звонить по умолчанию или копировать номер телефона — и он также поддерживает темный режим.
Электронная почта для вдохновения
Это может показаться просто потому, что электронная почта HTML кажется довольно древней и устаревшей, как и возможности того, что мы можем сделать с электронной почтой HTML. Тем не менее, существует множество ресурсов, блогов и подкастов, посвященных новым методам работы с электронной почтой — некоторые из них часто относятся к очень творческой стороне кодирования электронной почты!
Litmus Blog, CampaignMonitor блог и HTML Email имеют много статей и подкастов с передовым опытом, советами, ресурсами и даже подкаст на HTML электронной почте. И если вам нужно немного вдохновения для создания писем, отсортированных по отраслям, Really Good Emails и EmailLove тоже могут быть полезными для Вас.
- Вам не нужно рыться в собственном почтовом ящике, чтобы найти вдохновение для HTML-дизайна электронной почты. Email Love собрал фантастическую подборку вдохновляющих писем от ведущих компаний.
- Really Good Emails упрощает поиск идей для HTML-писем. У вас есть выбор: изучить коллекцию в хронологическом порядке или сузить результаты в зависимости от типа электронного письма (например, купон, бесплатная пробная версия), цели (например, вознаграждение клиентов, благодарность), названия компании или категории и так далее.
- Недостаточно? Есть также HTML-дизайн электронной почты и HTML-галерея электронной почты .
Доступные электронные письма
Где мы находимся с электронной почтой с точки зрения доступности? Правильно ли мы объявляем электронные письма читателям с экрана? А как насчет темного режима? Репозиторий Accessible Email содержит ряд статей, инструментов, презентаций и ресурсов о специальных возможностях — не только для электронной почты, но особенно для нее.
Соответствие с CSS и преобразование HTML
С помощью инструмента Alter.Email вы можете выбрать несколько «преобразователей» — например, встроить CSS и очистить код, удалить неиспользуемый CSS, а также отформатировать HTML и даже запретить использование лишних слов. В качестве альтернативы вы также можете использовать Postdrop , который также позволяет вам встроить и минимизировать CSS.
Удаление неиспользуемого CSS из шаблонов электронной почты
Написание CSS не является захватывающей задачей для почты HTML в которой повсюду разбросаны встроенные стили. Чтобы удалить неиспользуемый CSS из шаблонов электронной почты, есть Email Comb . Инструмент позволяет вам добавлять классы и идентификаторы, которые вы хотели бы игнорировать, выбирать, хотите ли вы их минимизировать и удалять комментарии, и показывает, что именно было удалено.
Шпаргалка по таргетингу почтовых клиентов
Почтовые клиенты изменяют и удаляют часть вашего HTML и CSS, часто безжалостно. Если один из почтовых клиентов работает не так, как ожидалось, вы можете обработать его отдельно. Шпаргалка для таргктинга клиентов электронной почты позволяет выбрать клиент целевой электронной почты и, по крайней мере, попытаться обратиться к нему напрямую. Это может не всегда сработать, поскольку почтовые клиенты постоянно меняются, но это то, что стоит попробовать.
Все ресурсы электронной почты в формате HTML
Thebetter.email предоставляет постоянно растущее хранилище полезных ресурсов электронного маркетинга, включая людей, обучающие сайты, инструменты, сведения о поставщиках услуг электронной почты, информационные бюллетени, код и интерактивные ресурсы электронной почты. Отобранный вручную Джейсоном Родригесом, который проработал в индустрии много лет и потратил уйму времени, работая над данным ресурсом.
Ресурсы электронного маркетинга
Если вам нужно глубоко погрузиться в основы электронной почты HTML, передовых методов и электронного маркетинга, в руководствах CampaignMonitor и Mailchimp есть много ресурсов для начала. Действительно, некоторые из них будут относиться к конкретному продукту, но они также являются более общими руководствами по передовым методам отправки электронных писем, руководствами по дизайну, советами по доставке, требованиями к защите от спама и множеством других тем в этом направлении.
А если вы ищете текущие тенденции в электронном маркетинге, Oracle’s Email Marketing Trends включает множество видеороликов о доставке электронной почты, модульной архитектуре электронной почты, доступности электронной почты, а также электронном маркетинге.
Темный режим в Gmail и Outlook
Мы все привыкли к темному режиму во многих приложениях и на веб-сайтах, но как насчет поддержки темного режима в почтовых клиентах HTML? Мы могли бы, конечно, разраьотать одно и то же электронное письмо для всех подписчиков, но если вы привыкли к темному режиму в своей операционной системе, яркое электронное письмо может скорее оттолкнуть и побудить вас отказаться от него.
Руководство разработчика по темному режиму в электронной почте подчеркивает некоторые важные рекомендации, которые следует учитывать при создании версии электронной почты в формате HTML в темном режиме. В нем объясняется, как настроить темный режим, как работать с изображениями и общей поддержкой браузера (что очень хорошо!).
IDE для разработки электронной почты HTML
Если вы проводите довольно много времени с электронной почтой в формате HTML, вы можете использовать специальный редактор электронной почты в формате HTML. Parcel — это всего лишь редактор кода, созданный специально для написания кода и создания электронных писем. Он обеспечивает предварительный просмотр в реальном времени, так что вы можете видеть в режиме реального времени, что вы создаете, а также имеет специальные возможности по умолчанию, так что вы можете проверять проблемы с доступностью во время создания или проектирования электронной почты. Кроме того, этот инструмент также позволяет вам сотрудничать с вашей командой и запускать тесты электронной почты прямо из инструмента.
Кроме того, вы также можете взглянуть на Mail Studio , сложное настольное приложение (для Windows, macOS и Linux), которое объединяет визуальное редактирование и редактирование кода в одной электронной среде IDE.
Приложение поставляется с библиотекой компонентов, парой адаптивных шаблонов электронной почты, интеграцией Google Fonts, встроенной поддержкой Sass, палитрой команд, инструментами для совместной работы, предварительным просмотром электронной почты и даже интеграцией с поставщиками услуг электронной почты, такими как MailChimp, Campaign Monitor и Sendgrid. Вскоре ожидается интеграция с Figma.
Предварительный просмотр электронной почты в полноэкранном режиме
Если вам нужен полноэкранный предварительный просмотр вашего электронного письма в формате HTML, Emailpreview.io может быть именно тем, что вам нужно. Вы можете скопировать / вставить HTML или импортировать файл EML, который вы только что получили, и инструмент выведет полностью визуализированное изображение вашего электронного письма. Вы также можете выбрать ширину устройства. Маленький полезный инструмент, который стоит держать под рукой.
Блокировщик почтового трекера
Большинство маркетинговых электронных писем включают трекеры в электронную почту HTML, поэтому они могут отслеживать, как часто, когда и где клиенты открывают электронные письма. MailTrackerBlocker действует как блокировщик рекламы для браузеров, но работает с почтовыми клиентами. Инструмент отмечает, кто отслеживает клиентов, и удаляет пиксели отслеживания, прежде чем они могут быть отображены, поэтому вы все равно можете загружать весь удаленный контент и сохранять конфиденциальность своего поведения. В настоящее время доступно только для Apple Mail на macOS 10.11 — 11.x (привет Джереми Кейту!).
Вы можете использовать блокировщик рекламы, чтобы заблокировать стороннее отслеживание, а для Apple Mail можете также использовать MailTrackerBlocker, чтобы блокировать пиксели отслеживания в электронных письмах.
Улучшение электронной почты
В статье «Электронная почта — это хорошо» рассматриваются вещи, которые делают электронные письма раздражающими, советы и идеи о том, как мы можем добиться большего, а также небольшие казусы, которые могут случиться с каждым. Прекрасная возможность поразмышлять о том, как каждый из нас обращается с электронной почтой, и о реакции, которую наши почтовые привычки могут спровоцировать на стороне получателя.
Заключение
Вероятно, мы упустили некоторые важные и ценные методы и ресурсы! Поэтому, пожалуйста, оставьте комментарий и обратитесь к ним — мы хотели бы обновлять этот пост и держать его в актуальном состоянии, чтобы все могли вернуться к нему и создавать электронные письма в формате HTML лучше и быстрее.
Для запуска собственной email-рассылки предварительно нужно создать письмо со всей необходимой информацией, оформленной в нужном стиле. Сделать это можно двумя способами – сверстать все с нуля либо воспользоваться специальными сервисами.
Первый способ подойдет в тех случаях, когда нужно создать уникальный дизайн с особым функционалом. Такой вариант может обойтись в круглую сумму, так как потребуется отдельный специалист – верстальщик.
Второй способ – вариант для тех, кто хочет быстро и бюджетно создать письмо для рассылок. Достаточно воспользоваться шаблоном либо конструктором, и письмо готово. Об этом способе мы и поговорим в сегодняшней статье.
Почему конструктор писем и как его выбрать
В любом поисковике вы можете найти сотни различных сервисов для создания писем – от бесплатных, с минимальным функционалом, до платных, способных стать заменой верстальщику.
Чаще всего конструктор выбирают потому, что:
- можно создать полностью адаптивное письмо, которое будет одинаково хорошо смотреться на всех устройствах;
- сверстать письмо в нем можно очень быстро.
Чтобы подобрать конструктор, который удовлетворяет этим требованиям, рекомендую обращать внимание на следующие моменты:
- количество доступных шаблонов;
- кастомизация письма;
- простой и понятный интерфейс сервиса;
- интеграция с почтовыми сервисами;
- возможность сохранять письмо в формате HTML-кода;
- наличие тестового периода.
Для вашего удобства ниже я рассмотрел наиболее успешные конструкторы, которые охватывают большинство вышеупомянутых критериев.
Топ-7 конструкторов писем
Stripo
Первый сервис в списке – Stripo. Это бесплатный инструмент для конструирования писем с возможностью подключения платных подписок с расширенным функционалом. Из особенностей стоит отметить открытый HTML/CSS-код и drag-and-drop редактор, с помощью которого можно создавать письма простым перетаскиванием элементов.
Плюсы:
- более 300 бесплатных шаблонов;
- доступна инструкция, которая поможет быстро разобраться со всем функционалом сервиса;
- шаблоны с поддержкой AMP (технология для ускорения тяжелых страниц).
Минусы: это очень популярный сервис на территории СНГ, поэтому ваши письма могут быть похожи на письма конкурентов
Стоимость: есть бесплатная версия с ограничениями (до 4 экспортируемых писем в месяц), платные тарифы начинаются от 150$ в год
Официальная страница: Stripo
Topol
Англоязычный сервис, в котором можно бесплатно создавать простые письма. Есть также платные тарифы, существенно расширяющие возможности инструментария. Это готовые блоки, объединение тегов и специальных ссылок, тестовые письма без ограничений и многое другое.
Плюсы:
- более 100 адаптивных шаблонов;
- разработка шаблона в команде;
- экспорт в виде HTML-кода;
- блоки с видео и гифками;
- предварительный просмотр для десктопной версии.
Минусы:
- нельзя посмотреть, как выглядит письмо на разных устройствах.
Стоимость: есть бесплатный тариф, а также тестовый период для про-версии на 14 дней со всем функционалом, стоимость платного тарифа – $15/месяц
Официальная страница: Topol
MakeMail
Это бесплатный сервис с интерфейсом на русском языке для создания адаптивных писем. В нем предусмотрена возможность настройки шаблона с одной, двумя или тремя колонками. Из базовых элементов доступны контакты, изображения, текст, ссылки на соцсети, таблицы, отступы.
Плюсы:
- встроенный конструктор с понятным интерфейсом, позволяющий создавать письмо простым перетаскиванием элементов;
- автоматическое тестирование шаблона письма.
Минусы:
- многие шаблоны обладают устаревшим дизайном, но, думаю, вы сможете найти что-то по своему вкусу.
Стоимость: бесплатно
Официальная страница: MakeMail
Postcards
С помощью этого конструктора вы можете собрать письмо из готовых блоков. Есть несколько категорий: меню, хедер, футер, контент, призыв к действию, возможности, транзакции, электронная коммерция.
Плюсы:
- 100+ модулей;
- поддержка Google Fonts, экранов Retina;
- возможность редактировать письмо в команде;
- хорошая обратная связь в платной версии.
Минусы:
- бесплатно доступен только 1 модуль из 8;
- нет готовых шаблонов и стандартных блоков.
Стоимость: есть бесплатная ограниченная версия, платная начинается от $17/месяц
Официальная страница: Postcards
Cheapsender
Cheapsender – это полноценный инструмент для рассылки писем. В отличие от обычных конструкторов, здесь можно не только создавать письма, но и сразу же отправлять их своим подписчикам. Доступны как готовые шаблоны, так и пустые, в которых можно конструировать письма с нуля.
Плюсы:
- небольшая стоимость;
- можно подключить рассылку писем;
- простой функционал, позволяющий в несколько кликов создать готовую рассылку;
- бесплатный пробный период;
- встроенный HTML-редактор, позволяющий встраивать письма из других сервисов.
Минусы:
- единый тариф для конструктора и email-рассылки.
Стоимость: от 70 рублей
Официальная страница: Cheapsender
EmailFactory
Еще один конструктор с бесплатным тарифом, позволяющий использовать 8 шаблонов и добавлять блок с логотипом. Из особенностей EmailFactory стоит отметить функцию, которая автоматически подставляет основную информацию с сайта в шаблон. При первом входе находит на сайте логотип, корпоративные цвета, контакты, ссылки на социальные сети и другие общие данные.
Плюсы:
- 100+ готовых модулей;
- экспортировать письмо в сервис рассылки можно на бесплатном тарифе;
- есть предварительный просмотр письма в десктопном и мобильном форматах;
- встроенный редактор изображений и HTML;
- совместная работа над шаблоном.
Минусы:
- сомнительная библиотека шаблонов;
- иногда заметны баги, в частности не загружается редактор изображений.
Стоимость: есть бесплатный тарифный план, платные начинаются от 750 рублей в месяц
Официальная страница: EmailFactory
Campaign Monitor
Последний сервис, о котором мы поговорим – Campaign Monitor. Полноценное использование конструктора обойдётся вам в $9+ ежемесячно. Данный сервис включает в себя все инструменты, необходимые для кастомизации рассылок: создание писем, их автоматизацию, анализ каждой кампании.
Плюсы:
- работает по принципу drag-and-drop;
- шаблоны одинаково корректно отображаются на разных устройствах;
- есть возможность сохранять черновики в HTML.
Минусы: нет пробной версии, довольно большая стоимость по сравнению с альтернативными решениями
Создание письма в конструкторе разделяется на два пути: его можно собрать с помощью редактируемых блоков либо через редактор кода. Второй вариант отлично подойдет для тех случаев, когда есть готовое письмо в формате кода, и его нужно запустить в рассылку.
Как создать письмо в HTML-редакторе, рассказываем на примере Cheapsender.
Шаг 1: Проходим регистрацию в Cheapsender
Если у вас еще нет аккаунта в нашем сервисе, то давайте его зарегистрируем:
- Открываем официальную страницу сервиса и на первом экране нажимаем «Попробовать бесплатно». Обратите внимание, что после регистрации учетной записи будет предоставлено 100 бесплатных писем для рассылки. Таким образом, вы сможете протестировать как сам сервис, так и формат своего письма.
- На отобразившейся странице вводим свои данные и нажимаем «Зарегистрироваться».
- После этого нужно будет активировать аккаунт – на почту должно прийти письмо, в котором достаточно кликнуть по кнопке «Подтвердить».
В результате мы попадаем в свой личный кабинет, а это значит, что аккаунт активирован. Теперь можно переходить к следующему шагу – созданию письма.
Шаг 2: Копируем содержимое HTML-файла
Перед тем как начать создавать шаблон письма, давайте разберемся, как скопировать код из готового HTML-файла. Первоначально у нас есть файл, который можно открыть в браузере:
Этот файл содержит код, который нужно вставить в редактор шаблонов на Cheapsender. Чтобы его посмотреть и скопировать, необходимо кликнуть правой кнопкой мыши по файлу и выбрать «Открыть с помощью» → «Блокнот». Если в отобразившемся списке нет блокнота, то нажмите «Выбрать другое приложение». Затем найдите в списке блокнот либо другой текстовый редактор.
В результате перед нами отображается HTML-код письма. Все, что от нас требуется – выделить его полностью и скопировать. Для быстрого выделения можете воспользоваться комбинацией клавиш «CTRL+A».
Содержимое скопировано, теперь его можно перенести в конструктор и запустить рассылку. Обо всем этом поговорим далее.
Шаг 3: Создаем шаблон письма в конструкторе
Возвращаемся в свой личный кабинет, доступ к которому мы получили на первом шаге, и выполняем следующие действия:
- Первым шагом переходим в раздел «Шаблоны».
- В этом разделе будут содержаться все шаблоны писем, которые вы создадите, их может быть несколько. Это удобно, так как рассылка не всегда предполагает один вариант письма – разная целевая аудитория, другая сфера и прочие аспекты. Первоначально шаблонов нет, их нужно создать – давайте к этому и приступим: нажимаем на «Создать шаблон».
- Здесь предлагаются два варианта создания шаблона, нас интересует второй – «Создание шаблона в HTML-редакторе».
- В отобразившемся окне от нас потребуется лишь вставить код файла, который мы успешно скопировали на предыдущем шаге – просто используем комбинацию клавиш «CTRL+V». Получаем весь код в конструкторе:
- Чтобы убедиться в том, что код добавился корректно, мы можем воспользоваться эмулятором письма – для этого достаточно кликнуть по кнопкам в верхней центральной части. Вот, например, как выглядит добавленное письмо в мобильной версии:
- После проверки письма на разных устройствах нажимаем на крестик для выхода из эмулятора.
- Осталось дать название шаблону и нажать на кнопку «Сохранить и выйти».
Важно: обратите внимание на то, что изображения в письме должны быть загружены на стороннем сервисе. В противном случае они попросту не будут отображаться.
Вот пример кода:
В поле src указывается ссылка на то место (файлообменник, сайт), в котором находится изображение.
В последующем все созданные письма можно будет отредактировать. Это будет полезно, когда один блок письма потерял актуальность или же вы используете чужой шаблон, но хотите его кастомизировать под свои нужды.
Шаг 4: Отправляем шаблон подписчикам
В заключительном шаге хотелось бы еще рассказать о том, что делать с созданным письмом. Конечно же, отправлять его в рассылку. Сделать в Cheapsender это довольно просто:
После добавления контактов вы можете запустить тестовую рассылку. Напоминаем, что после регистрации доступно 100 бесплатных писем для отправки, с помощью которых вы сможете оценить сервис, а также проверить работу своего письма.
Выводы
Чтобы создать письмо в HTML-редакторе Cheapsender, достаточно скопировать весь код из файла и вставить его в редактор шаблонов. При необходимости это письмо можно отредактировать. Аналогичным образом вы можете создать несколько шаблонов, каждый из которых будет направлен в отдельную рассылку.
Теперь работа с вёрсткой
не требует знания HTML и CSS.
Собирайте свой шаблон из готовых блоков и добавляйте блоки в коллекцию.
Меняйте тексты и изображения
Добавляйте изображения, тексты и ссылки в удобном визуальном редакторе.
Отправляйте тестовые письма
За пару кликов отправьте тестовые письма сразу всем заинтересованным лицам.
Возможности
Блочный редактор писем, полезный как маркетологам, так и верстальщикам, позволит вам создавать шаблоны по современным стандартам.
Добавьте в проект нужных людей, распределите роли и делитесь идеями.
Не бойтесь потерять свои правки. Все они сохранятся.
Добавляйте, настраивайте и меняйте местами заранее сохранённые части письма.
Меняйте изображения, тексты и ссылки в удобном визуальном редакторе.
Теперь ваши письма будут одинаково хорошо выглядеть и в телефоне, и в компьютере.
Ваш исходный код
Вы можете загружать любой код. Ограничений нет.
Загружайте изображения на наш сервер или подключите свой.
Экспорт без ограничений
Выгружайте свои шаблоны в любом количестве.
Проверьте результат и поделитесь им с коллегами.
Теперь все письма проекта находятся в одном месте.
Работайте над письмом вместе с командой
- Верстальщик добавит мастер-шаблон.
- Редактор напишет текст.
- Дизайнер настроит оформление для блоков.
- Менеджер согласует макеты и протестирует рассылку.
Обучающий ролик
Полная экскурсия по сервису с демонстрацией
его возможностей.
Остались вопросы?
Запишитесь на демо EmailMaker:
Остались вопросы?
Запишитесь на демо EmailMaker:
Результат готов к отправке
На выходе вы получаете чистый код, который можно сразу загружать в любую платформу и отправлять вашим подписчикам.
Голосуйте
за новые фичи
Загляните в наш план развития, там мы собрали фичи, которые хотим добавить. Вы можете предложить свои идеи и проголосовать за существующие: те, на которых будет больше голосов, воплотим как можно скорее.
Создайте первое письмо прямо сейчас
Сервис активно разрабатывается, впереди вас ждёт много полезных функций.
А пока вы можете попробовать его абсолютно бесплатно.
Создать привлекательные и современные рассылки проще всего в конструкторе емейл писем. Рассказываем, что это такое, как выбрать конструктор писем и какие из сервисов рассмотреть в первую очередь.
Что такое конструктор email писем
Html-конструктор писем — это инструмент для создания шаблонов электронной почты, которые затем можно использовать в емейл-кампаниях. Практически все рассылки с красочными баннерами, которые ежедневно приходят на почту, созданы с помощью html-шаблонов. Если вы еще не создавали письма в конструкторе, вот несколько причин, чтобы попробовать:
- Экономия времени. Даже если кто-то из сотрудников отлично владеет html, оформление письма вручную займет слишком много времени. Конструктор email рассылок позволяет создавать шаблоны быстрее и без лишних усилий.
- Готовые дизайны. Используя конструктор email писем, не придется изощряться с оформлением, поскольку готовые шаблоны созданы профессиональными дизайнерами. Достаточно изменить дизайн под свои потребности.
- Совместимость с большинством email-клиентов гарантирует, что письмо будет выглядеть одинаково у каждого получателя, и все элементы дизайна отобразятся корректно.
- Простая совместная работа.Многие конструкторы писем онлайн дают возможность совместного редактирования, благодаря чему в создании дизайна может участвовать вся команда.
- Легкий доступ. Еще одно преимущество онлайн-конструктора писем — это то, что созданные дизайны хранятся в облаке. Не нужно ждать, пока коллеги отправят файлы — доступ к ним возможен в любое время с любого устройства.
Как выбрать конструктор html писем
Конструктор емейл писем — очень популярный сервис. Существует большой выбор программ с разным функционалом и на любой бюджет. Какие функции наиболее важны при выборе конструктора писем для рассылки?
Достаточная библиотека готовых шаблонов
Есть простые бесплатные онлайн-конструкторы html писем, которые содержат не большое количество дизайнов. Есть сервисы с тысячами шаблонов. Если вариантов слишком мало, вероятно, будет сложно найти подходящий дизайн. С другой стороны, оплачивая дорогой конструктор с огромным количеством шаблонов, компании часто используют всего несколько из них. Хорошее решение — подобрать сервис, где шаблонов достаточно много, но не слишком. К слову, CRM-система NetHunt позволяет хранить от 10 и более готовых шаблонов и бесплатно рассылать неограниченное количество писем через Gmail.
Встроенный редактор изображений
Конечно, можно обойтись и без этой функции, поскольку существует много сторонних редакторов изображений. Но практика показывает, что возможность редактировать изображения в конструкторе email-писем — это удобно и экономит время.
Быстрый предварительный просмотр
Прежде чем использовать шаблон в емейл-кампании, необходимо убедиться, что он корректно отобразится у получателей. Для этого в конструкторе html-писем нужна функция предварительного просмотра.
Совместимость с почтовыми клиентами
Перед тем, как выбрать конструктор писем для рассылки, убедитесь, что его шаблоны совместимы со всеми основными почтовыми клиентами.
Интеграция с сервисом рассылки
Интеграция конструктора email-шаблонов с вашим сервисом рассылки — важная функция для удобства работы и экономии времени.
Простой и понятный интерфейс
Чтобы программой можно было легко пользоваться, выбирайте конструктор email рассылок с понятным управлением. Также рекомендуем убедиться, что визуальный редактор не зависает, работает быстро и без ошибок.
Совместное редактирование
Эта функция становится все более актуальной, особенно при переходе многих компаний на удаленную работу. Совместное редактирование позволяет работать над шаблоном нескольким сотрудникам одновременно и видеть изменения в реальном времени.
5 лучших конструкторов HTML-шаблонов емейл писем в 2021 году
Прежде чем остановить выбор на одном из конструкторов писем, рассмотрите лидеров рынка. Они заслужили свою популярность благодаря тому, что смогли удовлетворить потребности множества компаний.
1. Stripo
Это русифицированный конструктор email-шаблонов, редактор которого напоминает WordPress. Письма создаются из стандартных модулей, управление простое и понятное. Stripo имеет прямую интеграцию с множеством сервисов емейл рассылок, а также базовый бесплатный тариф. Одна из фишек этого конструктора шаблонов — возможность геймифицировать изображения.
2. Mailchimp
Много лет Mailchimp остается одним из самых известных онлайн конструкторов html писем: 23% маркетологов по всему миру используют именно этот сервис. В Mailchimp сравнительно немного шаблонов, но простое управление. Кроме того, он позволяет загружать и редактировать сторонние шаблоны писем, которые можно скачать в интернете. Конструктор шаблонов email — это одна из функций Mailchimp, поскольку в первую очередь он является сервисом рассылки.
3. Canva
Если вы ищете бесплатный онлайн конструктор html писем, присмотритесь к Canva. Это многофункциональный сервис создания дизайнов для различных целей: баннеров, визиток, флаеров, презентаций и многого другого. Есть и конструктор email-шаблонов. Преимущества Canva — это большой выбор бесплатных шаблонов и элементов (понравившиеся платные можно приобретать отдельно), великолепное управление, встроенный редактор изображений, широкий функционал (включая анимацию), совместное редактирование, русскоязычный интерфейс и гибкие тарифы. Базовый тариф — бесплатный.
4. BEE Free
Создатели этого сервиса назвали его Best Email Editor и не преувеличили. Это бесплатный онлайн конструктор html писем с возможностью покупки pro-версии. Он содержит более 500 адаптивных шаблонов писем, редактор изображений, возможность управлять отображением элементов дизайна в зависимости от размера экрана получателя. Поддерживает интеграцию с MailChimp и Gmail. Из недостатков: отсутствие русскоязычного интерфейса и возможности хранить созданные шаблоны в облаке.
5. Chamaileon
Этот конструктор email рассылок включает большое количество шаблонов писем на любой вкус и совместим со всеми возможными почтовыми клиентами. Пользователь может создавать собственные блоки или использовать предустановленные, управлять отображением элементов в зависимости от размера экрана и предварительно просматривать результат. Среди других функций — встроенный редактор изображений, совместное редактирование, интеграция через Zapier.
При выборе конструктора шаблонов писем не забудьте о тестировании и убедитесь, что сервис отвечает вашим требованиям. Большинство конструкторов email писем предлагают бесплатный пробный период. А некоторые позволяют создавать шаблоны сразу, даже без регистрации.
Читайте также: