Обзор конструктора html-писем в Soluspage| Блог Виктории Карповой

Привет! В Soluspage помимо конструктора страниц теперь еще добавили конструктор html-писем для email-рассылки. Сегодня вместе будем тестировать эту опцию.

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

Кроме конструктора писем прилетела еще новость про изменение в тарифах Soluspage.

Ранее у них был полностью бесплатный, где можно было добавить 1 домен и на нем разместить до 20 страниц. Теперь это убрали. Ввели 15 дней бесплатного доступа к тарифу VIP, а после уже за оплату – либо тариф с оплатой каждого домена, которым пользуетесь – 75 р. в месяц. Либо тариф VIP без ограничений 350 р. месяц + возможность экспорта страниц в html-формате и загрузки на свой хостинг.

Но сегодня не о доменах и сайтах, а о конструкторе писем.

Ниже предлагаю посмотреть свой видеообзор:

Новинка доступна в Soluspage в разделе «Кабинет» → «Конструктор» → «Конструктор писем».

Чтобы добавить письмо – вначале нужно добавить категорию (а в ней уже можно создавать несколько писем).

При создании или удалении категории есть маленький косяк – перекидывает на соседний раздел «Конструктор шаблонов» и нужно заново переходить в «Конструктор писем».

Далее добавляем в созданную категорию письмо.

У нас откроется редактор.

Редактор очень похож на тот, в котором мы делаем страницы. Только пока тут мало блоков. Уверена, скоро добавят еще – ведь и в конструкторе страниц они тоже постепенно добавлялись. Например, интересно было бы добавить таймер, видео. А так основные блоки уже доступны.

Для примера создам письмо с анонсом моего поста Вконтакте, посвященного привлечению целевой аудитории. В своем письме использую 4 блока – картинку, заголовок, текст и кнопку.

Чтобы добавить нужный вам блок, кликните на него внизу в списке. Затем в меню слева выберите вариант блока (если их несколько).

Наведите мышкой на добавленный блок – вверху слева есть несколько вкладок «Настройка» и «Содержимое».

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

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

Справа при наведении на блок мышкой вы увидите еще несколько иконок – там можно сохранить блок в галерею «Мои блоки», удалить, скопировать блок, перемещать вверх/вниз.

Итак, первым в свое письмо я добавлю блок с изображением – в нем будет мой брендирующий баннер (логотип для письма с моим фото и названием проекта), сделанный в Канве.

В содержимом блока подгружаю свое изображение с компьютера – тот самый баннер. Нажимаю «Вставить из галереи».

Затем «Обзор» — выбираю файл у себя на компьютере.

Дальше – «Загрузить изображение».

И выбираю в галерее, кликнув по нему мышкой.

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

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

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

Вторым блоком добавлю заголовок – о чем мое письмо.

Текст заголовка меняю в содержимом блока, там же настраиваю цвет, шрифт, размер текста.

А в настройках блока задам цвет фона – светло серый, чтобы его визуально выделить.

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

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

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

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

Для этого в настройках верхнего блока я уменьшаю его нижний отступ до 30 пикселей

А в настройках блока-заголовка одинаково уменьшила до 45 пикселей верхний и нижний отступы. Тем самым подрегулировала высоту данного блока.

Вот, что получилось:

Третьим блоком добавляю текстовый – в моем случае это анонс статьи с предложением прочитать ее полностью.

Чтобы отредактировать текст, захожу в «Содержимое» блока.

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

В настройках текстового блока уменьшила его верхний отступ до 30 пикселей.

Четвертый последний блок с кликабельной кнопкой – призыв почитать полную статью.

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

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

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

И, конечно же, добавить ссылку в кнопку.

А вот кнопку-картинку можно найти в интернете или создать свою в сервисе Clickminded.

Затем просто загрузить свою картинку-кнопку в разделе «Содержимое».

И вставить в нее ссылку.

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

Итого, вот такое письмо у меня получилось:

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

Готовое письмо сохраняем.

И копируем его html-код.

Далее покажу, как его добавить на примере сервисов email-рассылок Spoonpay и Джастклик.

