Допустим, до этого момента вы делали рассылки в другой ESP, или ваш верстальщик сделал кастомный шаблон. Если просто скопировать и вставить в редактор свой HTML, многие функции будут заблокированы. Нельзя будет редактировать любой элемент (контейнер/структуру/полосу) и базовые блоки в drag’n’drop-режиме.
Чтобы по-полной использовать возможности редактора eSputnik, шаблон нужно адаптировать. Для этого нужно:
- HTML-код письма.
- Редактор eSputnik.
- Фишки по адаптации, которые вы узнаете из статьи.
Приступим к адаптации своего HTML письма.
Простой вариант адаптации шаблона в eSputnik
Этот способ подойдет, если вы не хотите добавлять блоки или менять их расположение, а просто надо редактировать содержимое: текст, ссылки, картинки.
Для примера мы взяли код шаблона Wemo на популярном ресурсе reallygoodemails.com. Загрузим выбранный нами образец HTML и поэтапно рассмотрим, как адаптировать его.
Если вы уже столкнулись с задачей подогнать свой код письма для редактора eSputnik, то наверняка знаете, как загрузить свой HTML. Нужно зайти в Сообщения — Сообщения — Создать Email.
Создание нового письма для загрузки своего HTML
И в разделе шаблонов “Базовые” выбрать вариант “Мой HTML”.
Выбрать Мой HTML
После этого вы увидите редактор с визуальной областью письма ① и активное окно редактора кода ②. В последнем можно открыть секцию CSS для задания стилей ③.
Окно редактирования кода: области HTML и CSS
Для удобства верстки или редактирования письма рекомендуем распределять HTML и CSS письма по соответствующим секциям редактора кода. Часто в HTML-коде писем CSS-стили содержатся внутри тега
<head>COPY
например:
CSS стили внутри тега head
Необходимо вырезать все, что обернуто в тег
<head>COPY
внутри
<style></style>COPY
и вставить в секцию CSS редактора кода.
В нашем шаблоне сделано так же. Разделим HTML и CSS по секциям.
Секция HTML
Отделили HTML от CSS
Секция CSS
Стили письма поместили в секцию CSS
Редактор eSputnik отобразил наше письмо в визуальном поле, но не видно картинок.
Все в порядке, нам еще предстоит их загрузить. А пока нажмите верхнюю строчку в хедере письма.
Возможность редактировать картинку, ссылку, альтернативный текст
Как вы видите, сразу после вставки HTML-кода шаблона в eSputnik можно редактировать ссылки, картинки и их названия (альтернативный текст). Сделать это можно как через панель редактирования, так и через редактор кода.
Попробуем загрузить картинки в письмо.
Кликните на логотип в визуальной части письма и в меню слева нажмите на значок “Заменить”.
Нажать "Заменить"
После этого откроется галерея картинок, которая будет пуста.
Область для загрузки своего изображения в eSputnik
Вам нужно загрузить в нее изображения. Для этого есть два пути:
- Если лого и все картинки для шаблона у вас сохранены на компьютере, то просто перетащите их в область для вставки. После этого все изображения для подстановки в письмо загрузятся и будут доступны в галерее.
- Нажмите на иконку загрузки изображения по текущей ссылке:
Загрузить изображение в персональную галерею eSputnik
После этого выбираем лого из галереи и для остальных не отобразившихся картинок в шаблоне проделываем ту же работу.
Когда все картинки подставлены — получаем красивый шаблон.
Картинки в письме стали отображаться после загрузки
Проверим его отображение на мобильном устройстве и убедимся, что картинки отображаются корректно.
Отображение письма на мобильном устройстве
Итак, сразу после вставки HTML-кода письма в eSputnik, есть возможность редактировать ссылки и картинки. А чтобы редактировать обычный текст, необходимо применить CSS-класс esd-text к тегу, в котором находится весь блок текста. Обычно это теги p, div, td, h1, h2, h3, span. К последнему применять спец. класс можно только в том случае, если внутри span находится весь текст, а не его часть. Применим класс esd-text к обертке текста.
Назначение специального класса тексту
После того, как класс esd-text задан, кликните по тексту в визуальной области письма, и eSputnik позволит редактировать текст, а также стилизовать его через панель редактирования.
Активная панель стилизации текста в редакторе
Это все, что нужно для простого способа адаптации шаблона.
