Адаптація кастомного HTML у Stripo

Уявіть, що ви вже знаєте про переваги Stripo і вирішили скористатися цим сервісом для своїх майбутніх листів. Однак вас, можливо, турбує питання щодо збереження колекції шаблонів листів, які хотілося би надалі використовувати.

Ми запевняємо вас, що перехід на новий конструктор листів не означає, що вам доведеться відмовитися від наявних шаблонів листів.

Стандартні сценарії роботи з готовим email-дизайном у Stripo

Залежно від початкової позиції та обсягу необхідних змін можна виокремити 3 поширені сценарії:

1. У вас уже є лист, і ви хочете регулярно оновлювати контент у Stripo. HTML-шаблон, ймовірно, було перенесено з іншої поштової платформи або створено розробником, фрилансером чи агенцією.
2. У вас є HTML-лист, але ви хочете мати більший контроль над його структурою. Окрім оновлення контенту може знадобитися додавання, видалення чи зміна розташування структур, використання блоків Stripo або збереження елементів для повторного використання. У цьому випадку імпортований HTML-код потребуватиме більш ретельної адаптації для роботи з функцією drag-n-drop у Stripo.
3. У вас є email-дизайн, але коду поки що немає. Наприклад, у вас може бути макет у форматі Figma або PSD, файл PNG чи інше статичне зображення, яке потрібно перетворити на редагований шаблон листа в Stripo.

У цій статті ми розглянемо перший сценарій: імпорт наявного HTML-листа в Stripo з метою збереження його структури та дизайну при регулярному оновленні контенту. Для більш детального редагування структури та розширеної адаптації HTML ми рекомендуємо другу статтю на цю тему.

Аналіз структури листа

Для початку ми вибрали приклад листа з сайту Email Love та імпортували його HTML-код у Stripo. Скористаємося ним, щоб продемонструвати процес імпорту та адаптації.

(Джерело: Email Love)

Перш ніж перейти до налаштування шаблону листа та його коду, давайте розберемо його на основні частини та визначимо, які елементи можуть потребувати оновлення під час зміни кампанії.

Також корисно дізнатися, як ці розділи вписуються в ієрархію редактора Stripo: смуги містять структури, структури — контейнери, а контейнери — базові блоки, як-от зображення, текст, кнопки, меню тощо.

1. Прехедер

Лист починається з простого прехедера, який можна розглядати як окремий контейнер із простими текстовими блоками: «Переглянути в браузері» та «Відписатися». Якщо ви плануєте пізніше додати інший прехедер, залиште текст і посилання доступними для редагування.

2. Хедер

Брендований верхній блок містить логотип Flight Centre та рекламу програми World360 Rewards, розміщені у двох окремих блоках. Ймовірно, верхній блок залишатиметься практично незмінним у всіх листах; однак зображення та посилання можна буде оновлювати за потреби.

3. Меню навігації

У хедері розташоване навігаційне меню з 4 пунктами: «Flights», «Holidays», «Cruises» і «Tours». Воно має бути простим у редагуванні, щоб можна було оновлювати іконки, назви пунктів та посилання в будь-який час.

4. Банер з головним зображенням та пропозицією

Кампанія починається з великого головного банера, за яким йдуть супровідний текст і основна CTA-кнопка. Структура складається з двох горизонтальних блоків, що містять характерні для цієї кампанії елементи, які можуть потребувати регулярного оновлення.

5. Пропозиції щодо авіаперельотів

У пропозиціях щодо авіаквитків використовується однаковий шаблон контенту: пункт призначення, деталі тарифу, інформація про бонуси, ціна та заклик до дії. Структурно ці повторювані елементи можна згрупувати в контейнери з блоками тексту і кнопок. Ця розмітка — гарний приклад контенту, який згодом можна адаптувати для використання в багаторазових структурах Stripo.

6. Картки з туристичними пропозиціями

Далі в листі використовується кілька варіантів розмітки у вигляді карток для реклами турів, круїзів та відпусток, які можна розділити на два контейнери, розташовані вертикально. Їхні розмітки можуть залишатися незмінними, тоді як зміст і посилання змінюються для кожної кампанії.

7. Додаткові промоблоки

