Структура How-to
~ 7 мин читать
3 комментарии
56845 просмотры
оценить
23 октября 2017

Часть 2. Продвинутый вариант адаптации письма

Stripo / Blog / Часть 2. Продвинутый вариант адаптации письма

В предыдущей статье мы рассмотрели как адаптировать кастомный HTML емейл шаблона для работы в редакторе Stripo, чтобы можно было редактировать изображения, ссылки и текст через CKEditor без «заглядывания под капот» (в HTML код письма).

В сегодняшней статье хочу раскрыть более сложную тему — как сделать так, чтобы сверстанное емейл-письмо на стороне (по сути — кастомная верстка) стало полностью адаптированным в Stripo для возможности редактирования любого элемента (контейнера/структуры/полосы) и базовых блоков в drag’n’drop режиме, максимально использовать настройки и фичи Stripo редактора.

Для примера будем использовать все тот же шаблон hotwire, взятый с reallygoodemails.com (скачать HTML письма можно тут).

Структура вложенности писем Stripo

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

Рассмотрим пример Полосы, в которой находится структура с двумя контейнерами и блоками «Картинка» и «Текст».

01-Stripo-nesting-of-elements-of-editor

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

  1. Полоса с классом esd-stripe;
  2. Структура с классом esd-structure;
  3. Контейнер с классом esd-container-frame;
  4. Блок с классами, в данном случае esd-block-imageesd-block-text.

Если ваша верстка построена по похожему принципу, это позволит максимально возможно адаптировать письмо в Stripo.

Полоса → Структура × n → Контейнер × n ≤ 4 → Блок × n

  • в Полосе может быть сколько угодно Структур;
  • в Структуре могут быть Контейнеры, сейчас не более 4, но скоро мы дадим возможность увеличивать количество Контейнеров и сделаем их динамическими;
  • в Контейнере может быть любое количество Блоков.

Практически всегда есть куда добавить класс для полос, структур и/или контейнеров. Не всегда удается добавить класс для блоков так, чтоб они корректно адаптировались, потому что их верстка бывает очень специфичной. Поэтому мы рекомендуем добавлять класс esd-block-html в обертку такого блока, тогда Stripo будет давать возможность редактировать такой блок через 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.

02-Stripo-Header-adaptation

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

03-Stripo-Header

Попробуем скопировать текущую полосу с шапкой и создать новую полосу уже с версткой Stripo.

04-Stripo-Copy-of-Stripes

Адаптация Структуры

Теперь добавим класс для структуры esd-structure.

05-Stripo-Menu-Adaptation

Аналогично полосе, у структуры появилась рамка и элементы управления.

Адаптация базовых блоков

Теперь адаптируем существующий контент в хедере.

В HTML хедера письма отсутствует одна вложенность, которая позволила бы нам организовать Контейнер. Но по сути можно обойтись без неё, так как мы знаем, что Контейнеры нам нужны для объединения множества Блоков. В данном случае у нас один блок «Картинка» и набор ссылок меню.

Превратим прехедер, логотип и меню в блоки.

06-Stripo-Preheader-adaptation

07-Stripo-Logo-adaptation

08-Stripo-Menu-Adaptation2

Теперь приступим к более сложному блоку — карточке товара. Здесь нам не хватает одной вложенности — Контейнера, чтобы была возможность перетаскивать блоки из панели блоков.

Сначала добавим классы для полосы и структуры — здесь все просто:

09-Stripo-Cards-adaptation

Дальше находим ячейку таблицы, в которой расположен текст «3-Star Hotels TORONTO», и указываем ей класс esd-container-frame — это будет наш Контейнер.

10-Stripo-Cards-adaptation2

Затем все, что находится ① ② в ячейке esd-container-frame, обворачиваем в таблицу — это будут наши блоки. Весь контент этой области — это обычный текст и картинка с звездами, значит у нас получаются блоки Текст и Картинка. Указываем ячейке первой строки класс esd-block-image, а ячейке второй строки блок esd-block-text.

11-Stripo-Cards-Adaptation3

Вырезаем соответствующие блокам куски кода и вставляем внутрь ячеек новой таблицы.

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

12-Stripo-Cards-adaptation4

Превратим секции с ценой и кнопкой в блоки:

13-Stripo-Cards-adaptation5

Исходный код верстки цены позволил добавить классы к существующим ячейкам. А код кнопки – нет. Нужно обернуть ее в таблицу и применить класс esd-block-html, а не esd-block-button, что было бы логично. Почему так? Потому что в данном случае, текущая кнопка не распознается как кнопка Stripo из-за слишком большой разницы в верстке.

14-Stripo-Cards-adaptation6

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

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

15-Stripo-Copy-of-card

Итоги

Нам удалось выяснить, как превратить произвольный HTML в блоки Stripo, что в итоге дало возможность более комфортно манипулировать контентом письма (кроме прямого редактирования текста и картинок мы можем копировать, перемещать, удалять и сохранить блоки, контейнеры, структуры и полосы).

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

А пока, не стесняйтесь самостоятельно пробовать адаптировать ваши шаблоны писем для работы в нашем редактором. Если в процессе у вас возникнут любые вопросы, сложности, связанные с адаптацией, пожалуйста, пишите нам на contact@stripo.email и мы с радостью вам поможем!

Rusbel Leon 3 недели назад

nice

Jardel Amorim Suporte 3 месяца назад

why

Moreno Matta 6 месяцев назад

ok

Вас также может заинтересовать

← Предыдущие статьи Следующие статьи →
Earth Day Email Examples_Cover Image
9 дней назад · 13 мин читать
Примеры писем ко Дню Земли

За последние годы интерес общественности к проблемам экологии только вырос и мы не можем не поговорить с вами про наступающий День Земли. А точнее про email рассылку к этой дате. Что неуместно в таких письмах, а что все-такие стоит включить, как сделать письмо оригинальным — мы разберем на 15 примерах известных компаний.  С этим шаблоном вы создадите рассылку ко Дню Земли в считанные минуты Использовать Подготовка дизайна писем ко дню Земли Создавая email-рассылку, нужно учитывать множество факторов. Они вам известны:...

Дизайн Маркетинг Шаблоны How-to
Stripo_Building AMP Emails with Stripo_Featured Image
11 мартa · 21 мин читать
Как создать AMP-письма с помощью Stripo

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

Дизайн Шаблоны How-to AMP
Будьте всегда в курсе последних новостей в области email-маркетинга!