Лучшие конструкторы html писем в 2021 году

Email-рассылка способна на большее, чем просто сообщать новости. Дизайн письма создает настроение, формирует впечатление о компании, влияет на лояльность клиентов и конверсию.

Создать привлекательные и современные рассылки проще всего в конструкторе емейл писем. Рассказываем, что это такое, как выбрать конструктор писем и какие из сервисов рассмотреть в первую очередь.

Что такое конструктор 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 писем предлагают бесплатный пробный период. А некоторые позволяют создавать шаблоны сразу, даже без регистрации.

Get more NetHunt in your life

Receive popular, monthly sales and marketing insights

Thank you!

You have been subscribed.

Опубликовано февраль 22, 2021, дополнено февраль 24, 2021

Поделиться постом с друзьями и коллегами!

Лучший Бесплатный Конструктор Шаблонов Имейл Писем — ХТМЛ Редакторы | by Andrew Laurentiu

Сложно спорить с тем фактом, что email-маркетинг является эффективным мощным инструментом, ориентированным на результат. Обычными письмами сложно удивить и заинтересовать получателя. Конструкторы отзывчивых шаблонов электронных писем помогают привлечь внимание потенциального клиента с помощью профессионального и привлекательного письма.

Адаптивные ХТАМЛ-шаблоны имейл рассылок успешно используются интернет-маркетологами для повышения запоминаемости их товаров и услуг в Интернете. Конструктор отзывчивых шаблонов электронных писем может обеспечить интернет-маркетологам удивительные результаты.

👉 Я рекомендую Postcards — конструктор имейл писем. Postcards является лидером по качеству HTML-кода и дизайну.

Мы подобрали для вас список лучших бесплатных адаптивных шаблонов электронных писем, который поможет принять эффективное решение в вопросах email-маркетинга. Вы, безусловно, сможете использовать данные инструменты для достижения наивысших результатов.

Несмотря на то, что это бесплатная платформа, она известна своим собственным языком разметки, который позволяет разработчикам конструировать шаблоны писем. Основная задача MJML — упростить создание адаптивных электронных писем. Вы можете написать полностью совместимую разметку HTML 5, и использовать ее со своим программным обеспечением для отправки электронной почты.

Для вашего удобства есть несколько шаблонов, которые можно предварительно просмотреть в качестве примера или даже использовать в работе. По сути, движок с открытым исходным кодом отвечает за создание высококачественных адаптивных электронных писем.

Это собрание различных платформ и фреймворков. Он предоставляет дизайнерам и разработчикам ультра-легкую CSS-среду для быстрого создания адаптивных электронных писем в формате HTLM5. Каждый шаблон имеет уже готовую сетку, которая может быть доработана с помощью различных элементов.

Независимо от того, является вашей целью повышение узнаваемости бизнеса или электронная коммерция, это отличная платформа, позволяющая создавать адаптивные шаблоны электронной почты бесплатно. В итоге, вы получаете отличный отклик от клиентов без особых хлопот.

Создание HTML-шаблона действительно может быть довольно сложным процессом. Cerberus доказал свою полезность в создании шаблонов электронной почты.

Эта популярная библиотека фреймворков предоставляет отличные шаблоны электронных писем в формате HTML, которые превратят процесс просмотра электронной почты для ваших подписчиков в увлекательное занятие. И наибольшая привлекательность Cerberus заключается в возможности корректировки HTML-кода.

Это бесплатный язык разметки с открытым исходным кодом, который известен своими отличными адаптивными возможностями построения электронных писем. Он предоставляет все возможности HTML и позволяет легко создавать электронные письма.

HEML помогает избежать любых возможных затруднений и сложностей при создании писем, позволяя с легкостью пользоваться всеми преимуществами email-маркетинга.

Это воплощение мечты для пользователей адаптивных шаблонов электронной почты, поскольку позволяет создавать действительно замечательные адаптивные шаблоны электронных писем в формате HTML за считанные минуты (да, всего за несколько минут). Вы даже можете повторно использовать отдельные элементы шаблона в других рассылках для повышения вовлеченности клиентов и снижения показателей конверсии.

Builder имеет встроенную функцию преобразования изображений, что позволяют превращать ваши дизайн-макеты в закодированные электронные письма. Но, главное — это то, что вы можете создавать адаптивные шаблоны электронных писем за считанные минуты, без какого-либо опыта работы с кодом.

Этот генератор шаблонов предлагает дизайнерам и разработчикам более 100 компонентов для создания уникальных писем в считанные минуты. Благодаря функции drag-n-drop (перетаскивания), настройке цветов, тысячам адаптивных дизайнов и модульной системе можно сказать, что для пользователя весь процесс упрощен до предела.

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

А благодаря дюжине модулей вы получите тысячи вариантов адаптивного дизайна. Без сомнения, Postcards знает, что такое удобство пользования.

Этот адаптивный конструктор шаблонов электронной почты предоставляет конструктор макетов, который можно легко использовать для создания адаптивных электронных писем в формате HTML.

Он создан для разработчиков и дизайнеров, которым нужен максимально простой в использовании конструктор email-шаблонов.

Это конструктор электронных писем с интерфейсом drag-n-drop и собственным сервером. GetEmailBuilder занимает последнее место в списке самых лучших конструкторов шаблонов электронной почты 2019 года.

Главные особенности:

• Поддержка пользовательских шаблонов
• Интерфейс drag-n-drop
• Экспорт шаблонов (позволяет пользователю экспортировать шаблоны в HTML)
• Функции модуля (изменение фона, цвета и т.д.)
• Встроенный редактор содержимого
• Неограниченное коммерческое использование

EDMdesigner, безусловно, разработал сложную и интуитивно понятную платформу для создания электронных писем, которая может стать отличным инструментом дизайнеров в разработке лучших email-рассылок.

Несмотря на drag-n-drop интерфейс, в EMDdesigner больше всего привлекает изобилие шаблонов, которые можно использовать для создания великолепных электронных писем. Помимо всего этого, вы также можете сохранять свои шаблоны электронных писем, например фирменный заголовок, новостной блок и т.д.

OctaneGo предлагает различные инструменты для создания электронных писем, которые позволяют пользователям реализовать свои пожелания к email-письмам по максимуму.

С макетами OctaneGO, вы получите возможность реализовать свой творческий потенциал в разработке электронных писем, полностью адаптивных и ориентированных на результат.

Этот простой в использовании конструктор почтовых шаблонов предлагает полностью настраиваемые цвета, изображения, тексты, шрифты и дизайн электронной почты, которые позволяют пользователям реализовывать свой творческий потенциал на максимум без каких-либо сложностей.

Всего несколько щелчков мышью, и вы получите в свое распоряжение совершенно новые шаблоны электронных писем.

Вы далеки от работы с кодом? Не проблема. Вы можете создавать полностью настраиваемые электронные письма в формате HTML всего за несколько минут с помощью редактора шаблонов электронной почты WP HTML Mail.

WP HTML Mail позволяет изменять тексты, шрифты, изображения, настраивать выравнивание. Функция предварительного просмотра поможет оценить работу и внести необходимые изменения. В то же время, для различных плагинов форматирование электронных писем может быть включено или отключено.

Вы можете создавать удивительные кампании для своей аудитории с помощью мощного конструктора шаблонов и дизайна электронных писем Mailoptin.

Все, что вам нужно сделать, это выбрать шаблон или предварительно созданную тему. Mailoptin очень прост в использовании, потому что не требует никакого специального кодинга.

Этот бесплатный drag-n-drop конструктор электронных писем известен своими адаптивными шаблонами. Если вы ищете лучшие шаблоны новостных рассылок, вам наверняка пригодится данный конструктор электронной почты. Он предлагает 3 шаблона, которые могут быть запущены в работу в кратчайшие сроки.

Главные особенности:

• Современный дизайн (27 различных элементов)
• Экспорт
• Легкость редактирования содержимого
• Пояснение к кодам
• Прилагается документация
• Быстрый предосмотр
• Поддержка 24/7

Для тех, кто ищет простой в использовании и, в то же время, мощный, конструктор электронной почты, предлагаем обратить пристальное внимание на Unlayer.

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

JungleMail, Enovapoint

Создавайте красочные email-письма, добавляйте текст и изображения, делая свои сообщения более привлекательными для получателя.

С помощью этого конструктора шаблонов вы можете создавать совершенно потрясающие кампании, потому что JungleMail позволяет вносить изменения по мере необходимости. Вы можете удалять, копировать или изменять порядок блоков по своему усмотрению.

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

С помощью функции множественного тестирования вы можете получить удвоенный или даже утроенный показатель по кликам. Персонализируйте электронные письма в соответствии со своими предпочтениями и делайте их наиболее привлекательными для своей аудитории. Dotmailer предлагает полную свободу в достижении желаемых результатов.

В общем, можно с уверенностью сказать, что email –маркетинг очень эффективный инструмент развития бизнеса. Оживите свои email-рассылки, просто выбрав из вышеупомянутого списка любой конструктор адаптивных шаблонов электронных писем.

👉 Я рекомендую Postcards — конструктор имейл писем.

Любой из конструкторов может помочь вам достичь желаемых результатов и сделать маркетинговую кампанию успешной. Не торопитесь, играйте честно и всегда стремитесь к лучшему.

Конструкторы HTML писем

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

Конструкторы HTML-писем

Подавляющее большинство существующих на сегодняшний день средств для конструирования HTML-писем являются платными, но у них есть пробный период. Это следует учитывать заранее, так как использование подобных сервисов и программ будет нецелесообразным для отправки нескольких писем — по большей части, они ориентированы на массовую работу.

Читайте также: Программы для рассылки писем

Mosaico

Единственный в рамках нашей статьи максимально доступный сервис, не требующий регистрации и предоставляющий удобный редактор писем. Весь принцип его работы раскрывается прямо на начальной странице сайта.

Процедура редактирования HTML-писем происходит в специальном редакторе и заключается в составлении дизайна из нескольких подготовленных блоков. При этом каждый элемент оформления можно изменить до неузнаваемости, что придаст вашим работам индивидуальности.

После создания шаблона письма получить его можно в виде файла формата HTML. Дальнейшее его использование будет зависеть от ваших целей.

Перейти к сервису Mosaico

Tilda

Онлайн-сервис Tilda является полноценным конструктором сайтов на платной основе, но предоставляется им и бесплатная пробная подписка на две недели. При этом непосредственно сам сайт создавать не нужно, достаточно зарегистрировать аккаунт и создать шаблон письма, используя стандартные заготовки.

Редактор писем содержит множество инструментов как для создания шаблона с нуля, так и для корректировки стандартных образцов.

Итоговый вариант разметки можно будет получить после публикации на специальной вкладке.

Перейти к сервису Tilda

CogaSystem

Как и предыдущий онлайн-сервис, CogaSystem позволяет одновременно создавать HTML-шаблоны писем и организовывать рассылку на электронную почту, указанную вами. Во встроенном редакторе есть все необходимое для создания красочных почтовых рассылок с использованием веб-разметки.

Перейти к сервису CogaSystem

GetResponse

Последним онлайн-сервисом в рамках настоящей статьи является GetResponse. Данный ресурс по большей части ориентирован на почтовые рассылки, а имеющийся в нем HTML-редактор является, скорее, дополнительным функционалом. Им можно воспользоваться как на бесплатной основе с целью проверки, так и путем приобретения подписки.

Перейти к сервису GetResponse

ePochta

Практически любая программа для почтовой рассылки на ПК обладает встроенным редактором HTML-писем по аналогии с рассмотренными онлайн-сервисами. Наиболее актуальным софтом является ePochta Mailer, содержащий большую часть функций почтовых сервисов и удобный редактор исходного кода.

