Як додати 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. Зараз ця функція є доступною тільки для зображень, для кнопок, тоді як для інших елементів можливості підключення ролловеров не існує.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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