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

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

И чтобы легче было воспринять все, что изложено в статье, просто смотрите видео о том "Как работает новый редактор?"

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

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

Адаптивные шаблоны структур

Нажав на структуру, вы откроете шаблон в новом редакторе, который выглядит так:

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

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

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

Здесь вы найдёте три раздела:

  • Структуры

  • Блоки

  • Библиотека, которая содержит уже готовые и сохранные структуры и блоки.

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

Полосы

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

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

 

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

Структуры

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

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

Чтобы выбрать блок, структуру или полосу, нужно просто выделить их и перетащить в нужное место. Дальше разберем каждый из вкладки элемент “БЛОКИ” отдельно и более детально.

 

Футер письма: логотип + меню

Хорошим тоном и общепринятым правилом считается начинать письмо с корпоративно оформленного футера, чтобы пользователь сразу узнал вас.

Такой хедер делается из двух блоков и двух структур. Сначала перетаскиваем две структуры на одно отделение, затем блоки “МЕНЮ” и “КАРТИНКА”.

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

Какие еще есть функции блока “Картинка”?

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

В блоке “Меню” можно менять его вид, (с иконками или без), шрифт, цвет каждого пункта и пр.  Все это можно сделать в раскрывающемся окне при нажатии на блок.

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

Далее по структуре нужно добавить в письмо красивый баннер с помощью встроенной функции “Создание баннера”. С баннером можно работать разными способами.

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

  1. Загрузить готовую картинку и добавить на нее необходимый текст
  2. Воспользоваться Банком картинок. Это означает, что вы можете выбрать картинку непосредственно в редакторе. Для этого можно использовать поиск по ключевому слову: девушка, парень, Новый год, Рождество и тому подобное. Выбранная картинка добавляется в один клик, при этом можно свободно добавлять на нее текст, превращая простую картинку в красивый элемент дизайна письма.  
  3. Добавление URL картинки из открытого источника и ее дальнейшее редактирование уже внутри сервиса.

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

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

Твитнуть 

Простое добавление видео

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

  1. Ссылку нужно добавить в поле “Ссылка на видео” и подождать, пока сгенерится сама картинка.
  2. Альтернативный текст прописывается автоматически.
  3. Можно заменить в один клик иконку “Play” на нужную по цвету.

Также легко добавляются отступы и включается или отключается адаптивность.  На картинке выше вы видите главную заставку видео, которая идентична с картинкой на youtube. Из-за того, что  HTML 5 ещё не везде поддерживается видео в самом письме не воспроизводится, но подготовленный скриншот выглядит ничуть не хуже.  

 

Карточка товара и библиотека блоков

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

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

На картинке видно, что карточка товара состоит из:

  • двух картинок;
  • текстовых блоков с разным форматированием;
  • кнопки.

Рамка основной фотографии добавлена онлайн с помощью встроенного мини-фотошопа.

Любую картинку с карточки товара можно так или иначе редактировать во встроенном мини-фотошопе редактора eSputnik.
Твитнуть 

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

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

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

Твитнуть 

 

 

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

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

 

Блок “Социальные сети”: проще простого

Блок с социальными сетями невозможно упустить из внимания. Так сложилось, что практически во всех письмах мы даем клиентам возможность прогуляться по социальным сетям, в надежде, что они останутся с нами где-то еще.

Блок “Социальные сети” есть в любом стандартном редакторе, но мало где можно сделать красивый блок быстро, в один клик выбрав размер, цвет, отображение иконок и добавить ссылки.

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

 

Адаптивный дизайн писем

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

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

Твитнуть

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

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

Желаем красивых писем, больше адаптивности и меньше рутины! До встречи в следующей инструкции:)