Адаптация кастомного HTML в Stripo

Представьте, что вы уже знаете о преимуществах Stripo и решили воспользоваться этим сервисом для своих будущих писем. Однако вас, возможно, беспокоит вопрос о сохранении коллекции шаблонов писем, которые хотелось бы продолжать использовать.

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

Стандартные сценарии работы с готовым email-дизайном в Stripo

В зависимости от исходной позиции и объема необходимых изменений можно выделить 3 распространенных сценария:

1. У вас уже есть письмо, и вы хотите регулярно обновлять контент в Stripo. HTML-шаблон, возможно, был перенесен с другой почтовой платформы либо создан разработчиком, фрилансером или агентством.
2. У вас есть HTML-письмо, но вы хотите иметь больше контроля над его структурой. Помимо обновления контента может потребоваться добавление, удаление или изменение расположения структур, использование блоков Stripo или сохранение элементов для повторного использования. В этом случае импортированный HTML-код потребует более тщательной адаптации для работы с функцией drag-n-drop в Stripo.
3. У вас есть email-дизайн, но кода пока нет. Например, у вас может быть макет в формате Figma или PSD, файл PNG или другое статическое изображение, которое нужно превратить в редактируемый шаблон письма в Stripo.

В этой статье мы рассмотрим первый сценарий: импорт существующего HTML-письма в Stripo с целью сохранения его структуры и дизайна при регулярном обновлении контента. Для более глубокого редактирования структуры и расширенной адаптации HTML мы рекомендуем вторую статью на эту тему.

Анализ структуры письма

Для начала мы выбрали пример письма с сайта Email Love и импортировали его HTML-код в Stripo. Воспользуемся им, чтобы показать процесс импорта и адаптации.

(Источник: Email Love)

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

Также полезно узнать, как эти разделы вписываются в иерархию редактора Stripo: полосы содержат структуры, структуры — контейнеры, а контейнеры — базовые блоки вроде изображений, текста, кнопок, меню и т. д.

1. Прехедер

Письмо начинается с простого прехедера, который можно рассматривать как отдельный контейнер с простыми текстовыми блоками: «Просмотреть в браузере» и «Отписаться». Если вы планируете позже добавить другой прехедер, оставьте текст и ссылки доступными для редактирования.

2. Хедер

Брендированный хедер содержит логотип Flight Centre и рекламу программы World360 Rewards, размещенные в двух отдельных блоках. Вероятно, хедер будет оставаться практически неизменным во всех письмах; однако изображения и ссылки можно будет обновлять по мере необходимости.

3. Меню навигации

В хедере расположено навигационное меню с 4 пунктами: «Flights», «Holidays», «Cruises» и «Tours». Оно должно оставаться простым в редактировании, чтобы можно было обновлять иконки, названия пунктов и ссылки в любое время.

4. Баннер с главным изображением и предложением

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

5. Предложения по авиаперелетам

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

6. Карточки с туристическими предложениями

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

7. Дополнительные промоблоки

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

8. Приложение и ссылки на соцсети

Ниже представлен раздел со ссылками на соцсети и призывом скачать приложение Flight Centre. Он построен по простой схеме из двух блоков, содержащих текст и изображения. Текст, изображения и ссылки должны сохранять возможность простого редактирования.

9. Дополнительное меню

Далее следует еще одно меню со ссылками на дополнительные ресурсы Flight Centre. Здесь используется один контейнер, а ссылки можно редактировать и обновлять в будущем.

10. Футер

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

Адаптация кастомного HTML для Stripo

Как импортировать HTML и CSS в Stripo

Мы определились со структурой письма и тем, что можно изменить. Пришло время импортировать HTML-файл в Stripo и ознакомиться с его функциями.

Самый быстрый способ — кликнуть на иконку стрелки в левом верхнем углу аккаунта Stripo.

Затем кликните на drag-n-drop область и загрузите HTML-файл со своего компьютера или из облачного хранилища.

Как вариант, можно вставить код напрямую в редактор кода. Для этого выберите вкладку «Вставить код».

После загрузки шаблона он появится в Stripo. Вы увидите область превью письма (1) и редактор кода, в котором можно переключаться между секциями HTML (2) и CSS (3).

В зависимости от того, как было построено исходное письмо, его CSS-стили могут быть встроены прямо в HTML-код, обычно внутри элемента <style> в теге <head>, например:

Для работы с импортированным письмом в Stripo не обязательно разделять HTML и CSS. Однако размещение их в соответствующих секциях редактора кода может упростить навигацию по коду и его редактирование.

Для удобства мы сделаем это на нашем примере. Скопируйте правила CSS из элемента <style> </style> и вставьте их в секцию CSS редактора кода, оставив HTML-код в секции HTML.

