Допустим, до этого момента вы делали рассылки в другой ESP, или ваш верстальщик сделал кастомный шаблон. Если просто скопировать и вставить в редактор свой HTML, многие функции будут заблокированы. Нельзя будет редактировать любой элемент (контейнер/структуру/полосу) и базовые блоки в drag’n’drop-режиме.
Чтобы по-полной использовать возможности редактора eSputnik, шаблон нужно адаптировать. Для этого нужно:
- HTML-код письма.
- Редактор eSputnik.
- Фишки по адаптации, которые вы узнаете из статьи.
Приступим к адаптации своего HTML письма.
Давайте рассмотрим усложненный вариант для случая, когда необходимо менять структуру письма, удалять/добавлять структуры, контейнеры, полосы.
Для начала разберемся, как устроены письма в 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 Dimmer», и указываем ей класс esd-container-frame — это будет наш первый Контейнер.
Определяем контейнер
В этом контейнере превращаем блок в картинку при помощи добавления класса esd-block-image.
Определение изображения как картинки
Поработаем со вторым контейнером. Находим ячейку таблицы, в которой расположен текст «Wemo Mini», и указываем ей класс esd-container-frame.
Адаптация контейнера
Все, что находится в ① и ② областях ячейки esd-container-frame — наши блоки.
Блоки контейнера в коде
Весь контент этого контейнера — текст и кнопка. Указываем ячейке первой обасти класс esd-block-text, а ячейке второй области — блок esd-block-button.
Адаптация текста карточки товара
Адаптировать кнопку
Аналогичным образом мы превращаем оставшийся пользовательский HTML в блоки редактора eSputnik. Не нужно каждый настраивать вручную все карточки. Достаточно сделать заготовку в одной структуре, а потом дублировать ее с помощью кнопки, которая находится в элементах управления. В новых структурах просто заменить текст, картинки, ссылки.
Готовая карточка товара
Итоги
Мы показали:
- Из чего состоит письмо, и как назначить его элементам необходимую вложенность: полосы, структуры, контейнеры, блоки. Это дало возможность более комфортно управлять контентом письма. Кроме редактирования текста и картинок мы можем копировать, перемещать, удалять и сохранить готовые блоки в библиотеку модулей.
В следующей статье мы расскажем, как задействовать редактор eSputnik на полную и сделать такой же шаблон с нуля.
А пока можете применить полученные знания к адаптации своего шаблона. Успехов в использовании редактора, и до новых встреч!
