Ролловер в емейле — это смена одного изображения другим при наведении курсора. Ролловер можно использовать как в карточках товаров, так и в любом другом элементе письма — кнопках, текстовых блоках, иконках соцсетей, баннере, QR-кодах.
Несмотря на свою простоту, этот прием может выполнять множество разнообразных функций.
Ролловер в карточках товаров
Ограниченность пространства емейла редко позволяет показать товар со всех выгодных сторон. Но если вы используете ролловер, для вас это уже не проблема.
Ролловер с примером использования продукта
Иногда фотографии товара недостаточно, чтобы представить, как он будет выглядеть в реальности. Особенно это касается одежды и обуви, аксессуаров и ювелирных украшений. Чтобы получатель не боялся, что его ожидания будут обмануты, покажите не только изображение товара в отдельности, но и “в жизни”, например — на модели.
Ролловер для разностороннего показа товара
Сделайте ролловер с двумя разносторонними изображениями товара, чтобы потенциальный покупатель мог рассмотреть его с разных ракурсов. Можно объединить этот совет с предыдущим и показать товар не только с двух сторон, но и на модели:
Ролловер для крупного плана
Чтобы оценить качество товара или увидеть какие-то значимые детали, иногда его необходимо рассмотреть поближе. Ролловер отлично справится с этим заданием. Онлайн-магазин Proskater.ru таким образом демонстрирует пошив карманов на пуховиках.
Ролловер для демонстрации ассортимента
С помощью ролловера легко продемонстрировать несколько вариантов одной модели, например — разные расцветки одежды.
Ролловер для демонстрации устройства
Как и GIF-анимация, ролловер отлично подходит, когда нужно показать принцип работы сложного устройства. Его преимущество в меньшем весе и простоте создания. Посмотрите, как ThinkGeek продемонстрировали устройство ящика для инструментов “Молот Тора”:
Ролловер: загадка и разгадка
Баннер — это центральный элемент большинства проморассылок. Ролловер способен привлечь к нему еще больше внимания, создав интригу. Чтобы получить ответ на вопрос, пользователю нужно навести курсор на баннер. Как минимум, этот элемент геймификации заставит получателя провести в письме больше времени, что улучшит вашу репутацию у почтовых серверов.
Ролловер в текстовых блоках
Ролловер подойдет и для того, чтобы привлечь внимание к тексту рассылки. Правда, его нужно будет оформить в виде изображения.
В рассылке DirecTV главный акцент сделан на постерах кинокартин, но если вы захотите узнать рейтинг, продолжительность и другие детали — просто наведите курсор на заинтересовавший вас фильм.
Точно так же под главное изображение можно спрятать текстовое описание товара.
Или рассказать о выгодах, которые прячутся за QR-кодом и скачиванием приложения.
Инструкция по созданию ролловера в редакторе шаблонов eSputnik
Если вы хотите использовать ролловер в своих рассылках, не заморачиваясь с HTML и CSS, — мы рекомендуем редактор писем в eSputnik.
Вам нужно всего лишь загрузить 2 изображения, и ролловер в письме будет отоброжаться корректно во всех почтовых сервисах, где это возможно: Gmail, MacOS Apple Mail, Yahoo! Mail, AOL, Ukr.net, iCloud Mail, Outlook 2003. В остальных почтовиках получатели увидят только первую картинку.
Вот несколько несложных рекомендаций для создания ролловера в eSputnik:
- Rollover работает только с изображениями. Чтобы использовать его в других элементах письма, нужно добавить дополнительные стили через CSS.
- Используйте изображения с одинаковым соотношением сторон. Иначе при наведении курсора верстка письма может поломаться.
- Не забудьте про ссылку на сайт. Она одинакова для обоих изображений.
- Пропишите альтернативный текст. Он тоже привязывается к обеим картинкам.
Особенности отображения ролловера на мобильном
Если в изображение вставлена ссылка, когда пользователь нажмет на него — его перебросит на сайт, альтернативную картинку он увидеть просто не успеет.
Поэтому, чтобы ролловер в мобильном работал, нужно использовать изображения без ссылки — ее можно поместить в кнопку ниже.
Заключение
Теперь вы знаете, как вставить ролловер в письмо, и можете использовать этот простой, но эффективный прием в своих рассылках. Если у вас есть интересные идеи его использования — буду рада вашим комментариям! Ну а за шаблонами писем неизменный путь на TemplateMonster. 😉