Jak tworzyć obrazy rollover dla wiadomości e-mail i stron produktów


Obrazy, które zmieniają się, aby pokazać inny, gdy najedziesz na niego kursorem, nazywane są obrazami Rollover. To wspaniały sposób na zaprezentowanie produktów lub uczynienie treści bardziej interaktywnymi dla odwiedzających. Te obrazy są również szeroko stosowane w e-mailach marketingowych, gdzie być może są mniej mile widziane. Obrazy są tworzone za pomocą CSS i HTML, ale jeśli szukasz prostej metody opartej na interfejsie użytkownika, aby je utworzyć, narzędzie Rollover FreshInbox jest tym, czego potrzebujesz.

Zanim zaczniesz, upewnij się, że masz dwa obrazy, które chcesz uwzględnić w obrazie rollover. Z dwóch obrazów jeden pojawi się, gdy kursor nie jest nad nim ustawiony, a drugi pojawi się, gdy kursor przesunie się na obraz. Twoje obrazy mogą być w formacie PNG lub JPG. Prześlij je na dysk w chmurze lub usługę udostępniania obrazów, taką jak Imgur, a następnie przejdź do narzędzia Rollover FreshInbox.

W głównym adresie URL obrazu wprowadź adres URL obrazu, który powinien pojawić się, gdy kursor myszy nie jest umieszczony nad obrazem. Określ szerokość i wysokość obrazu, a w polu Adres URL alternatywnego obrazu wprowadź adres URL obrazu, który pojawi się po najechaniu na niego kursorem.

Narzędzie Rollover FreshInbox

Następnie wprowadź przekierowanie w polu „Link”. Jeśli użytkownik kliknie Twój obraz po najechaniu myszą, zostanie przeniesiony do adresu URL, który tu wpisujesz. Wpisz tekst ALT i kliknij „Generuj”. Zobaczysz podgląd obrazu po prawej stronie i otrzymasz kody do dodania obrazu do Twojej witryny lub e-maila.

Jeśli chcesz, aby obraz był responsywny, włącz opcję „Skaluj obraz do szerokości kontenera”, ale rób to tylko wtedy, gdy wiesz, jak pracować z kontenerami. Pozostaw tę opcję niezaznaczoną dla normalnego obrazu z najazdem. Aby wstawić go do wiadomości e-mail lub strony internetowej, skopiuj kod i wklej go w tagu, dla którego jest przeznaczony, tj. Nagłówek wiadomości e-mail i Treść strony internetowej. To wszystko, czego potrzeba, aby utworzyć obraz rollover.

Odwiedź narzędzie Rollover FreshInbox