Як додати Rollover у лист

Ролловер — досить широкий термін, який дослівно перекладається як "зміна від одного до іншого". В електронному маркетингу це ефект, при якому зображення змінюється іншим при наведенні на нього курсора. Якщо курсор відводиться — повертається початкове зображення. Сьогодні ця функціональність стала доступною також в емейл-розсилках.

Додавання простих інтерактивних елементів у листах може зробити ваші розсилки більш привабливими для одержувачів — до того ж ролловер входить до списку трендів 2018 року.

Раніше для створення ролловера використовували масу сторонніх інструментів і роботу безпосередньо з кодом. Зараз ви можете створити ролловер у системі еSputnik кількома кліками, без створення додаткового кастомного коду.

Як створити Ролловер

1. Для початку треба створити дві картинки однакового розміру. Ваші зображення можуть бути у форматі PNG або JPG.

Створення двох картинок для Ролловера

2. Із двох зображень одне буде головним і відобразиться незалежно від позиції курсора, а друге з'явиться, коли курсор переміститься до зображення. Увага! Співвідношення сторін другорядної картинки має бути таким самим, як і в основної картинки. Інакше при наведенні курсора верстка листа може порушуватися.

3. Створіть у листі порожню структуру, до якої плануєте додавати ролловер, і виберіть у ній блок "Картинка".

Створення структури для додавання Ролловера

Потім клікніть цей блок, щоб завантажити основне зображення:

Завантаження основного зображення для Ролловера

4. Після цього пересуваємо повзунок "Ролловер":

Пересування повзунка Ролловера

5. І завантажуємо другу підготовлену картинку:

Завантаження другої картинки Ролловера

6. Зверніть увагу, що посилання на зображення та альтернативний текст прописуються один раз, після завантаження другої картинки:

Прописати альт-текст для Ролловера

Ось такий результат ми отримаємо:

Результат додавання Ролловера

Про що слід пам'ятати

Є кілька особливостей застосування ролловера в розсилках:

  1. Ця функція працює в обмеженій кількості поштових сервісів: Yahoo! Mail, Ukr.net, AOL, Gmail, iCloud Mail, Outlook 2003, MacOS Apple Mail.
  2. Ролловер спрацьовує тільки на десктопних пристроях, оскільки є технічна можливість навести курсор на всі зображення. На мобільних пристроях дотик до екрану вважається кліком, і ефект не спрацює. Натомість буде одна картинка з можливістю переходу на сайт.
  3. Жоден з інструментів тестування емейлів (Litmus, Email on Acid) ще не готовий до перевірки інтерактивних повідомлень. Щоб протестувати, як ваша емейл-розсилка з ролловером відобразиться на різних пристроях, відправляйте тести на всі доступні вам поштовики і пристрої.
  4. Зараз ця функція є доступною тільки для зображень, для кнопок, тоді як для інших елементів можливості підключення ролловеров не існує.

Приклади використання ролловера

Ефект зміни картинки за наведенням на неї буде корисним практично в будь-яких промо-розсилках. Давайте розглянемо кілька прикладів:

Одяг, взуття та аксесуари — різний колір, різний ракурс

Чудовий спосіб показати товар обличчям — продемонструвати його з кількох боків. Якщо ви додаєте до проморозсилки товари з цієї категорії, треба розкрити тему максимально:

  • Покажіть текстуру й кольори

Приклад відображення текстури й товару

  • Продемонструйте товар з різних ракурсів:

Приклад відображення товару з різних ракурсів

Подорожі — два види, інтер'єр та екстер'єр готелю, кілька визначних пам'яток

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

Оренда/продаж нерухомості — інтер'єр

Те саме стосується показу нерухомості: за допомогою ролловера ви покажете більше інформації в листі і при цьому зменшите простір для її представлення:

Приклад інтер'єру в Ролловері

Меблі — різний колір, різний ракурс

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

Приклад відображення виробу та кольорів

Для прикрашення листа — банер акції зі спецефектом

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

Приклад зміни картинок у Ролловері

Як бачимо, використання інтерактивних зображень обмежене тільки вашою фантазією. Грамотне використання ролловера допоможе вам підвищити кількість переходів, збільшити конверсію за листом і додати родзинку до ваших розсилок.

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