23 октября 2017

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

Создать профессиональные письма
Оглавление
  1. Структура вложенности писем Stripo
  2. Процесс адаптации письма
  3. Итоги
1.
Структура вложенности писем Stripo

В предыдущей статье мы рассмотрели как адаптировать кастомный 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 ≤ 8 → Блок × n

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

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

Была ли статья полезна?
Tell us your thoughts
Спасибо за ваш отзыв!
5 комментариев
David Kim 2 года назад
When's part 3 gonna come out?
Анна Кузнецова 2 года назад
Hello, David. Thank you for your question. The third part came out. We shot a video instead of a blog post. Here's the link to it. https://www.youtube.com/watch?v=Khzpz-hSJFc&t=1s But it is in Russian. Please, turn on the English subtitles. https://prnt.sc/1qt51ml If you have any questions, please let us know.
Rusbel Leon 3 года назад
nice
Jardel Amorim Suporte 3 года назад
why
Moreno Matta 3 года назад
ok
Тип
Индустрия
Сезоны
Интеграции
Редактор Stripo
Упростите процесс создания писем.
Плагин Stripo
Интегрируйте Drag-n-Drop редактор Stripo в свое веб-приложение.
Заказать шаблон
Наша команда может разработать и сверстать его для вас. Просто заполните бриф, и мы свяжемся с вами в ближайшее время.