Как создать собственный шаблон письма

Содержание:

Возможности HTML-шаблона

а) на устройствах с любой шириной экрана;б) в любом браузере и любой почте.

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

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

Красивые рассылки с длинными письмами

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

Как ограничения создают возможность? Новая методика в копилку инноватора — «ИКРА»

Школа креативного мышления «ИКРА» прислала в рассылке целую статью. В письме красиво и наглядно выделены главные моменты, а между блоками достаточно свободного пространства — так гораздо легче читать. Врезки оформлены по-разному, но объединены цветом.

Красивое письмо-статья от «ИКРЫ»

Год бесплатно для топовых профессий по интернет-маркетингу — Skillbox

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

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


Красивая рассылка от онлайн-университета Skillbox

Еще не поздно букет из 15 цветов за 499₽ — «Перекресток»

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

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


Красивая рассылка ко Дню святого Валентина от «Перекрестка»

Вам предсказание — GeekBrains

Онлайн-университет GeekBrains стал победителем нашего голосования за лучшую рассылку Рунета — 2019. В конкурсе участвовала красивая .

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

И, конечно, обратите внимание на дизайн письма: как красиво и аккуратно оформлены блоки. Каждый отличается по цвету, так что рассылка не сливается в «простыню»


Красивое письмо с карьерным предсказателем от GeekBrains

Обязательные особенности бесплатных шаблонов рассылок по электронной почте

  • Адаптивный дизайн — ваш шаблон должен адаптироваться под любой размер экрана;
  • Поддержка популярных почтовых клиентов;
  • Интеграция соцсетей;
  • Качественные слайдеры и баннеры;
  • Интерактивная инфографика с лаконичным описанием деталей;
  • Кнопки призыва к действию;
  • Последняя галерея с визуальными материалами высокого разрешения;
  • Минималистичные иконки — чтобы выделить ваши лучшие услуги;
  • Кликабельные баннеры — для отображения последних обновлений;
  • Раздел видео — чтобы получить больше просмотров вашего продукта;
  • Кнопка «Узнать больше» — для перехода на главную страницу с нужным материалом;
  • Ценовой раздел с активными кнопками;
  • Возможность отказа от подписки;
  • Совместимость с HTML-редактором.

Mailigen

Напомню: Mailigen – платформа для рассылок, а не сервис для дизайнеров. Оформлять письмо сразу на платформе для рассылок удобно, потому что вам не придется импортировать шаблоны с других сервисов. В случае со Stripo и Figma – придется.

Плюсы:

  • Понятный функционал – никаких спрятанных функций. Просто создавайте рассылку шаг за шагом.
  • Бесплатная техподдержка – что-то «сломалось», сервис завис? Напишите в чат техподдержки, вам помогут.
  • + 100 шаблонов – выбирайте макеты писем для рассылки-открытки, промо, уведомлений и новостей. Вы найдете шаблон для любой цели.
  • Внутренний редактор – вы сможете убрать «красные глаза», добавить яркость, сделать фото черно-белым, не выходя из платформы.
  • RSS-блок – создавайте письмо, куда новости с вашего сайта или блога загружаются автоматически. При желании вы можете создать рассылку, состоящую только из RSS-элементов.
  • Собственный дизайнер – если вы сомневаетесь в своих силах или не хотите тратить время на дизайн рассылки, закажите оформление писем в Mailigen у профессионального дизайнера.

Минусы:

Платная версия – визуальный и блочный редакторы доступны только тем, у кого есть аккаунт. Это значит, что вы не сможете бесплатно оформить письмо в Mailigen для его отправки через другой сервис.Идеальный вариант – оплатить аккаунт в Mailigen и получить доступ сразу ко всем функциям. Тогда вы сможете составлять шаблоны, сегментировать базу, вести рассылку и смотреть статистику по каждой отправке.

Пример:

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

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