В інших розділах також є рекламні матеріали про круїзи та готелі, авіаквитки бізнес-класу, програму лояльності та допомогу під час бронювання. Незважаючи на відмінності в їхньому оформленні, основні редаговані елементи залишаються незмінними: зображення, текст, кнопки та посилання.

8. Застосунок і посилання на соцмережі

Нижче наведено розділ із посиланнями на соцмережі та закликом скачати застосунок Flight Centre. Він побудований за простою схемою з двох блоків, що містять текст і зображення. Текст, зображення та посилання мають залишатися доступними для простого редагування.

9. Додаткове меню

Далі йде ще одне меню з посиланнями на додаткові ресурси Flight Centre. Тут використовується один контейнер, а посилання можна редагувати й оновлювати в майбутньому.

10. Футер

У футері зібрано інформацію про авторські права, виноски та контактні дані в одному блоці. Цей контент змінюється нечасто, але в разі необхідності оновлення він має залишатися доступним для редагування.

Адаптація кастомного HTML для Stripo

Як імпортувати HTML та CSS у Stripo

Ми визначилися зі структурою листа й тим, що можна змінити. Настав час імпортувати HTML-файл у Stripo та ознайомитися з його функціями.

Найшвидший спосіб — клікнути на іконку стрілки у лівому верхньому куті акаунта Stripo.

Потім клікніть на drag-n-drop область і завантажте HTML-файл зі свого комп’ютера чи з хмарного сховища.

Як варіант, можна вставити код просто в редактор коду. Для цього виберіть вкладку «Вставити код».

Після завантаження шаблону він з’явиться у Stripo. Ви побачите область прев'ю листа (1) та редактор коду, в якому можна перемикатися між секціями HTML (2) та CSS (3).

Залежно від того, як було створено вихідний лист, його CSS-стилі можуть бути вбудовані в HTML-код, зазвичай всередині елемента <style> у тегу <head>, наприклад:

Для роботи з імпортованим листом у Stripo не обов’язково розділяти HTML і CSS. Однак розміщення їх у відповідних секціях редактора коду може спростити навігацію кодом і його редагування.

Для зручності ми зробимо це на нашому прикладі. Скопіюйте правила CSS із елемента <style> </style> і вставте їх у розділ CSS редактора коду, залишивши HTML-код у секції HTML.

Після цих дій секції HTML (1) та CSS (2) мають такий вигляд:

Як редагувати зображення та посилання в HTML

Stripo відображає імпортований лист у візуальній області, але ви можете помітити, що зображення відсутні. Це відбувається тому, що відображення зображень залежить від їхніх оригінальних посилань. 

Якщо для зображення використовується загальнодоступна URL-адреса, воно має відображатися належним чином. Однак якщо в HTML-коді вказано посилання на локальний файл, на закритий чи тимчасовий ресурс або на застаріле посилання, Stripo не зможе завантажити зображення. У такому випадку необхідно завантажити зображення та оновити посилання на них.

Ми повернемося до цього пізніше. А поки що перейдіть за посиланням «Holidays» у меню листа.

Одразу після імпорту листа в Stripo можна відредагувати посилання та його заголовок або через панель налаштувань ліворуч, або в редакторі коду.

Те саме стосується зображень: після імпорту можна одразу ж редагувати самі зображення, посилання на них та alt-текст.

Щоб замінити зображення виберіть його в листі, а потім клікніть на іконку «Замінити» на панелі налаштувань ліворуч.

Відкриється бібліотека зображень. Звідси можна завантажувати картинки з комп’ютера, перетягуючи їх у область завантаження.

Також можна додати зображення за прямим посиланням. Це зручно, коли потрібно замінити лише 1-2 картинки; якщо ж мова йде про кілька зображень, то зазвичай простіше завантажити їх у бібліотеку одразу.

У нашому випадку з бібліотеки було обрано логотип Flight Centre, який автоматично буде вставлено в лист.

Ви також помітите, що шлях до зображення в HTML-коді оновлюється автоматично. Повторіть ті самі дії для решти зображень у листі.

Як редагувати текстові блоки в HTML

Stripo зазвичай автоматично розпізнає текстові елементи після імпорту HTML-коду, тому їх можна редагувати у візуальному редакторі. Однак деякий текст може не розпізнаватися як доступний для редагування. Наприклад, так сталося з текстом у футері нашого шаблону. У такому випадку додайте клас esd-text до елемента, що охоплює весь текстовий блок, наприклад: <p>, <div>, <td>, <h1>, <h2> або <h3>.

