Un rollover este un efect dinamic care schimbă imaginea cu alta atunci când treceți cursorul peste acea imagine în email.

Pe lângă faptul că arată atractiv, această funcționalitate poate servi multe scopuri:

• Arătă produsul din diferite unghiuri, oferind o mai bună prezentare;
• Oferă o idee despre cum arată pe oameni reali;
• Afișează gama (material, culori, modele);
• Oferă detalii suplimentare despre produs sau serviciu;
• Oferă mai multe informații despre funcționalitate (mai ales pentru servicii care necesită instrucțiuni de utilizare);
• Optimizează designul CTA;
• Îmbunătățește implicarea în email, etc.

Un efect de rollover face ca email-urile tale să fie mai atractive, stârnind mai mult interes pentru ceea ce oferi. În ciuda unui design aparent simplu, aplicațiile sale sunt numeroase, și mai jos îți voi împărtăși câteva idei despre cum să folosești imagini rollover în campaniile tale de email și cum să le adaugi în doi pași simpli în editorul nostru drag-and-drop.

Imagini Rollover în Cardurile de Produs

Site-urile de cumpărături online își echipează de mult timp produsele cu numeroase fotografii, recenzii video și animații. Într-un email, totuși, două imagini sunt de ajuns pentru a arăta articolul din unghiuri diferite sau pe un model.

1. Pune accent pe un singur articol de pe listă.

Rollovers animate adesea nu au o funcționalitate practică - ele servesc doar ca elemente atrăgătoare pentru a capta atenția clienților și a o menține pentru puțin timp. Este o alegere bună atunci când vrei să scoți în evidență un produs anume dintr-o linie.

În acest exemplu de rollover, efectul de hover este aplicat la categoria New Arrivals. Utilizatorul îl observă doar dacă trece cu cursorul peste acest bloc în email.

2. Arată cum se prezintă produsul pe o persoană reală.

Articolele care arată grozav în catalog pot să nu arate la fel de fantastic după ce le îmbraci, rezultând în numeroase meme Expectativă vs. Realitate. Fotografiile care arată produsul digital pus în acțiune pot ajuta la luarea deciziei corecte.

Această bijuterie și-a acoperit toate aspectele. Poți evalua dimensiunea reală a bijuteriilor văzând cum diferite piese se potrivesc pe oameni reali. Acest lucru este deosebit de important pentru inele, unde fiecare milimetru în diametru poate afecta cum va arăta articolul pe degetul tău.

3. Arată articolul din unghiuri diferite.

Magazinele fizice oferă o experiență de cumpărături mai sigură pentru că clienții pot ține produsul în mână și îl pot privi din toate unghiurile. Poți folosi efecte de imagine rollover pentru a oferi produselor digitale aceeași expunere vizuală.

Pentru retailerii de îmbrăcăminte, ar fi inteligent să arăți articolul din față și din spate.

4. Lasă oamenii să privească mai de aproape.

Vorbind despre comercianții online de îmbrăcăminte, materialul articolului este un alt factor important atunci când vine vorba de a face o achiziție. Oferiți o imagine detaliată pentru ca clientul să evalueze materialul, designul, cusăturile, numele brandului sau orice alt detaliu important.

 

În campania lor, Proskater oferă parka cu trei tipuri diferite de buzunare, ceea ce poate fi foarte important pentru iernile reci.

5. Arătați gama.

Economisiți spațiu demonstrând mărimile și culorile disponibile în loc să le descrieți cu texte voluminoase. Oferiți-le abonaților să dea clic pe linkul web și să exploreze mai multe prin prezentarea celor mai bune produse din gamă.

Efectul Rollover în Blocurile de Text

Imaginile de înaltă calitate sunt esențiale pentru a prezenta produsele eficient. Folosirea aplicațiilor gratuite de editare foto poate ajuta la îmbunătățirea imaginilor, asigurându-se că arată profesional și atrăgător pentru potențialii cumpărători.