Основа шаблона – 4 блока с текстом и фотографиями блюд. Все супы, напитки и десерты размещены на фоне узорчатого подноса в восточном стиле. Для атмосферы мы также поместили фото зелени и пряностей по краям макета. По-моему, аппетитно. А вы что думаете?

Бесплатные шаблоны информационных бюллетеней FAQ

Как мне начать использовать бесплатные шаблоны информационных бюллетеней?

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

Есть ли у Google шаблон информационного бюллетеня?

Да, это так. Чтобы создать информационный бюллетень Google, перейдите в Документы Google Нажмите «Информационный бюллетень» Внесите изменения в дизайн Нажмите «Копировать» Откройте свой Gmail Вставьте в электронную почту “Нажмите« Отправить ». Управляйте своим списком рассылки, чтобы классифицировать клиентов для правильного таргетинга.

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

Убедитесь, что в нем есть очень четкие и ориентированные на клиента блоки контента, где вы можете выделить важные разделы. Все бесплатные шаблоны информационных бюллетеней должны быть хорошо структурированы и оптимизированы для SEO. Проверьте совместимость с популярными почтовыми клиентами, такими как Gmail, Yahoo, Outlook, Mail.ru и другими. В TemplateMonster вы можете найти очень профессиональные, индивидуализированные и бесплатные шаблоны электронных писем для информационных бюллетеней. Они идеально подходят для таких предприятий, как туристические агентства, недвижимость, мода, пищевая промышленность, финансовые услуги и любые другие онлайн-предложения.

Есть ли в Word шаблон информационного бюллетеня?

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

Шаблон #2: e-mail рассылка «Адаптационные письма»

Зачем Вам Это Нужно:

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

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

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

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

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

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

В зависимости от услуги, которую вы предлагаете, это, вероятнее всего, будет серия из 3-ех или 4-ех писем.

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

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

Рассмотрим структуру этого шаблона электронной рассылки

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

Затем они проводят читателя через две важные функции (и перечисляют, почему они полезны!)

Они не перечисляют слишком много функций сразу; только две

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

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

Запустите сегментированный список пользователей, которые загрузили или подписались на ваш сервис, но еще не подтвердили подписку

Затем отправьте им аналогичное электронное письмо с советами для начала работы, как в этом примере рассылки от RunKeeper:

  • Сделайте это своевременно – письмо должно быть отправлено через несколько дней после того, как пользователи зарегистрировались и получили приветственное письмо подписчика
  • Презентуйте несколько лучших особенностей (о которых они могут еще не знать)
  • Быть любезным и приветливым
  • Мотивируйте их совершить любое действие, включая переходы по ссылкам для получения дополнительной информации
  • Сделайте это серией! Адаптация-это процесс, поэтому убедитесь, что у вас есть несколько готовых писем
  • Используйте адаптационные письма, чтобы предоставить дополнительные рекомендации по продукту

Короткие рассылки с красивым дизайном писем

Начнем с самых лаконичных рассылок. Как правило, в таких коротких письмах всего один CTA, поэтому вся рассылка сконцентрирована на нем. Это здорово, потому что подписчика ничто не отвлечет.

Ваши триггерные рассылки ужасны. Вот как их починить — Email Soldiers

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

Get answers to your questions and $25 off — One Medical

Красивый шаблон триггерного письма от медицинского сервиса One Medical. Эта рассылка приглашает завершить регистрацию в сервисе.

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

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


Красивый дизайн триггерного письма от One Medical

Книги, которые вы не читали, а зря — MyBook

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

Красивое письмо с подборкой книг и гифкой от MyBook

-10% на твой первый заказ — M.A.C.

Бренд косметики M.A.C. для своих рассылок создает красивые, броские, агрессивные письма. Естественно, продукты для макияжа здесь на первом плане.

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


Красивая рассылка от бренда косметики M.A.C.

Изображения в дизайне письма рассылки

Как не надо

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

2. Светлый и неконтрастный шрифт читается плохо. Такой текст при наложении на пеструю фотографию будет сливаться с фоном:

Белый текст на светлой фотографии читается плохо

3. Не используйте изображения больше необходимых размеров. Например, если ширина блока 300 px, то не нужно брать для него картинку шириной 1200 px.

Как надо

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

Чтобы оптимизировать изображения для писем можете воспользоваться этими сервисами: Squoosh, TinyPNG.

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

3. Увеличивайте размер иконок в два раза, чтобы у пользователей iPhone и Macbook с Retina экраном они отображались в хорошем качестве. Например, если в рассылку нужно добавить иконку размером 70×20, на сервер ее загружают в размере 140×40. А потом уменьшают, указав в коде атрибут .

Важно! Учтите, если уменьшаете картинки таким образом, то меняете только ее размер, но не вес. Картинка с большим весом может плохо грузиться на устройстве

Поэтому обращаем ваше внимание еще раз: оптимизируйте изображения перед тем, как добавить их в письмо

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

5. Выбирайте картинки хорошего качества — на бесплатных фотостоках или сделанные вами.

Блок с элементом «Текст»

Добавление текстового блока

Выберите слева элемент «Текст» и перетащите его в шаблон.

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

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

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

Скопируйте текст из файла Word, вставьте текст в файл .txt и снова скопируйте текст уже из текстового файла перед тем, как вставить его в редактор шаблона.

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

Отдельные параметры есть и для редактирования блока: цвет фона и отступ от краев (равноценный отступ текста от краев блока: сверху, снизу, слева и справа).

Нажмите по стрелочке справа от выбора переменных, чтобы открыть выпадающее меню, где спрятаны некоторые опции редактирования текстового блока:

Переменные

Добавление переменных происходит внутри текстового блока – меню «Переменные» с выпадающим списком предустановленных переменных.

Структура с элементом «Прехедер»

Прехедер – это текст, который виден подписчикам в почтовом клиенте сразу после темы.

Выберите нужный элемент в конструкторе («Добавить структуру» > «Примеры» > «Прехедер»), перетащите в шаблон и разместите над всеми элементами сверху.

По умолчанию блок «Прехедер» состоит из двух элементов в двух колонках: непосредственно прехедер и веб-версия письма.

Чтобы начать редактировать элемент, нажмите по нему левой кнопкой мыши.

Структура с элементом «Футер»

Футер – это то, чем заканчивается письмо: блок с контактами компании (адрес, телефон, сайт) и другой полезной для подписчиков информацией.

Добавьте футер в шаблон («Добавить структуру» > «Примеры» > «Футер»), измените текст и установите параметры блока.

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

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

Блок с элементом «Ссылка отписки»

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

Элемент «Отказаться от рассылки» находится в выпадающем меню «Переменные».

Вставить ссылку отписки вы можете в любой блок письма.

Подробнее о кастомизации отписки вы можете узнать из статьи «Как настроить страницу отписки».

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

Шрифты в электронных письмах

Это боль дизайнера. В дизайне писем мы можем использовать только стандартные шрифты:

  • Arial
  • Comic Sans MS
  • Courier New
  • Georgia
  • Impact
  • Tahoma
  • Times New Roman
  • Trebuchet MS
  • Verdana

Не самые красивые шрифты, но они хорошо читаются: подписчик точно увидит весь текст в письме. Фокус «поиграть со шрифтами» не выйдет :). Кстати, стандартные системные шрифты на Android и iOS — это Helvetica и Roboto. Поэтому их тоже можно использовать. В случае чего они заменяются на родной всем Arial. Так как они похожи по начертанию, это не сильно повредит макет, и ничего не поедет.  

Рекомендуемый размер основного текста — 14 px, межстрочный интервал — 1,5.

Используйте несколько текстовых стилей для расстановки акцентов: главный заголовок, основной текст, ссылка, сноска

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

Оптимально, если их будет три-четыре: заголовок, основной текст, текст в футере или сноски, ссылки.

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

