Обзор адаптивного email-редактора

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

В этой статье мы расскажем о возможностях drag'n'drop редактора и разберем его отдельные функции. 

Где находится адаптивный редактор?

Нужно зайти в раздел “Сообщения” → “Создать email” и выбрать необходимый шаблон.

При клике на “Создать email” откроется перечень шаблонов.

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

Слева находится основная панель, через которую можно внести изменения. Она состоит из вкладок: 

• “Оформление” – в этой статье описано, как создать оформление письма. 
• “Контент” – работа с ней описана в этом материале. 

Вкладка “Контент”

Вкладка “Контент” включает три раздела:

• Структуры – позволяет задать количество элементов.
• Блоки – позволяет добавить элементы (меню, баннер, видео, соцсети и т. д.) в структуру.
• Модули – библиотека уже готовых и сохраненных структур и блоков.

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

Полосы

Каждое письмо состоит из таких элементов: полоса, структура, контейнер.

Полосы объединяют и вмещают в себя блоки, структуры и контейнеры. Их можно перемещать, копировать, удалять и форматировать. 

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

Для редактирования полосы можно:

• задать цвет фона;

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

Структуры

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

Все контентные блоки находятся во вкладке “Блоки”, они составляют важную часть редактора, именно с их помощью можно наполнять контент письма.

Чтобы выбрать блок, структуру или полосу, нужно кликнуть по элементу и перетащить в нужное место в письме.

Блоки

Рассмотрим элементы вкладки “Блоки”: 

1. Шапка письма: логотип + меню

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

Чтобы создать хедер, нужно:

1. Перетянуть в область письма на одну полосу две структуры;
2. Перетянуть в первую структуру блоки “Картинка” и “Текст”.
3. Перетянуть во вторую структуру блок “Меню”.
   
4. Выбрать или загрузить подготовленную картинку. Далее для изображения нужно задать: 

• размер и центрирование;
• альтернативный текст (он нужен для объяснения, что находится на картинке; это важно для чтения письма скринридерами или если у получателя отключена загрузка изображений; также Alt – важный параметр для почтовиков – по описанию система оценивает содержимое емейла);
• ссылку – рекомендуем делать лого кликабельным. 
  

1. Добавить название компании под логотипом;
2. Написать необходимые пункты меню, задать цвет, шрифт, выравнивание, добавить ссылки. 

2. Функции блока “Картинки”

Внести изменения в изображение можно непосредственно в самом редакторе eSputnik. 

Встроенный редактор изображений в eSputnik:

Набор параметров при встраивании картинки в емейл:

• Rollover – эффект позволяет при наведении мыши на текущую картинку показать подписчику другую;
• Ссылка;
• Альтернативный текст;
• Выравнивание для десктопной и мобильной версии;
• Размер;
• Растягивание по ширине;
• Адаптивность картинки – позволяет изображению подстроиться под ширину экрана мобильного устройства;

• Отступы – для десктопной и мобильной версии;
• Анкорная ссылка – редко используется для картинок; якорные ссылки применяют, когда письмо получилось достаточно длинным, они позволяют получателю вернуться к нужному элементу в письме по клику на определенный элемент;
• Скрытие элемента – для десктопной или мобильной версии;
• Включение/отключение элемента для HTML- и AMP-версии письма;
• Привязка к событию – эта функция в основном используется для привязки сценария к кнопке, например “Подтвердил подписку”.

3. Создание баннера

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

Есть несколько способов создания баннера непосредственно в редакторе.

1. Загрузить готовую картинку, добавить на нее необходимый текст.
2. Воспользоваться встроенным банком картинок (поиск выполняется по ключевому слову). Выбранная картинка добавляется в один клик, далее ее можно редактировать.
3. Добавление URL-картинки из открытого источника и ее дальнейшее редактирование уже внутри сервиса.

Добавить текст на картинку для баннера можно несколькими способами: 

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

• выбрать пункт “Текст”;
  

• выбрать шрифт (в системе их 220, есть поиск);
• написать текст для баннера, для сохранения нажать “Применить” → “Сохранить”;
  

Изменить текст и шрифт в таком баннере после сохранения нельзя. 

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

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

Вид баннеров в обеих версиях: 

4. Настройка таймера

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

• время старта и окончания;
• шрифт;
• вид разделителя чисел;
• подписи цифр;
• выравнивание (десктоп и мобильная версия).
   

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

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

5. Добавление видео

 Чтобы добавить видео в письмо, нужно:

1. Добавить структуру, в нее поместить блок “Видео”;
2. Добавить ссылку на видео (Youtube, Vimeo) в поле “Ссылка на видео”;
   
3. Добавить титульную картинку – это необязательно, т. к. система автоматически подтянет обложку из видео, таким же образом пропишется альтернативный текст видео;
4. Выбрать кнопку “Play”;
   
5. Дальнейшие настройки видео аналогичны тем, что мы описали выше для картинок: можно задать выравнивание и размер, адаптивность картинки, скрытие элемента, добавление анкорной ссылки, включение/отключение элемента для HTML- и AMP-версии письма.

Поскольку HTML5 поддерживается не всеми почтовиками, видео в самом письме не воспроизводится. По клику на кнопку на видео в письме откроется видео на том ресурсе, где оно расположено (Youtube, Vimeo). 

6. Карточка товара

Создать карточку товара можно самостоятельно или выбрать во вкладке “Модули” подходящую и отредактировать ее в стиле компании. Как внести изменения в картинку, текст, кнопку, мы описали выше. 

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

Для этого нужно выбрать элемент, например “Кнопка”, кликнуть по нему. Слева в боковом меню выбрать “к контейнеру”.

Дальнейшие настройки элементов происходят в блоке “Данные” → “Smart”, детали в этой статье. 

7. Блок “Социальные сети”

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

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

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

8. Блок HTML

Блок НТМL предназначен для добавления собственного HTML и CSS. При этом из всего адаптивного редактора будут доступны функции редактирования картинок и ссылок. Настройку адаптивности пользователь делает самостоятельно.

9. AMP-элементы 

АМР-технология позволяет создавать рассылки, которые выглядят как автономные веб-страницы. Подписчик сможет выполнять действие прямо в письме: посмотреть ассортимент, забронировать встречу и т. д. Для этого используются разные формы. В системе eSputnik они уже подготовлены. Инструкции по их настройке: карусель, аккордеон, форма.