Додавання Ролловера

Ролловер — це ефект, за якого зображення змінюється під час наведення курсора. Коли курсор прибрати, відображається початкове зображення.

В email-розсилках ролловер допомагає додати інтерактивність і зробити лист цікавішим для користувачів. Його можна використовувати:

  • у банерах з акційними пропозиціями;
  • у картках товарів для показу додаткового вигляду;
  • у кнопках із підсвічуванням під час наведення.

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

Приклад ефекту ролловер: зміна зображення товару під час наведення курсора

Створення Ролловера

  1. Створіть новий лист або відкрийте існуючий.
  2. Додайте блок Зображення у потрібне місце повідомлення.
Додайте блок Зображення у потрібне місце повідомлення

Підготуйте два зображення у форматі PNG, JPG або GIF:

  • розмір файлу — до 3 МБ;
  • максимальний розмір — 4000 × 4000 px.
🚧

Важливо

Обидва зображення повинні мати однакове співвідношення сторін. Інакше під час наведення курсора може зміститися верстка листа.

  1. Клікніть блок Зображення та завантажте головну картинку, що відображатиметься:
  • без наведення курсора;
  • у поштових клієнтах без підтримки ролловера;
  • на мобільних пристроях.
Завантаження головного зображення в блок Зображення
  1. У налаштуваннях блоку активуйте перемикач Ефект Rollover.
Перемикач Ефект Rollover у налаштуваннях блоку Зображення
  1. Завантажте друге зображення.
Завантаження другого зображення для ефекту ролловер
  1. Додайте посилання та Alt-текст.
Поля посилання та Alt-текст для зображення з ефектом ролловер
📘

Примітка

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

Так буде виглядати готовий лист в поштовому клієнті:

Готовий лист з ефектом ролловер у поштовому клієнті

Особливості застосування Ролловера в розсилках

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


Did this page help you?