Într-o campanie de e-mail, nu doar imaginile pot atrage atenția; textul cu rollover poate face, de asemenea, acest lucru. Singura cerință tehnică este să îl plasați pe imagine, restul procesului este același.

6. Păstrați prețul pentru mai târziu.

Orice card de produs trebuie să includă prețul. Dar regulile sunt făcute pentru a fi încălcate, nu-i așa? Nu speriați clientul cu un preț imediat, păstrați această informație pentru cei care sunt realmente interesați de produs.

Este similar cu plimbarea prin magazin — trebuie să te apropii de produsul care ți-a atras atenția pentru a vedea eticheta de preț.

7. Furnizați informații detaliate.

Un exemplu interesant de campanie de la Freshinbox: un utilizator poate trece mouse-ul peste posterul filmului, iar imaginea se schimbă cu informațiile despre film:

• Evaluările utilizatorilor;
• Durata;
• Dispozitive compatibile cu filmul.

Iată o altă opțiune — o imagine poate ascunde o descriere text lungă, de obicei inclusă într-un card de produs.

8. Îmbunătățiți postările de blog.

Dacă buletinele dumneavoastră sunt pline cu postări de blog, recenzii și sinteze, îmbunătățiți imaginile titlurilor, titlurile și butoanele de call-to-action.

9. Arătați funcționalitatea.

Astăzi, puțini oameni sunt dispuși să își petreacă timpul citind un text lung despre caracteristicile și caracteristicile produsului. În plus, acest text poate ocupa o mulțime de spațiu prețios în e-mail. În loc să descrieți funcționalitatea, ar putea fi mai bine să o demonstrați prin câteva imagini. Cum se spune, o imagine valorează o mie de cuvinte.

Un set de unelte hummer nu este ușor de descris în câteva cuvinte, așa că ThinkGeek a optat pentru o soluție mai bună: o singură imagine dinamică i-a ajutat să prezinte setul în cel mai bun mod.

Design Rollover Pentru Bannere

Un banner este unul dintre elementele majore ale oricărui email și este greu să-ți imaginezi o campanie fără unul. Încercați să le animati puțin.

10. Combinați bannerele.

Anunțați campaniile voastre grandioase cu mai multe imagini care se schimbă. Prin trecerea cursorului peste banner, un client va vedea puțin mai multe informații despre ce să caute pe site.

Observați că imaginile sunt proiectate în aceeași culoare și stil. Datorită acestui fapt, schimbarea pare naturală.

11. Mențineți suspansul.

Rulați o campanie pentru abonați? Nu arătați toate cărțile imediat. Ascundeți un element, de exemplu, un banner cu condițiile de reducere.

12. Folosiți puțină animație.

Un element rollover în general înseamnă comutarea între două imagini statice, dar puteți adăuga un pic de viață folosind animația.

Un element rollover poate fi, de asemenea, o soluție pentru următoarele probleme cu GIF-urile:

• Un GIF este afișat fără fundal, iar clientul vede imaginile în ordinea greșită.
• Un GIF nu este buclat și se termină până când clientul ajunge la el.
• Este aproape de alte elemente animate.

Acum, clientul decide când animația GIF începe.

Butonare Rollover

Buton de apel la acțiune (CTA) este necesar pentru a atrage un client să ia anumite acțiuni: să dea clic pe un link, să cumpere un produs, să vizioneze un videoclip, etc. Totuși, toată lumea este atât de obosită de butoanele tradiționale, încât unele companii reduc numărul acestora în emailuri sau chiar lasă doar CTA-uri text. Așadar, care este echilibrul corect?

13. Ascundeți CTA-urile.

O opțiune este să ascundeți butoanele în carduri de produse folosind un element rollover.

În acest fel, clienții văd butonul doar dacă trec cu cursorul peste produsul care îi interesează, iar emailurile voastre nu sunt încărcate cu elemente inutile.

