Efekt rollover to dynamiczny efekt, który zmienia obraz na inny, gdy najedziesz kursorem na ten obraz w e-mailu.

Oprócz tego, że wygląda atrakcyjnie, ta funkcja może służyć wielu celom:

• Pokaż swój produkt z różnych kątów, oferując lepszą prezentację;
• Pokaż, jak wygląda na prawdziwych osobach;
• Przedstaw asortyment (materiał, kolory, wzory);
• Dostarcz dodatkowe informacje o produkcie lub usłudze;
• Pokaż więcej informacji o funkcjonalności (szczególnie dla usług wymagających instrukcji do użycia);
• Optymalizuj projekt CTA;
• Zwiększ zaangażowanie w e-mailu, itd.

Efekt rollover sprawia, że twoje e-maile są interesujące, przyciągając większe zainteresowanie tym, co oferujesz. Pomimo pozornie prostego projektu, jego zastosowania są liczne, a poniżej podzielę się z tobą kilkoma pomysłami na użycie obrazów rollover w twoich kampaniach e-mailowych i jak dodać je w dwóch kliknięciach w naszym edytorze drag-and-drop.

Obrazy Rollover w Kartach Produktu

Sklepy internetowe od dawna wyposażyły swoje produkty w liczne zdjęcia, recenzje wideo i animacje. W e-mailu jednak wystarczą dwa zdjęcia, aby pokazać przedmiot z różnych kątów lub na modelu.

1. Skup się na jednym produkcie z listy.

Animowane rollovery często nie mają praktycznej funkcji - służą jedynie jako elementy przyciągające wzrok, aby zdobyć uwagę klienta na chwilę. To dobry wybór, gdy chcesz wyróżnić konkretny produkt w linii.

W tym przykładzie rollover zastosowano do kategorii Nowości. Użytkownik zauważa go tylko, gdy najedzie kursorem na ten blok w e-mailu.

2. Pokaż, jak produkt wygląda na prawdziwej osobie.

Przedmioty wyglądające świetnie w katalogu mogą nie wyglądać tak samo po założeniu, co prowadzi do licznych memów "Oczekiwania kontra Rzeczywistość". Zdjęcia pokazujące produkt cyfrowy w akcji mogą pomóc w podjęciu właściwego wyboru.

Ten sklep z biżuterią dobrze to zrozumiał. Możesz oszacować rzeczywisty rozmiar biżuterii, widząc, jak różne kawałki pasują do prawdziwych osób. Jest to szczególnie ważne w przypadku pierścionków, gdzie każdy milimetr średnicy może wpływać na to, jak przedmiot wygląda na twoim palcu.

3. Pokaż przedmiot z różnych kątów.

Sklepy fizyczne oferują bezpieczniejsze doświadczenie zakupowe, ponieważ klienci mogą trzymać przedmiot i oglądać go z każdej strony. Możesz użyć efektów obrazów rollover, aby zapewnić produktom cyfrowym taką samą ekspozycję wizualną.

Dla sprzedawców odzieży mądrym posunięciem byłoby pokazanie przedmiotu z przodu i z tyłu.

4. Pozwól ludziom przyjrzeć się bliżej.

Mówiąc o internetowych sprzedawcach odzieży, materiał towaru stanowi kolejny istotny czynnik przy podejmowaniu decyzji o zakupie. Zapewnij zbliżenie, aby klient mógł ocenić materiał, design, szwy, nazwę marki lub inne ważne szczegóły.

W swojej kampanii Proskater oferuje parki z trzema różnymi typami kieszeni, co może być bardzo ważne na zimne zimy.

5. Pokaż zakres.

Zaoszczędź miejsce, pokazując dostępne rozmiary i kolory zamiast opisywać je obszernymi tekstami. Zachęć subskrybentów do kliknięcia w link internetowy i do zwiedzania, pokazując najlepsze produkty z oferty.

Efekt Najechania w Blokach Tekstowych

Wysokiej jakości wizualizacje są kluczem do efektywnego prezentowania produktów. Korzystanie z darmowych aplikacji do edycji zdjęć może pomóc w poprawie zdjęć tak, aby wyglądały profesjonalnie i atrakcyjnie dla potencjalnych nabywców.