В Spoonpay идем в Инструменты маркетинга → Письма → Добавить письмо.

Указываем название и заголовок (тему письма).

Тип письма выбираем «Импортированное html».

Ниже вставляем скопированный на предыдущем шаге код. И жмем «Добавить».

Тестируем письмо себе на email перед отправкой в разделе «Рассылки» →»Тестовая рассылка».

Если все ок, в том же разделе «Рассылки» добавляем уже настоящую рассылку по базе подписчиков.

Как использовать этот html-шаблон письма в сервисе рассылок Джастклик?

Заходим в раздел «Рассылки», выбираем тип рассылки, например, «мгновенную» (на запланированные дату и время).

В редакторе письма переключаемся на режим кода — Источник.

Вставляем код html-письма, скопированный в Soluspage. И снова переключаемся на визуальный режим.

Тестируем письмо к себе на email перед отправкой по базе.

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

Отредактируйте, сохраните и заново скопируйте его код.

Кстати, для конструктора Soluspage сделали отдельный чат поддержки, отвечают быстрее, раньше по всем сервисам Freedom Technology поддержка была общая по электронной почте.

Друзья, буду рада, если данный обзор конструктора html-писем в Soluspage был вам полезен.

Обратная связь и вопросы в комментариях приветствуются.

Кстати, у меня есть на блоге статья про другой конструктор html-писем Stripo.

Виктория

Почему email-маркетологи верстают письма кодом, если есть готовые шаблоны

Рассказывает Ольга Володина,

старший контент-маркетолог

Четыре года назад я работала email-маркетологом в стартапе. Раз в неделю заходила на ESP-платформу: собирала макет из готовых блоков, сочиняла текст, вставляла иллюстрации и отправляла письмо по базе. 

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

Когда встроенного конструктора писем достаточно для работы

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

Для email-маркетолога встроенный конструктор ESP-платформы — важный инструмент. Самому себе дизайнить картинки и верстать шаблоны в коде — из разряда фантастики.

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

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

Варианты шаблонов от Stripo к Хеллоуину

Возможные ошибки в шаблонной верстке

Шаблонная верстка выглядит отлично, если смотреть на нее с компьютера и никуда не отправлять. При этом у каждого из почтовиков — «Яндекса», Gmail, Mail — с ней свои отношения. Прибавим к этому постоянные обновления почтовиков, разные устройства, с которых получатели читают письма, и темные темы на устройствах.

И вот красивый шаблон развалился на экране получателя.

В агентстве Out of Cloud письма создают 5 специалистов: контент-маркетолог, дизайнер, верстальщик и технический специалист. Смысл в том, что текст, иллюстрации — это суперважно, но какой в этом толк, если верстка развалится. Даже в самых простых шаблонных письмах могут возникать ошибки. 

Падение верстки в почтовике Outlook. Ошибка: не проигрывается гиф-анимация в письме. Как исправит верстальщик: сделает стоп-кадр гиф-анимации и поставит полученный баннер в коде только для получателей с почтой Outlook.

Ошибка 2: блок с фоновой картинкой обрезается.

Пример рассылки для стажеров Out of Cloud

Как исправит верстальщик: скорее всего, нет xml-кода в head. Специалист добавит в html-схемы в атрибут <html xmlns=»http://www.w3.org/1999/xhtml» xmlns:v=»urn:schemas-microsoft-com:vml» xmlns:o=»urn:schemas-microsoft-com:office:office».

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

Ошибка: висячий предлог в конце строки.

Верстальщик склеит предлог и следующее слово при помощи неразрывного пробела в html, он выглядит так: &nbsp;. 

Ошибка 2: Даты, цифры, адреса без причины подчеркиваются или выделяются синим цветом, как ссылки. Верстальщик разобьет  текст при помощи <span></span>. Например: Ма</span>лая Пир<span>огов</span>ская, 3.

 

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

Пример рассылки — дайджест Out of Cloud

Пока что код умеет влиять на отображение письма в темной, инверсионной, теме только в Apple Mail. 

Для понимания, в какой цвет переведется текст или фон, верстальщик использует специальный сервис http://www.invertcolors.net/ru/. Всё остальное — дизайнерская хитрость: подложки правильного цвета, заголовки картинками.

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