14. Îmbunătățiți butoanele CTA.

Fiecare marketer știe că cea mai bună practică este să plasezi un CTA acolo unde se va sări în ochii cititorului. În acest mod, un client nu va trebui să caute indicii cu privire la ce vrei de la ei. Dar ce se întâmplă dacă apelul vostru la acțiune nu este doar formulat frumos, ci are și un design atrăgător?

Acest buton este proiectat perfect pentru a te îndemna să dai clic și să treci prin câteva niveluri de Super Mario, nu-i așa?

15. Adăugați mai multe butoane.

Ele pot fi în esență la fel ca formă și design, dar când un client trece cu cursorul peste ele — magia se întâmplă!

Amintiți-vă că butoanele de rulare sunt din punct de vedere tehnic încă imagini. Nu va trebui să ajustați aspectul, dar este important să vă gândiți ce text alternativ sau buton va fi afișat în locul imaginilor dezactivate.

Efect de Rulare pentru Colaje

Lucruri precum aspectul neobișnuit al elementelor, cardurile unice de produse sau blocurile asimetrice fac e-mailurile de neuitat. Recent, campaniile de e-mail au utilizat destul de mult colaje. Dar chiar și imaginile bine combinate pot fi îmbunătățite.

16. Diversificați colajele dvs.

Dacă creați un colaj de imagine singular, animați-l adăugând un efect de amestecare când cursorul este peste el.

17. Faceți fiecare element interactiv.

Dacă utilizați un editor și fiecare imagine dintr-un colaj ascunde un link separat, există o altă modalitate de a adăuga interactivitate. O puteți face pentru fiecare element, separat. Vedeți cum a făcut-o Virtus.

Când este plasat cursorul deasupra, fiecare fotografie este colorată și puteți face clic pe ea pentru a merge la o pagină specifică de produs.

18. Folosiți mai multe elemente de rulare.

La fel ca în exemplele anterioare de rulare, puteți folosi câteva elemente interactive împreună. Desigur, va necesita un efort să creați astfel de blocuri, dar rezultatul arată uimitor:

Acest exemplu particular a necesitat ceva programare, dar este de înțeles. Spre deosebire de tradiționalele GIF-uri, care ar arăta strident în acest caz, un efect de rulare permite clientului să consulte ghidul de mărimi într-un mod convenabil, fără elemente care clipesc și distrag atenția.

Efect de Rulare Cu Oricare Element Email

Folosiți-vă imaginația pentru a aduce la viață campaniile dvs. de e-mail. La urma urmei, fiecare imagine pe care o utilizați în e-mailurile dvs. poate fi îmbunătățită cu un efect de rulare.

19. Împingeți utilizatorii să vizioneze un videoclip.

Amintiți-vă de tendința de a folosi GIF-uri pentru a atrage atenția utilizatorilor asupra unui bloc video? Acum puteți utiliza animația și experimenta cu perspectiva.

În e-mailul de la Disney, imaginea devine puțin mai aproape când este plasat cursorul deasupra. Un astfel de efect este ușor de realizat direct în timpul creării e-mailului — pur și simplu decupați imaginea și redimensionați-o pentru a se potrivi cu blocul. Puteți face asta în editorul de imagini încorporat.

20. Colectați recenzii.

Dacă solicitați feedback într-un bloc separat din campanie în loc să trimiteți încă un e-mail, faceți acest bloc mai expresiv.

Zâmbiți sau faceți cu ochiul acelor clienți care doresc să vă laude, și arătați cât de trist sunteți să vedeți o recenzie negativă.

21. Spuneți ce se află în spatele codului QR.

Coduri QRsunt adesea vizibile în emailuri lângă butoanele aplicațiilor mobile. Însă informațiile detaliate despre beneficiile aplicațiilor sunt de obicei oferite doar prin campanii speciale dedicate aplicației.