Основное достоинство при этом сводится к возможности бесплатного использования HTML-конструктора, в то время как оплата необходима только для непосредственного создания рассылки.

Скачать ePochta Mailer

Outlook

Outlook наверняка знаком большинству пользователей ОС Windows, так как входит в стандартный пакет офисных приложений от Microsoft. Это почтовый клиент, в котором имеется свой редактор HTML-сообщений, которые после создания можно будет отправить потенциальным адресатам.

Программа является платной, без каких-либо ограничений все ее функции могут быть использованы только после приобретения и установки пакета Microsoft Office.

Скачать Microsoft Outlook

Заключение

Мы рассмотрели лишь некоторые из существующих сервисов и приложений, однако при углубленном поиске в сети можно найти множество альтернативных вариантов. При этом стоит помнить о возможности создания шаблонов напрямую из специальных текстовых редакторов при должном знании языков разметки. Такой подход является наиболее гибким и не требует финансовых вложений.

Помогла ли вам эта статья?

30 бесплатных адаптивных шаблонов электронных писем

Почти 50% всех электронных писем открывается с мобильных устройств, и этот показатель будет только увеличиваться. Поэтому важность использования адаптивного HTML шаблона для письма — email маркетинговых кампаний возрастает.

Разработать базовый HTML-шаблон электронного письма, который будет корректно отображаться в разных клиентах, довольно непросто. Но разработать шаблон, который будет корректно отображаться также на всех мобильных и планшетах, еще сложнее.

К счастью, есть дизайнеры и разработчики, создавшие коллекции редактируемых бесплатных адаптивных шаблонов электронных писем, которые работают во всех клиентах и на любых устройствах.

Litmus Responsive Email Templates (7 шаблонов)

Litmus выпустил подборку из семи адаптивных шаблонов электронных писем с готовым дизайном. Они поставляются с исходными файлами PSD:

Green Village HTML Templates

Это минималистичный блочно-модульный HTML шаблон для письма рассылки, который подходит для различных целей. Загружаемый пакет включает в себя как исходный PSD-файл, так и HTML-код:

Responsive Email Template от Email on Acid

Этот блочно-модульный шаблон предлагает три варианта дизайна, которые отображаются в зависимости от ширины экрана. По умолчанию, он поддерживает 1-3 колонки, Он использует медиа-запросы, поэтому на мобильных устройствах преобразуется в одностолбцовый макет:

Basic Responsive Email Template

Simple Responsive HTML Email

Простой блочно-модульный адаптивный шаблон HTML письма для email рассылки использует медиа-запросы и плавающую ширину, чтобы обеспечить максимальную совместимость:

Responsive & Flat Newsletter Template

Responsive Email Template

Responsive Email Blueprints от MailChimp (6 шаблонов)

MailChimp выпустил подборку из шести адаптивных готовых шаблонов писем для рассылки HTML под названием Email Blueprints. Они включают в себя некоторые элементы специфического языка шаблонов Mailchimp, но их можно легко удалить, если вы не являетесь пользователем MailChimp:

Ink – A Responsive Email Framework (4 шаблона)

Это адаптивный Email-фреймворк от ZURB, который включает в себя сетку из 12 столбцов и простые элементы пользовательского интерфейса для быстрой разработки электронных писем:

Antwort Responsive Email Layout Templates (2 шаблона)

Antwort предлагает надежные адаптивные шаблоны электронных писем HTML с обширной документацией и с настраиваемой шириной в зависимости от размеров экрана. Шаблоны отлично работают в мобильных клиентах, а также во всех основных стационарных клиентах и в Outlook (2000+):

Salted, A Responsive Email Template

Шаблон разработан на основе кода, используемого Litmus для своих собственных рассылок. Предлагает простую основу для построения адаптивных электронных писем, созданных на HTML:

A Table-Based (but Responsive) Email Template

Этот красивый шаблон HTML письма был разработан на основе E-mail Blueprints от MailChimp и Email Boilerplate от Шона Пауэлла. Это адаптивный табличный шаблон электронных писем, который уже включает в себя теги объединения Mailchimp (их можно удалить, если они не нужны):

Respmail Responsive Email Template

Улучшенная версия MailChimps Email Blueprints с большим количеством опций, заново определенной структурой и рядом исправлений для Outlook, Yahoo, Hotmail, Gmail… Данный шаблон был протестирован и тщательно проанализирован на предмет совместимости. Также он невероятно прост в настройке:

rwdemail

Разработанный на основе шаблонов Ink от ZURB. Это проект, который позволяет автоматизировать все, начиная от прекомпиляции SASS, встраивания CSS, CSS / HTML, минимизации изображений и до S3-хостинга изображений и тестирования Litmus. С помощью шаблонов INK и их CSS-образцов можно создавать шаблоны HTML письма любого уровня сложности.

Future-Proof Responsive Email Template Without Media Queries

А что, если бы можно было создавать адаптивные шаблоны электронных писем даже в средах с неудовлетворительной поддержкой CSS? Шаблон вы найдете здесь:

• Responsive Email Patterns — подборка шаблонов и модулей для адаптивных электронных писем;
• Cerberus — шаблоны для адаптивных электронных писем;
• Really Good Emails — лучшие дизайны для HTML шаблонов писем;
• Responsive Email Resources — подборка инструментов для создания адаптивных шаблонов электронных писем.

Дайте знать, что вы думаете по этой теме в комментариях. За комментарии, подписки, дизлайки, отклики, лайки низкий вам поклон!

Данная публикация является переводом статьи «30 Free Responsive Email and Newsletter Templates» , подготовленная редакцией проекта.

Все, что вы хотели знать об электронных письмах в формате HTML

От автора: в новой короткой серии публикаций мы расскажем о некоторых полезных инструментах и методах для разработчиков и дизайнеров. На этот раз мы рассмотрим шаблоны и инструменты для создания и разработки электронных писем в формате HTML.

Начало работы с электронной почтой в формате HTML

Если вы просто пытаетесь понять все, что происходит за кулисами причудливого мира электронной почты в формате HTML, Кейти Г. О’Коннор опубликовала прекрасное руководство о том, как начать кодирование электронных писем. В статье представлены курсы, учебные пособия и просто общие рекомендации, которые следует учитывать при создании и разработке электронных писем — все в виде подробного одностраничного руководства. На SmashingMag, Ли Манро также опубликовал подробное руководство по созданию и отправке электронных писем в формате HTML.

В качестве альтернативы, Как кодировать электронные письма в HTML для любого устройства — это очень подробное руководство по созданию надежного шаблона электронной почты в формате HTML и его тестированию, а также практический пример создания шаблона информационного бюллетеня с нуля. В общем, это очень основательный обзор всего, что вам нужно знать, чтобы начать правильно работать.

У Джейсона Родригеса есть подробный видеокурс по электронной почте в формате HTML (платный), в котором есть практически все, что нужно знать, от доступности до устранения неполадок, рабочих процессов и инструментов.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

А если вы столкнулись с проблемой электронной почты или просто ищете помощи от сообщества, #emailgeeks — отличная отправная точка. Это сообщество Slack только по приглашению с множеством каналов для обсуждения кода, дизайна, вакансий, событий и новых инструментов и ресурсов. Вы также можете найти множество ресурсов с хэштегом #emailgeeks в Твиттере.

Языки и фреймворки электронной почты HTML

Написание чистых писем, обеспечивающих удобство работы со всеми популярными почтовыми клиентами, может оказаться трудоемкой задачей. HEML здесь, чтобы изменить это. Язык разметки с открытым исходным кодом дает вам естественные возможности HTML без необходимости иметь дело со всеми причудами электронной почты. Нет никаких особых правил или парадигм стиля, которые нужно освоить, поэтому, если вы знаете HTML и CSS, то можем начинать.

Языки и платформы электронной почты HTML

Написание чистых, отзывчивых писем, обеспечивающих удобство работы со всеми популярными почтовыми клиентами, может оказаться трудоемкой задачей. HEML здесь, чтобы изменить это. Язык разметки с открытым исходным кодом дает вам естественные возможности HTML без необходимости иметь дело со всеми причудами электронной почты. Нет никаких особых правил или парадигм стиля, которые нужно освоить, поэтому, если вы знаете HTML и CSS, вы готовы начать.

MJML делает кодирование адаптивных писем немного более удобным

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

Caniemail.com — удобный инструмент, который принадлежит набору инструментов каждого, кто сталкивается с проблемой электронной почты HTML — будь то время от времени или регулярно — это caniemail.com. Вдохновленный успешной концепцией caniuse.com, caniemail.com позволяет вам проверить поддержку 179 функций HTML и CSS в 31 почтовом клиенте.

Вы можете ввести функцию, чтобы увидеть, насколько хорошо она поддерживается , проверить индекс функций, сравнить почтовые клиенты или просмотреть таблицу показателей поддержки почтовых клиентов, которая ранжирует почтовые клиенты на основе их поддержки. Полные данные также доступны в виде файла 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-галерея электронной почты.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Доступные электронные письма

Где мы находимся с электронной почтой с точки зрения доступности? Правильно ли мы объявляем электронные письма читателям с экрана? А как насчет темного режима? Репозиторий Accessible Email содержит ряд статей, инструментов, презентаций и ресурсов о специальных возможностях — не только для электронной почты, но особенно для нее.

С Accessible-Email.org вы можете анализировать отправленные письма и проверять доступность их улучшения. С помощью темного режима для имитатора электронной почты вы можете проверить, как ваша электронная почта выглядит в темном режиме.

Соответствие с 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 в темном режиме. В нем объясняется, как настроить темный режим, как работать с изображениями и общей поддержкой браузера (что очень хорошо!).

Реми Парментье идет немного глубже, показывая, как исправить проблемы темного режима Gmail с помощью режимов наложения CSS. Gmail принудительно изменяет любой цвет светлого текста на темный цвет текста. Если вам нужно это исправить, Реми придумал творческое использование mix-blend-mode(поддерживается в Gmail), чтобы сохранить светлый цвет текста, если вам нужно.

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 лучше и быстрее.

Автор: Vitaly Friedman

Источник: www.smashingmagazine.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Как работать с почтовыми шаблонами

Управление почтовыми шаблонами находится на странице CRM > Настройки > Работа с почтой > Почтовые шаблоны.

Как создать шаблон?

Для создания шаблона нажмите на кнопку Добавить почтовый шаблон:

Рассмотрим доступные поля для заполнения:

• Доступен всем – если укажите эту опцию, то данный шаблон смогут использовать все пользователи, иначе – шаблон будет доступен только вам. Опция доступна только администратору Битрикс24.

• Активен

  – для того, чтобы шаблон можно было использовать, отметьте это поле, иначе он не появится в списке выбора шаблонов при отправке писем.

• Название – название шаблона в списке шаблонов.

• Привязка – выберите сущность (Лид, Сделка, Контакт, Компания, Счет, Предложение или без привязки к сущности), для которой можно будет использовать шаблон.

  Обратите внимание, шаблон будет доступен только для выбранной сущности.

• От кого – адрес почты, который будет указан в качестве отправителя.

• Тема – укажите тему письма.

В теме и в самом теле письма можно добавлять поля выбранной сущности, которые вы хотите вставить в шаблон, а также можно прикрепить файл:

Также в шаблонах можно использовать и

Переключившись обратно в визуальный редактор, вы сразу же увидите, как будет выглядеть ваш html-код:

В шаблонах вы можете использовать как предустановленные поля сущностей, так и Пользовательские поля сущностей. При отправке письма поля сущности и файл будут подставлены автоматически.

После всех настроек не забудьте нажать Сохранить.

