Анна Забудська

08 лютого 2021

15 хв

5.00

Як адаптувати власний HTML-шаблон листа в eSputnik

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

Щоб повною мірою скористатися наявними можливостями редактора eSputnik, шаблон слід адаптувати. Для цього потрібні:

HTML-код листа.
Редактор eSputnik.
Фішки адаптації, про які ви дізнаєтеся зі статті.

Перейдемо до адаптації власного HTML-листа.

Простий варіант адаптації шаблону в eSputnik

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

Для прикладу ми взяли код шаблону Wemo на популярному ресурсі reallygoodemails.com. Завантажимо вибраний нами зразок HTML і поетапно розглянемо, як адаптувати його.

Якщо ви вже стикалися із завданням підігнати свій код письма для редактора eSputnik, то напевно знаєте, як завантажити власний HTML. Треба ввійти до Повідомлень — Повідомлення — Створити Email.

Створення нового листа для завантаження власного HTML

І в розділі шаблонів "Базові" вибрати варіант "Мій HTML".

Вибрати Мій HTML

Після цього ви побачите редактор з візуальною областю листа ① та активне вікно редактора коду ②. В останньому можна відкрити секцію CSS, щоб задати стилі ③.

Вікно редагування коду: області HTML та CSS

Задля зручності верстки або редагування листа рекомендуємо розподіляти HTML і CSS листи по відповідних секціях редактора коду. Часто в HTML-коді листів CSS-стилі знаходяться всередині тегу

<head>

наприклад:

CSS-стилі всередині тегу head

Необхідно вирізати все, що обгорнуто в тег

<style></style>

всередині

<head></head>

і вставити в секцію CSS-редактора коду.

У нашому шаблоні зроблено так само. Розділимо HTML та CSS по секціях.

Секція HTML

Відокремили HTML від CSS

Секція CSS

Стилі листа помістили до секції CSS

Редактор eSputnik відобразив наш лист у візуальному полі, але не видно картинок.

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

Можливість редагувати картинку, посилання, альтернативний текст

Як бачимо, одразу після додавання HTML-коду шаблону в eSputnik можна редагувати посилання, картинки та їхні назви (альтернативний текст). Зробити це можна як у панелі редагування, так і за допомогою редактора коду.

Спробуємо завантажити картинки до листа.

Клікніть логотип у візуальній частині листа і в меню ліворуч натисніть значок "Замінити".

Натиснути

Після цього відкриється галерея картинок, яка буде порожньою.

Область для завантаження власного зображення до eSputnik

Вам треба завантажити до неї зображення. Для цього є два способи:

Якщо лого та всі картинки для шаблону у вас збережені на комп'ютері, то просто перетягніть їх в область для вставки. Після цього всі зображення для підстановки в лист будуть завантажені й стануть доступними в галереї.
Натисніть іконку завантаження зображення за поточним посиланням:

Завантажити зображення до персональної галереї eSputnik

Після цього вибираємо лого з галереї та виконуємо ті самі дії для інших картинок, які не відобразилися в шаблоні.

Коли всі картинки підставлені — отримуємо привабливий шаблон.

Картинки в листі почали відображатися після завантаження

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

Відображення листа на мобільному пристрої

Таким чином, одразу після вставки HTML-коду листа в eSputnik є можливість редагувати посилання й картинки. А щоб редагувати звичайний текст, слід застосувати CSS-клас esd-text до тегу, в якому знаходиться весь блок тексту. Зазвичай це теги p, div, td, h1, h2, h3, span. До останнього застосовувати спец. клас можна лише тоді, коли всередині span знаходиться весь текст, а не його частина. Застосуємо клас esd-text до обгортки тексту.

Призначення спеціального класу для тексту

Після того, як клас esd-text задано, клікніть текст у візуальній області листа, і eSputnik дозволить редагувати текст, а також стилізувати його через панель редагування.

Активна панель стилізації тексту в редакторі

Це все, що потрібно для простого способу адаптації шаблону.

Last post

Ускладнений варіант адаптації

Давайте розглянемо ускладнений варіант для випадків, коли треба змінювати структуру листа, видаляти/додавати структури, контейнери, полоси.

