Частина 2. Розширений варіант адаптації шаблону листа
У попередній статті ми налаштували в Stripo кастомний HTML-лист, щоб можна було редагувати зображення, посилання й текст у редакторі без зміни HTML-коду.
Але що робити, якщо потрібно вийти за межі базового редагування контенту? Наприклад, ви можете захотіти додати чи перегрупувати блоки контенту, змінити розмітку або працювати з імпортованим листом за допомогою drag-n-drop інструментів Stripo.
У цьому випадку імпортований HTML-код потребує додаткової та більш глибокої адаптації. Ми продовжимо працювати з прикладом шаблону листа від Email Love і покажемо, як його налаштувати крок за кроком.
(Джерело: Email Love)
Вкладена структура листів у Stripo
Перед адаптацією кастомного HTML важливо зрозуміти, як редактор Stripo розпізнає та обробляє різні частини листа.
Як вкладені елементи в Stripo
Ієрархія листів у Stripo виглядає так:
Смуга → Структура → Контейнер → Блок
Наприклад, розглянемо смугу, що містить 1 структуру з 2 контейнерами + базовими блоками «Зображення» і «Текст».
Кожен рівень ієрархії позначається спеціальним класом Stripo:
- смуга: esd-stripe;
- структура: esd-structure;
- контейнер: esd-container-frame;
- блок: клас esd-block-*, як-от esd-block-image або esd-block-text.
У смузі може бути кілька структур. Одна структура може містити до 11 контейнерів, а один контейнер — кілька блоків.
Якщо HTML-шаблон має подібну ієрархію, адаптувати його під Stripo буде відносно просто.
Адаптація кастомного HTML, несумісного з блоками в Stripo
У більшості випадків для визначення смуг, структур і контейнерів можна додати необхідні класи Stripo до наявних HTML-елементів. Однак простого додавання класу не завжди є достатнім для правильної адаптації блоку, оскільки його наявна розмітка може бути надто специфічною.
Якщо наявний елемент неможливо адаптувати як нативний блок Stripo без зміни його розмітки, можна використати клас esd-block-html. Це дозволяє зберегти власний HTML-код і водночас зробити елемент розпізнаваним у Stripo як блок, з контролами для таких дій, як переміщення, копіювання, збереження та видалення.
У деяких випадках може знадобитися також змінити структуру наявного HTML-коду, щоб перетворити елемент на нативний блок Stripo. Ми розглянемо такий приклад під час адаптації фонового зображення далі в цьому гайді.
Перелік доступних класів блоків
Stripo використовує спеціальні класи для позначення різних типів блоків контенту:
- esd-block-image: зображення;
- esd-block-text: текст;
- esd-block-button: кнопка;
- esd-block-spacer: розділювач;
- esd-block-social: соцмережі;
- esd-block-html: HTML;
- esd-block-menu: меню;
- esd-block-banner: банер;
- esd-block-timer: таймер;
- esd-block-video: відео;
- esd-block-amp-carousel: AMP-карусель;
- esd-amp-accordion: AMP-акордеон;
- esd-amp-form: AMP-форма.
Класи esd-* використовуються редактором Stripo для розпізнавання структури тексту й забезпечення можливості редагування за допомогою drag-n-drop. Кастомний HTML-код відображатиметься в Stripo й без цих класів, однак його елементи не підтримуватимуть метод drag-n-drop у Stripo.
При експорті готового листа з Stripo класи esd-* видаляються з HTML-коду, тому вони не збільшують вагу експортованого листа.
Як адаптувати кастомний шаблон HTML-листа в Stripo
Тепер, коли ми розглянули основну ієрархію листів у Stripo, давайте застосуємо її до листа від Flight Centre. Почнемо з прехедера, хедера та меню, а потім проаналізуємо структуру, починаючи з зовнішньої смуги і рухаючись углиб до окремих блоків контенту.
Адаптація смуг
Спочатку визначте смугу для заголовка листа. У HTML-коді знайдіть елемент <td>, який охоплює весь заголовок, і додайте в нього клас esd-stripe.
Щоб перевірити результат, наведіть курсор на адаптовану ділянку в редакторі або клікніть на неї. З’явиться віконце з контролами для смуги.
Адаптація структури
Далі визначте структуру. Усередині смуги знайдіть елемент <td>, який огортає контент заголовка, і додайте в нього клас esd-structure. Структура має знаходитися безпосередньо всередині смуги та містити елементи, які згодом використовуватимуться як контейнери та блоки.
Адаптована структура відображається в редакторі разом з відповідними контролами:
Тепер можна дублювати адаптовану смугу за допомогою відповідних контролів. Дублікат смуги збереже адаптовану структуру, і її можна буде редагувати в Stripo.
Адаптація базового блока
У цьому випадку ми визначимо прехедер і меню як текстові блоки (esd-block-text), а логотип — як блок зображення (esd-block-image). Наявний HTML-код містить додатковий рівень вкладеності, який можна було б визначити як контейнер. Однак у цьому прикладі нам не потрібно адаптувати його як контейнер, оскільки ми працюємо лише з наявними блоками.
Як адаптувати складну секцію контенту
Визначення смуги, структури та контейнера
Тепер перейдемо до складнішої частини листа: карток із пропозиціями туристичних подорожей. На відміну від елементів хедера, які ми адаптували раніше, кожна картка містить кілька типів контенту, зокрема текст, зображення, ціни, іконки та CTA-кнопку.
Саме тут стане в нагоді повна ієрархія Stripo. Ми визначимо всю секцію як смугу, рядок із картками пропозицій — як структуру, а першу картку — як контейнер. Потім ми адаптуємо контент усередині картки у вигляді окремих блоків.
Спочатку знайдіть елемент <td>, який охоплює всю секцію з картками, і додайте в нього клас esd-stripe:
Потім знайдіть тег <td>, що містить рядок із двома туристичними картками, і додайте esd-structure. Тепер Stripo розпізнає цю частину імпортованого HTML-коду як структуру всередині смуги.
Примітка: не хвилюйтеся, якщо деякі зображення поки що не відображаються в редакторі. У вихідному HTML-коді вони реалізовані у вигляді фонових зображень із фоновими кольорами та форматом VML, характерним для Outlook, а не у вигляді звичайних елементів <img>. Ми конвертуємо їх у редаговані блоки «Зображення» та додамо картинки пізніше.
Наступний рівень — контейнер. Знайдіть елемент <td>, який охоплює першу картку з пропозицією подорожі, і додайте в нього esd-container-frame. Тепер уся перша картка розпізнається як контейнер.
Окрім роботи з блоками, що містяться всередині нього, тепер ви можете перетягувати нові блоки з панелі блоків в область контейнера.
Адаптація простого контенту у вигляді нативних блоків
Деякі елементи прямим чином відповідають нативним блокам у Stripo. Наприклад, цільову категорію та назву пропозиції можна визначити як текстові блоки, додавши esd-block-text у тег <td>, який огортає відповідний текст:
Не плутайте клас esd-text із класом esd-block-text. Клас esd-text робить текст усередині елемента редагованим, тоді як клас esd-block-text визначає весь елемент як текстовий блок у ієрархії «Смуга → Структура → Контейнер → Блок».
Збереження складних елементів у вигляді HTML-блоків
Однак не кожен елемент в імпортованому листі точно відповідає нативному блоку в Stripo. Вибір залежить від того, наскільки точно наявний HTML відповідає структурі нативного блоку.
Якщо елемент має відносно просту розмітку, що відповідає нативному блоку Stripo, використовуйте відповідний клас блоку, наприклад: esd-block-text, esd-block-image, esd-block-button.
Для елементів з більш складним кастомним дизайном краще використовувати esd-block-html. Stripo розпізнає весь елемент як HTML-блок, тому його можна переміщувати, копіювати, зберігати чи видаляти. Однак для контенту всередині нього не будуть доступні ті самі можливості редагування, що й для нативних блоків Stripo. Деякі елементи, як-от текст, позначений за допомогою esd-text, й надалі можна редагувати у візуальному редакторі, тоді як для інших змін може знадобитися редагування HTML-коду.
У нашій розмітці кожен елемент є комбінацією прапорця й тексту, розташованих усередині вкладеної таблиці, тому ми зберігаємо наявну розмітку, додаючи esd-block-html у тег <td>, який огортає компонент.
Ми використовуємо той самий підхід до ціни, секції з нагородами «World360», дати надсилання та CTA-кнопки. Для стандартної CTA-кнопки можна використати esd-block-button, щоб визначити її як нативний блок «Кнопка». Однак у нашому прикладі CTA-кнопка використовує кастомну розмітку з вкладеною таблицею, яка не відповідає структурі, очікуваній нативним блоком «Кнопка» у Stripo. Щоб зберегти наявну розмітку, ми замість цього використовуємо esd-block-html.
Конвертація фонового зображення у блок «Зображення»
Повернемося до зображення картки, яке вимагало дещо іншого підходу. Як ми вже згадували раніше, у вихідному HTML-коді це не звичайний елемент <img>. Воно реалізовано у вигляді фонового зображення на <td> з додатковою VML-розміткою для Outlook. Через це його не можна було співставити з нативним блоком «Зображення» у Stripo.
Щоб зробити зображення таким, що його можна замінити за допомогою візуального редактора, ми замінили вихідний фрагмент коду, який відповідає за відображення фонового зображення, на вбудований блок «Зображення»:
<tr>
<td align="center" class="esd-block-image" style="font-size: 0;">
<a target="_blank">
<img
src="IMAGE_URL"
alt=""
width="270"
height="180"
class="adapt-img"
style="display: block; width: 100%; height: 180px; object-fit: cover; border: 0; border-radius: 8px 8px 0 0;"
>
</a>
</td>
</tr>
Після цього завантажте бажану картинку в налаштуваннях блоку «Зображення».
Якщо кілька карток використовують одну й ту саму розмітку, вам не потрібно налаштовувати кожну з них самостійно. Додайте дві картки в одну структуру, скопіюйте її за допомогою контролів, а потім замініть текст і зображення новим контентом.
На завершення
Ми адаптували кастомний HTML-код, щоб редактор Stripo міг розпізнавати його смуги, структури, контейнери та блоки. Це спрощує роботу з імпортованим листом у візуальному редакторі, даючи змогу редагувати контент, а також копіювати, переміщувати, видаляти чи повторно використовувати адаптовані елементи без необхідності створювати шаблон заново.
Хоча для певного кастомного HTML-коду може знадобитися додаткова робота, цей підхід надає вам набагато більше можливостей для керування імпортованим шаблоном. Якщо у вас виникнуть будь-які проблеми під час адаптації власного HTML-коду, зверніться до нас за адресою contact@stripo.email, і ми з радістю вам допоможемо.
4 коментарів