Обратите внимание, при отправке письма сразу нескольким контактам в письме не будут автоматически проставлены данные каждого отдельного элемента, поэтому шаблоны следует использовать только при отправке письма одному клиенту.

Как написать письмо по созданному шаблону?

Перейдите на детальную страницу той сущности, из которой хотите отправить письмо, нажмите в таймлайне на кнопку

Откроется форма создания письма, в этой форме в поле Шаблон будут доступны созданные почтовые шаблоны:

Выбрав шаблон, в поле содержания письма автоматически вставятся заполненные поля данной сущности.

Далее можно дополнить письмо нужной информацией и отправить.

Как удалить почтовый шаблон?

Перейдите в список шаблонов и выберите в меню действий Удалить почтовый шаблон:

15 HTML-Шаблонов Писем, которые вы можете использовать для своего бизнеса

Email-маркетинг — это больше, чем просто вставка слов в электронное письмо и нажатие кнопки «Отправить». Вы добьетесь лучших результатов, если потратите время на использование шаблона, который отражает индивидуальность вашего бренда, упрощает чтение электронной почты и не дает вашим подписчикам отвести взгляд. HTML-шаблоны писем — отличный способ создать собственный маркетинговый шаблон электронной почты, который идеально подходит для вашего бренда — или, по крайней мере, привлекает внимание ваших читателей достаточно долго, чтобы донести ваше сообщение.

Но, как может сказать вам любой, кто когда-либо пытался создать HTML-шаблоны писем для своего бренда, это редко бывает легко, особенно если вы еще не знакомы с HTML. А многие готовые HTML-шаблоны просто уродливы. Многие, но не все.

Представляем вашему вниманию 15 настраиваемых HTML-шаблонов писем, которые помогут вам быстро создать красивые электронные письма.

Email-маркетинг важен для большинства, если не для всех, предприятий. Электронная почта предлагает брендам и инфлюенсерам отличный способ связаться с людьми, которые хотят получать от них уведомления, чтобы построить прочные отношения. Но если ваши электронные письма некрасивы или не соответствуют характеру вашего бренда, ваши подписчики перестанут их читать. А это означает, что вашей маркетинговой кампании будут уделять меньше внимания.

Шаблоны email-писем в формате HTML, которыми мы делимся здесь, помогут вам этого избежать. Вы можете использовать их в изначальном виде (просто изменить контент и изображения) или улучшить свои навыки программирования и настроить HTML- шаблоны  в соответствии с вашими конкретными потребностями. Эти шаблоны являются отличной отправной точкой для создания полностью индивидуализированного email-маркетинга.

1.

Стоимость: $18 

Этот полностью адаптивный HTML-шаблон письма с подтверждением подписки является частью серии шаблонов уведомлений, доступных на Themeforest, которая включает более 40 адаптируемых шаблонов для электронной почты. Он совместим со всеми основными службами электронного маркетинга, имеет неограниченные цветовые варианты, использует встроенный CSS и оптимизированный код.

Стоимость: бесплатно (необходимо создать учетную запись в Litmus).

Pook — это современный набор шаблонов от Litmus, который включает HTML-шаблоны для всего, от информационных бюллетеней электронной почты до управления учетной записью. Это маркетинговая тема, которую вы можете использовать для развития своего бизнеса и установления связи с аудиторией. Все шаблоны были протестированы с помощью Litmus, и вы можете использовать раздел «Предварительный просмотр электронной почты» в конструкторе Litmus, чтобы увидеть, как ваша электронная почта будет выглядеть в различных почтовых клиентах.

Стоимость: бесплатно

Если вы ресторанный маркетолог, инфлюенсер в сфере продуктов питания или имеете другой бизнес, связанный с продуктами питания, вам понравится этот HTML-шаблон Restaurant от Colorlib. Шаблон адаптивный, адаптируемый и гибкий.

Стоимость: бесплатно (с указанием электронной почты)

Green Village — это минималистичный шаблон email-писем от Pixelbuddha, который можно адаптировать и настроить для различных нужд. Он хорошо работает с мобильными устройствами, настольными браузерами и многими почтовыми клиентами. Шаблон включает исходники HTML и PSD.

Стоимость:  $24 

Kara — полностью адаптивная тема с доступом к настройщику тем, доступным через Themeforest. Он протестирован Litmus, использует оптимизированный HTML и имеет трехколоночный макет, готовый к использованию с Campaign Monitor и Mailchimp.

Стоимость: бесплатно

Sonata — это HTML-шаблон, созданный Web Canopy Studio и доступный пользователям HubSpot бесплатно. Шаблон элегантный и чистый и, что самое главное, полностью настраиваемый.

Стоимость: бесплатно

Corporate — это универсальный HTML-шаблон писем, который можно использовать как часть приветственной серии электронных писем или позже в маркетинговой воронке для продвижения ваших продуктов и услуг. Вы даже можете связать разные части электронного письма с разными частями своего веб-сайта или целевой страницы, чтобы читатели могли попасть именно туда, куда они хотят.

Стоимость: бесплатно

Этот HTML-шаблон включает три различных макета, которые запускаются в зависимости от ширины экрана читателя. Он поддерживает до трех столбцов и преобразуется в макет с одним столбцом на мобильных устройствах.

Стоимость: $16

Miley — еще один минималистичный HTML-шаблон для email-писем в нашем списке. Он совместим со всеми основными службами email-маркетинга и поддерживает несколько макетов сетки, а также позволяет изменять типографику и цвета. Он включает 30+ вариантов макета и специально разработанные элементы.

Стоимость: бесплатно

ZURB предлагает пять адаптивных бесплатных HTML-шаблонов, включая шаблон Hero, который мы показываем выше. Все шаблоны имеют гибкий настраиваемый макет, поэтому вы можете легко изменять изображения, копировать и играть с цветами. Шаблоны включают отдельные файлы CSS и HTML, чтобы упростить процесс редактирования вашего email-письма. Шаблоны оптимизированы для большинства почтовых клиентов.

Стоимость: бесплатно

Шаблон Portfolio от Colorlib — отличный HTML-шаблон, который работает для цифровых агентств, веб-разработки, фрилансеров и т.д. Шаблон уже готов к использованию, но вы всегда можете настроить его в соответствии с вашими потребностями в брендинге, и он отлично работает на всех устройствах.

Стоимость: требуется подписка на Envato Elements от $16,50 в месяц.

Space — это полностью адаптивный шаблон электронной почты, разработанный Envato Elements. Он протестирован Litmus и совместим с CastelLab Builder, Mailchimp и Campaign Monitor. Файлы HTML также работают с Constant Contact, iContact и AWeber.

Стоимость: $20

BlauMail включает в себя многоцелевые HTML-шаблоны для писем для всего, от надежных email-маркетинговых кампаний до транзакционных писем. Набор шаблонов включает 42 шаблона и 170 многоразовых модулей. Он использует гибридный резервный вариант для обеспечения совместимости с более чем 70 приложениями и устройствами, включая популярные клиенты, такие как Apple iPhone, Gmail, Apple iPad, Outlook, Apple Mail, Samsung Mail, Google Andoirce, Yahoo! Почта и Почта Windows Live.

Стоимость: бесплатно

HTML-шаблон для писем Webinar Invite от WorkCast доступен на HubSpot и предлагает простой шаблон для продвижения всего, что вы хотите, от контента блога до ваших новейших продуктов и услуг. Однако, как следует из названия, это отличный шаблон для использования, если вы продвигаете веб-семинар и пытаетесь получить регистрацию.

Стоимость: бесплатно

Шаблон Blog от Colorlib — это полностью адаптивный HTML-шаблон email-письма, который лучше всего подходит для онлайн-журналов или для обмена контентом блога. Вы также можете настроить шаблон в соответствии со своими потребностями для других целей.

Теперь, когда мы рассмотрели некоторые из лучших HTML-шаблонов, давайте поговорим о том, почему вы можете вообще захотеть использовать шаблон электронной почты.

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

Несомненно, правильный HTML-шаблон может означать успех ваших маркетинговых кампаний. И электронная почта важна. На каждый доллар, потраченный на email-маркетинг, вы можете получить 42 доллара взамен (умопомрачительная прибыль в 4200%). Кроме того, 60% потребителей говорят, что они сделали покупку в результате полученного маркетингового письма (постоянный контакт). Наличие в вашем распоряжении достойного HTML-шаблона упрощает и ускоряет получение прибыли с помощью вашего email-маркетинга.

Хотя мы собрали для вас 15 отличных HTML-шаблонов писем, вы можете пойти и поискать свои собственные. Или, может быть, вы даже хотите разработать и написать собственный код! В любом случае есть несколько ключевых функций, на которые следует обратить внимание, прежде чем выбирать шаблон.

HTML письма — это электронные письма, содержащие текст, цвета, изображения, анимацию и многое другое. Они помогают брендам создавать цельный дизайн целевых страниц и страниц веб-сайтов. Это простая вещь, которая имеет большое значение для посетителей и подписчиков веб-сайтов, потому что она заставляет ваш бренд выглядеть более профессиональным и изысканным.

Но не все дизайны электронных писем одинаковы. В этом разделе мы рассмотрим пять вещей, на которые следует обратить внимание при поиске идеального HTML-шаблона электронной почты или для включения в свой собственный HTML-дизайн электронной почты.

Отличный дизайн электронного письма включает пять компонентов:

• Макет
• Типография
• Цвета
• Изображения и другие зрительные средства информации
• Призыв к действию

Давайте подробнее рассмотрим каждый из этих компонентов и то, как их использовать для создания или выбора лучших возможных HTML-шаблонов писем.

Макет электронного письма учитывает, где в электронном письме будут отображаться различные элементы вашего электронного письма, и помогает вам установить иерархию для вашего контента. Подписчики, как правило, сканируют контент, а не читают его, поэтому лучший макет электронного письма будет настроен таким образом, чтобы его было легко сканировать или бегло просматривать и при этом получать наиболее важные сведения о содержании вашего письма.

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

Source: reallygoodemails.com

Макеты с двумя столбцами показывают содержимое в двух столбцах. Контент обычно отображается в виде F или зигзагообразного узора, что способствует сканированию или беглому просмотру. Пробелы важны для писем, в которых используется макет из двух столбцов, он помогает избежать загромождения письма и позволяет читателям понять, где они должны искать. Вот как выглядит макет из двух столбцов:

Source: reallygoodemails.com

В дополнение к основному содержанию, ваши HTML-шаблоны писем должны также включать раздел верхнего и нижнего колонтитула. Эти разделы, вероятно, не изменятся в ваших маркетинговых кампаниях по электронной почте.

Цвета обычно используются в маркетинге, чтобы вызывать у потребителей различные эмоции. Благодаря этому цветовая гамма является важной частью ваших HTML-шаблонов писем. Если у вас уже есть фирменная цветовая гамма, выбрать цвета для ваших шаблонов  будет легко — просто используйте цвета вашего бренда (если у вас нет фирменных цветов, вам нужно поработать над этим). В дополнение к цветам вашего бренда ваши электронные письма, скорее всего, будут содержать акцентные цвета на таких элементах, как кнопки, гиперссылки и т.д.

Выбор правильного шрифта жизненно важен для успеха вашего email-маркетинга. Шрифт может означать разницу между подписчиками, читающими ваш контент, или нет. Если ваш шрифт нелегко читается и не нравится глазу, читатели перестанут читать. Вот пример правильного использования типографии:

Source: reallygoodemails.com

Вы заметите, что письмо посвящено детской программе, а выбранные шрифты являются игривыми.