Часто УТП рассылки — ее необычный дизайн, потому к нам в агентство часто приходят «за креативом». Такие письма невозможно собрать в конструкторе, но аудитория откликается на них очень классно, по нашей статистике.

Пример рассылки от Nikon. Не является рекламой. Источник

Шаблоны для email-рассылок: как эффективно и быстро отправлять письма

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

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

Заранее подготовленный дизайн — это удобно. Можно разработать брендированный мастер-шаблон письма самостоятельно или обратиться в агентство [например, в Mailfit 🙃], но об этом мы уже рассказывали. Ещё вариант — использовать готовые шаблоны писем в платформах для отправки, адаптируя их под свой бренд. 

Зачем нужны шаблоны

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

1. Быстро собрать любую рассылку, ведь достаточно взять шаблон и поменять его наполнение.
2. Сэкономить время как email-маркетолога, так и других специалистов. Время и силы, потраченные на подготовку каждой новой рассылки, можно использовать куда эффективнее.
3. Минимизировать ошибки вёрстки. С шаблонами уже известно, как письма будут выглядеть при открытии — их уже протестировали в разных почтовых сервисах. 
4. Адаптировать рассылку к мобильной версии. В большинстве готовых шаблонов уже заложена адаптивная вёрстка и письма всегда будут корректно отображаться на смартфонах и других устройствах.
5. Поддерживать идентичность бренда. Это важно, потому что единый стиль коммуникации с подписчиками повышает лояльность.

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

Из чего состоит шаблон

Пазл, из которого сложится картина письма, состоит из стандартного набора блоков:

— шапка;

— баннер;

— контентные блоки;

— товарные блоки;

— СТА-кнопки;

— соцсети;

— подвал;

— техническая информация и ссылка отписки. 

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

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

А интернет-магазину важнее иметь несколько товарных блоков:

Главное — адаптировать шаблон под фирменный стиль компании, чтобы сохранить идентичность бренда: добавить цвета, логотип, элементы и кнопки в стиле основного сайта.

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

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

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

Как и где сделать 

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

Если нужно быстрее — стоит обратиться в агентство. Или выбрать один из готовых в платформе для отправки рассылок — так называемом конструкторе писем.

Где ещё можно собрать рассылку

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

— сколько вариантов уже готовых шаблонов есть в сервисе;

— легко ли изменить дизайн шаблона;

— можно ли загрузить собственный;

— удобство редактора по созданию письма;

— есть ли встроенные проверки на ошибки;

— количество интеграций с платформами для отправки;

— наличие техподдержки и обучения по работе с сервисом.

А теперь расскажем подробнее об этих платформах.

ESP-платформы

Для работы с шаблонами прямо внутри сервиса для отправки рассылок. 

GetResponse

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

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

eSputnik

Сервис массовых и автоматических рассылок с поддержкой омниканальных сценариев, обширным email-функционалом и возможностями. База из 300+ шаблонов регулярно пополняется, а благодаря работе редактора по принципу drag-and-drop шаблон можно видоизменять под свой дизайн и нужды. 

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

SendPulse

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

Что классно: есть библиотека компонентов — можно добавлять прехедер, футер или ссылки отписки из готовых структур. 

Unisender

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

Что классно: есть возможность персонализировать письма и сделать всё сразу в одном сервисе. 

Специализированные сервисы и конструкторы

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

Stripo

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

Что классно: экспорт готового письма в 40+ ESP и почтовиков, в том числе Mailchimp, GetResponse, Campaign Monitor, UniSender, eSputnik и другие. 

Letteros 

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

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

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

Остановимся подробнее на последнем варианте сервиса по работе с шаблонами и расскажем принцип сборки на примере модульного редактора email-писем. 

Кстати, вот ещё кое-что из возможностей платформы:

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

А дальше — всё просто. В панели администратора находите вкладку «Шаблоны», наводите курсор на неё и нажимаете кнопку «Создать письмо».

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

