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

Email

Омніканальність

Автоматизація

Огляд адаптивного 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”, деталі ви знайдете у цій статті.

Перехід до розділу Smart для налаштування елементів

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

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

Варіації вигляду блоку соцмереж

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

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

Налаштування блоку соцмереж

8. Блок HTML

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

Налаштування блоку HTML у редакторі

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

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

Залишилися питання?
Спеціалісти обов'язково нададуть відповідь та допоможуть вирішити вашу проблему!
Зворотний дзвінок
Залишіть заявку – і наш спеціаліст зв'яжеться з вами в робочий час.
Відправити заявку
Консультація в чаті
Готові до ваших запитань!
Написати в чат
Електронна пошта
Напишіть в службу підтримки eSputnik.
Надіслати email