В большинстве случаев стена с текстом — верный способ заставить подписчиков удалить ваше письмо, не читая его. Хотя в некоторых кампаниях можно обойтись только текстом, вы захотите чаще включать изображения и другие визуальные средства. Изображения и GIF-файлы способствуют вовлечению и взаимодействию и разбивают текст в электронном письме, чтобы дать читателям отдохнуть. Если вы не хотите, чтобы ваши электронные письма были слишком тяжелыми (и рисковали медленной загрузкой), вы также можете использовать форматирование текста, например жирный текст и маркеры, чтобы не отвлекать внимание читателей. Если вы ведете бизнес электронной коммерции или нишей в индустрии с высоким уровнем визуализации, разумно выбирайте изображения и сжимайте их, чтобы уменьшить размер письма.

Каждое отправляемое вами электронное письмо должно включать призыв к действию. Это означает, что все создаваемые вами HTML-шаблоны должны включать место для вашего призыва к действию. Ваш призыв к действию (Call To Action) — это то, что вы хотите, чтобы читатели сделали после того, как прочитали ваше письмо. Типография и цвета сыграют важную роль в вашем призыве к действию. Вы захотите использовать цвет, который выделяется на фоне остального дизайна и привлекает внимание. Вот пример призыва к действию, который привлекает внимание, но при этом вписывается в общий вид электронного письма:

Source: reallygoodemails.com

HTML-шаблоны писем являются важной частью любой стратегии email-маркетинга. Когда вы знаете, что входит в создание и разработку шаблона электронной почты, вы лучше понимаете, на что обращать внимание при выборе. И, если вы создадите свой собственный, вы не упустите ничего важного. Помните, что ваши электронные письма являются отражением ценностей, голоса и личности вашего бренда. Если они плохо разработаны, ваши подписчики не будут их читать. Любой из описанных здесь HTML-шаблонов красиво оформлен и готов к настройке в соответствии с вашими потребностями в email-маркетинге.

11 лучших бесплатных конструкторов и редакторов шаблонов электронной почты в формате HTML

Большинство поставщиков услуг электронной почты на рынке сегодня имеют редактор электронной почты для создания кампаний электронной почты, но лишь немногие из них предлагают то, что действительно нужно маркетологу электронной почты.

Тщательно выбирайте инструмент для редактирования электронной почты. Редактор электронной почты с перетаскиванием — определенно ваш лучший вариант. Вот что вы должны искать при выборе лучшего адаптивного редактора электронной почты.

Редактор электронной почты с перетаскиванием сам по себе является большим улучшением по сравнению с базовыми редакторами WYSIWYG или прямым кодированием.Успех онлайн-редактора перетаскивания по сравнению со «старыми способами» чего-то вроде ThemeForest — это комбинация тонн красивых шаблонов И простого редактора перетаскивания , позволяющего сразу же настроить их. Вы можете выбрать шаблон и отредактировать его за секунды.

11 Рассмотренные редакторы электронной почты с возможностью перетаскивания и перетаскивания

Вот список создателей и редакторов HTML-шаблонов электронной почты, которые мы рассмотрели:
1. BEE Бесплатный отзывчивый редактор электронной почты для быстрого создания красивых электронных писем
2.Stripo Конструктор шаблонов электронной почты Drag & Drop с редактором HTML
3. Chamaileon Совместное создание электронной почты и управление контентом для предприятий, агентств и предприятий
4. Moosend Email Editor Бесплатный и удобный редактор электронной почты, который также позволяет отправлять
5. Unlayer Бесплатный редактор электронной почты для адаптивных шаблонов электронной почты
6. MailChimp Редактор популярной платформы электронного маркетинга
7.Mail Designer 365 Шаблон электронного маркетинга и дизайнер кампаний для Mac
8. Mail Styler 2 Программа для создания электронных рассылок для Windows
9. Mosaico Ограниченный конструктор шаблонов электронной почты с открытым исходным кодом
10. Coffeecup Загружаемое программное обеспечение Responsive Email Designer для настольных компьютеров и Mac
11. Открытки Ограниченный онлайн-конструктор шаблонов электронной почты с бесплатной демонстрационной лицензией
12.Topol Простой конструктор шаблонов электронной почты в формате HTML с функцией перетаскивания

Какой лучший редактор электронной почты с функцией перетаскивания?

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

Но есть дополнительные функции, которые улучшают создание всего электронного шаблона. Составьте список жизненно важных функций и попробуйте разные редакторы электронной почты. У каждого из них разные сильные стороны. Вот основные функции, которые должен иметь ваш редактор электронной почты:

• Библиотека шаблонов электронной почты
• Высококачественный отзывчивый вывод электронной почты
• Удобный пользовательский интерфейс
• Встроенное редактирование изображений
• Возможность быстрого предварительного просмотра / рендеринга
• Функции совместной работы
• Совместимость с почтовыми клиентами
• Интеграция с поставщиками услуг электронной почты

Отзыв о редакторе электронной почты с возможностью перетаскивания

Мы провели исследование и подготовили честный обзор различных конструкторов HTML-шаблонов электронной почты и программ, которые могут помочь вам в создании отзывчивые электронные письма, со знанием программирования или без него.

Вот наш лучший выбор из лучших конструкторов шаблонов электронной почты в 2021 году:

1. BEE

«Адаптивный редактор электронной почты для быстрого создания красивых писем».
BEE означает «Лучший конструктор и редактор шаблонов электронной почты». Электронный редактор был создан на основе MailUp, популярного итальянского ESP.

BEE — удобный редактор электронной почты, в котором пользователи могут использовать предварительно созданные бесплатные адаптивные шаблоны электронной почты. Вы можете создать свой собственный внешний вид, используя встроенное содержимое и структурные блоки и элементы электронной почты.Приложение

BEE позволяет пользователям выбирать ширину структур столбцов из определенного набора, что удобно и эффективно. Вы не можете вкладывать столбцы друг в друга, что не позволяет создавать очень сложные макеты.

BEE Free можно использовать совершенно бесплатно. Редактор шаблонов электронной почты сохраняет текущий проект в хранилище браузера. Поэтому, когда вы вернетесь, вы можете сразу возобновить редактирование или начать новый. Вы можете экспортировать в ZIP-файл, содержащий изображения HTML +, и использовать его в своем собственном программном обеспечении для электронного маркетинга.

Вы можете легко перейти на их пакет BEE Pro, который дает вам больше шаблонов, функцию «просматривать, комментировать и утверждать», многопользовательскую поддержку с элементами управления разрешениями, стилями бренда и настройками в плане «Агентство».

Вы также получаете логин, в котором вы можете сохранить несколько проектов электронной почты для использования в будущем с помощью BEE Pro. У них есть плагины, которые напрямую подключаются к программам электронного маркетинга, таким как MailChimp, SendGrid, HubSpot и его альтернативы и т. Д.

BEE имеет полный каталог бесплатных шаблонов электронной почты.Это означает бесплатные профессионально разработанные шаблоны для всех. И они выглядят довольно гладко, так что их стоит проверить.

3. Stripo

«Создавайте адаптивные шаблоны писем быстро, без каких-либо навыков HTML».

Stripo — это бесплатный конструктор шаблонов электронной почты с режимами перетаскивания и редактора HTML. Stripo предоставляет своим пользователям библиотеку модулей содержимого для хранения наиболее часто используемых элементов и компонентов электронной почты. Он также предлагает встроенный редактор фотографий для создания баннеров электронной почты.

С помощью Stripo вы можете создавать интерактивные элементы электронной почты, такие как эффект наведения курсора на изображение, кнопки с анимацией CSS и таймеры обратного отсчета из редактора. У них есть классная встроенная интерактивная функциональность AMP для электронной почты.

Существует более 600+ бесплатных HTML-шаблонов электронной почты . Их набор адаптивных шаблонов электронной почты можно отсортировать по типу, электронной коммерции, отрасли или сезону, что упрощает выбор шаблона.

Помимо готовых к использованию шаблонов электронной почты, Stripo также предоставляет пользовательские шаблоны электронной почты.На основании вашей информации и запросов разработчики Stripo создают шаблон электронной почты за 145 долларов.

Шаблоны писем Stripo можно экспортировать в более чем 60 ESP. Вы также можете экспортировать дизайн шаблона в HTML и использовать его для отправки своей кампании по электронной почте из любого другого инструмента электронного маркетинга по вашему выбору.

Служба является многоязычной, поэтому измените ее с английского на любой из 7 других языков (немецкий, испанский, французский и т. Д.).

Перед отправкой электронных писем получателям вы можете загрузить их в формате PDF, чтобы получить одобрение клиента или коллеги; затем проверяйте электронные письма с помощью встроенного инструмента тестирования электронной почты.

Напомним, Stripo — один из лучших конструкторов шаблонов электронной почты на рынке. Так что обязательно попробуйте.

3. Chamaileon

«Совместная платформа для создания электронной почты и управления контентом для бизнеса, агентств, предприятий»

Chamaileon — это адаптивный конструктор и редактор шаблонов электронной почты, созданный, чтобы помочь компаниям создавать красивые, отзывчивые и высококачественные электронные письма.

Chamaileon — это инструмент, созданный для обеспечения гибкости и настройки.Онлайн-редактор электронной почты предлагает сочетание элементов структуры и содержимого. Благодаря расширенным параметрам стилизации можно создать большинство дизайнов электронной почты.

Вы можете найти сотни заранее разработанных адаптивных шаблонов электронной почты, готовых к использованию.

Элементы структуры могут быть вложены друг в друга, поэтому вы можете добавлять любое количество столбцов в редакторе и индивидуально настраивать размер каждого столбца в пикселях.
В редакторе электронной почты у вас есть параметры для добавления границ, отступов, полей, и каждое из них может быть изменено в пикселях.

Chamaileon предлагает две основные функции, которые недоступны на большинстве других платформ для создания электронной почты:
«Показать на мобильном устройстве / Показать на рабочем столе». мобильные и настольные.

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

Компания Chamaileon создала отзывчивый движок генератора электронной почты, поэтому любой созданный вами шаблон электронной почты будет отлично смотреться в большинстве почтовых клиентов. Он поддерживает все устройства Apple и Android и работает со всеми версиями Outlook. Это значительно сократит время, затрачиваемое на тестирование и исправление электронной почты.

Chamaileon также позволяет членам команды использовать одно и то же рабочее пространство при разработке маркетинговой кампании по электронной почте. Благодаря функции совместной работы каждый член маркетинговой команды может получить доступ к разрабатываемому шаблону и редактировать его в соответствии с его индивидуальной учетной записью.

4. Moosend Email Editor

«Бесплатный и удобный редактор электронной почты с возможностью отправки в рамках своей платформы электронной почты и автоматизации»

Бесплатная платформа редактора электронной почты Moosend, которая позволяет пользователям создавать красивые почтовые кампании : У вас есть возможность отредактировать один из уже существующих шаблонов электронной почты из библиотеки шаблонов или создать собственное письмо с нуля с помощью перетаскивания столбцов и структурных элементов.

Moosend имеет полезную функцию «Сохранить», которая позволяет вам сохранить отредактированный шаблон электронной почты для использования в будущем.Вам нужно всего лишь один раз создать информационный бюллетень и использовать его снова каждый месяц. Просто зарегистрируйтесь и войдите в систему.

Для тех, кто разбирается в технологиях, вы можете просматривать HTML-код, редактируя свой шаблон электронной почты, благодаря функции разделения представления Moosend: вы можете вносить изменения в стиле с помощью встроенного CSS . Вы должны нажать «Применить изменения», чтобы увидеть обновленный HTML.

Moosend автоматически делает дизайн электронной почты адаптивным и совместимым с мобильными устройствами.

Инструмент редактора электронной почты Moosend полностью бесплатен для использования .Просто создайте здесь логин, и вы сможете создавать, сохранять (и отправлять) свои информационные бюллетени.