Перш за все розберемося з устроєм листів у eSputnik.

Про ієрархію вкладеності листів eSputnik

Листи в редакторі eSputnik складаються:

з полос;
структур;
контейнерів;
блоків.

Полоса — вищий елемент ієрархії вкладеності для листа. У полосі можуть знаходитися кілька структур. У структурах можуть бути контейнери, а в контейнерах розміщуються блоки.

Розглянемо приклад вкладеності полоси, в якій знаходиться структура з двома контейнерами та блоками «Картинка» + «Текст»:

Вкладеність листів на прикладі однієї структури

Полоса з класом esd-stripe.
Структура з класом esd-structure.
Контейнер із класом esd-container-frame.
Блок із класом esd-block.

Якщо ваш шаблон має подібний принцип побудови верстки, це дозволить максимально успішно адаптувати лист у eSputnik.

Майже завжди є куди вставити клас для смуги, структури та/або контейнерів. Але через специфічну верстку блоків не завжди вдається так додати для них клас, щоб вони коректно адаптувалися. Тому ми рекомендуємо додавати клас esd-block-html до обгортки такого блоку: тоді eSputnik матиме змогу активувати кнопки управління (збереження, переміщення, копіювання, видалення), і редагувати такий блок надалі можна буде через 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.

Адаптуємо полосу шляхом призначення спеціального класу

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

Адаптуємо структуру

Призначимо відповідний клас esd-structure для структури.

Адаптуємо структуру шляхом додавання спеціального класу

Так само, як у полоси, у структури з'явилася рамка і елементи управління.

Адаптуємо базові блоки

Тепер перетворимо наявний контент на блоки і контейнери. Верхня частина листа містить картинку (білу полосу), логотип і текст. Призначимо для них відповідні класи:

Для логотипу — esd-block-image.

Адаптація логотипу

Для блоку з текстом — esd-block-text.

Адаптація блоку з текстом

В аналогічний спосіб ми призначили клас esd-block-image.

Ось як виглядає загальний результат адаптації блоків:

У структур та блоків з'явилися елементи управління

Спробуємо адаптувати картку товару з кнопкою.

Тут нам бракує контейнерів, щоб мати можливість перетягувати блоки з панелі drag'n'drop.

Знаходимо клітинку таблиці, яка містить фото товару з альт-текстом «Wemo Dimmer», і призначаємо для неї клас esd-container-frame — це буде наш перший Контейнер.

Визначаємо контейнер

У цьому контейнері перетворюємо блок на картинку шляхом додавання класу esd-block-image.

Визначення зображення як картинки

Попрацюємо з другим контейнером. Знаходимо клітинку таблиці, що містить текст «Wemo Mini», і призначаємо для неї клас esd-container-frame.

Адаптація контейнера

Усе, що знаходиться у ① та ② областях клітинки esd-container-frame — це наші блоки.

Блоки контейнера в коді

Весь контент цього контейнера — текст і кнопка. Вказуємо для ячейки першої області клас esd-block-text, а для ячейки другої області — блок esd-block-button.

Адаптація тексту картки товару

Адаптувати кнопку

Аналогічним чином ми перетворюємо решту кастомного HTML на блоки редактора eSputnik. Не треба щоразу налаштовувати вручну всі картки. Достатньо створити заготовку в одній структурі, а потім дублювати її за допомогою кнопки, яка знаходиться в елементах управління. У нових структурах просто замінюємо текст, картинки, посилання.

Готова картка товару

Висновки

Ми показали:

Як адаптувати кастомний HTML для редагування тексту, картинок і посилань в редакторі eSputnik.
Із чого складається лист і як призначити для його елементів потрібну вкладеність: полоси, структури, контейнери, блоки. Це надало можливість комфортніше управляти контентом листа. Крім редагування тексту і картинок, ми можемо також копіювати, переміщувати, видаляти й зберігати готові блоки в бібліотеці модулів.

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

А поки що ви можете застосувати отримані знання для адаптації свого шаблону. Бажаю успіхів у використанні редактора і до нових зустрічей!

5.0 з 5 на основі 1 оцінок