Цвет текста

Цвет текста должен быть контрастным к фону. Некоторые дизайнеры считают, что лучше использовать тёмно-серый, например, #333333 к белому фону, так как чтение 100% чёрного текста утомляет глаза. Но это спорное утверждение. Можете почитать статью, в которой автор рассказывает про читаемость, контрастность цвета текста к фону, эволюцию шрифтов в вебе и приводит примеры.

Размер CTA-кнопки

CTA-кнопка не имеет строгих правил насчёт её размеров. Соблюдайте 2 главных правила:

1. Выделяйте кнопку на фоне письма

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

2. Сделайте кнопку большой для мобильной версии

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

Минимальный размер кнопки — 46×46 пикселей, но это не правило. Также, широко используются размеры кнопок 120х60 пикселей, 120х90 пикселей, 175х35 пикселей. В SendPulse вы можете задать любой размер кнопки при создании рассылки.

ESP — почтовые сервисы рассылок со встроенным конструктором шаблонов

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

SendPulse

Стоимость

Цена зависит от размера базы: бесплатно можно отправить до 15 тысяч писем на базу до 500 человек. Неограниченное количество писем для базы до 500 человек — 510 рублей в месяц, до тысячи подписчиков — 750 рублей в месяц, с увеличением базы цена растет.

Возможности

  • Настройка цепочек писем из e-mail, SMS, отправка push-уведомлений, настройка чат-ботов и рассылок в мессенджерах.
  • Создание рассылки в блочном редакторе без необходимости знания HTML.
  • Редактирование дизайнерских шаблонов из каталога.
  • Добавление кнопки для быстрой оплаты в e-mail шаблон.
  • Предпросмотр писем в десктопном и мобильном виде.
  • Бесплатный хостинг для хранения картинок.

  • Отправка транзакционных писем о подтверждении регистрации или бронирования, уведомления о статусе заказа через шлюз SMTP.
  • Персонализация писем: подстановка имени и других данных.
  • Создание форм подписок для сбора базы.
  • Интеграция с CMS и другим софтом.

GetResponse

Стоимость

Цена зависит от размера базы и выбранного тарифа. В базовом тарифе за рассылку по базе из тысячи подписчиков нужно будет платить 15$ в месяц, за базу из 50 тысяч — 250$.

Возможности

  • Составление писем на базе дизайнерских шаблонов в блочном редакторе без знания HTML-кода.
  • Предпросмотр писем в десктопном и мобильном варианте.
  • Добавление GIF и бесплатных картинок со стоков.

  • Персонализация писем на основе данных о подписчиках: вставка имени и динамического контента, сегментирование аудитории для разных рассылок.
  • Подбор идеального времени для рассылки.
  • Тестирование тем писем, анализ взаимодействий.
  • Создание автоматических цепочек писем.

Mailchimp

Стоимость

Бесплатно для базы до 2000 подписчиков.

Платные тарифы начинаются от 9.99$ в месяц. Можно выбрать оплату за письма, а не месяцы, если отправляете письма не регулярно.

Возможности

  • Создание электронных писем, лендингов, рекламных объявлений.
  • Создание писем с нуля в редакторе HTML или работа с готовыми шаблонами.

  • Отправка автоматических транзакционных писем.
  • Персонализация писем с помощью подстановки значений.
  • Анализ вовлеченности аудитории, кликов и покупок с помощью встроенных панелей мониторинга и API.
  • A/B-тестирование писем для выявления самого конверсионного варианта.

Campaign Monitor

Стоимость

Платные тарифы начинаются от 9$ в месяц.

Возможности

Создание писем в визуальном конструкторе без знания HTML, есть готовые шаблоны в каталоге.

  • Создание автоматических цепочек писем.
  • Подстановка имени для персонализации писем.
  • Анализ взаимодействия пользователей с рассылкой.
  • Сегментирование клиентов на основе анализа данных о них.
  • Интеграция с платформами электронной коммерции и CRM.