6. Unlayer studio Редактор электронной почты

«Бесплатное средство создания электронной почты для адаптивных шаблонов электронной почты»
Unlayer Studio — это бесплатный конструктор шаблонов электронной почты от тех же производителей, что и конструктор форм MailMunch. В Unlayer есть множество современных профессиональных шаблонов электронной почты, из которых можно выбирать.

Для создания собственных шаблонов не требуются навыки программирования. Он поставляется с библиотекой бесплатных стоковых фотографий и готовых шаблонов для создания электронных писем с соответствующим содержанием.Электронные письма сгруппированы, чтобы их можно было легко найти по таким темам, как приветственные письма, электронные письма о брошенных корзинах, праздничные электронные письма и т. Д. Вы можете загрузить свой HTML-шаблон за несколько щелчков мышью.

С помощью управления пользователями вы можете контролировать, что можно и что нельзя делать. Например, запрещение редактирования частей сообщения или ограничение доступа для определенных клиентов.

Интерфейс студии Unlayer хорош, но он все же меньше по размеру по сравнению с функциями создания электронной почты в BEE и Stripo.

Дизайнер студии Unlayer будет работать с поставщиком услуг электронной почты, таким как ActiveCampaign, Constant contact, MailChimp и т. Д., Даже имеет плагин для Gmail.Это означает, что вы можете отправить электронное письмо прямо в ESP и вставить теги динамического слияния, ссылки для отказа от подписки и т. Д. Маркетологи могут сохранить список быстрого доступа к этим тегам.

Unlayer можно использовать бесплатно. Просто создайте бесплатную учетную запись электронной почты здесь. Профессиональная версия стоит всего 15 долларов. Он поставляется с большим количеством шаблонов и позволяет сохранять шаблоны и блоки HTML и возвращать редактирование, а также функции совместной работы в команде.

6. Редактор электронной почты MailChimp

Mailchimp — самая известная в мире платформа для автоматизации электронного маркетинга.Основана в 2001 году Беном Честнатом, Марком Армстронгом и Дэном Курциусом. Сегодня существует множество альтернатив Mailchimp, например SendinBlue из-за их популярности.

Mailchimp — это ESP, однако у них есть встроенный конструктор шаблонов электронной почты.

Несмотря на то, что Mailchimp не очень гибок с точки зрения элементов и блоков, он позволяет пользователям создавать приятные отзывчивые электронные письма.

Mailchimp в основном ориентирован на малый и средний бизнес, который хочет расти. Вы можете выбрать предварительно закодированный шаблон электронного письма или создать его с нуля.Во многих случаях лучше всего использовать собственный шаблон электронной почты, но в бесплатной версии MailChimp больше невозможно импортировать собственный HTML.

Это лучшая альтернатива, если у вас есть базовые требования и вы ищете простой и быстрый способ создать простой шаблон, не задумываясь о функциях интеграции и совместимости.

Есть много других редакторов электронной почты, встроенных в другие инструменты электронного маркетинга, но в некоторых случаях вы не можете экспортировать из них HTML-код, или код электронной почты представляет собой вопросительный знак, поэтому вам нужно тестировать каждое письмо, чтобы отправить его. уверен, что он совместим.

Обратной стороной использования встроенного редактора электронной почты ESP является то, что вы привязаны к этой службе. Плюс в том, что вам не нужно обращаться к другому провайдеру, чтобы разобраться с дизайном электронной почты.

Если вы начинаете с «бесплатного» пакета ESP и привыкаете к их автору электронной почты и прочему, вы вряд ли перейдете к другому провайдеру. Если по какой-то причине вы хотите переехать, вам часто придется перестраивать шаблоны электронной почты.

7. Mail Designer 365

«Шаблон электронного маркетинга и дизайнер кампаний для Mac.”

Mail Designer 365 — это программа для создания электронной почты, которую можно загрузить только на Mac. Редактор электронной почты оптимизирован для использования на мобильных устройствах, что может быть полезно для некоторых пользователей.

Программа умеренно проста в использовании. Это стандартный конструктор писем с перетаскиванием, в котором вы можете настраивать и сохранять элементы и блоки для использования в будущем.

Mail Designer 365 имеет встроенную галерею бесплатных фотографий Unsplash, которые можно использовать, чтобы оживить дизайн электронной почты. Программное обеспечение также предоставляет своим пользователям набор готовых к использованию GIF-файлов.

Вы можете загрузить Mail Designer 365, если у вас Mac, и опробовать его в течение бесплатного 7-дневного демонстрационного периода. После этого вам нужно будет выбрать один из их пакетов по цене от 16 € / месяц. Стоит отметить, что они принимают только ежегодную оплату.

8. Mail Styler 2

«Программа для создания электронных рассылок для Windows»

Mail Styler — это программа для создания электронных писем для Windows. Программное обеспечение позволяет создавать адаптивные шаблоны электронной почты, редактируя один из предварительно разработанных шаблонов электронной почты или создавая его с нуля.

После того, как вы загрузите Mail Styler на свой компьютер, у вас будет доступ только к ограниченному количеству бесплатных адаптивных шаблонов электронной почты, в то время как все остальные опции (помеченные как новые или PRO) доступны только платным пользователям.

Программное обеспечение относительно простое в использовании, хотя и довольно жесткое. Он не оставляет места для творчества и настройки. Например, вы можете выбирать только из ограниченного числа шрифтов и нескольких заранее определенных цветовых палитр.

Тем не менее, в Mail Styler есть классная функция, которая позволяет предварительно просмотреть тему и предзаголовок вашего электронного письма как на компьютере, так и на мобильном устройстве, прежде чем отправлять его.

Экспортированный HTML-код Mail Styler хорошо работает с различными почтовыми клиентами, такими как Outlook и Gmail.

9. Mosaico

«Конструктор шаблонов электронной почты с открытым исходным кодом»

Mosaico — это конструктор шаблонов электронной почты с открытым исходным кодом. Онлайн-платформа электронной почты предназначена для того, чтобы помочь пользователям быстро и эффективно создавать электронные информационные бюллетени. Но у него нет параметров настройки.

Mosaico не предоставляет готовых шаблонов на своей платформе. Вместо этого вы можете выбрать один из двух макетов: versafix-1 и versafluid.

Выбрав один из двух вариантов, вы можете добавлять или удалять блоки, экспортировать свои собственные изображения в том виде, в каком они есть (в нем нет встроенного редактора фотографий) и редактировать содержимое.

Затем вы можете предварительно просмотреть свое электронное письмо, отправить тестовое электронное письмо или просто сохранить свой шаблон.
Mosaico — это базовый бесплатный инструмент для адаптивного редактора электронной почты, который хорошо работает для людей, которым нужно быстрое исправление. Но в этом списке есть и более интересные варианты, если вы серьезно занимаетесь почтовым маркетингом.

10. Coffeecup Responsive Email Designer

«Загружаемый дизайнер адаптивных писем для настольных компьютеров и Mac»

Coffeecup — это программа для создания электронной почты, которую можно загрузить как на Mac, так и на Windows.

Прежде чем платить годовой взнос в размере 129 долларов, вы можете протестировать программу создания электронной почты благодаря бесплатной пробной версии, в течение которой вам разрешено 3 экспорта дизайна и тестовые электронные письма.

Программное обеспечение не очень интуитивно понятно. Несмотря на то, что вы можете выбрать заранее разработанный шаблон и отредактировать его в соответствии со своими потребностями, на самом деле процесс не очень гладкий и занимает несколько минут, чтобы по-настоящему понять, как ориентироваться в конструкторе электронной почты.

Если вы хотите создать свой собственный шаблон электронной почты с нуля, вам необходимо иметь некоторые знания о структуре и макете электронной почты, поскольку нет конкретных инструкций, которые помогут вам.

11. Designmodo: открытки

«Конструктор шаблонов электронной почты онлайн с бесплатной демонстрационной лицензией»

Открытки — один из онлайн-продуктов, запущенных Designmodo. Это платформа для создания электронной почты, которой легко пользоваться. Вам даже не нужно регистрироваться, чтобы создать свой первый дизайн электронного письма.

С бесплатной учетной записью у вас неограниченное количество экспорта. Бесплатное программное обеспечение для создания электронной почты — это то, что вы называете «демонстрационной лицензией». Вы можете использовать его для создания адаптивных шаблонов писем для себя.Однако вы можете использовать только один бесплатный блок для каждого элемента электронной почты (заголовок, контент, призыв к действию, нижний колонтитул и т. Д.). Это может стать препятствием для любого маркетолога, который хочет улучшить свою игру по дизайну электронной почты.

Бизнес-лицензия имеет все разблокированные блоки, вы можете выбирать из 900+ шрифтов Google, экспортировать в любое почтовое программное обеспечение, которое вам нравится. Лицензия стоит 15 долларов в месяц. Открытки Designmodo работают с заранее созданными блоками и элементами, которые имеют некоторые параметры настройки. Поскольку вы не можете создавать свои собственные блоки, дает меньшую гибкость, чем другие редакторы.Плюс в том, что таким образом работа с открытками становится более простой.

12. Topol.io

«Красивые электронные письма, простые»

Topol — это инструмент для создания электронной почты, который мы включили в этот список из-за простоты его использования. В Topol PRO вы можете попробовать один из их бесплатных шаблонов писем. Вы также можете создать новый шаблон из собственного HTML или с нуля.

Основные функции Topol включают:
Импорт вашего пользовательского HTML-кода в редактор электронной почты
Пользовательские блоки многократного использования
Совместная работа с функциями группового редактирования
Перетаскивание шаблона электронной почты и редактор изображений

Topol лишь немного дешевле, чем другие инструменты дизайна электронной почты, такие как BEE или Stripo.Но есть реальная разница в ценах, если у вас есть команда пользователей. В Topol до трех пользователей включены в стоимость 10 долларов. Фактически, вы можете воспользоваться 14-дневным бесплатным пробным периодом и перейти на их ежемесячный план за 10 долларов в месяц.

Stamplia (больше не доступен)

Stamplia изначально была торговой площадкой для шаблонов электронной почты, но впоследствии выпустила «конструктор электронной почты», который предлагает ограниченные возможности настройки шаблонов, которые вы можете у них приобрести. Создатель Stamplia был создан для тех, кто не хочет слишком возиться с дизайном, и нашел на своем сайте шаблон электронной почты, который точно соответствует их потребностям. Конструктор электронной почты Stampalia больше не работает.

Как выбрать лучший редактор электронной почты для создания адаптивных писем?

Лучший способ — составить список жизненно важных для вас функций и попробовать различные редакторы электронной почты. Цена не должна быть главной проблемой, поскольку большинство редакторов электронной почты либо бесплатны, либо очень дешевы по сравнению с их ценностью. Качество HTML и функции будут иметь большое значение.

(вот список функций, которые могут вам понадобиться).У каждого из них разные сильные стороны. Вот основные функции, которые должен иметь ваш редактор электронной почты:

1. Библиотека шаблонов электронной почты

Хороший редактор электронной почты предложит вам возможность использовать шаблоны по умолчанию в качестве основы. Это замечательно, если вы новичок в электронном маркетинге, если у вас мало времени на создание нового шаблона электронного письма с нуля или просто в поисках вдохновения.

У вас также должна быть возможность создать собственный адаптивный шаблон электронной почты внутри приложения и опираться на вашу предыдущую работу.Конечно, вы должны получить удобный облачный файловый менеджер для сохранения ваших шаблонов, изображений и т. Д.

2. Высококачественный отзывчивый вывод электронной почты в формате HTML

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

3.Удобный пользовательский интерфейс