Цей клас також можна додати до елемента <span>, але лише в тому випадку, якщо він містить весь текстовий блок. Якщо елемент <span> охоплює лише частину тексту, замість цього застосуйте клас esd-text до його батьківського елемента.

Після застосування класу esd-text клікніть на текстовий блок у вікні прев'ю листа. Після цього можна редагувати текст у візуальному редакторі та використовувати панель налаштувань для коригування його форматування та стилів.

Прев'ю й тестування адаптованого HTML-листа

Після завершення редагування листа час перевірити, як він виглядатиме у одержувачів. Клікніть на іконку «Прев'ю» у верхній частині редактора Stripo, щоб перейти в режим прев'ю.

Тут можна перевірити, як лист виглядатиме на десктопах і мобільних пристроях. Однак у мобільній версії банери відсутні. Давайте поглянемо на код, щоб з’ясувати причину.

Щоб розібратися з цією проблемою, скасуйте виділення будь-якого елемента в області візуального редагування листа та клікніть на іконку «HTML» . Відкриється редактор із повним HTML-кодом листа.

Проскрольте код, поки не знайдете банер:

У цьому листі використовуються окремі банери для десктопів і мобільних пристроїв. Це гарний приклад адаптивного підходу до створення листів, а не простого зменшення розміру зображень. Широкий банер для десктопа може ускладнювати читання тексту на невеликому екрані; тут показано зображення, розроблене спеціально для невеликих екранів.

На наведеному вище скриншоті виділено посилання на банер для десктопів (1) і мобільних пристроїв (2). Банер для мобільних пристроїв не відображається, оскільки шлях до його зображення вказано неправильно.

Щоб виправити це, виділіть зображення в листі та клікніть на піктограму «Замінити». Знайдіть потрібний банер у бібліотеці зображень і скопіюйте його URL-адресу.

Потім поверніться до HTML-коду та замініть неправильний шлях до зображення на скопійовану URL-адресу. Давайте ще раз переглянемо лист у режимі прев'ю та перевіримо мобільну версію:

Ми вирішили проблему, і мобільний банер відображається правильно, але у версії для десктопів ситуація залишилася незмінною.

Крім того, у прев'ю можна перейти в темний режим, щоб перевірити, як виглядатиме лист у темній схемі кольорів, та виявити можливі проблеми з читабельністю чи дизайном.

Завершальним кроком є тестування листа перед надсиланням для перевірки його відображення в різних поштовиках та на різних пристроях. Stripo надає цю функцію завдяки інтеграції з сервісом Email on Acid, що дозволяє виявити проблеми з відображенням на десктопах і мобільних пристроях, зокрема в темному режимі, перед надсиланням.

Це вся інформація, яка необхідна для швидкого початку роботи з імпортованим HTML-кодом у Stripo. Такий підхід є ефективним, якщо вам переважно потрібно оновлювати наявний контент, однак для внесення структурних змін усе одно доведеться працювати з кодом. Якщо ви хочете додавати, видаляти або перебудовувати структури в редакторі Stripo за допомогою drag-n-drop, знадобиться додаткова адаптація HTML-коду, про що ми розповімо у другій частині цієї статті.

Інші способи імпорту листів у Stripo

Stripo також пропонує інші способи імпорту наявних листів у редактор. Ви можете завантажити файл HTML чи MJML, щоб перетворити його на редагований шаблон листа, або скористатися ZIP-архівом, якщо лист містить додаткові ресурси. Крім того, у Stripo з’явилася функція імпорту листів, завдяки якій можна взяти лист просто з вхідних і розмістити його в редакторі. Більш детальну інформацію про це ви знайдете в наших статтях про способи імпорту дизайна і листів.

На завершення

Немає потреби починати з нуля та заново створювати HTML-лист, щоб продовжити роботу над ним у Stripo. Після імпорту можна змінювати його контент, замінювати зображення та посилання, редагувати текст, а також переглядати прев'ю чи тестувати результат перед надсиланням. Якщо вам потрібен більш повний контроль над структурою листа, можна налаштувати HTML, використовуючи спеціальні класи блоків Stripo, щоб різні елементи стали доступними в drag-n-drop редакторі.