Обзор профессионального email редактора eSputnik | Support eSputnik

Пользовательские данные

Email

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

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

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

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

Рассмотрим возможности drag-and-drop редактора.

Создание шаблона

Перейдите в “Сообщения” → “Сообщения” и нажмите “Новый Email”.

Новый email

Откроется галерея шаблонов с вкладками "Базовые", "Тематические" и "Сохраненные". Выберите шаблон, который лучше всего соответствует замыслу вашей кампании.

Выберите шаблон

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

  • "Оформление" (узнайте больше о работе с этой вкладкой по ссылке).
  • "Контент".

Вкладка “Контент” содержит 3 раздела:

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

Структура письма

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

Структура письма

Полоса

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

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

Внешний вид

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

  • установить цвет фона; 

Цвет фона

  • добавить фоновое изображение – взять изображение из банка, загрузить подготовленное или вставить ссылку на внешний ресурс;

Фоновое изображение

  • установить отступы и цвет;
  • скрыть полосу для десктопной или мобильной версии;

Скрытие элемента

  • включить/выключить полосу для HTML- или AMP-версии письма.

HTML- или AMP-версии

Структуры

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

Структуры

Контейнер

Контейнер может содержать один или несколько базовых блоков из меню "Блоки" слева, например:

  • Изображение
  • Текст
  • Кнопка 

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

Контейнер

Блоки

Все контентные блоки находятся на вкладке "Блоки". Именно с их помощью можно наполнять контент письма.

Блоки

Рассмотрим элементы вкладки "Блоки".

Изображение

Ознакомьтесь с возможностями работы с изображениями в отдельной статье.

Текст

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

Текст

Кнопка

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

Разделитель

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

Разделитель

Видео

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

Чтобы добавить видео в письмо:

1. Добавьте структуру и поместить в нее блок "Видео".

2. Добавьте URL видео (YouTube, Vimeo) в поле "Ссылка на видео".

Блок "Видео"

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

4. Выберите кнопку “Play”.

Выберите кнопку “Play”.

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

Соцсети

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

Иконки соцсетей

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

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

Кастомные иконки

Баннер

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

Баннер

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

Добавление баннера

1. Загрузить готовую картинку и добавить в нее нужный текст.

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

3. Добавить URL изображения из открытого источника с его последующим редактированием уже внутри сервиса.

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

1. Добавление текста на изображение непосредственно через панель сверху (она открывается по клику изображения в баннере).

Добавление текста на изображение

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

2. Добавление текста в редакторе изображений.

Для этого нужно:

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

Текст

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

Сохранение текста

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

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

Скрытие элемента

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

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

Предпросмотр версий

Таймер

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

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

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

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

Продвинутые настройки таймера

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

Картинка по окончанию таймера

Меню

Блок “Меню” встречается практически во всех письмах. Меню может размещаться как в хедере, так и в футере. Это легкий способ добавить небольшие СТА, если, например, пользователю неинтересно промпредложение, но он точно знает, что хочет увидеть на сайте. Обычно блок от письма к письму не меняется.

В eSputnik есть 3 типа меню: ссылки, иконки, иконки и ссылки.

Меню

HTML

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

НТМL

AMP-элементы

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

Инструкции по их настройке:

Подробнее о создании шоблона узнайте по ссылке >

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