После этих действий секции HTML (1) и CSS (2) выглядят следующим образом:

Как редактировать изображения и ссылки в HTML

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

Если для изображения используется общедоступный URL-адрес, оно должно отображаться должным образом. Однако если в HTML-коде указана ссылка на локальный файл, на закрытый или временный ресурс либо на устаревшую ссылку, Stripo не сможет загрузить изображение. В таком случае необходимо загрузить изображения и обновить ссылки на них.

Мы займемся этим позже. А пока перейдите по ссылке «Holidays» в меню письма.

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

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

Для замены изображения выберите его в письме, а затем кликните на иконку «Заменить» на панели настроек слева.

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

Можно также добавить изображение по прямой ссылке. Это удобно, когда нужно заменить всего 1 или 2 картинки; если же речь идет о нескольких изображениях, то обычно быстрее загрузить их в библиотеку сразу.

В нашем случае из библиотеки был выбран логотип Flight Centre, который автоматически будет вставлен в письмо.

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

Как редактировать текстовые блоки в HTML

Stripo обычно автоматически распознает текстовые элементы после импорта HTML-кода, поэтому их можно редактировать прямо в визуальном редакторе. Однако некоторый текст может не распознаваться как доступный для редактирования. Например, так произошло с текстом в футере нашего шаблона. В таком случае добавьте класс esd-text к элементу, охватывающему весь текстовый блок, например: <p>, <div>, <td>, <h1>, <h2> или <h3>.

Этот класс также можно добавить к элементу <span>, но только в том случае, если он содержит весь текстовый блок. Если элемент <span> охватывает только часть текста, вместо этого примените класс esd-text к его родительскому элементу.

После применения класса esd-text кликните на текстовый блок в окне превью письма. После этого можно редактировать текст прямо в визуальном редакторе и использовать панель настроек для корректировки его форматирования и стилей.

Превью и тестирование адаптированного HTML-письма

После завершения редактирования письма пора проверить, как оно будет выглядеть у получателей. Кликните на иконку «Превью» в хедере редактора Stripo, чтобы перейти в режим превью.

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

Чтобы разобраться в этой проблеме, снимите выделение с любого элемента в области визуального редактирования письма и кликните на иконку «HTML». Откроется редактор с полным HTML-кодом письма.

Проскролльте код, пока не найдете баннер:

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

На приведенном выше скриншоте выделены ссылки на баннер для десктопов (1) и мобильных устройств (2). Баннер для мобильных устройств не отображается, поскольку путь к его изображению указан неверно.

Чтобы исправить это, выберите изображение в письме и кликните на иконку «Заменить». Найдите нужный баннер в библиотеке изображений и скопируйте его URL-адрес.

Затем вернитесь к HTML-коду и замените неверный путь к изображению на скопированный URL-адрес. Давайте снова взглянем на письмо в режиме превью и проверим мобильную версию:

Мы решили проблему, и мобильный баннер отображается правильно, но в версии для десктопов ситуация осталась прежней.

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

Завершающим шагом является тестирование письма перед отправкой для проверки его рендеринга в различных почтовиках и на разных устройствах. Stripo предоставляет эту функцию благодаря интеграции с сервисом Email on Acid, что позволяет выявить проблемы с отображением на десктопах и мобильных устройствах, в том числе в темном режиме, перед отправкой.

Это вся информация, необходимая для быстрого начала работы с импортированным HTML-кодом в Stripo. Такой подход эффективен, если вам в основном нужно обновлять существующий контент, однако для внесения структурных изменений по-прежнему потребуется работать с кодом. Если вы хотите добавлять, удалять или перегруппировывать структуры в редакторе Stripo с помощью drag-n-drop, потребуется дополнительная адаптация HTML-кода, о чем мы расскажем во второй части этой статьи.

Другие способы импорта писем в Stripo

Stripo также предлагает другие способы импорта существующих писем в редактор. Вы можете загрузить файл HTML или MJML, чтобы конвертировать его в редактируемый шаблон письма, или использовать ZIP-архив, если письмо содержит дополнительные ресурсы. Кроме того, в Stripo появилась функция импорта писем, благодаря которой можно взять письмо прямо из входящих и поместить его в редактор. Более подробную информацию об этом вы найдете в наших статьях о способах импорта дизайна и писем.

В завершение

Нет необходимости начинать с нуля и заново создавать HTML-письмо, чтобы продолжить работу над ним в Stripo. После импорта можно изменять его контент, заменять картинки и ссылки, редактировать текст, а также просматривать превью или тестировать результат перед отправкой. Если вам требуется более полный контроль над структурой письма, можно настроить HTML, используя специальные классы блоков Stripo, чтобы различные элементы стали доступны в drag-n-drop редакторе.