timer ~ 7 мин читать
72825 просмотры
оценить
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 и мы с радостью вам поможем!

David Kim 11 месяцев назад

When's part 3 gonna come out?

Hanna Kuznietsova прокомментировал David Kim 11 месяцев назад

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 1 год назад

nice

Jardel Amorim Suporte 1 год назад

why

Moreno Matta 1 год назад

ok

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

Предыдущие статьи Следующие статьи
banner9
06 июня · 15 мин читать
ТОП-10 email-редакторов 2022 года

Все конструкторы email-шаблонов для вас на одно лицо? И вы затрудняетесь с выбором подходящего инструмента для своих кампаний, верно? Неудивительно, ведь их очень много. Мы сделаем обзор самых популярных конструкторов, чтобы выделить их отличительные особенности и помочь вам найти наилучший HTML-редактор шаблонов для ваших текущих потребностей. Я попробую создать одинаковый шаблон с одними и теми же медиафайлами во всех редакторах, чтобы увидеть, чем отличаются эти инструменты. Лучшие конструкторы email-шаблонов Для нашего обзора мы выбрали такие редакторы: Stripo, HubSpot, Campaign Monitor,...

Дизайн Маркетинг Шаблоны
24 мая · 18 мин читать
Лучшие шрифты для рассылок: советы и хитрости

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

Дизайн Шаблоны
Greatest Examples of GIF animations in Emails_Cover Image
27 октября 2021 · 10 мин читать
Гиф-анимации в письмах: 16 лучших примеров

Гифки отлично будут смотреться в ваших письмах, если вы хотите продемонстрировать продукт, привлечь внимание пользователей к какому-либо элементу письма или же просто ненавязчиво украсить текст. В этой статье мы представили лучшие примеры гиф-анимаций в рассылках. Примеры GIF в письмах В этой подборке собраны лучшие примеры использования GIF в письмах, где каждая анимация выполняет свою миссию. 1. Adidas (Источник: рассылка от Adidas) Adidas использовал анимацию в письме, чтобы показать, в каком еще цвете доступен данный товар. Выглядит аккуратно и просто, но при этом...

Дизайн Маркетинг
08 апреля 2021 · 17 мин читать
Дизайн подписи в письмах: 14 лучших примеров

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

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