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

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

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

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

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

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

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

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

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

🚧

Важливо

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

3. Клікніть блок Зображення та завантажте головну картинку, що відображатиметься:

• без наведення курсора;
• у поштових клієнтах без підтримки ролловера;
• на мобільних пристроях.

4. У налаштуваннях блоку активуйте перемикач Ефект Rollover.

5. Завантажте друге зображення.

6. Додайте посилання та Alt-текст.

📘

Примітка

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

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

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

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

• блоку Зображення;
• блоку Кнопка (ефект підсвічування при наведенні).