Анна Забудская

Email-маркетолог

Как адаптировать свой HTML-шаблон письма в eSputnik

Допустим, до этого момента вы делали рассылки в другой ESP, или ваш верстальщик сделал кастомный шаблон. Если просто скопировать и вставить в редактор свой HTML, многие функции будут заблокированы. Нельзя будет редактировать любой элемент (контейнер/структуру/полосу) и базовые блоки в drag’n’drop-режиме.

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

  1. HTML-код письма.

  2. Редактор eSputnik.

  3. Фишки по адаптации, которые вы узнаете из статьи.

Приступим к адаптации своего HTML письма.

Простой вариант адаптации шаблона в eSputnik

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

Для примера мы взяли код шаблона Wemo на популярном ресурсе reallygoodemails.com. Загрузим выбранный нами образец HTML и поэтапно рассмотрим, как адаптировать его.

Если вы уже столкнулись с задачей подогнать свой код письма для редактора eSputnik, то наверняка знаете, как загрузить свой HTML. Нужно зайти в Сообщения — Сообщения — Создать Email. 

Шаги к загрузке своего шаблона в eSpitnik

И в разделе шаблонов “Базовые” выбрать вариант “Мой HTML”.

Выбрать шаблон для загрузки HTML

После этого вы увидите редактор с визуальной областью письма ① и активное окно редактора кода ②. В последнем можно открыть секцию CSS для задания стилей ③.

Как выглядит редактор кода в eSputnik

Для удобства верстки или редактирования письма рекомендуем распределять HTML и CSS письма по соответствующим секциям редактора кода. Часто в  HTML-коде писем CSS-стили содержатся внутри тега

<head>

например:

Встроенные CSS стили в теге head HTML

Необходимо вырезать все, что обернуто в тег

<style></style>

внутри

<head></head>

и вставить в секцию CSS редактора кода. 

В нашем шаблоне сделано так же. Разделим HTML и CSS по секциям.

Секция HTML

Отделили HTML от CSS

Секция CSS

Стили письма поместили в секцию CSS

Редактор eSputnik отобразил наше письмо в визуальном поле, но не видно картинок.

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

Возможность редактировать картинку, ссылку, альтернативный текст

Как вы видите, сразу после вставки HTML-кода шаблона в eSputnik можно редактировать ссылки, картинки и их названия (альтернативный текст). Сделать это можно как через панель редактирования, так и через редактор кода.

Попробуем загрузить картинки в письмо. 

Кликните на логотип в визуальной части письма и в меню слева нажмите на значок “Заменить”.

Загрузить свое изображение

После этого откроется галерея картинок, которая будет пуста. 

Загрузка своего изображения в eSputnik

Вам нужно загрузить в нее изображения. Для этого есть два пути:

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

  2. Нажмите на иконку загрузки изображения по текущей ссылке:

Загрузить изображение в eSputnik

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

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

Картинки в письме стали отображаться после загрузки

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

Проверка как отображается письмо на мобильном

Итак, сразу после вставки HTML-кода письма в eSputnik, есть возможность редактировать ссылки и картинки. А чтобы редактировать обычный текст, необходимо применить CSS-класс esd-text к тегу, в котором находится весь блок текста. Обычно это теги p, div, td, h1, h2, h3, span. К последнему применять спец. класс можно только в том случае, если внутри 

<span>

находится весь текст, а не его часть. Применим класс esd-text к обертке текста.

Назначение специального класса тексту

После того, как класс esd-text задан, кликните по тексту в визуальной области письма, и eSputnik позволит редактировать текст, а также стилизовать его через панель редактирования.

Активная панель стилизации текста в редакторе

Это все, что нужно для простого способа адаптации шаблона.

Last post

Усложненный вариант адаптации

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

Для начала разберемся, как устроены письма в eSputnik.

Об иерархии вложенности писем eSputnik

Письма в редакторе eSputnik состоят из: 

  • полос;

  • структур;

  • контейнеров;

  • блоков.

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

Рассмотрим пример вложенности полосы, в которой находится структура с двумя контейнерами и блоками «Картинка» + «Текст»:

Вложенность писем на примере одной структуры

  1. Полоса с классом esd-stripe.

  2. Структура с классом esd-structure.

  3. Контейнер с классом esd-container-frame.

  4. Блок с классом esd-block.

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

Почти всегда есть куда вставить класс для полосы, структуры и/или контейнеров. Но из-за специфичной верстки блоков не всегда удается добавить для них класс так, чтоб они корректно адаптировались. Поэтому мы рекомендуем добавлять класс esd-block-html в обертку такого блока, тогда eSputnik сможет активировать кнопки управления (сохранение, перемещение, копирование, удаление) и дальше редактировать такой блок можно будет через HTML.

Список доступных классов Блоков

esd-block-image — класс для определения блока «Картинка»;
esd-block-text — класс для определения блока «Текст»;
esd-block-button — класс для определения блока «Кнопка»;
esd-block-spacer — класс для определения блока «Разделитель»;
esd-block-social — класс для определения блока «Соцсеть»;
esd-block-html — класс для определения блока «HTML»;
esd-block-menu — класс для определения блока «Меню». 

Адаптируем полосу

Найдем ячейку таблицы, которой можно назначить класс для полосы. Такая таблица нашлась — это контент письма целиком. Устанавливаем ему класс esd-stripe.

Назначаем полосу при помощи специального класса

После добавления класса eSputnik определил ячейку как полосу, и появилась рамка с элементами управления. Теперь полосу можно редактировать через боковую панель, а также удалять/копировать/перемещать ее прямо в визуальной области письма.

Адаптируем структуру

Назначим соответствующий класс esd-structure для структуры.

Адаптируем структура добавлением специального класса

Как и у полосы, у структуры появилась рамка и элементы управления.

Адаптируем базовые блоки

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

Логотипу — esd-block-image.

Адаптация логотипа

Блоку с текстом — esd-block-text.

Адаптация текстового блока

Аналогичным образом мы назначили класс esd-block-image.
Вот как выглядит общий результат по адаптации блоков: 

Редактор стал воспринимать блоки в заданной иерархии

Попробуем адаптировать карточку товара с кнопкой

Здесь нам не хватает Контейнеров, чтобы была возможность перетаскивать блоки из панели drag’n’drop.

Находим ячейку таблицы, в которой расположено фото товара с альт-текстом «Wemo Mini», и указываем ей класс esd-container-frame — это будет наш первый Контейнер.

Определяем контейнер

В этом контейнере превращаем блок в картинку при помощи добавления класса esd-block-image.

Определение изображения как картинки

Поработаем со вторым контейнером. Находим ячейку таблицы, в которой расположен текст «Wemo Mini», и указываем ей класс esd-container-frame.

Адаптация контейнера

Все, что находится в ① и ② областях ячейки esd-container-frame — наши блоки. 

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

Весь контент этого контейнера — текст и кнопка. Указываем ячейке первой обасти класс esd-block-text, а ячейке второй области — блок esd-block-button.

Адаптация текста карточки товара

Определить кнопку как родной блок с кнопкой

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

Готовая карточка товара

Итоги

Мы показали:

  1. Как адаптировать кастомный HTML для редактирования текста, картинок и ссылок в редакторе eSputnik. 

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

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

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

5.0 из 5 на основе 5 оценок

Анна Забудская

Email-маркетолог

Комментарии 0

С этим читают