Пользовательский опыт весьма субъективен. Однако есть пара основ проектирования пользовательского интерфейса, которые должно уважать каждое приложение. Простой и понятный интерфейс, структурированный макет страницы, стратегическое использование цветов, шрифтов и типографики для создания иерархии, последовательная системная коммуникация с пользователем и т. Д. Нет необходимости чрезмерно анализировать это, попробовав редакторы электронной почты, испытает пользователя опыт.

4. Встроенное редактирование изображений

Встроенное редактирование изображений — одна из полезных функций.Конечно, мы не говорим о возможностях уровня Photoshop, но основные функции редактирования изображений, такие как изменение размера, обрезка и некоторые модификации изображений, очень удобны.

5. Опция быстрого предварительного просмотра электронной почты

Быстрый предварительный просмотр покажет вам, как ваша электронная почта выглядит на планшете, мобильном телефоне и компьютере. Если вы хотите углубиться, функция предварительного просмотра электронной почты на основе Litmus или Email on Acid сэкономит вам значительное время.

6. Функции совместной работы

При разработке кампаний по электронной почте часто требуется много взаимодействия между командой дизайнеров, копирайтерами электронной почты, командой маркетинга, а иногда даже партнерами / клиентами.Чтобы упростить этот процесс, некоторые платформы для создания электронной почты позволяют нескольким пользователям совместно разрабатывать маркетинговую кампанию по электронной почте.

Пользователи с разными учетными записями могут войти в общую рабочую область и предоставить свой ввод, комментарии и изменения.

7. Совместимость с почтовыми клиентами

Ваша платформа для создания электронной почты должна создавать адаптивные коды электронной почты в формате HTML, которые работают в большинстве почтовых клиентов (различные версии Outlook, Gmail, Yahoo! Mail и т. Д.).

8.Интеграция с поставщиками услуг электронной почты

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

В различных редакторах электронной почты есть множество дополнительных функций, которые могут понадобиться некоторым пользователям, в то время как другие никогда не будут их использовать. Правила персонализации, автоматизации и динамического контента обычно доступны в расширенных ESP и инструментах автоматизации маркетинга.

Дополнительная расширенная функция, которую вы можете найти в редакторе электронной почты, — это переключатель, который позволяет вам редактировать содержимое электронной почты в соответствии с устройством вашего пользователя. Эта функция в основном позволяет вам выбирать, какие блоки контента отображать или скрывать на мобильном устройстве или компьютере. Таким образом, вы можете настроить адаптивную для мобильных устройств версию своего электронного письма.

В чем разница между редактором электронной почты с функцией перетаскивания и WYSIWYG HTML?

Термин WYSIWYG — «Что видишь, то и получаешь» — вышел далеко за рамки своего времени, когда он впервые был использован в вычислительной технике в 70-х и 80-х годах.Предполагается, что то, что вы редактируете на экране, будет отображаться таким же (или очень похожим образом) в печатном виде или в виде готового цифрового продукта — в данном случае — информационных бюллетеней по электронной почте.

Редакторы WYSIWYG — это текстовые редакторы, подобные MS Word, которые были созданы для общего управления веб-контентом. В основном для написания текста и добавления к нему некоторых основных визуальных элементов.
Обычные редакторы WYSIWYG не оптимизированы для электронной почты, но вы можете создавать с ними шаблоны электронной почты, если знаете, как кодировать HTML, или если вы очень продвинутый пользователь и можете легко встраивать таблицы с помощью этих инструментов (это действительно сложная задача. хоть).

Внутри платформы электронного маркетинга вы можете найти такой редактор WYSIWYG, как показано выше, для редактирования (частей) содержимого электронной почты. Затем он помещается в шаблон после того, как вы нажмете «Сохранить». Или вы сможете редактировать электронное письмо на месте, нажимая на элементы.

Многие называют свой редактор электронной почты «перетаскиванием», но так ли это на самом деле?

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

Но сегодня это не совсем так. Перетаскивание стало синонимом простого в использовании интерфейса. Многие инструменты, в том числе редакторы электронной почты, продаются как перетаскивание, но это не всегда означает, что вы получите сложную возможность перетаскивания.

В большинстве редакторов электронной почты вы ограничены предварительно созданными блоками содержимого (изображение + текст, группа изображений, кнопки социальных сетей и т. Д.). У вас нет гибкости для создания собственных блоков из самых простых строительных элементов, таких как текст, изображение, поле и столбцы, исключительно с помощью функции перетаскивания.

Они по-прежнему являются редакторами электронной почты с функцией перетаскивания, но не каждый элемент содержимого можно «перетащить и оставить». Во многих случаях стандартных блоков достаточно, но для сложных проектов… вам потребуется больше гибкости.

Что показывает, что вы используете настоящий отзывчивый редактор электронной почты?

В основном то, что вам вообще не разрешено редактировать HTML-код, потому что сам код генерируется программным обеспечением. Хотя в настоящее время есть некоторые конструкторы электронной почты, которые позволяют пользователям редактировать HTML-код и по-прежнему будут создавать отзывчивый HTML-код, если вы не сломали его при редактировании кода.

Кроме этого, в большинстве случаев, когда у вас есть возможность редактировать HTML-код, вы используете «расширенный» WYSIWYG, который позволит вам уничтожить предварительно созданный адаптивный HTML-код, который вы редактируете.

Обратной стороной движка генератора электронной почты является то, что вы не можете просто скопировать и вставить случайный HTML-код в такой редактор электронной почты. Либо вам нужно создать свой шаблон с помощью редактора, настраиваемого языка описания электронной почты, либо добавить определенные теги HTML, либо попросить поставщика программного обеспечения сделать электронное письмо доступным для редактирования в их редакторе.

Фреймворки для создания электронной почты (требуются знания кодирования)

Разработчики знают, какая сложная и утомительная задача — адаптивное кодирование электронной почты. Вот список онлайн-фреймворков электронной почты, которые упрощают создание адаптивных писем.

Cerberus

«Несколько простых, но надежных шаблонов для создания отзывчивых электронных писем в формате HTML. Даже в Outlook и Gmail ».

Cerberus — это набор предварительно закодированных шаблонов реагирующих сообщений электронной почты. Шаблоны или блоки кода можно смешивать и комбинировать для создания красивого адаптивного HTML-шаблона электронной почты, оптимизированного для всех клиентских устройств.

Foundation For Emails 2, автор Zurb

«Быстро создавайте отзывчивые электронные письма в формате HTML, которые работают. Даже в Outlook ».

Foundation for Emails, формально Ink by Zurb, представляет собой набор фреймворков, которые предоставляют разработчикам простой фреймворк CSS или Sass для создания отзывчивых писем. Каждый шаблон начинается с уже предоставленной сетки, которую можно улучшить с помощью различных элементов.

HEML

«Быстро создавайте чистые, отзывчивые электронные письма»

HEML — это язык разметки с открытым исходным кодом для создания отзывчивого электронного письма, которое хорошо выглядит на различных клиентских устройствах.Программисты, знакомые с HTML и CSS, будут чувствовать себя как дома, используя HEML.

MJML Email Builder

«Платформа, которая упрощает работу с электронной почтой»

MJML — это язык разметки. У них есть сервер с открытым исходным кодом, который генерирует высококачественный адаптивный HTML-код для электронных писем.

Вы можете написать полностью совместимую разметку HTML, которую можно использовать с различными ESP. Вы можете попробовать его в прямом эфире и посмотреть, соответствует ли он вашим потребностям.

В поисках лучшего конструктора HTML для электронной почты

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

Если вы новичок в электронном маркетинге, вы можете начать с любого программного обеспечения из этого списка, чтобы почувствовать, каково это на самом деле использовать конструктор электронной почты. А если у вас есть знания в области HTML, не бойтесь протестировать один из конструкторов электронной почты, который поддерживает редактирование HTML.

Всегда есть возможности для улучшения, и, конечно же, дизайн электронной почты и качество кода являются важными составляющими вашего рецепта успеха.

Дополнительная информация на emailvendorselection.com . Обязательно ознакомьтесь с нашим обзором 15+ лучших платформ онлайн-курсов, обзором 75 инструментов лидогенерации и нашим недавним руководством по электронному маркетингу в электронной коммерции.

О Roland Pokornyik

Roland Pokornyik — генеральный директор и соучредитель EDMdesigner.com, адаптивного API редактора электронной почты, оптимизированного для интеграции с любой системой.

Документы TOPOL | Встраиваемый редактор электронной почты для приложений SaaS

Введение

  topol.io
www.topol.io
* .topol.io
локальный: 563295
  

   <сценарий>
const TOPOL_OPTIONS = {
    id: "#app",
    авторизовать: {
        apiKey: "ВАШ_API_KEY",
        userId: "UserID",
    },
    обратные вызовы: {
        onSave: function (json, html) {
           
        }
    }
};

TopolPlugin.init (TOPOL_OPTIONS);

