Огляд адаптивного email-редактора

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

У цій статті ми розповімо про можливості drag'n'drop редактора і розглянемо його окремі функції.

Де знаходиться адаптивний редактор?

Треба увійти до розділу “Повідомлення” → “Створити email” і вибрати необхідний шаблон.

За кліком "Створити email" відкриється перелік шаблонів.

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

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

• “Оформлення” – у цій статті ми розповідаємо, як створити оформлення листа.
• "Контент" – роботу з нею описано в цьому матеріалі.

Вкладка “Контент”

Вкладка “Контент” містить три розділи:

• Структури – дозволяє встановити кількість елементів.
• Блоки – дозволяє додавати до структури елементи (меню, банер, відео, соцмережі та ін.).
• Модулі – бібліотека вже готових і збережених структур та блоків.

За допомогою конструктора можна легко вибирати елементи і розміщувати їх у потрібному порядку.

Смуги

Кожен лист складається з таких елементів: смуга, структура, контейнер.

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

Панель редагування зовнішнього вигляду смуги:

Для редагування смуги можна:

• встановити колір фону; 

• додати фонове зображення – для цього є різні способи: узяти зображення з банку, завантажити підготовлене або вставити посилання на зовнішній ресурс; 

• обвести контент – встановити відступи та колір;
• приховати смугу для десктопної або мобільної версії; 
• увімкнути/вимкнути смугу для HTML- або AMP-версії листа. 

Структури

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

Усі контентні блоки знаходяться у вкладці "Блоки". Вони є важливою складовою редактора — саме з їхньою допомогою ми можемо наповнювати контент листа.

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

Блоки

Розглянемо елементи вкладки "Блоки":

1. Шапка листа: логотип + меню

Оформлений у корпоративному стилі хедер робить лист легко впізнаваним.

Щоб створити хедер, треба:

1. Перетягнути до області листа на одну смугу дві структури;
2. Перетягнути до першої структури блоки "Зображення" і "Текст".
3. Перетягнути до другої структури блок “Меню”. 
4. Виберіть або завантажте підготовлене зображення. Після цього для нього треба встановити:

• розмір і центрування;
• альтернативний текст (потрібний для пояснення, що на зображенні; є важливим для прочитання листа скрінрідерами, а також якщо у одержувача вимкнено завантаження зображень; також Alt є важливим параметром для поштовиків – за описами система оцінює контент емейлів);
• посилання – рекомендуємо робити лого клікабельним. 

1. Додати назву компанії під логотипом;
2. Вписати потрібні пункти меню, встановити колір, шрифт, вирівнювання, додати посилання. 

2. Функції блоку “Зображення”

Додати до зображення зміни можна безпосередньо в редакторі eSputnik.

Вбудований редактор зображень в eSputnik:

Набір параметрів для вбудовування зображення в емейл:

• Rollover – ефект дозволяє показати підписникові інше зображення при наведенні курсору на поточне зображення;
• Посилання;
• Альтернативний текст;
• Вирівнювання для десктопної та мобільної версії;
• Розмір;
• Розтягування за шириною;
• Адаптивність зображення – надає зображенню можливість підлаштуватися під ширину екрана мобільного пристрою;

• Відступи – для десктопної та мобільної версії;
• Анкорне посилання – рідко застосовуються до зображень; анкорні посилання використовують, якщо лист вийшов достатньо довгим, і з їхньою допомогою одержувач може повернутися до потрібного елемента листа, клікнувши відповідний елемент;
• Приховування елемента – для десктопної або мобільної версії;
• Увімкнення/вимкнення елемента для HTML- та AMP-версії листа;
• Прив'язка до події – цю функцію переважно використовують для того, щоб прив'язати сценарій до кнопки, наприклад “Підтвердив підписку”. 

3. Створення банера

Привабливий банер допоможе утримати увагу користувача і мотивувати його дочитати листа до кінця. Можна вибрати банер із відповідними елементами зі списку модулів і оформити його у потрібному стилі.

Існує кілька методів створення банера безпосередньо в редакторі.

1. Завантажити готову картинку і додати до неї потрібний текст.
2. Скористатися вбудованим банком зображень (пошук здійснюється за ключовим словом). Вибране зображення додається однім кліком, після чого можна редагувати його.
3. Додати URL-адресу зображення з відкритого джерела із його подальшим редагуванням уже всередині сервісу.

Додати текст на зображення для банера можна кількома способами:

1. Додавання тексту на зображення безпосередньо через панель зверху (вона відкривається за кліком зображення у банері).

Редагувати такий банер можна після його конвертації у зображення. Наприклад, замінити картинку, видалити/змінити текст.

2. Додавання тексту в редакторі зображень.

Для цього треба:

• вибрати пункт “Текст”; 
• вибрати шрифт (у системі доступно 220 шрифтів, є функція пошуку);
• написати текст для банера і натиснути “Застосувати” → “Зберегти” для його збереження;

Змінити текст і шрифт у такому банері після збереження неможливо.

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

Аналогічні налаштування потрібні для банера десктопної версії – приховати його для мобільних.

Вигляд обох версій банерів:

4. Налаштування таймера

Наявність таймера в емейлі стимулює одержувачів до швидких цільових дій. Для налаштування таймера треба встановити:

• час старту і завершення;
• шрифт;
• вигляд роздільника чисел;
• підписи цифр;
• вирівнювання (для десктопної та мобільної версії).

Для кожного значення – день, година, хвилина, секунда – можна встановити власні налаштування: колір, шрифт, розмір, регістр підписів.

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

5. Додавання відео

Щоб додати відео до листа, треба:

1. Додати структуру і помістити до неї блок “Відео”;

2. Додати URL-адресу відео (Youtube, Vimeo) у поле "Посилання на відео";

3. Додати титульне зображення – це необов'язковий пункт, оскільки система автоматично підтягне обкладинку з відео. У такий самий спосіб пропишеться альтернативний текст відео;

4. Вибрати кнопку “Play”;

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

Оскільки HTML5 підтримується не всіма поштовиками, у самому листі відео не відтворюється. За кліком кнопки відео в листі відкриється відеофайл на тому ресурсі, де він розміщений (Youtube, Vimeo).

6. Картка товару

Можна створити картку товару самостійно або вибрати у вкладці “Модулі” відповідний варіант і відредагувати його у стилі компанії. Додавання змін до зображення, тексту і кнопки ми описали вище.

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

Для цього треба вибрати елемент, наприклад "Кнопка", і клікнути його. Ліворуч у бічному меню виберіть "до контейнера".

Подальші налаштування елементів здійснюються у блоці “Дані” → “Smart”, деталі ви знайдете у цій статті.

7. Блок "Соціальні мережі"

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

Для цього блоку доступні такі самі налаштування, що й для інших елементів: вказати посилання, альтернативний текст, вибрати розміщення блоку, розмір, вирівнювання, відступи та ін.

Цей блок можна створити самостійно, використовуючи банк зображень або власні зображення.

8. Блок HTML

Блок НТМL призначений для додавання власного HTML та CSS. При цьому з усього адаптивного редактора будуть доступними функції редагування картинок і посилань. Налаштування адаптивності користувач виконує самостійно.

9. AMP-елементи

АМР-технологія дозволяє створювати розсилки, які мають вигляд автономних веб-сторінок. Підписник матиме змогу виконувати дію безпосередньо в листі: переглянути асортимент, забронювати зустріч та ін. Для цього використовуються різні форми. У системі eSputnik вони вже підготовлені. Інструкції з їхнього налаштування: карусель, акордеон, форма.