Добавление 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. Сейчас эта функция доступна только для изображений, для кнопок и других элементов возможности подключения Ролловера нет.

Примеры использования ролловера

Эффект смены картинки при наведении на нее будет полезен практически в любых промо-рассылках. Давайте рассмотрим несколько примеров:

Одежда, обувь и аксессуары - разный цвет, разный ракурс

Отличный способ показать товар лицом -  продемонстрировать его с нескольких сторон. Если вы добавляете в проморассылку товары из этой категории, нужно раскрыть тему максимально:

• Покажите текстуру и расцветку

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

Путешествия - 2 вида, интерьер и экстерьер отеля, несколько достопримечательностей

Чтобы привлечь больше внимания к туру, отелю, достопримечательности и т.д. - нужно показать как можно больше преимуществ. Но в то же время слишком длинное письмо не вызовет большого интереса. В этом случае поможет ролловер для демонстрации несколько разных ракурсов достопримечательностей,  показа разных фото номеров.

Сдача/продажа недвижимости - интерьер

Тоже самое касается показа недвижимости: с помощью ролловера вы покажите больше информации в письме и при этом сократите место на его подачу:

Мебель -  разный цвет, разный ракурс

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

Для украшения письма - баннер акции со спецэффектом

Добавьте красивую картинку на смену вашего баннера, чтобы произвести приятное впечатление на подписчиков.

Как видите, использование интерактивных изображений ограничено только вашей фантазией. Грамотное использование ролловера поможет вам повысить количество переходов, увеличить конверсию по письму и добавит изюминку в ваши рассылки.