fetch ('https://tlapi.github.io/topol-editor/templates/1.json')
    .then (response => response.text ())
    .then (template => {
        
        TopolPlugin.load (шаблон)
    }
);

  

  var TOPOL_OPTIONS = {
    id: "#app",
    авторизовать: {
        apiKey: "Ваш ключ API",
        userId: "Идентификатор пользователя",
    },
    title: "Мой конструктор шаблонов",
    язык: "en",
    removeTopBar: ложь,
    topBarOptions: [
        "отменить повторить",
        "changePreview",
        "previewSize",
        "previewTestMail",
        "сохранить и закрыть",
        "спасти"
    ],
    mainMenuAlign: "влево",
    hideSettingsTab: false,
    disableAlerts: ложь,
    свет: ложь,
    customFileManager: ложь,
    contentBlocks: {
        text: {
            отключено: правда,
            disabledText: 'Текст во всплывающей подсказке',
            скрыто: правда
        },
    },
    mergeTags: [
        {
            name: 'Объединить теги',
            Предметы: [
                {
                    значение: "* | FIRST_NAME | *",
                    текст: "Имя",
                    label: "Имя клиента"
                },
                {
                    значение: "* | LAST_NAME | *",
                    текст: "Фамилия",
                    label: «Фамилия клиента»
                },
                
                
                {
                    name: 'Объединить вложенные теги',
                    Предметы: [
                        {
                            значение: "* | FIRST_NAME_NESTED | *",
                            текст: "Имя 2",
                            label: "Имя клиента 2"
                        },
                        {
                            значение: "* | LAST_NAME_NESTED | *",
                            текст: "Фамилия 2",
                            label: "Фамилия клиента 2"
                        }
                    ]
                }
            ]
        }, {
            name: 'Специальные ссылки',
            Предметы: [
                {
                    значение: " Отказаться от подписки ",
                    текст: "Отписаться",
                    label: "Ссылка для отказа от подписки"
                },
                {
                    значение: " Веб-версия ",
                    текст: "Веб-версия",
                    label: "Ссылка на веб-версию"
                }
            ]
        }, {
            name: 'Особое содержание',
            Предметы: [
                {
                    value: "Для получения дополнительных сведений посетите наш  интернет-магазин !",
                    текст: "Посетите наш сайт",
                    label: "Призыв к действию"
                }
            ]
        }
    ],
    
    
    
    fontSizes: [8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 20, 22, 24, 26, ...],

    tinyConfig: {
      
      
      
    },

    saveBlocks: [
        {
            id: 1,
            name: 'Мой сохраненный блок 001',
            img: 'src to my img',
            определение: [{"tagName": "mj-section", "attributes": {"full-width": false, "padding": "9px 0px 9px 0px", "background-color": "# 000000"}, "тип": ноль, "дети": [{"tagName": "mj-столбец", "атрибуты": {"ширина": "33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-social "," attributes ": {" padding ":" 10px 10px 10px 10px "," text- mode ":" false "," icon-size ":" 35px "," align ":" center "," containerWidth ": 198}," children ": [{" tagName ":" mj-social-element ", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /facebook.png", "name": "facebook-noshare", "alt": "facebook", "href": "https: \ / \ / www.facebook.com \ / PROFILE", "background-color": "transparent"}} , {"tagName": "mj-social-element", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /twitter.png "," name ":" twitter-noshare "," alt ":" twitter "," href ":" https : \ / \ / www.twitter.com \ / PROFILE "," background-color ":" transparent "}}, {" tagName ":" mj-social-element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /instagram.png "," alt ":" instagram "," name ":" instagram "," href ":" https: \ / \ / www.instagram.com \ / PROFILE "," background-color ":" transparent "}}]," uid ":" dAoF8AoOO "," style ":" simplewhite "}]," uid ":" SJ3I0XVx7 "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-image "," attributes ": {" src ":" https: \ / \ / storage.googleapis .com \ / jan50 \ /blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt ":" "," href ":" "," containerWidth ": 200," width ": 100," widthPercent ": 50}," uid ":" MFT0c-tu6X "}]," uid ":" r1e280m4xQ "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-spacer "," attributes ": {" height ":" 50px "," containerWidth ": 200}," uid ":" 0nV_PAUDZ2 "}]," uid ":" B1W380QVxX "}]," layout ": 1," backgroundColor ":" "," backgroundImage ":" "," paddingTop ": 0," paddingBottom ": 0 , "paddingLeft": 0, "paddingRight": 0, "uid": "GD8ksoWQzG"}]
        }
    ],
    premadeBlocks: {
        'заголовки': [
            {
                'img': 'url',
                'определение': [{"tagName": "mj-section", "attributes": {"full-width": false, "padding": "9px 0px 9px 0px", "background-color»: "# 000000" }, «тип»: null, «дети»: [{«tagName»: «mj-столбец», «атрибуты»: {«ширина»: «33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-social "," attributes ": {" display ":" facebook: url twitter: url google: url) "," padding ":" 10px 10px 10px 30px "," text-mode ":" false "," icon-size ":" 25px "," base-url ":" https: // s3-eu-west- 1.amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/ "," facebook-href ":" https://www.facebook.com/PROFILE "," facebook-icon-color ":" нет "," facebook-alt ":" Sdílet "," twitter-href ":" https://www.twitter.com/PROFILE "," twitter-icon-color ":" none "," twitter-alt ": "", "google-href": "https: // plus.google.com/PROFILE "," google-icon-color ":" none "," google-alt ":" "," instagram-icon-color ":" none "," linkedin-icon-color ":" none "," align ":" left "," youtube-icon-color ":" none "," youtube-alt ":" "," youtube-icon ":" https: // s3-eu-west-1. amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/youtube.png "," youtube-href ":" https://www.youtube.com "," containerWidth ": 200}," uid ": "h2lqIiX4lm"}], "uid": "SJ3I0XVx7"}, {"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"} , "children": [{"tagName": "mj-image", "attributes": {"src": "https: // хранилище.googleapis.com/jan50/blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt ":" "," href ":" "," containerWidth ": 200," width ": 100," widthPercent " ": 50}," uid ":" rkEyL-HeQ "}]," uid ":" r1e280m4xQ "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% " , "vertical-align": "top"}, "children": [{"tagName": "mj-spacer", "attributes": {"height": 15, "containerWidth": 200}, "uid": "rJfqLiXEgm"}], "uid": "B1W380QVxX"}], "layout": 1, "backgroundColor": "", "backgroundImage": "", "paddingTop": 0, "paddingBottom": 0, "paddingLeft ": 0," paddingRight ": 0," uid ":" rkqIjQNe7 "}
                ]
            }]
    },
    
    обратные вызовы: {
        onSaveAndClose: function (json, html) {
            
            приставка.журнал (HTML);
            
            console.log (json);
            
            
        },
        onSave: function (json, html) {
            
            console.log (HTML);
            
            console.log (json);
        },
        onTestSend: function (email, json, html) {
            
            console.log (HTML);
            
            console.log (json);
            
            console.log (электронная почта);
            
        },
        onOpenFileManager: function () {
            
        },
        onBlockSave (json) {
            var name = window.подсказка ('Введите имя блока:')
            if (имя! == null) {
                console.log ('блок сохранения', json)
            }
        },
        onBlockRemove (id) {
            if (window.confirm ('Вы уверены?')) {
                console.log ('удаление блока', id)
            }
        },
        onBlockEdit (id) {
            var name = window.prompt ('Имя блока:', 'Мой блок 001')
            if (имя! == null) {
                console.log ('сохранение отредактированного блока', id)
            }
        },
        onPreview (html) {
          
        },
        onInit () {
          
        },
        onAlert (уведомление) {

        }
    },
    apiAuthorizationHeader: 'Токен на предъявителя',
    api: {
        
        IMAGE_UPLOAD: "/ изображения / загрузка",
        
        ПАПКИ: "/ images / folder-contents",
        
        IMAGE_EDITOR_UPLOAD: "/ images / image-editor-upload",
        
        АВТОСОХРАНИТЬ: "/ автосохранение",
        
        АВТОСОХРАНИТЬ: "/ автосохранение",
        
        GET_AUTOSAVE: "/ автосохранение /",
        
        КОРМЫ: "/ feeds",
        
        ПРОДУКТЫ: "/ products
    }
};
  

  TopolPlugin.init (TOPOL_OPTIONS);


TopolPlugin.load ('json-template');


TopolPlugin.save ();


TopolPlugin.togglePreview ();


TopolPlugin.chooseFile ('http://url.to/picture.png');


TopolPlugin.setSavedBlocks ([
  {
    'id': 11,
    'name': 'Мой сохраненный блок - от setSavedBlocks',
    'определение': [{"tagName": «mj-section», «attributes»: {«full-width»: false, «padding»: «9px 0px 9px 0px», «background-color»: «# 000000») }, "type": null, "children": [{"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"}, " children ": [{" tagName ":" mj-social "," attributes ": {" padding ":" 10px 10px 10px 10px "," text-mode ":" false "," icon-size ":" 35px " , "align": "center", "containerWidth": 198}, "children": [{"tagName": "mj-social-element", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /facebook.png "," name ":" facebook-noshare "," alt ":" facebook "," href ":" https : \ / \ / www.facebook.com \ / PROFILE "," background-color ":" transparent "}}, {" tagName ":" mj-social-element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /twitter.png "," name ":" twitter-noshare ", "alt": "twitter", "href": "https: \ / \ / www.twitter.com \ / PROFILE", "background-color": "transparent"}}, {"tagName": "mj-social -element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /instagram.png "," alt ":" instagram "," name ":" instagram "," href ":" https: \ /\/www.instagram.com\/PROFILE","background-color":"transparent"}}********************************************************************************************************************************************************************* "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-image "," attributes ": {" src ":" https: \ / \ / storage.googleapis.com \ / jan50 \ /blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt " : "", "href": "", "containerWidth": 200, "width": 100, "widthPercent": 50}, "uid": "MFT0c-tu6X"}], "uid": "r1e280m4xQ"} , {"tagName": "mj-column", "attributes": {"width": "33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-spacer "," attributes ": {" height ":" 50px "," containerWidth ": 200} , "uid": "0nV_PAUDZ2"}], "uid": "B1W380QVxX"}], "layout": 1, "backgroundColor": "", "backgroundImage": "", "paddingTop": 0, "paddingBottom" : 0, «paddingLeft»: 0, «paddingRight»: 0, «uid»: «GD8ksoWQzG»}]
  },
  {
    'id': 12,
    'img': 'https://d5aoblv5p04cg.cloudfront.net/editor/blocks/menu1.jpg',
    'определение': [{"tagName": «mj-section», «attributes»: {«full-width»: false, «padding»: «9px 0px 9px 0px», «background-color»: «# 000000») }, «тип»: null, «дети»: [{«tagName»: «mj-столбец», «атрибуты»: {«ширина»: «33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-social "," attributes ": {" padding ":" 10px 10px 10px 10px "," text- mode ":" false "," icon-size ":" 35px "," align ":" center "," containerWidth ": 198}," children ": [{" tagName ":" mj-social-element ", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /facebook.png", "name": "facebook-noshare", "alt": "facebook", "href": "https: \ / \ / www.facebook.com \ / PROFILE", "background-color": "transparent"}} , {"tagName": "mj-social-element", "attributes": {"src": "https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /twitter.png "," name ":" twitter-noshare "," alt ":" twitter "," href ":" https : \ / \ / www.twitter.com \ / PROFILE "," background-color ":" transparent "}}, {" tagName ":" mj-social-element "," attributes ": {" src ":" https: \ / \ / s3-eu-west-1.amazonaws.com \ / ecomail-assets \ / editor \ / social-icos \ / simplewhite \ /instagram.png "," alt ":" instagram "," name ":" instagram "," href ":" https: \ / \ / www.instagram.com \ / PROFILE "," background-color ":" transparent "}}]," uid ":" dAoF8AoOO "," style ":" simplewhite "}]," uid ":" SJ3I0XVx7 "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-image "," attributes ": {" src ":" https: \ / \ / storage.googleapis .com \ / jan50 \ /blackberrylogo.png "," padding ":" 19px 10px 10px 10px "," alt ":" "," href ":" "," containerWidth ": 200," width ": 100," widthPercent ": 50}," uid ":" MFT0c-tu6X "}]," uid ":" r1e280m4xQ "}, {" tagName ":" mj-column "," attributes ": {" width ":" 33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-spacer "," attributes ": {" height ":" 50px "," containerWidth ": 200}," uid ":" 0nV_PAUDZ2 "}]," uid ":" B1W380QVxX "}]," layout ": 1," backgroundColor ":" "," backgroundImage ":" "," paddingTop ": 0," paddingBottom ": 0 , "paddingLeft": 0, "paddingRight": 0, "uid": "GD8ksoWQzG"}]
      }
])


TopolPlugin.createNotification ({
  title: 'Заголовок уведомления',
  text: 'Важное сообщение, которое вы хотите отобразить',
  тип: 'информация'
  expectSideEffect: true | ложный
  настойчивый: верно | ложный
})
  

  mergeTags: [
        {
            name: 'Объединить теги',
            Предметы: [
                {
                    значение: "* | FIRST_NAME | *",
                    текст: "Имя",
                    label: "Имя клиента"
                },
                {
                    значение: "* | LAST_NAME | *",
                    текст: "Фамилия",
                    label: «Фамилия клиента»
                },
                {
                    name: 'Объединить вложенные теги',
                    Предметы: [
                        {
                            значение: "* | FIRST_NAME_NESTED | *",
                            текст: "Имя 2",
                            label: "Имя клиента 2"
                        },
                        {
                            значение: "* | LAST_NAME_NESTED | *",
                            текст: "Фамилия 2",
                            label: "Фамилия клиента 2"
                        }
                    ]
                }
            ]
        }, {
            name: 'Специальные ссылки',
            Предметы: [
                {
                    значение: " Отказаться от подписки ",
                    текст: "Отписаться",
                    label: "Ссылка для отказа от подписки"
                },
                {
                    значение: " Веб-версия ",
                    текст: "Веб-версия",
                    label: "Ссылка на веб-версию"
                }
            ]
        }, {
            name: 'Особое содержание',
            Предметы: [
                {
                    value: "Для получения дополнительных сведений посетите наш  интернет-магазин !",
                    текст: "Посетите наш сайт",
                    label: "Призыв к действию"
                }
            ]
        }
    ],
  

  premadeBlocks: {
  'заголовки': [
    {
      'img': 'url',
      'name': 'Готовый заголовок 1',
      
      'определение': [{"tagName": "mj-section", "attributes": {"full-width": false, "padding": "9px 0px 9px 0px", "background-color»: "# 000000" }, "type": null, "children": [{"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"}, " children ": [{" tagName ":" mj-social "," attributes ": {" display ":" facebook: url twitter: url google: url »,« padding »:« 10px 10px 10px 30px »,« text- mode ":" false "," icon-size ":" 25px "," base-url ":" https: // s3-eu-west-1.amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/","facebook-href":"https://www.facebook.com/PROFILE","facebook-icon-color":"none ", "facebook-alt": "Sdílet", "twitter-href": "https://www.twitter.com/PROFILE", "twitter-icon-color": "none", "twitter-alt": "" , "google-href": "https://plus.google.com/PROFILE", "google-icon-color": "none", "google-alt": "", "instagram-icon-color": "none", "linkedin-icon-color": "none", "align": "left", "youtube-icon-color": "none", "youtube-alt": "", "youtube-icon" : "https: // s3-eu-west-1.amazonaws.com/ecomail-assets/editor/social-icos/simplewhite/youtube.png","youtube-href":"https://www.youtube.com","containerWidth":200},"uid ": "h2lqIiX4lm"}], "uid": "SJ3I0XVx7"}, {"tagName": "mj-column", "attributes": {"width": "33.333333%", "vertical-align": "top"} , "children": [{"tagName": "mj-image", "attributes": {"src": "https://storage.googleapis.com/jan50/blackberrylogo.png", "padding": "19px 10px 10px 10px "," alt ":" "," href ":" "," containerWidth ": 200," width ": 100," widthPercent ": 50}," uid ":" rkEyL-HeQ "}], "uid": "r1e280m4xQ"}, {"tagName": "mj-column", "attributes": {"width": "33.333333% "," vertical-align ":" top "}," children ": [{" tagName ":" mj-spacer "," attributes ": {" height ": 15," containerWidth ": 200}," uid ":" rJfqLiXEgm "}]," uid ":" B1W380QVxX "}]," layout ": 1," backgroundColor ":" "," backgroundImage ":" "," paddingTop ": 0," paddingBottom ": 0 , "paddingLeft": 0, "paddingRight": 0, "uid": "rkqIjQNe7"}]
    }
  ]
}
  

  {
  id: 1,
  name: 'Мой сохраненный блок 001',
  img: 'http: // ...',
  определение: 'json',
}
  

  onBlockSave (json) {
  var name = window.prompt ('Введите имя блока:')
  if (имя! == null) {
    console.log ('блок сохранения', json)
  }
},
onBlockRemove (id) {
  if (window.confirm ('Вы уверены?')) {
    console.log ('удаление блока', id)
  }
},
onBlockEdit (id) {
  var name = window.prompt ('Имя блока:', 'Мой блок 001')
  if (имя! == null) {
    console.log ('сохранение отредактированного блока', id)
  }
}
  

  TopolPlugin.setSavedBlocks ([{
  id: 1,
  name: 'Мой сохраненный блок 001',
  img: 'http: // ...',
  определение: 'json',
}]);
  

  тема: {
  предустановка: 'темный',
  borderRadius: {
      small: '4px'
      большой: '8px'
  },
  цвета: {
      '900': "# 13171E",
      '800': "# 1F2329",
      '700': "# 272A30",
      '600': "# 32363E",
      '500': "# 3C4048",
      '400': "# 494D55",
      '350': "# 575B62",
      '300': "# 828488",
      '200': "#CBCBCD",
      белый: '#ffffff',
      первичный: '# 917DFF',
      'первичный свет': '# A696FF',
      'primary-dark': '# 836EFA',
      вторичный: '# 00D7CA',
      'вторичный свет': '# 08E8DA',
      ошибка: '# D52A3D',
      'error-light': '# FA5151',
      'успех': '## 00DE52',
      'успех-свет': '# 0CE16B',
      'active': '# 409EFF',
      'активный свет': '#ACCCFB',
  }
}
  

  тема: {
  предустановка: 'светлый',
  borderRadius: {
      small: '4px'
      большой: '8px'
  },
  цвета: {
      '900': "# 161616",
      '800': "# 262626",
      '700': "# 393939",
      '600': "# 666666",
      '500': "# 6f6F6f",
      '450': "# 8D8D8D",
      '400': "# c5c5c5",
      '350': "# C7C7C7",
      '300': "# D6D6D6",
      '200': "#EDEDED",
      '150': "# F5F5F5",
      '100': "# F9F9FA",
      белый: '#ffffff',
      первичный: '# 9179ff',
      'первичный свет': '# a696ff',
      'primary-dark': '# 8369fe',
      вторичный: '# 00d8cb',
      'вторичный свет': '# 00e9db',
      ошибка: '# d62738',
      'error-light': '# fd4f4c',
      'успех': '# 00e049',
      'active': '# 4482ff',
      'active-light': '# 6aa6ff',
  }
}
  

  onTestSend: function (email, json, html) {
    console.log (HTML);
    console.log (json);
    
    console.log (электронная почта);
},
  

  TopolPlugin.togglePreview ();
  

  обратных вызовов: {
  

  onAlert (уведомление) {
    
  }
}
  

  TopolPlugin.createNotification ({
  title: 'Заголовок уведомления',
  text: 'Важное сообщение, которое вы хотите отобразить',
  тип: 'информация'
  expectSideEffect: true | ложный
  настойчивый: верно | ложный
});
  

  TopolPlugin.undo ();
TopolPlugin.redo ();
  

  contentBlocks: {
    text: {
        отключено: правда,
        disabledText: 'Текст во всплывающей подсказке',
        скрыто: правда
    },
}
  

  googleApiKey: 'YOUR_API_TOKEN'
  

  TopolPlugin.load ("{\" tagName \ ": ...");
  

  fetch ('https://tlapi.github.io/topol-editor/templates/1.json')
    .then (response => response.text ())
    .then (template => {
        
        TopolPlugin.load (шаблон)
    }
);
  

  TopolPlugin.load (JSON.stringify ({
    "tagName": "mj-global-style",
    "attributes": {
        "h2: color": "# 000",
        "h2: font-family": "Helvetica, без засечек",
        "h3: color": "# 000",
        "h3: font-family": "Ubuntu, Helvetica, Arial, sans-serif",
        "h4: color": "# 000",
        "h4: font-family": "Ubuntu, Helvetica, Arial, sans-serif",
        ": color": "# 000",
        ": font-family": "Ubuntu, Helvetica, Arial, sans-serif",
        ": высота строки": "1.5 ",
        "a: color": "# 24bfbc",
        "button: background-color": "# e85034",
        "containerWidth": 600,
        "шрифты": "Helvetica, sans-serif, Ubuntu, Arial",
        "mj-text": {
            "высота строки": 1,5,
            "font-size": 15
        },
        "mj-button": []
    },
    "дети": [
        {
            "tagName": "mj-контейнер",
            "attributes": {
                "цвет фона": "#FFFFFF",
                "containerWidth": 600
            },
            "дети": [
                {
                    "tagName": "mj-section",
                    "attributes": {
                        "полная ширина": ложь,
                        "padding": "9px 0px 9px 0px"
                    },
                    "дети": [
                        {
                            "tagName": "mj-столбец",
                            "attributes": {
                                "ширина": "100%"
                            },
                            "дети": [],
                            "uid": "HJQ8ytZzW"
                        }
                    ],
                    «макет»: 1,
                    "backgroundColor": null,
                    "backgroundImage": null,
                    "paddingTop": 0,
                    "paddingBottom": 0,
                    "paddingLeft": 0,
                    "paddingRight": 0,
                    "uid": "Byggju-zb"
                }
            ]
        }
    ],
    "стиль": {
        "h2": {
            "font-family": "\" Кабина \ ", без засечек"
        }
    },
    "шрифты": [
        "\" Кабина \ ", без засечек"
    ]
}));
  

  onSave: function (json, html) {
    console.log (HTML);
    console.log (json);
},
onSaveAndClose: function (json, jtml) {
    console.log (HTML);
    console.log (json);
}
  

  onOpenFileManager: function () {
    
},
  

  TopolPlugin.selectFile ('http://url.to/picture.png');
  

  apiAuthorizationHeader: 'Bearer token',
  

  apiAuthorizationHeader: {
    'Param-name': 'секрет'
  }
  

  [{
    "имя": "имя файла",
    "дата": дата последнего изменения,
    «размер»: 500,
    "путь": "/ путь /",
    "тип": "файл" ИЛИ "папка",
    "extension": ".jpg",
    "url": "https://url-to-image.com/image.jpeg"
}]
  

  [{
  "url": "url_of_uploaded_image"
}]
  

  Content-Type: приложение / json

{
  "успех": правда,
  "url": "http://191n.mj.am/img/191n/1t/hs.png"
}
  

  Content-Type: приложение / json

{
  "content": "изображение в формате base64",
  "filename": "Имя файла"
}
  

  {
  "url": "https: // url-to-image.com / image.jpeg "
}
  

  Content-Type: приложение / json

{
  "ключ": "ключ API",
  "имя хоста": "происхождение"
  "templateId": "идентификатор шаблона",
  "uuid": "userId"
}
  

  {
  успех: правда,
  данные: [
    {
      uid: 'userID',
      ключ: 'autosaveKey',
      время: «Время ISO 8601»
    }
  ]
}
  

  Content-Type: приложение / json

{
  "definition": "MJML в JSON",
  "ключ": "ключ API",
  "имя хоста": "происхождение"
  "templateId": "идентификатор шаблона",
  "uuid": "userId"
}
  

  Content-Type: приложение / json

{
  "ключ": "ключ API",
  "имя хоста": "происхождение"
  "templateId": "идентификатор шаблона",
  "uuid": "userId"
}
  

  {
  успех: правда,
  данные: "{" tempalte ":" jsonTemplate "}"
}
  

  Content-Type: приложение / json

{
  "id": "productID",
  "search": "строка поискового запроса",
  "per_page": "ожидаемых товаров на странице"
  "current_page": "текущая страница продуктов с разбивкой на страницы",
  "feed": "активный идентификатор FEED"
}
  

  {
  успех: правда,
  данные: [
    {
      id: 'идентификатор продукта',
      name: 'название продукта',
      description: 'описание продукта',
      url: 'ссылка на товар',
      img_url: 'ссылка на изображение товара',
      price_with_vat: 'цена товара с НДС',
      валюта: 'валюта цены',
      price_before: 'исходная цена после скидки на товар',
      product_feed_id: 'идентификатор корма, которому принадлежит продукт'
    }
  ],
  
  from: "с id ресурса",
  to: "Идеи ресурса",
  total_records: "общее количество записей ресурса",
  per_page: "ресурс на страницу",
  current_page: "текущая страница ресурса",
  last_page: "последняя страница ресурса",
}
  

  Content-Type: приложение / json

{
  "id": "идентификатор фида",
  "search": "строка поискового запроса",
  "per_page": "ожидаемых фидов на странице"
  "current_page": "текущая страница фидов, разбитых на страницы",
}
  

  {
  успех: правда
  данные: [
    {
      id: 'идентификатор ленты',
      name: "название ленты"
    }
  ],
  
  from: "с id ресурса",
  to: "Идеи ресурса",
  total_records: "общее количество записей ресурса",
  per_page: "ресурс на страницу",
  current_page: "текущая страница ресурса",
  last_page: "последняя страница ресурса",
}
  

  d5aoblv5p04cg.cloudfront.net
fonts.googleapis.com