Rollover е динамичен ефект, който променя изображението на друго, когато задържите курсора над това изображение в имейла.

Освен че изглежда привлекателно, тази функционалност може да служи на много цели:

• Показване на вашия продукт от различни ъгли, давайки му по-добро излагане;
• Даване на представа как изглежда върху реални хора;
• Показване на разнообразието (материал, цветове, шарки);
• Предоставяне на допълнителни детайли за продукта или услугата;
• Даване на повече информация за функционалността (особено за услуги, които изискват инструкции за използване);
• Оптимизиране на дизайна на СТА;
• Подобряване на ангажираността с имейла и т.н.

Rollover ефектът прави вашите имейли занимателни, повишавайки интереса на хората към това, което предлагате. Въпреки привидно простия дизайн, приложенията му са многобройни, а по-долу ще споделя с вас някои идеи как да използвате rollover изображения във вашите имейл кампании и как да ги добавите с два клика в нашия drag-and-drop редактор.

Rollover Изображения в Продуктови Карти

Онлайн магазините отдавна оборудват своите продукти с множество снимки, видео ревюта и анимации. В имейл, обаче, две снимки са достатъчни да покажат артикула от различни ъгли или върху модел.

1. Фокусирайте се върху един продукт в списъка.

Анимираните rollover-и често нямат практическа функционалност - те служат само като привлекателни елементи, за да привлекат вниманието на клиента и да го задържат за известно време. Това е добър избор, когато искате да подчертате специално определен продукт в линията.

В този rollover пример, преминаването е наложено върху категорията Нови Поступления. Потребителят го забелязва само ако задържи курсора над този блок в имейла.

2. Показване как продуктът изглежда на реален човек.

Артикулите, които изглеждат чудесно в каталога, може да не изглеждат толкова фантастично след като ги пробвате, водейки до множество мемета "Очакване срещу Реалност". Снимки, които показват дигиталния продукт в действие, могат да помогнат за правилния избор.

Този магазин за бижута го е уредил. Можете да прецените реалния размер на бижутата, като видите как различни парчета стоят на реални хора. Това е особено важно за пръстени, където всеки милиметър в диаметър може да повлияе на това как артикулът ще изглежда на вашия пръст.

3. Показване на артикула от различни ъгли.

Физическите магазини предлагат по-сигурно пазаруване, защото клиентите могат да задържат артикула и да го разгледат от всеки ъгъл. Можете да използвате rollover ефекти за изображения, за да предоставите същото визуално изложение на дигиталните продукти.

За търговците на дрехи би било умно да покажат артикула отпред и отзад.

4. Нека хората да разгледат по-близо.

Когато говорим за онлайн търговци на облекло, материалът на изделието е друг важен фактор при покупката. Предложете близък поглед, за да може клиентът да оцени материала, дизайна, шевовете, марката или всякакъв друг важен детайл.

В своята кампания, Proskater предлага парки с три различни типа джобове, които могат да бъдат наистина важни за студените зими.

5. Покажете разнообразието.

Спестете пространство, като покажете наличните размери и цветове, вместо да ги описвате с обемни текстове. Предложете на абонатите си да кликнат на уеб линка и да разгледат по-подробно, като демонстрирате най-добрите продукти от гамата.

Rollover ефект в текстови блокове

Визуализациите с високо качество са ключови за ефективното представяне на продукти. Използването на безплатни приложения за редакция на снимки може да помогне за усъвършенстване на изображенията, осигурявайки професионален и привлекателен вид за потенциалните купувачи.

В имейл кампания, не само изображенията могат да уловят вниманието; текст с rollover ефект също може да свърши работа. Единственото техническо изискване е да го поставите върху изображението, останалата част от процеса е същата.

6. Запазете цената за по-късно.

Всяка продуктова карта трябва да включва цената. Но правилата са, за да се нарушават, нали? Не плашете клиента с цена от самото начало, запазете тази информация за тези, които наистина се интересуват от продукта.

Това е подобно на разходка из магазина — трябва да се приближите до продукт, който ви е привлечен вниманието, за да видите ценовия етикет.

7. Предоставете подробна информация.

Интересен пример за кампания от Freshinbox: потребителят може да премести курсора си върху плакат на филм и изображението се променя на информацията за филма:

• Оценки от потребители;
• Продължителност;
• Устройства, съвместими с филма.

Ето още един вариант — снимка може да скрие дълго текстово описание, което обикновено се включва в продуктовата карта.

8. Подобрете публикациите в блога си.

