Структура How-to
~ 7 мин читать
36800 просмотры
оценить
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 и мы с радостью вам поможем!

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

← Предыдущие статьи Следующие статьи →
8 дней назад · 15 мин читать
10 примеров тизерных емейл-кампаний

Промо-рассылки и анонсы выглядят примерно одинаково и не всегда работают, потому что клиенты к ним привыкли и им эти емейлы не интересны. Поэтому мы расскажем, как стать интересными для клиентов. И покажем, как оживить ваши рекламные кампании, создавая высокопроизводительные емейл-тизеры. Почему они срабатывают? Ответ: они по-настоящему интригуют и формируют интерес к вашей продукции. Стратегия успешной тизерной емейл-кампании Естественно, перед началом любой кампании вы должны тщательно продумать стратегию. Какую именно стратегию? При помощи тизерных рассылок мы обычно пытаемся анонсировать три типа...

Дизайн Маркетинг Шаблоны How-to
Synchronized Email Modules_Featured Image
31 января · 4 мин читать
Сквозные модули, или как одновременно обновить все ваши письма

Обновление контактной информации во всех видах писем всегда было костью в горле, так как это занимало большое количество времени? Что ж, больше это не будет стоить больших усилий... Сквозной модуль — это совершенно новая опция автоматизации, которая помогает вам редактировать/обновлять все email-шаблоны сразу. Другими словами, каждый раз, когда вы вносите изменения в сквозной модуль в одном шаблоне/письме, эти изменения автоматически применяются ко всем другим шаблонам/письмам, где этот модуль используется. Для чего нужна данная опция? Какое количество писем вы используете для полноценной...

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