Вход

Email

Омниканальность

In-App
Рекомендации в мобильных приложениях

Автоматизация

Документы

Соответствие GDPR

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

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

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

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

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

Выбор пункта для создания сообщения

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

Выбор шаблона

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

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

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

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

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

Базовые элементы

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

Полосы

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

Размещение полосы, структуры, контейнера

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

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

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

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

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

Задать цвет фона полосы

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

Структуры

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

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

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

Блоки

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

Блоки

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

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

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

Хедер письма

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

  1. Перетянуть в область письма на одну полосу две структуры;
  2. Перетянуть в первую структуру блоки “Картинка” и “Текст”.
  3. Перетянуть во вторую структуру блок “Меню”.
    Блоки картинки и текста
  4. Выбрать или загрузить подготовленную картинку. Далее для изображения нужно задать: 
  • размер и центрирование;
  • альтернативный текст (он нужен для объяснения, что находится на картинке; это важно для чтения письма скринридерами или если у получателя отключена загрузка изображений; также Alt – важный параметр для почтовиков – по описанию система оценивает содержимое емейла);
  • ссылку – рекомендуем делать лого кликабельным. 
    Настройка картинки для хедера
  1. Добавить название компании под логотипом;
  2. Написать необходимые пункты меню, задать цвет, шрифт, выравнивание, добавить ссылки. 

Настройка меню

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

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

Кнопка перехода в редактор изображений

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

Редактор изображений

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

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

Настройки для картинки

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

Настройки для картинки

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

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

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

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

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

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

  1. Добавление текста на картинку непосредственно через панель вверху (она открывается по клику на картинку в баннере). 
    Создание баннера
    Редактировать такой баннер можно после его конвертации в картинку. Например, заменить картинку, удалить/изменить текст.
  2. Добавление текста в редакторе изображений.
    Для этого нужно:
  • выбрать пункт “Текст”;
    Добавление текста на картинку
  • выбрать шрифт (в системе их 220, есть поиск);
  • написать текст для баннера, для сохранения нажать “Применить” → “Сохранить”;
    Сохранение баннера

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

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

Баннер для десктопной версии

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

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

Предпросмотр

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

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

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

Создание таймера

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

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

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

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

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

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

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

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

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

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

Выбор карточки товара в библиотеке модулей

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

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

Настройка кнопки

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

Переход в раздел Smart для настройки элементов

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

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

Вариации вида блока соцсетей

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

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

  1. Блок HTML

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

Настройка блока HTML в редакторе

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

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

Остались вопросы?
Специалисты обязательно ответят и помогут решить вашу проблему!
Обратный звонок
Оставьте заявку – и наш специалист свяжется с вами в рабочее время.
Отправить заявку
Консультация в чате
Готовы к вашим вопросам!
Написать в чат
Электронная почта
Напишите в службу поддержки eSputnik.
Отправить email