Ако вашите бюлетини са изпълнени с публикации в блога, рецензии и дайджести, разнообразете главните изображения, заглавията и бутоните за действие.

9. Покажете функционалността.

Днес, малко хора са готови да си губят времето, за да четат дълги текстове за характеристиките и спецификациите на продукта. Освен това, този текст може да заема доста ценно пространство в имейла. Вместо да описвате функционалността, може би е по-добре да я демонстрирате с няколко изображения. Както казват, една картина струва хиляда думи.

Комплект инструменти за чукане не е лесно да се опише с няколко думи, затова ThinkGeek избраха по-добро решение – една динамична снимка помогна да представят комплекта по най-добрия начин.

Дизайн на Rollover за Банери

Банерът е един от основните елементи на всяко имейл съобщение и е трудно да си представим кампания без него. Опитайте да ги оживите малко.

10. Комбинирайте банери.

Обявете вашите големи кампании с няколко сменящи се картини. При преминаване с мишката върху банера, клиентът ще види малко повече информация за това, което да търси на уебсайта.

Имайте предвид, че изображенията са проектирани в същия цвят и стил. Благодарение на това, смяната изглежда естествена.

11. Поддържайте напрежението.

Водите кампания за абонатите? Не показвайте всичките си карти веднага. Скрийте някои елементи, например банер с условия на отстъпка.

12. Използвайте малко анимация.

Rollover елемент обикновено означава преминаване между две статични изображения, но можете да добавите малко живот към него, като използвате анимация.

Rollover елемент може също така да бъде решение на следните проблеми с GIF файловете:

• GIF се показва без фон и клиентът вижда изображенията в неправилния ред.
• GIF не се циклира и свършва преди клиентът да я достигне.
• Намира се близо до други анимирани елементи.

Сега клиентът е този, който решава кога GIF анимацията започва.

Rollover Бутони

CTA бутоните са необходими, за да подтикнат клиента към определени действия: клик върху връзка, покупка на продукт, гледане на видео и др. Въпреки това, всички са толкова уморени от традиционните бутони, че някои компании намаляват броя им в имейлите или дори оставят само текстови CTA. Какъв е правилният баланс?

13. Скрийте CTA.

Една опция е да скриете бутоните в продуктови карти като използвате rollover елемент.

По този начин клиентите виждат бутона само ако преминат с мишката върху продукта, който ги интересува, и вашите имейли не са натъпкани с ненужни елементи.

14. Подобрете CTA бутоните.

Всеки маркетолог знае, че най-добрата практика е да поставите CTA там, където ще се набута в очите на читателя. Така, клиентът няма да трябва да търси подсказки за това, което искате от него. Но какво ако вашият призив за действие не само е добре формулиран, но също така има и привлекателен дизайн?

Този бутон е перфектно проектиран, за да ви подтикне да кликнете и да преминете през няколко нива на Супер Марио, нали?

15. Добавете няколко бутона.

Те могат да бъдат основно същите по форма и дизайн, но когато клиентът премине с мишката върху тях — се случва магия!

Имайте предвид, че рололоувър бутоните технически все още са изображения. Няма да се наложи да променяте оформлението, но е важно да помислите какъв alt-текст или бутон ще се показва вместо забранените изображения.

Рололоувър ефект за колажи

Неща като необичайно оформление на елементи, уникални продуктови карти или асиметрични блокове правят имейлите незабравими. Напоследък имейл кампаниите използват колажи доста често. Но дори и добре комбинирани картинки все още могат да бъдат подобрени.

16. Разнообразявайте Вашите колажи.

Ако правите колаж от една единствена картина, оживете го, като добавите ефект на смесване, когато курсорът е над него.

17. Направете всеки елемент интерактивен.

Ако използвате редактор и всяка картина в колажа крие отделна връзка, има друг начин да добавите интерактивност. Можете да го направите за всеки елемент поотделно. Вижте как са го направили Virtus.

При преминаване на курсора всяка снимка се оцветява, и можете да кликнете върху нея, за да отидете на конкретна страница на продукта.

18. Използвайте няколко рололоувър елемента.

По същия начин както в предишните примери с рололоувър, можете да използвате няколко интерактивни елемента заедно. Разбира се, ще е нужно малко усилие, за да създадете такива блокове, но резултатът изглежда впечатляващо:

Този конкретен пример изискваше известно кодиране, но си заслужава усилията. В контраст с традиционните GIF, които биха изглеждали прекомерно в този случай, рололоувър ефектът позволява на клиента да разгледа таблицата с размери по удобен начин, без мигащи и разсейващи елементи.

