02 ноября 2020
7130
15 мин
5.00
.webp "Как применить свой HTML письма и использовать в eSputnik")
Как адаптировать свой HTML-шаблон письма в eSputnik
Допустим, до этого момента вы делали рассылки в другой ESP, или ваш верстальщик сделал кастомный шаблон. Если просто скопировать и вставить в редактор свой HTML, многие функции будут заблокированы. Нельзя будет редактировать любой элемент (контейнер/структуру/полосу) и базовые блоки в drag’n’drop-режиме.
Чтобы по-полной использовать возможности редактора eSputnik, шаблон нужно адаптировать. Для этого нужно:
-
HTML-код письма.
-
Редактор eSputnik.
-
Фишки по адаптации, которые вы узнаете из статьи.
Приступим к адаптации своего HTML письма.
Простой вариант адаптации шаблона в eSputnik
Этот способ подойдет, если вы не хотите добавлять блоки или менять их расположение, а просто надо редактировать содержимое: текст, ссылки, картинки.
Для примера мы взяли код шаблона Wemo на популярном ресурсе reallygoodemails.com. Загрузим выбранный нами образец HTML и поэтапно рассмотрим, как адаптировать его.
Если вы уже столкнулись с задачей подогнать свой код письма для редактора eSputnik, то наверняка знаете, как загрузить свой HTML. Нужно зайти в Сообщения — Сообщения — Создать Email.
И в разделе шаблонов “Базовые” выбрать вариант “Мой HTML”.
После этого вы увидите редактор с визуальной областью письма ① и активное окно редактора кода ②. В последнем можно открыть секцию CSS для задания стилей ③.
Для удобства верстки или редактирования письма рекомендуем распределять HTML и CSS письма по соответствующим секциям редактора кода. Часто в HTML-коде писем CSS-стили содержатся внутри тега
<head>
например:
Необходимо вырезать все, что обернуто в тег
<style></style>
внутри
<head></head>
и вставить в секцию CSS редактора кода.
В нашем шаблоне сделано так же. Разделим HTML и CSS по секциям.
Секция HTML
Секция CSS
Редактор eSputnik отобразил наше письмо в визуальном поле, но не видно картинок.
Все в порядке, нам еще предстоит их загрузить. А пока нажмите верхнюю строчку в хедере письма.
Как вы видите, сразу после вставки HTML-кода шаблона в eSputnik можно редактировать ссылки, картинки и их названия (альтернативный текст). Сделать это можно как через панель редактирования, так и через редактор кода.
Попробуем загрузить картинки в письмо.
Кликните на логотип в визуальной части письма и в меню слева нажмите на значок “Заменить”.
После этого откроется галерея картинок, которая будет пуста.
Вам нужно загрузить в нее изображения. Для этого есть два пути:
-
Если лого и все картинки для шаблона у вас сохранены на компьютере, то просто перетащите их в область для вставки. После этого все изображения для подстановки в письмо загрузятся и будут доступны в галерее.
-
Нажмите на иконку загрузки изображения по текущей ссылке:
После этого выбираем лого из галереи и для остальных не отобразившихся картинок в шаблоне проделываем ту же работу.
Когда все картинки подставлены — получаем красивый шаблон.
Проверим его отображение на мобильном устройстве и убедимся, что картинки отображаются корректно.
Итак, сразу после вставки HTML-кода письма в eSputnik, есть возможность редактировать ссылки и картинки. А чтобы редактировать обычный текст, необходимо применить CSS-класс esd-text к тегу, в котором находится весь блок текста. Обычно это теги p, div, td, h1, h2, h3, span. К последнему применять спец. класс можно только в том случае, если внутри
<span>
находится весь текст, а не его часть. Применим класс esd-text к обертке текста.
После того, как класс esd-text задан, кликните по тексту в визуальной области письма, и eSputnik позволит редактировать текст, а также стилизовать его через панель редактирования.
Это все, что нужно для простого способа адаптации шаблона.
Усложненный вариант адаптации
Давайте рассмотрим усложненный вариант для случая, когда необходимо менять структуру письма, удалять/добавлять структуры, контейнеры, полосы.
Для начала разберемся, как устроены письма в eSputnik.
Об иерархии вложенности писем eSputnik
Письма в редакторе eSputnik состоят из:
-
полос;
-
структур;
-
контейнеров;
-
блоков.
Полоса — высший элемент иерархии вложенности для письма. В полосе может находиться несколько структур. В структурах могут находиться контейнеры, а в контейнерах размещаются блоки.
Рассмотрим пример вложенности полосы, в которой находится структура с двумя контейнерами и блоками «Картинка» + «Текст»:
-
Полоса с классом esd-stripe.
-
Структура с классом esd-structure.
-
Контейнер с классом esd-container-frame.
-
Блок с классом 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. Не нужно каждый настраивать вручную все карточки. Достаточно сделать заготовку в одной структуре, а потом дублировать ее с помощью кнопки, которая находится в элементах управления. В новых структурах просто заменить текст, картинки, ссылки.
Итоги
Мы показали:
-
Как адаптировать кастомный HTML для редактирования текста, картинок и ссылок в редакторе eSputnik.
-
Из чего состоит письмо, и как назначить его элементам необходимую вложенность: полосы, структуры, контейнеры, блоки. Это дало возможность более комфортно управлять контентом письма. Кроме редактирования текста и картинок мы можем копировать, перемещать, удалять и сохранить готовые блоки в библиотеку модулей.
В следующей статье мы расскажем, как задействовать редактор eSputnik на полную и сделать такой же шаблон с нуля.
А пока можете применить полученные знания к адаптации своего шаблона. Успехов в использовании редактора, и до новых встреч!