W kampanii e-mailowej nie tylko obrazy mogą przyciągać uwagę; tekst z efektem najechania również może to zrobić. Jedynym wymaganiem technicznym jest umieszczenie go na obrazie, reszta procesu wygląda identycznie.

6. Zostaw cenę na później.

Każda karta produktu musi zawierać cenę. Ale przecież zasady są po to, żeby je łamać, prawda? Nie odstraszaj klienta ceną na samym początku, zostaw tę informację dla tych, którzy naprawdę są zainteresowani produktem.

To podobne do spacerowania po sklepie — musisz podejść bliżej do produktu, który przykuł twoją uwagę, aby zobaczyć metkę z ceną.

7. Podaj szczegółowe informacje.

Ciekawy przykład kampanii od Freshinbox: użytkownik może najechać na plakat filmowy, a obraz zmienia się na informacje o filmie:

• Oceny użytkowników;
• Czas trwania;
• Urządzenia przyjazne filmowi.

Oto inna opcja — obrazek może ukryć długi opis tekstowy zwykle zawarty w karcie produktu.

8. Ulepsz swoje posty na blogu.

Jeśli twoje newslettery są wypełnione postami na blogu, recenzjami i skrótami, urozmaic zdjęcia tytułowe, nagłówki i przyciski wezwania do działania.

9. Pokaż funkcjonalność.

Dzisiaj niewiele osób jest gotowych poświęcić czas na przeczytanie długiego tekstu o cechach i właściwościach produktu. Poza tym, taki tekst może zajmować sporo cennego miejsca w e-mailu. Zamiast opisywać funkcjonalność, lepiej jest pokazać ją za pomocą kilku obrazów. Jak to mówią, obraz jest wart więcej niż tysiąc słów.

Nie jest łatwo opisać zestaw narzędzi hummera w kilku słowach, dlatego ThinkGeek zdecydował się na lepsze rozwiązanie - pojedynczy dynamiczny obraz, który pomógł im zaprezentować zestaw w najlepszy sposób.

Projekt Rollover dla Banerów

Baner jest jednym z głównych elementów każdego e-maila i trudno sobie wyobrazić kampanię bez niego. Spróbuj je nieco ożywić.

10. Łącz banery.

Zaanonsuj swoje wielkie kampanie za pomocą kilku zmieniających się obrazów. Po najechaniu na baner, klient zobaczy nieco więcej informacji na temat tego, czego szukać na stronie internetowej.

Uwaga, obrazy są zaprojektowane w tej samej kolorystyce i stylu. Dzięki temu przełączanie wygląda naturalnie.

11. Utrzymuj napięcie.

Uruchamiasz kampanię dla subskrybentów? Nie pokazuj wszystkich kart od razu. Ukryj jakiś element, na przykład baner z warunkami rabatowymi.

12. Zastosuj animację.

Rollover zazwyczaj oznacza przełączanie między dwoma statycznymi obrazami, ale możesz dodać do niego trochę życia, wykorzystując animację.

Rollover może być również rozwiązaniem następujących problemów z GIFami:

• GIF jest wyświetlany bez tła, a klient widzi obrazy w złej kolejności.
• GIF nie jest petlony i kończy się, zanim klient do niego dotrze.
• Znajduje się blisko innych animowanych elementów.

Teraz to klient decyduje, kiedy animacja GIF się rozpocznie.

Przyciski Rollover

Przyciski CTA są niezbędne, aby zachęcić klienta do wykonania określonych działań: kliknięcia na link, zakupu produktu, obejrzenia filmu itp. Jednak wszyscy są tak zmęczeni tradycyjnymi przyciskami, że niektóre firmy zmniejszają ich liczbę w e-mailach lub nawet pozostawiają tylko tekstowe CTA. Jaki jest więc właściwy balans?

13. Ukryj CTA.

Jedną z opcji jest ukrycie przycisków w kartach produktów za pomocą elementu rollover.