Редактор работает по принципу drag-and-drop: выбираете нужный блок из списка и перетаскиваете его в рабочее поле. Таким же перетаскиванием можно менять порядок блоков в письме. Вёрстка при этом никуда не «поедет», так как всё уже адаптировано.

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

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

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

Как видите, ничего сложного — даже не нужно владеть какими-то специальными знаниями. 

Советы напоследок

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

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

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

Добавьте блоки, релевантные деятельности компании. Например, для e‑commerce важно добавить товарные блоки и заточить рассылку под продукт. А для онлайн-журналов или IT-компаний больше понадобятся текстовые и контентные блоки, чтобы давать подписчикам максимально информативную пользу. 

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

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

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

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

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

ПОЛУЧИЛОСЬ!
Скоро вы начнете получать нашу рассылку

Верстка email-писем для новичков. Делаем html письмо, как у Reebok | Unisender

Автор — Никита Аксютин

У вас есть готовый черновик с текстом и изображениями для рассылки подписчикам. Вы хотите сверстать классное html письмо — чтоб оно отображалось на всех устройствах и просто красиво выглядело. Например, как у Reebok:

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

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

Какие навыки нужны для верстки письма

Раньше сверстать html письмо можно было только одним способом: написать его на специальном языке — html-коде. Этим занимался верстальщик. Он переносил нарисованный дизайнером макет в готовое письмо.

Кусок html-кода из письма Reebok. Верстальщик создает макет из таблиц и знает, за что отвечает каждая строка кода

Кусок html-кода из письма Reebok. Верстальщик создает макет из таблиц и знает, за что отвечает каждая строка кода

Сейчас услуги верстальщиков тоже распространены. Их можно нанять на аутсорсе или поискать внутри своей компании 😉

Существует альтернатива классической верстке — создание писем в конструкторе (он же — блочный редактор). Это приложение для создания html письма по кирпичикам (блокам). Блоком может быть кнопка, кусок текста, изображение, обложка товара. Цвет, размер и другие параметры блока тоже регулируются.

Процесс верстки по блокам в конструкторе писем UniSender

Процесс верстки по блокам в конструкторе писем UniSender

Сервисы-конструкторы: Stripo, Topol, Mosaico, Tilda, встроенные конструкторы в сервисах рассылок.

Конструктор — посредник между пользователем и html-кодом. Мы оперируем понятными инструментами — блоками, а конструктор переводит это на язык html и правильно отображает в почтовом клиенте.

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

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

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

Функционала конструктора точно хватит для создания html письма как у Reebok. Сейчас в этом убедимся.

Практика: создаем письмо, как у Reebok, в конструкторе

Я попробую повторить html письмо Reebok из начала статьи. Делать я его буду в конструкторе почтового сервиса UniSender.

Личный кабинет сервиса предлагает создать первую рассылку

Личный кабинет сервиса предлагает создать первую рассылку

Я начну верстать с бесплатного шаблона. Мне легче работать с предзаполненной страницей, чем с пустым листом:

Выбираю понравившийся мне шаблон

Выбираю понравившийся мне шаблон

В html письме Reebok есть два изображения: логотип и иллюстрация с Томом и Джерри. Загрузим их в файл-менеджер:

Кликаю на первое попавшееся изображение и нажимаю изменить картинку — так можно попасть в файл-менеджер

Кликаю на первое попавшееся изображение и нажимаю изменить картинку — так можно попасть в файл-менеджер

Загружаю изображения

Загружаю изображения

Поменяем фон и удалим лишние элементы:

Добавим шапку с ссылкой на веб-версию html письма:

Конечная версия шапки выглядит так:

Добавим логотип и иллюстрацию:

Логотипу не хватает отступов. Исправим это:

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

Теперь основной контент письма. Тут главное не ошибится с шрифтом и размером. И не забыть про отступы:

Осталось доделать кнопку — поменять цвет и убрать округление углов:

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

Сравнение оригинала и копии из конструктора

Посмотрим что у меня получилось:

Сравните сами веб-версии писем:

Веб-версия оригинала

Веб-версия копии (я сделал верхнюю часть html письма и не прописывал ссылки)

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

Чтобы сделать такое письмо, мне понадобилось 20-30 минут. Но я не мастер верстки и с некоторыми функциями знакомился впервые.

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

