Частина 2. Продвинутий варіант адаптації листів
У попередній статті ми розглянули як адаптувати кастомний HTML емейл шаблону для роботи в редакторі Stripo, щоб можна було редагувати зображення, посилання і текст через CKEditor без «заглядання під капот» (у HTML код листа).
У сьогоднішній статті хочу розкрити складнішу тему — як зробити так, щоб емейл-лист, що був зверстаний на стороні (по суті — кастомна верстка), став повністю адаптованим в Stripo для можливості редагування будь-якого елементу (контейнера/структури/полоси) і базових блоків в drag’n’drop режимі, максимально використовуючи налаштування і функціонал Stripo редактора.
Для прикладу будемо використовувати той самий шаблон hotwire, узятий з reallygoodemails.com (завантажити HTML листа можна тут).
Структура вкладеності листів Stripo
Спершу розберемо як виглядає вкладеність елементів в листах Stripo, що містить смуги, структури, контейнери і блоки.
Розглянемо приклад смуги, в якій знаходиться структура з двома контейнерами і блоками «Зображення» і «Текст».
Як видно з схеми, усі елементи — це осередки таблиць з певними класами.
- Смуга з класом esd-stripe;
- Структура з класом esd-structure;
- Контейнер з класом esd-container-frame;
- Блок з класами, в даному випадку esd-block-image, esd-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.
І відразу можна перевірити результат — наведіть мишею або клікніть по цій області, ви побачите рамку з елементами управління.
Спробуємо скопіювати поточну смугу з шапкою і створити нову смугу вже з версткою Stripo.
Адаптація Структури
Тепер додамо клас для структури esd-structure.
Аналогічно смузі, у структури з’явилася рамка і елементи управління.
Адаптація базових блоків
Тепер адаптуємо існуючий контент у хедері.
В HTML хедера листа відсутня одна вкладеність, яка дозволила б нам організувати Контейнер. Але по суті можна обійтися без неї, так як ми знаємо, що Контейнери нам потрібні для об’єднання безлічі Блоків. В даному випадку у нас один блок «Зображення» і набір посилань меню.
Перетворимо прехедер, логотип і меню в блоки.
Тепер приступимо до більш складного блоку — картки товару. Тут нам не вистачає однієї вкладеності — Контейнера, щоб була можливість перетягувати блоки з панелі блоків.
Спочатку додамо класи для смуги і структури — тут все просто:
Далі знаходимо елемент таблиці, в якій розташований текст «3-Star Hotels TORONTO», і вказуємо йому клас esd-container-frame — це буде наш Контейнер.
Потім все, що знаходиться ① ② в комірці esd-container-frame, обгортаємо в таблицю — це будуть наші блоки. Весь контент цієї області — це звичайний текст і зображення з зірками, значить у нас виходять блоки «Текст» і «Зображення». Вказуємо комірці першого рядка клас esd-block-image, а комірці другого рядка блок esd-block-text.
Вирізаємо відповідні блокам шматки коду і вставляємо всередину комірок нової таблиці.
Stripo перетворив цей контент в рідні блоки з елементами управління. Крім того, в область контейнера тепер можна «кидати» блоки з панелі блоків.
Перетворимо секції з ціною і кнопкою в блоки:
Вихідний код верстки ціни дозволив додати класи до існуючих комірок. А код кнопки — ні. Потрібно обернути її в таблицю і застосувати клас esd-block-html, а не esd-block-button, що було б логічно. Чому так? Тому що в даному випадку, поточна кнопка не розпізнається як кнопка Stripo через занадто велику різницю в верстці.
У таких випадках зручно застосовувати клас esd-block-html для того, щоб залишити вихідний код, але мати можливість керувати блоком.
Точно таким же чином ми адаптуємо код HTML в блоки Stripo. Не потрібно все робити кожен раз вручну для всіх картках. Досить зробити дві картки в одній структурі, а потім цю структуру дублювати за допомогою кнопки, яка знаходиться в елементах управління, а потім просто замінити текст і зображення.
Підсумки
Нам вдалося з’ясувати, як перетворити довільний HTML в блоки Stripo, що в підсумку дало можливість більш комфортно маніпулювати контентом листа (крім прямого редагування тексту і зображень ми можемо копіювати, переміщати, видаляти і зберегти блоки, контейнери, структури і смуги).
Проте залишаються деякі обмеження, які не дозволяють Stripo максимально показати свої можливості. У наступній статті, я розповім і покажу як задіяти Stripo на повну і зробити такий же шаблон з нуля, прямо в редакторі!
А поки, не соромтеся самостійно пробувати адаптувати ваші шаблони листів для роботи в нашому редакторі. Якщо в процесі у вас виникнуть будь-які питання, складності, пов’язані з адаптацією, будь ласка, пишіть нам на contact@stripo.emailі ми з радістю вам допоможемо!
9 коментарів