Dotdigital

Стоимость

Цену придется узнавать индивидуально.

Возможности

  • Реализация кампаний многоканального маркетинга: рассылка с помощью e-mail, SMS, сообщений в соцсетях и push-уведомлений.
  • Создание писем в визуальном редакторе на основе шаблонов из каталога.
  • Персонализация писем с помощью заполнения имени и вставки динамического контента.

Стоимость

Рассылка по 100 адресам бесплатна. Есть тарифы с оплатой по количеству писем или по размеру базы подписчиков, тогда число писем не ограничено.

Возможности

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

  • Просмотр макета письма и тестирование.
  • Сегментирование адресной базы.
  • Чистка базы от несуществующих адресов.
  • Персонализация писем по имени пользователя.
  • Создание автоматических рассылок.
  • A/B-тестирование писем для выбора лучшего варианта.

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

Html-вёрстка писем в платформах рассылок

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

UniSender

При создании письма выбираете html-редактор или загрузку своего кода.

Можно загрузить письмо с кодом из файла в форматах rar, zip, 7z и html или web-страницу с письмом — там уже есть все стили, нужные картинки и другие файлы, относящиеся к рассылке, которые подгрузятся автоматически. В интерфейсе после загрузки архива письмо будет таким, каким его увидят подписчики. Если нужно что-то поправить в коде письма (добавить или убрать теги, ссылки и так далее), переходим в источник.

Попадаем в html-редактор с цветовой подсветкой, вносим необходимые правки.

В UniSender можно вставить свой код — если вы в нём уверены и править не собираетесь.

MailChimp

В интерфейсе создания письма выбираем вариант Code your own → Paste in code.

Дальше мы переходим на экран загрузки кода.

SendPulse

На этой платформе также можно загрузить письмо файлом (html, htm, zip, rar и 7z), ссылкой или кодом.

Так выглядит макет письма после загрузки:

А ещё у SendPulse есть упрощённый html-редактор, который работает по принципу текстового редактора. И выглядит так же.

Marketo

Задаём имя письма и выбираем black template. После этого в редакторе нажимаем Edit Code. После чего вставляем код и можем сохранять его с помощью кнопки Save.

Klaviyo

Создаем новую кампанию, выбираем Or code your own html content.

После чего откроется редактор кода, куда можно скопировать html и нажать Save в правом верхнем углу.

Пользуйтесь на здоровье!

Подписывайтесь на наш Телеграм-канал «Маркетинг за три минуты», где мы делимся интересными материалами про онлайн-маркетинг в формате постов-трёхминуток. А если вы хотите поболтать и поделиться своими мыслями, приходите к нам в Чат Солдат.

Postcards

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

Postcards – Free HTML Email Template Builder with Drag & Drop Editor

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

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

Бесплатные и премиальные шаблоны информационных бюллетеней

Бесплатные шаблоны электронных писем для информационных бюллетеней имеют все необходимое для успеха вашего онлайн-продвижения и все необходимое, чтобы они выглядели профессионально. Вы можете не тратить деньги и узнать, как создать фантастическую кампанию по электронной почте со всеми необходимыми функциями. Хотя, когда дело доходит до коммерческого использования, мы настоятельно рекомендуем вам использовать шаблоны премиум-класса. Они предоставляют вам макеты и шаблоны из предварительно созданных MailChimp и Campaign Monitor. Каждый шаблон включает руководства пользователя, а также совместимость со всеми браузерами. Вы также получаете бесплатную пожизненную техническую поддержку 24/7. Ознакомьтесь с галереей шаблонов премиум-рассылки TemplateMonster.

Как редактировать бесплатные шаблоны информационных бюллетеней и электронных писем?

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

Как мне начать использовать бесплатные шаблоны информационных бюллетеней?

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

Есть ли у Google шаблон информационного бюллетеня?

