08 лютого 2021
3763
15 хв
5.00
![Як адаптувати власний HTML-шаблон листа в eSputnik Як адаптувати власний HTML-шаблон листа в eSputnik](https://cdn.esputnik.com/photos/shares/Blog/blogs/html-template-esputnik-adaptation (1).webp)
Як адаптувати власний HTML-шаблон листа в eSputnik
Припустимо, до цього моменту ви здійснювали розсилки через інший ESP або ваш верстальник створив кастомний шаблон. Якщо просто скопіювати і вставити в редактор власний HTML, багато функцій будуть заблоковані. Не можна буде редагувати будь-який елемент (контейнер/структуру/полосу) та базові блоки в drag'n'drop-режимі.
Щоб повною мірою скористатися наявними можливостями редактора eSputnik, шаблон слід адаптувати. Для цього потрібні:
-
HTML-код листа.
-
Редактор eSputnik.
-
Фішки адаптації, про які ви дізнаєтеся зі статті.
Перейдемо до адаптації власного HTML-листа.
Простий варіант адаптації шаблону в eSputnik
Цей спосіб є придатним, якщо ви не бажаєте додавати блоки або змінювати їхнє розміщення — треба лише редагувати контент: текст, посилання, картинки.
Для прикладу ми взяли код шаблону Wemo на популярному ресурсі reallygoodemails.com. Завантажимо вибраний нами зразок HTML і поетапно розглянемо, як адаптувати його.
Якщо ви вже стикалися із завданням підігнати свій код письма для редактора eSputnik, то напевно знаєте, як завантажити власний HTML. Треба ввійти до Повідомлень — Повідомлення — Створити Email.
І в розділі шаблонів "Базові" вибрати варіант "Мій HTML".
Після цього ви побачите редактор з візуальною областю листа ① та активне вікно редактора коду ②. В останньому можна відкрити секцію CSS, щоб задати стилі ③.
Задля зручності верстки або редагування листа рекомендуємо розподіляти HTML і CSS листи по відповідних секціях редактора коду. Часто в HTML-коді листів CSS-стилі знаходяться всередині тегу
<head>
наприклад:
Необхідно вирізати все, що обгорнуто в тег
<style></style>
всередині
<head></head>
і вставити в секцію CSS-редактора коду.
У нашому шаблоні зроблено так само. Розділимо HTML та CSS по секціях.
Секція HTML
Секція CSS
Редактор eSputnik відобразив наш лист у візуальному полі, але не видно картинок.
Все гаразд, нам ще треба буде їх завантажити. А поки що натисніть верхній рядок у хедері листа.
Як бачимо, одразу після додавання HTML-коду шаблону в eSputnik можна редагувати посилання, картинки та їхні назви (альтернативний текст). Зробити це можна як у панелі редагування, так і за допомогою редактора коду.
Спробуємо завантажити картинки до листа.
Клікніть логотип у візуальній частині листа і в меню ліворуч натисніть значок "Замінити".
Після цього відкриється галерея картинок, яка буде порожньою.
Вам треба завантажити до неї зображення. Для цього є два способи:
-
Якщо лого та всі картинки для шаблону у вас збережені на комп'ютері, то просто перетягніть їх в область для вставки. Після цього всі зображення для підстановки в лист будуть завантажені й стануть доступними в галереї.
-
Натисніть іконку завантаження зображення за поточним посиланням:
Після цього вибираємо лого з галереї та виконуємо ті самі дії для інших картинок, які не відобразилися в шаблоні.
Коли всі картинки підставлені — отримуємо привабливий шаблон.
Перевіримо його відображення на мобільному пристрої та переконаємося, що картинки відображаються коректно.
Таким чином, одразу після вставки HTML-коду листа в eSputnik є можливість редагувати посилання й картинки. А щоб редагувати звичайний текст, слід застосувати CSS-клас esd-text до тегу, в якому знаходиться весь блок тексту. Зазвичай це теги p, div, td, h1, h2, h3, span. До останнього застосовувати спец. клас можна лише тоді, коли всередині span знаходиться весь текст, а не його частина. Застосуємо клас esd-text до обгортки тексту.
Після того, як клас esd-text задано, клікніть текст у візуальній області листа, і eSputnik дозволить редагувати текст, а також стилізувати його через панель редагування.
Це все, що потрібно для простого способу адаптації шаблону.
Ускладнений варіант адаптації
Давайте розглянемо ускладнений варіант для випадків, коли треба змінювати структуру листа, видаляти/додавати структури, контейнери, полоси.
Перш за все розберемося з устроєм листів у 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 повною мірою та створити аналогічний шаблон з нуля.
А поки що ви можете застосувати отримані знання для адаптації свого шаблону. Бажаю успіхів у використанні редактора і до нових зустрічей!