И еще — в конструкторе все элементы адаптивны. Поэтому на смартфоне у html письма все в порядке с отображением:

Я не соврал и реально сделал html письмо как у Reebok. Расскажите, а вы верстали когда-нибудь html письма в конструкторе? Если да, поделитесь ссылкой или изображением, будет интересно посмотреть.

11 лучших бесплатных конструкторов электронных писем | Обзор 2020

Опубликовано: 2021-06-26

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

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

Некоторые маркетологи могут спросить, умер ли электронный маркетинг.

Но правда в том, что:

Электронный маркетинг, несомненно, является наиболее эффективной маркетинговой стратегией, и вот почему:

• Сильный глобальный охват : согласно данным Statista за 2020 год, количество пользователей электронной почты во всем мире к 2023 году достигнет 4,3 миллиарда — по сравнению с 3,9 миллиарда в 2019 году. Это более половины населения мира.
• Недорогая стоимость : в отличие от социальных сетей, где вам нужно платить, чтобы получить реальную рекламу, существует множество бесплатных и недорогих инструментов электронного маркетинга.
• Высокая рентабельность инвестиций (ROI): отчет DMA Marketer Email Tracker за 2019 год показывает, что на каждый доллар, потраченный на электронный маркетинг, ожидаемая прибыль составляет 42 доллара.

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

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

Если так, то вы не одиноки.

Хорошие новости — чтобы помочь вам начать, мы обсудим:

• Основы создания шаблонов писем
• Преимущества использования конструктора шаблонов электронной почты
• 11 лучших бесплатных инструментов для создания шаблонов электронной почты

Давайте начнем.

• Основы создания шаблонов электронной почты
  • Кодирование электронной почты
  • Конструкторы электронной почты с перетаскиванием
• Преимущества использования конструктора шаблонов электронной почты
• Какие лучшие бесплатные конструкторы шаблонов электронной почты вам следует рассмотреть?
  • 1. Программное обеспечение электронного маркетинга HubSpot
  • №2. Создатель онлайн-рассылки Venngage
  • №3. Mailchimp
  • №4. BEE Бесплатно
  • №5. Хамайлеон
  • №6. Stripo
  • №7. SendGrid
  • №8. TOPOL.io
  • №9. Mosaico.io
  • №10. Unlayer
  • №11. AWeber
• Последние мысли: 11 лучших бесплатных инструментов для создания шаблонов электронной почты + что искать

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

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

Шаблоны электронной почты могут быть построены с использованием двух основных методов: по электронной почте кодирования или перетащить — и — падение электронной почты строителей.

Кодирование электронной почты

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

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

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

Иметь ввиду:

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

Конструкторы электронной почты с перетаскиванием

Drag — и — падение электронной почты строители позволяют тем , кто менее технически создавать привлекательные шаблоны без необходимости какого — либо HTML или кодирования знаний. Вместо этого они обычно полагаются на редакторы WYSIWYG (What You See Is What You Get).

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

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

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

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

Преимущества использования конструктора шаблонов электронной почты

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

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

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

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

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

• Варианты интеграции ESP
• Редактирование перетаскиванием
• Библиотеки шаблонов электронной почты
• Возможности адаптивного дизайна

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

1. Программное обеспечение электронного маркетинга HubSpot

Изображение через HubSpot

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

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

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

HubSpot ESP также позволяет настраивать кодирование, но только для планов премиум-уровня.

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

№2. Создатель онлайн-рассылки Venngage

Изображение через Venngage

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

Благодаря функции Venngage Brand Kit очень легко добиться целостного восприятия информационного бюллетеня. Brand Kit добавляет ваши логотипы, фирменные цвета и фирменные шрифты к любому шаблону одним щелчком мыши.

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

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

№3. Mailchimp

Изображение через Mailchimp

Mailchimp является ведущим ESP на рынке, согласно данным Datanyze за 2020 год, согласно которым рыночная доля Mailchimp составляет более 68%.

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

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

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