W ten sposób klienci widzą przycisk tylko wtedy, gdy najeżdżają na produkt, który ich interesuje, a Twoje e-maile nie są przeładowane niepotrzebnymi elementami.

14. Ulepsz przyciski CTA.

Każdy marketer wie, że najlepszą praktyką jest umieszczenie CTA tam, gdzie wpadnie w oko czytelnika. Dzięki temu klient nie będzie musiał szukać wskazówek, co od niego chcesz. Ale co, jeśli twoje wezwanie do działania nie tylko jest dobrze sformułowane, ale również ma atrakcyjny design?

Ten przycisk jest doskonale zaprojektowany, aby skłonić cię do kliknięcia i przejścia przez kilka poziomów Super Mario, prawda?

15. Dodaj kilka przycisków.

Mogą być praktycznie takie same w kształcie i designie, ale kiedy klient na nie najedzie — dzieje się magia!

Pamiętaj, że przyciski rollover są technicznie nadal obrazkami. Nie musisz dostosowywać układu, ale ważne jest, aby przemyśleć, jaki alternatywny tekst lub przycisk będzie wyświetlany zamiast wyłączonych obrazków.

Efekt rollover dla kolaży

Elementy takie jak niezwykły układ, unikalne karty produktowe czy asymetryczne bloki sprawiają, że e-maile są niezapomniane. Ostatnio kampanie e-mailowe dość często korzystają z kolaży. Jednak nawet dobrze skomponowane obrazy można jeszcze wzmocnić.

16. Urozmaicaj swoje kolaże.

Jeśli tworzysz kolaż z pojedynczego obrazka, ożyw go, dodając efekt przenikania, gdy wskaźnik myszy nad nim się znajduje.

17. Uczyń każdy element interaktywnym.

Jeśli używasz edytora, a każdy obrazek w kolażu kryje osobny link, istnieje inny sposób na dodanie interaktywności. Możesz to zrobić dla każdego elementu osobno. Sprawdź, jak zrobił to Virtus.

Po najechaniu każdy obrazek zostaje pokolorowany, a kliknięcie na niego prowadzi do konkretnej strony produktu.

18. Użyj kilku elementów rollover.

Tak jak we wcześniejszych przykładach rollover, możesz razem używać wielu interaktywnych elementów. Oczywiście, stworzenie takich bloków wymaga wysiłku, ale efekt wygląda świetnie:

Ten konkretny przykład wymagał pewnego kodowania, ale jest wart zachodu. W przeciwieństwie do tradycyjnych GIF-ów, które w tym przypadku wyglądałyby krzykliwie, efekt rollover pozwala klientowi sprawdzić tabelę rozmiarów w wygodny sposób, bez migotania i rozpraszających elementów.

Efekt rollover z dowolnym elementem e-maila

Użyj wyobraźni, aby ożywić swoje kampanie e-mailowe. W końcu każdy obrazek, którego używasz w swoich e-mailach, można wzbogacić o efekt rollover.

19. Zachęcaj użytkowników do obejrzenia wideo.

Pamiętasz trend używania GIF-ów do przyciągania uwagi użytkowników do bloku wideo? Teraz możesz używać animacji i eksperymentować z perspektywą.

W e-mailu od Disney, obrazek zbliża się nieco, gdy na niego najedziemy. Taki efekt można łatwo osiągnąć podczas tworzenia e-maila - po prostu przyciąć obrazek i dopasować do bloku. Możesz to zrobić w wbudowanym edytorze obrazów.

20. Zbieraj opinie.

Jeśli zamiast wysyłania kolejnego e-maila prosisz o opinie w oddzielnym bloku w kampanii, spraw, aby ten blok był bardziej ekspresyjny.

Uśmiechnij się lub mrugnij do tych klientów, którzy chcą cię pochwalić, i pokaż, jak smutno ci z powodu negatywnej opinii.

21. Powiedz, co kryje się za kodem QR.

Kody QR

są często widoczne w e-mailach obok przycisków aplikacji mobilnych. Szczegółowe informacje o korzyściach z aplikacji są zazwyczaj przekazywane przez dedykowane kampanie promujące aplikację.

 

