Структура How-to
~ 7 хв читати
3 коментарі
56843 перегляди
оцінити
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і ми з радістю вам допоможемо!

Rusbel Leon 3 тижні тому

nice

Jardel Amorim Suporte 3 місяці тому

why

Moreno Matta 6 місяців тому

ok

Вас також може зацікавити

← Попередні статті Наступні статті →
Stripo_Building AMP Emails with Stripo_Featured Image
11 березня · 21 хв читати
Як створювати AMP-листи в Stripo

Динамічні оновлення, контент у режимі реального часу, гіперперсоналізація, гейміфікація нового рівня, відгуки у відкритих формах, бронювання зустрічей... — із виникненням технології AMP4Email користувачі можуть робити усе це і багато іншого безпосередньо у своїх вхідних. Чи варто казати, що подібні листи оживлюють ваші розсилки, мають свіжий та інноваційний вигляд — і в результаті здатні збільшити конверсію у деяких випадках аж у п’ять разів? Але як створювати такі розсилки? У гайдлайнах Gmail зі створення AMP-листів зазначається, що вам треба додавати певні елементи...

Дизайн Шаблон How-to AMP
11 лютого · 8 хв читати
Масова розсилка у Gmail: найкращі методи і поради щодо налаштування

У цій статті ми покажемо два методи здійснення масової розсилки у Gmail. Але перед відправленням розсилки через Gmail вам треба експортувати її зі Stripo до цього поштовика, якщо ви збираєтесь надсилати листи у форматі HTML. Як експортувати листи зі Stripo до Gmail Це робиться дуже просто — лише в кілька кліків: натисніть кнопку «Експорт» над областю шаблону; у випадаючому вікні виберіть Gmail; введіть свої облікові дані Gmail; знайдіть свій лист у папці «Чернетки» цього поштового клієнта. Примітка: Зробивши це, ви...

Маркетинг Шаблон How-to
Будьте завжди в курсі останніх новин у сфері email-маркетингу