Хотя существует множество альтернатив, Mailchimp выделяется своим новым инструментом проектирования с искусственным интеллектом (ИИ), Creative Assistant, который автоматически разрабатывает и изменяет размеры дизайна для вас после того, как вы поделитесь информацией о своем бренде.

Вы также можете хранить медиаресурсы в Content Studio Mailchimp, чтобы впоследствии легко получить к ним доступ.

Подобно программному обеспечению электронного маркетинга HubSpot, настраиваемое кодирование доступно только для планов премиум-уровня Mailchimp.

После доработки ваших шаблонов электронной почты вы можете отправлять до 10 000 информационных бюллетеней в месяц 2 000 контактов с помощью этой программы электронного маркетинга.

№4. BEE Бесплатно

Изображение через BEE Free

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

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

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

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

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

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

Как автономный конструктор с перетаскиванием, вы несете ответственность за экспорт HTML-шаблона и его загрузку в свой ESP.

Если вы хотите интегрировать BEE Free со своим почтовым клиентом, чтобы быстро отправить HTML-шаблон в ESP, вам необходимо перейти на BEE Pro.

№5. Хамайлеон

Изображение через Chamaileon

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

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

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

Вы также можете отправлять неограниченное количество тестовых писем.

Дополнительные примечательные преимущества бесплатного плана Chamaileon:

• Популярные интеграции для синхронизации ваших шаблонов электронной почты непосредственно с вашим ESP
• Теги слияния для персонализации подписчика
• Высококачественный, отзывчивый HTML-код электронной почты, который был протестирован и подтвержден Litmus и Email on Acid.
• Функция сохранения блоков для повторного использования общих блоков содержимого в новых шаблонах

№6. Stripo

Изображение через Stripo

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

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

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

Подобно Chamaileon, Stripo позволяет пользователям бесплатно интегрировать шаблоны с популярными поставщиками услуг электронной почты, такими как Gmail и Outlook, для облегчения передачи. Вы также можете загружать электронные письма в формате PDF или в виде чистого кода HTML / AMP.

№7. SendGrid

Изображение через SendGrid

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

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

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

С другой стороны, бесплатные инструменты электронного маркетинга, включенные в их бесплатный план, включают A / B-тестирование, сегментацию и подробную аналитику.

№8. TOPOL.io

Изображение через TOPOL.io

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

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

Как и в случае с BEE Free и Mosaico.io, вам не нужно регистрироваться, чтобы начать работу с TOPOL.io. Инструмент электронной почты позволяет сразу же приступить к созданию адаптивного шаблона.

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

Готовы к последним штрихам?

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

№9. Mosaico.io

Изображение через Mosaico.io

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

Этот бесплатный инструмент электронной почты был создан для быстрого и гибкого дизайна.

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

Изображение через Mosaico.io

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

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

Хотите сохранить проект на потом? Никакого пота.

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

№10. Unlayer

Изображение через Unlayer

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

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

Не хватает изображений? Без проблем.

Unlayer имеет встроенную библиотеку бесплатных фотографий.

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

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

№11. AWeber

Изображение через AWeber

AWeber — один из старейших и самых надежных поставщиков услуг электронной почты.

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

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

Есть вопросы или нужна помощь?

Их бесплатный план предлагает круглосуточную поддержку по телефону, электронной почте и в чате.

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

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

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

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

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

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

Индивидуальные html шаблоны для email-рассылки – Boostmy.Email

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

При создании шаблона мы учитываем специфику целевой аудитории и поведенческие показатели. На основе мощного анализа, а также с учетом вашего фирменного стиля выполняем сугубо индивидуальный дизайн и вёрстку, адаптированную под вашу базу. Вы будете отправлять письма, которые открывают с вероятностью до 100%, и сможете повысить конверсию в 2-17 раз. Грамотный подход к созданию рассылок улучшит показатели продаж.

1. Структура. Используем табличный подход и инлайновые стили (только корректные CSS без сокращений). Такой подход хорош обилием фишек, настроек, разработанных именно для email-рассылок.

2. Размер шаблона. Ширина письма не превышает 660px, что идеально для быстрого чтения и легкого восприятия.

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

4. Фон и цвет. Подбираем оптимальные цветовые решения в зависимости от специфики рассылки.