Рололоувър ефект с всеки имейл елемент

Използвайте въображението си, за да оживите вашите имейл кампании. В крайна сметка, всяко изображение, което използвате в имейлите си, може да бъде подобрено с рололоувър ефект.

19. Подтикнете потребителите да гледат видео.

Помните ли тенденцията за използване на GIF, за да привлечете вниманието на потребителите към видео блок? Сега можете да използвате анимация и да експериментирате с перспективата.

В имейла от Disney, изображението се приближава малко, когато курсорът е върху него. Такъв ефект е лесен за постигане директно по време на създаването на имейла — просто изрежете изображението и го преоразмерете, за да пасне на блока. Можете да направите това в вграден редактор на изображения.

20. Съберете отзиви.

Ако искате да съберете обратна връзка в отделен блок в кампанията, вместо да изпращате още един имейл, направете този блок по-изразителен.

Усмихвайте се или намигвайте на тези клиенти, които искат да ви похвалят, и покажете колко сте натъжени, когато видите отрицателен отзив.

21. Разкажете какво стои зад QR кода.

QR кодове

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

Предоставете малко повече информация с помощта на елемент с ефект на задържане, за да вдъхновите абонатите да сканират кода и да инсталират вашето приложение.

22. Играйте с вашите клиенти.

Ефектите на задържане на изображения могат да внесат игрив дух във вашите кампании:

• Добавете игра с любопитни факти в имейлите;
• Добавете тест с скрити отговори;
• Включете загадка и т.н.

Отговорът ще бъде предоставен директно под въпроса, клиентите просто трябва да задържат мишката, за да го видят.

23. Направете бутоните за социални мрежи по-сладки.

Дори и да са най-малкият блок, който заема малко пространство във фуутъра, бутоните за социални медии могат все още да бъдат интересни. Разбира се, ефект на задържане върху такива миниатюрни икони може да бъде открит случайно. Но това е трикът!

Ако клиентът прочете имейла до край, курсорът осветява бутон, и създава този „уау ефект“, който всеки търси в имейли! Трудно е да оставите такъв блок незабелязан — много биха искали поне да разгледат всички икони и в най-добрия случай да кликнат върху тях.

Как да добавите ефект на задържане в редактора

Не е проблем да намерите в Интернет как да добавите ефект на задържане с помощта на код. Тествахме този метод и се сблъскахме с много проблеми, свързани с визуализацията - някои имейли може да изглеждат различно в различни имейл клиенти.

В нашия редактор можете да добавите елементи с ефект на задържане в имейли директно в редактора, без редактиране на кода. Всичко, което трябва да направите, е да активирате съответната опция и да качите второто изображение.

За да осигурите правилното визуализиране на изображенията с ефект на задържане, имайте предвид следното:

• Ефект на задържане се използва само с изображения. Текстови блокове, бутони и други елементи трябва да бъдат превърнати в изображения. В противен случай ще трябва да добавите други стилове, използвайки CSS.
• Можете да превключвате само между две изображения: основното и това, което ще се покаже при задържане.
• Обърнете внимание на размера. Размерът на второто изображение трябва да кореспондира с размера на първото. В противен случай цялото оформление може да се изкриви, когато изображението се задържи.
• Добавете връзка. Трябва да има една връзка и за двете изображения.
• Добавете един алтернативен текст. Той ще бъде автоматично добавен към двете снимки.
• Функцията се поддържа от Gmail, iCloud Mail, Outlook 2003, Apple Mail, Yahoo! Mail, AOL. За имейл клиенти, които не я поддържат, създайте алтернативен статичен блок.

Оптимизация за мобилни устройства

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

• При наличието на линк, елементът със задържането се активира твърде бързо, изпращайки потребителя към целевата страница.

• Без прикрепен линк, при клик върху картинката се отваря втората картинка.

Използвайте отделни блокове за настолен компютър и мобилно устройство.

За смартфони можете да настроите блок, който ще се променя при докосване:

И под този блок, можете да добавите бутон за действия със линк към уебсайта. Ако клиентът отвори този имейл на настолен клиент, картинката ще се промени при поставяне на курсора над нея.

В нашия редактор можете да изключите неограничен брой блокове, които не искате да се показват на определени устройства. Удобна функция, нали? Можете да я намерите в настройките на блока:

Не е зададено по подразбиране, което означава, че блоковете не са скрити. Клик върху иконата на настолен компютър или мобилна икона ще скрие блоковете съответно за компютри или смартфони.