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 у свій веб-додаток.
Замовити власний шаблон
Наша команда може розробити і зверстати його для вас. Просто заповніть бриф, і ми зв'яжемося з вами найближчим часом.