Furnizați puțin mai multe informații cu un element de rollover pentru a inspira abonații să scaneze codul și să instaleze aplicația dumneavoastră.

22. Jucați-vă cu clienții dumneavoastră.

Rollover-urile de imagine pot aduce o notă jucăușă campaniilor dumneavoastră:

• Adăugați în emailuri un joc trivia;
• Adăugați un chestionar cu răspunsuri ascunse;
• Introduceți o ghicitoare, etc.

Răspunsul va fi oferit direct sub întrebare, clienții doar trebuie să treacă cursorul peste ea pentru a-l vedea.

23. Faceți butoanele rețelelor sociale mai drăguțe.

Chiar dacă reprezintă blocul cel mai mic care ocupă puțin spațiu în subsol, butoanele de social media pot fi totuși interesante. Desigur, un rollover pe astfel de pictograme mici poate fi găsit doar întâmplător. Dar aceasta este șmecheria!

Dacă clientul citește un email până la sfârșit, cursorul evidențiază un buton și creează acel "efect wow" pe care toată lumea îl caută în emailuri! Este greu să ignorezi un astfel de bloc — mulți ar vrea să verifice cel puțin toate pictogramele și să facă clic pe ele, în cel mai bun caz.

Cum să Adăugați un Efect de Rollover în Editor

Nu este o problemă să găsiți pe Internet cum să adăugați un rollover folosind codul. Am testat această metodă și ne-am confruntat cu o mulțime de probleme legate de afișare, unele emailuri pot arăta diferit în diferiți clienți de email.

În editorul nostru, puteți adăuga elemente de rollover la emailuri direct în interiorul editorului, fără a edita codul. Tot ce trebuie să faceți este să activați opțiunea corespunzătoare și să încărcați a doua imagine.

Pentru a asigura o afișare corectă a imaginilor rollover, țineți cont de următoarele:

• Un efect de rollover este utilizat doar cu imagini. Blocurile de text, butoanele și alte elemente vor trebui transformate în imagini. În caz contrar, va trebui să adăugați alte stiluri folosind CSS.
• Puteți schimba doar între două imagini: cea principală și cea care va fi afișată la trecerea cursorului.
• Atenție la dimensiune. Dimensiunea celei de-a doua imagini trebuie să fie corelată cu dimensiunea primei. În caz contrar, întregul aspect poate fi distorsionat când imaginea este trecută cu cursorul.
• Adăugați linkul. Ar trebui să existe un singur link pentru ambele imagini.
• Adăugați un singur text alternativ. Acesta va fi adăugat automat pentru ambele imagini.
• Caracteristica este susținută de Gmail, iCloud Mail, Outlook 2003, Apple Mail, Yahoo! Mail, AOL. Pentru clienții de email care nu o susțin, creați un bloc static alternativ.

Optimizare pentru dispozitive mobile

Afisajul unui efect rollover pe dispozitivele mobile poate avea unele particularități:

• În cazul în care există un link, elementul rollover este activat prea repede, trimițând utilizatorul la pagina de destinație.

• Fără un link atașat, un clic pe imagine deschide a doua imagine.

Folosiți blocuri separate pentru desktop și mobil.

Pe smartphone-uri, puteți seta un bloc care va schimba la atingere:

Și sub acel bloc, puteți adăuga un buton CTA cu un link către site-ul web. Dacă un client deschide acest email pe un client desktop, imaginea se va schimba la plasarea cursorului.

În editorul nostru, puteți dezactiva un număr nelimitat de blocuri pe care nu doriți să le afișați pe anumite dispozitive. O funcție utilă, nu-i așa? O găsiți în setările blocului:

Nu este setat implicit, ceea ce înseamnă că blocurile nu sunt ascunse. Un clic pe iconița de desktop sau mobil va ascunde blocurile pentru PC-uri sau smartphone-uri corespunzător.