• Заголовки 4 уровней
• Визуальное оформление шапки и подвала
• Продуманные текстовые блоки
• Рабочие ссылки на нужные ресурсы
• Кнопки и другие CTA-элементы
• Примеры размещения картинок и товарной сетки

• Разделители блоков
• Опросы для клиентов
• Брошенная корзина
• Блоки с промокодами
• Новостные блоки.

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

Шаг 1. Описываете ваши цели и задачи, предоставляете всю информацию, которую посчитаете нужной.

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

Шаг 3. Создаем мастер-шаблон — полностью готовое решение.

Шаг 4. Принимаете работу и даете обратную связь.

Шаг 5. Тестируем и при необходимости вносим корректировки.

1. Полное погружение в ваш бизнес.
Изучим 40+ показателей вашей ЦА при составлении html-шаблона для рассылки.

2. Подберем правильные темы.
Используем заголовки, которые повышают конверсию до 2-5 раз чаще.

3. Красивая вёрстка.
Письма не только легко читаются, но и вызывают эстетическое удовольствие.

4. Загрузка в любой сервис email-рассылок.
Поможем в выборе и все настроим.

5. Оперативная работа.
Все будет готово в короткий срок.

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

Улучшайте показатели бизнеса легко и правильно!

Заказать мастер-шаблон

GetResponse: Загрузка, редактирование и отправка html-письма

Дата публикации: 5 сентября 2016

Загрузка изображений в библиотеку

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

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

В правом верхнем углу личного кабинета наведите на «Моя уч. запись» и нажмите на «Мультимедиа» в выпадающем списке.

Откроется окно библиотеки. Перейдите в «Фото и графика» и создайте новую папку, что бы загружать туда все нужные изображения, перейдите в нее и нажмите на «Загрузить файл».

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

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

Если у вас уже есть загруженный список контактов — пропустите эту главу.

Перейдите в «Мой кабинет» в верхнем меню и выберите «Добавить контакты».

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

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

Создание рассылки

Перейдите в «Мой кабинет» в верхнем меню и нажмите на «Создать рассылку».

Далее выберите «Новый конструктор писем».

Заполните поля «Имя сообщения», «Тема» и удостоверьтесь, что в поле «От» указана верная почта отправителя.

Нажмите «Следующий шаг» справа снизу и вас перенесет на страницу выбора шаблона.

Нам не нужны их базовые шаблоны, а нужно загрузить собственный. Для этого во вкладке «Импорт» выберите «из ZIP». Затем «Выберите файл». Найдите ZIP-архив с вашим шаблоном и загрузите (Мы высылаем клиентам специальный архив Template-local.zip).

После того, как файлы загрузятся, не меняя ничего нажмите «Импорт».

Если все прошло успешно, вы увидите код письма. В нижнем меню есть кнопка «Показать WYSIWYG-редактор». Нажмите на нее, что бы перейти в режим редактирования письма.

Теперь вы можете редактировать все тексты простым выделением и переписыванием, как в любом другом редакторе.

Что бы открыть расширенные инструменты работы с текстом нажмите на значок шестеренки в верхнем меню (самый правый).

Замена изображений в письме

Теперь заменим изображение. Нажмите на картинку, которую хотите заменить и в верхнем меню кликните по самой левой иконке. Откроется библиотека.

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

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

Если вам все же нужно подкорректировать размер картинки, то кликните по ней правой кнопкой и выберите «Добавить/изменить изображение». Во вкладке «Положение» можно изменить размер, с сохранением пропорций. После нажатия на «Обновить» размер изменится.

Отправка письма

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

Осталось только нажать на «Отправить» или «Запланировать», если вы собираетесь отправить письмо позже.

Использование шаблонов и слотов — веб-компоненты

В этой статье объясняется, как можно использовать элементы

Теперь мы можем использовать его, просто добавив его в наш HTML-документ:

Примечание. Шаблоны хорошо поддерживаются браузерами; API Shadow DOM по умолчанию поддерживается в Firefox (начиная с версии 63), Chrome, Opera, Safari и Edge (начиная с версии 79).

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