Часть 2. Расширенный вариант адаптации шаблона письма
В предыдущей статье мы настроили в Stripo кастомное HTML-письмо, чтобы можно было редактировать изображения, ссылки и текст прямо в редакторе без изменения HTML-кода.
Но что делать, если требуется выйти за рамки базового редактирования контента? Например, вы можете захотеть добавить или перегруппировать блоки контента, изменить разметку или работать с импортированным письмом при помощи drag-n-drop инструментов Stripo.
В данном случае импортированный HTML-код требует дополнительной и более глубокой адаптации. Мы продолжим работать с примером шаблона письма от Email Love и покажем, как его настроить шаг за шагом.
(Источник: Email Love)
Вложенная структура писем в Stripo
Перед адаптацией кастомного HTML важно понять, как редактор Stripo распознает и обрабатывает различные части письма.
Как вложены элементы в Stripo
Иерархия писем в Stripo выглядит следующим образом:
Полоса → Структура → Контейнер → Блок
Например, рассмотрим полосу, содержащую 1 структуру с 2 контейнерами + базовыми блоками «Изображение» и «Текст».
Каждый уровень иерархии обозначается специальным классом Stripo:
- полоса: esd-stripe;
- структура: esd-structure;
- контейнер: esd-container-frame;
- блок: класс esd-block-*, такой как esd-block-image или esd-block-text.
В полосе может быть несколько структур. Одна структура может содержать до 11 контейнеров, а один контейнер — несколько блоков.
Если HTML-шаблон имеет аналогичную иерархию, адаптировать его под Stripo будет относительно просто.
Адаптация кастомного HTML, несовместимого с блоками в Stripo
В большинстве случаев для определения полос, структур и контейнеров можно добавить необходимые классы Stripo к существующим HTML-элементам. Однако простого добавления класса не всегда достаточно для правильной адаптации блока, поскольку его существующая разметка может быть слишком специфичной.
Если имеющийся элемент невозможно адаптировать в качестве нативного блока Stripo без изменения его разметки, можно использовать класс esd-block-html. Это позволяет сохранить кастомный HTML-код и при этом сделать элемент распознаваемым в Stripo как блок, с контролами для таких действий, как перемещение, копирование, сохранение и удаление.
В некоторых случаях может потребоваться также изменить структуру имеющегося HTML-кода, чтобы превратить элемент в нативный блок Stripo. Мы рассмотрим такой пример при адаптации фонового изображения далее в этом гайде.
Список доступных классов блоков
Stripo использует специальные классы для обозначения различных типов блоков контента:
- esd-block-image: изображение;
- esd-block-text: текст;
- esd-block-button: кнопка;
- esd-block-spacer: разделитель;
- esd-block-social: соцсети;
- esd-block-html: HTML;
- esd-block-menu: меню;
- esd-block-banner: баннер;
- esd-block-timer: таймер;
- esd-block-video: видео;
- esd-block-amp-carousel: AMP-карусель;
- esd-amp-accordion: AMP-аккордеон;
- esd-amp-form: AMP-форма.
Классы esd-* используются редактором Stripo для распознавания структуры письма и обеспечения возможности редактирования с помощью drag-n-drop. Кастомный HTML-код будет отображаться в Stripo и без этих классов, однако его элементы не будут поддерживать метод drag-n-drop в Stripo.
При экспорте готового письма из Stripo классы esd-* удаляются из HTML-кода, поэтому они не увеличивают вес экспортируемого письма.
Как адаптировать кастомный шаблон HTML-письма в Stripo
Теперь, когда мы рассмотрели основную иерархию писем в Stripo, давайте применим ее к письму от Flight Centre. Начнем с прехедера, хедера и меню, а затем проработаем структуру, начиная с внешней полосы и продвигаясь вглубь к отдельным блокам контента.
Адаптация полос
Сначала определите полосу для хедера письма. В HTML-коде найдите элемент <td>, который охватывает весь хедер, и добавьте в него класс esd-stripe.
Для проверки результата наведите курсор на адаптированный участок в редакторе или кликните по нему. Появится окошко с контролами для полосы.
Адаптация структуры
Далее определите структуру. Внутри полосы найдите элемент <td>, который оборачивает контент хедера, и добавьте в него класс esd-structure. Структура должна находиться непосредственно внутри полосы и содержать элементы, которые позже будут использоваться в качестве контейнеров и блоков.
Адаптированная структура отображается в редакторе со своими контролами:
Теперь можно дублировать адаптированную полосу с помощью соответствующих контролов. Дубликат полосы сохранит адаптированную структуру и ее можно будет редактировать в Stripo.
Адаптация базового блока
В данном случае мы определим прехедер и меню как текстовые блоки (esd-block-text), а логотип — как блок изображения (esd-block-image). Существующий HTML-код содержит дополнительный уровень вложенности, который можно было бы определить как контейнер. Однако в данном примере нам не нужно адаптировать его в качестве контейнера, так как мы работаем только с уже имеющимися блоками.
Как адаптировать сложную секцию контента
Определение полосы, структуры и контейнера
Теперь перейдем к более сложной части письма: карточкам с предложениями туристических поездок. В отличие от элементов хедера, которые мы адаптировали ранее, каждая карточка содержит несколько типов контента, в том числе текст, изображения, цены, иконки и CTA-кнопку.
Именно здесь пригодится полная иерархия Stripo. Мы определим всю секцию как полосу, строку с карточками предложений — как структуру, а первую карточку — как контейнер. Затем мы адаптируем контент внутри карточки в виде отдельных блоков.
Сначала найдите элемент <td>, который оборачивает всю секцию с карточками, и добавьте в него класс esd-stripe:
Затем найдите тег <td>, содержащий строку с двумя туристическими карточками, и добавьте esd-structure. Теперь Stripo распознает эту часть импортированного HTML-кода как структуру внутри полосы.
Примечание: не беспокойтесь, если некоторые изображения пока не отображаются в редакторе. В исходном HTML-коде они реализованы в виде фоновых изображений с фолбэк-цветами и специфичным для Outlook форматом VML, а не в виде обычных элементов <img>. Мы конвертируем их в редактируемые блоки «Изображение» и добавим картинки позже.
Следующий уровень — контейнер. Найдите элемент <td>, который охватывает первую карточку с предложением путешествия, и добавьте в него esd-container-frame. Теперь вся первая карточка распознается как контейнер.
Помимо работы с имеющимися внутри него блоками, теперь вы можете перетаскивать новые блоки с панели блоков прямо в область контейнера.
Адаптация простого контента в виде нативных блоков
Некоторые элементы напрямую соответствуют нативным блокам в Stripo. Например, целевую категорию и название предложения можно определить как текстовые блоки, добавив esd-block-text в тег <td>, который оборачивает соответствующий текст:
Не путайте класс esd-text с классом esd-block-text. Класс esd-text делает текст внутри элемента редактируемым, тогда как класс esd-block-text определяет весь элемент как текстовый блок в иерархии «Полоса → Структура → Контейнер → Блок».
Сохранение сложных элементов в виде HTML-блоков
Однако не каждый элемент в импортированном письме точно соответствует нативному блоку в Stripo. Выбор зависит от того, насколько точно существующий HTML соответствует структуре нативного блока.
Если элемент имеет относительно простую разметку, соответствующую нативному блоку Stripo, используйте соответствующий класс блока, например: esd-block-text, esd-block-image, esd-block-button.
Для элементов с более сложным кастомным дизайном лучше использовать esd-block-html. Stripo распознает весь элемент как HTML-блок, поэтому его можно перемещать, копировать, сохранять или удалять. Однако для контента внутри него не будут доступны те же возможности редактирования, что и для нативных блоков Stripo. Некоторые элементы, такие как текст, помеченный с помощью esd-text, по-прежнему можно редактировать прямо в визуальном редакторе, тогда как для других изменений может потребоваться редактирование HTML-кода.
В нашей разметке каждый элемент представляет собой комбинацию флажка и текста, расположенных внутри вложенной таблицы, поэтому мы сохраняем существующую разметку, добавляя esd-block-html к тегу <td>, который оборачивает компонент.
Мы применяем тот же подход к цене, секции с наградами «World360», дате отправления и CTA-кнопке. Для стандартной CTA-кнопки можно использовать esd-block-button, чтобы определить ее как нативный блок «Кнопка». Однако в нашем примере CTA-кнопка использует кастомную разметку с вложенной таблицей, которая не соответствует структуре, ожидаемой нативным блоком «Кнопка» в Stripo. Чтобы сохранить существующую разметку, мы вместо этого используем esd-block-html.
Конвертация фонового изображения в блок «Изображение»
Вернемся к изображению карточки, которое потребовало несколько иного подхода. Как мы уже упоминали ранее, в исходном HTML-коде это не обычный элемент <img>. Оно реализовано в виде фонового изображения на <td> с дополнительной VML-разметкой для Outlook. Из-за этого оно не могло быть напрямую сопоставлено с нативным блоком «Изображение» в Stripo.
Чтобы сделать изображение заменяемым через визуальный редактор, мы заместили исходный фрагмент кода, отвечающий за отображение фонового изображения, на встроенный блок «Изображение»:
<tr>
<td align="center" class="esd-block-image" style="font-size: 0;">
<a target="_blank">
<img
src="IMAGE_URL"
alt=""
width="270"
height="180"
class="adapt-img"
style="display: block; width: 100%; height: 180px; object-fit: cover; border: 0; border-radius: 8px 8px 0 0;"
>
</a>
</td>
</tr>
После этого загрузите желаемую картинку в настройках блока «Изображение».
Если несколько карточек используют одну и ту же разметку, вам не нужно адаптировать каждую из них вручную. Добавьте две карточки в одну структуру, скопируйте ее с помощью контролов, а затем замените текст и картинки новым контентом.
В завершение
Мы адаптировали кастомный HTML-код, чтобы редактор Stripo мог распознавать его полосы, структуры, контейнеры и блоки. Это упрощает работу с импортированным письмом в визуальном редакторе, позволяя редактировать контент, а также копировать, перемещать, удалять или повторно использовать адаптированные элементы без необходимости создавать шаблон заново.
Хотя для определенного кастомного HTML-кода может потребоваться дополнительная работа, этот подход дает вам гораздо больше возможностей для управления импортированным шаблоном. Если у вас возникнут какие-либо проблемы при адаптации собственного HTML-кода, свяжитесь с нами по адресу contact@stripo.email, и мы с удовольствием вам поможем.
4 комментариев