Dostarcz trochę więcej informacji za pomocą elementu najechania, aby zainspirować subskrybentów do zeskanowania kodu i zainstalowania Twojej aplikacji.

22. Zabaw się ze swoimi klientami.

Efekty najechania obrazków mogą wprowadzić do kampanii nutkę zabawy:

• Dodaj do e-maili grę z ciekawostkami;
• Dodaj quiz z ukrytymi odpowiedziami;
• Wstaw zagadkę, itd.

Odpowiedź zostanie podana bezpośrednio pod pytaniem, klienci będą musieli po prostu najechać, aby ją zobaczyć.

23. Uczyń przyciski do sieci społecznościowych bardziej urocze.

Nawet jeśli jest to najmniejszy blok zajmujący niewiele miejsca w stopce, przyciski do mediów społecznościowych nadal mogą być interesujące. Efekt najechania takich drobnych ikon można odkryć tylko przypadkowo. Ale w tym tkwi sztuczka!

Jeśli klient przeczyta e-mail do końca, kursor podświetli przycisk i stworzy efekt „wow”, którego wszyscy szukają w e-mailach! Trudno jest przejść obok takiego bloku nie zauważając go – wiele osób będzie chciało sprawdzić wszystkie ikony przynajmniej, a w najlepszym przypadku kliknąć na nie.

Jak Dodać Efekt Najechania w Edytorze

Nie jest problemem znalezienie w Internecie informacji, jak dodać efekt najechania za pomocą kodu. Przetestowaliśmy tę metodę i napotkaliśmy wiele problemów związanych z wyświetlaniem, niektóre e-maile mogą wyglądać inaczej w różnych klientach pocztowych.

W naszym edytorze można dodać elementy najechania do e-maili bezpośrednio w edytorze, bez edytowania kodu. Wystarczy włączyć odpowiednią opcję i przesłać drugi obrazek.

Aby zapewnić prawidłowe wyświetlanie obrazków najechania, pamiętaj o następujących kwestiach:

• Efekt najechania używany jest tylko z obrazkami. Bloki tekstowe, przyciski i inne elementy muszą zostać zamienione w obrazki. W przeciwnym razie, będziesz musiał dodać inne style używając CSS.
• Można przełączać się tylko między dwoma obrazkami: głównym i tym, który będzie wyświetlany po najechaniu.
• Zwróć uwagę na rozmiar. Rozmiar drugiego obrazka musi być zgodny z rozmiarem pierwszego. W przeciwnym razie, cały układ może zostać zniekształcony po najechaniu na obrazek.
• Dodaj link. Powinien istnieć jeden link dla obu obrazków.
• Dodaj alternatywny tekst. Zostanie on automatycznie dodany do obu obrazków.
• Funkcja jest obsługiwana przez Gmaila, iCloud Mail, Outlook 2003, Apple Mail, Yahoo! Mail, AOL. Dla klientów poczty, które jej nie obsługują, utwórz alternatywny blok statyczny.

Optymalizacja mobilna

Wyświetlanie efektu pojawiania się na urządzeniach mobilnych może mieć pewne osobliwości:

• Połączony z linkiem element pojawiania się może być aktywowany zbyt szybko, przenosząc użytkownika na stronę docelową.

• Bez przypisanego linku, kliknięcie na obrazek otwiera drugi obraz.

Używaj oddzielnych bloków dla komputerów i urządzeń mobilnych.

Na smartfonach możesz skonfigurować blok, który zmieni się po stuknięciu:

Pod tym blokiem możesz dodać przycisk CTA z linkiem do strony internetowej. Jeśli klient otworzy ten e-mail na komputerze, obrazek zmieni się podczas najechania myszą.

W naszym edytorze możesz wyłączyć dowolną liczbę bloków, które nie chcesz wyświetlać na określonych urządzeniach. Przydatna funkcja, prawda? Znajdziesz ją w ustawieniach bloku:

Nie jest ustawione domyślnie, co oznacza, że bloki nie są ukryte. Kliknięcie ikony komputera lub urządzenia mobilnego spowoduje ukrycie bloków dla komputerów PC lub smartfonów odpowiednio.