Да, это так. Чтобы создать информационный бюллетень Google, перейдите в Документы Google Нажмите «Информационный бюллетень» Внесите изменения в дизайн Нажмите «Копировать» Откройте свой Gmail Вставьте в электронную почту “Нажмите« Отправить ». Управляйте своим списком рассылки, чтобы классифицировать клиентов для правильного таргетинга.

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

Убедитесь, что в нем есть очень четкие и ориентированные на клиента блоки контента, где вы можете выделить важные разделы. Все бесплатные шаблоны информационных бюллетеней должны быть хорошо структурированы и оптимизированы для SEO. Проверьте совместимость с популярными почтовыми клиентами, такими как Gmail, Yahoo, Outlook, Mail.ru и другими. В TemplateMonster вы можете найти очень профессиональные, индивидуализированные и бесплатные шаблоны электронных писем для информационных бюллетеней. Они идеально подходят для таких предприятий, как туристические агентства, недвижимость, мода, пищевая промышленность, финансовые услуги и любые другие онлайн-предложения.

Есть ли в Word шаблон информационного бюллетеня?

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

Красивые рассылки писем с акцентом на текст

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

6 февраля. Зачем мерить температуру в Кремле? — «Вечерняя Медуза»

Ежедневная рассылка «Вечерней Медузы» — целиком текст. Шаблон письма выглядит круто благодаря шрифту: буквы с засечками имитируют стиль старых газет.

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


Полностью текстовая рассылка от «Вечерней Медузы»

Нужнее снега — Invisible

Чего-то особенного в структуре шаблонов у Invisible нет, но это сильный дизайн: красивые иллюстрации, ничего лишнего в оформлении и в меру «воздуха» между блоками. А еще в письмах очень красивые иллюстрации и самые вкусные описания вин — грейпфрута и солнца в мой бокал, пожалуйста!


Рассылка о винах от Invisible

Kick the Meal Kits with $30 off — Freshly

Сервис доставки готовой еды Freshly круто рассказывает о своей пользе. Прямо в заголовок вынесен главный аргумент — «Экономьте час в день с помощью Freshly».

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


Красивая рассылка о еде от Freshly

Не забывайте, что текст в письмах важен. Необязательно быть талантливым автором, главное — понимать, по каким правилам построить текст и что главное для читателя. Основные правила мы собрали в статье «Текст для рассылки: универсальные советы для создания эффективных писем».

Дизайн CTA

Как не надо

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

2. Не заставляйте читателя угадывать, что ему нужно сделать, иначе он просто закроет письмо. Например, в рассылке ресторана призыв к действию «забронировать столик» виден только после прокрутки. К тому же он не соответствует теме письма, которая обещает «Рецепт лучших шашлыков»:

Призыв к действию находится ниже первого экрана и не соответствует теме письма

3. Если оформляете call to action ссылкой, она не должна теряться на фоне другого текста. В примере ниже ссылку на регистрацию в вебинаре сложно заметить сразу:

Короткая и светлая ссылка регистрации на вебинар теряется на фоне письма

Как надо

1. Размещайте призыв к действию в пределах первого экрана. Если письмо длинное, добавляйте призывы к действию по ходу чтения: в середине и в конце письма. Так делают в рассылке интернет-супермаркета Rozetka. Call to action размещен в шапке письма и под акционными товарами:

Несколько призывов к действию в рассылке интернет-супермаркета Rozetka

2. Согласовывайте призыв к действию с заголовком письма. Когда call to action вытекает из темы, письмо выглядит логичным и последовательным. Например, Нил Патель, создатель KissMetrics, в теме обещает рассказать, как высоко ранжироваться в поисковых системах без бюджета. А призыв к действию говорит: «Вот формула».

В письме сall to action соответствует теме

3. Делайте кнопку контрастной к дизайну письма. Призыв к действию должен хорошо выделяться на фоне текста и изображений:

Явный призыв к действию в рассылке

Добавить комментарий

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

Adblock
detector