Jak dodać efekty Hover obrazu w WordPress (krok po kroku)

Chcesz dowiedzieć się, jak dodać efekty hover obrazu w WordPress?

Efekty unoszenia obrazu mogą sprawić, że Twoja witryna będzie bardziej interaktywna i angażująca. Tworzy to lepsze pierwsze wrażenie i poprawia czas spędzony na stronie.

W tym artykule pokażemy, jak krok po kroku dodać efekty najechania obrazu w WordPress.

Co To Są Efekty Hover Obrazu?

Efekty najechania na obraz umożliwiają dodawanie interaktywnych elementów do obrazów statycznych, takich jak animacje, efekt powiększenia, wyskakujące okienko i inne.

Na przykład możesz mieć obrazy, które odwracają się, aby ujawnić ceny lub linki do Twojego portfolio.

Zawieszanie obrazów daje również kreatywny sposób wyświetlania zdjęć, galerii i miniatur.

Interaktywne obrazy i elementy unoszące się mogą pomóc Twojej witrynie na wiele sposobów:

• Zwiększ czas spędzany przez odwiedzających na twojej stronie
• Daj twórcze sposoby prezentowania treści odwiedzającym
• Poinformuj użytkowników, że element witryny jest klikalny

Jak stworzyć efekty Hover obrazu w WordPress

Najlepszym sposobem na dodanie efektów najechania obrazu do witryny WordPress jest użycie wtyczki WordPress.

Dzięki wtyczce nie musisz tracić czasu na edytowanie, formatowanie i dodawanie CSS, aby tworzyć efekty obrazu. To po prostu działa.

Istnieją wszelkiego rodzaju wtyczki, których możesz użyć do tworzenia unikalnych efektów najazdu i animacji obrazu.

W tym samouczku pokażemy Ci cztery różne sposoby dodawania potrzebnych efektów najazdu.

• Dodawanie efektów Flipbox Hover obrazu w WordPress
• Dodawanie powiększenia obrazu i powiększenia efektów w WordPress
• Dodawanie efektów animacji obrazu w WordPress
• Dodawanie efektów wyskakujących po najechaniu na obraz w WordPress

1. Dodawanie efektów Flipbox Hover obrazu w WordPress

Flip box to pudełko, które przewraca się, gdy mysz nad nim unosi się.

Możesz dodać tę animację do obrazów, aby wyświetlić tekst, a nawet zmienić obraz po najechaniu kursorem.

Możesz kontrolować sposób, w jaki obraz się odwraca, wraz z wyglądem obrazu po obu stronach.

Jeśli jesteś fotografem, możesz użyć tego, aby zaprezentować swoją pracę i rozdzielić portfolio.

Najprostszym sposobem na dodanie efektów flipbox obrazu jest wtyczka WordPress. Wtyczka pozwala szybko tworzyć i dostosowywać te efekty.

Zalecamy użycie wtyczki Flipbox-Awesomes Flip Boxes Image Overlay. To najlepsza wtyczka flipbox i image hover dla WordPress.

Ta wtyczka pozwala po prostu dodać niestandardowe efekty flipbox do obrazów WordPress.

Zawiera dziesiątki różnych efektów animacji i gotowych szablonów. Możesz nawet kontrolować kolory i dodawać własne niestandardowe CSS.

Aby uzyskać więcej informacji, zobacz nasz przewodnik, jak tworzyć nakładki flipbox i hovers w WordPress.

2. Dodawanie powiększenia obrazu i powiększenia efektów w WordPress

Efekty powiększenia obrazu pozwalają użytkownikom zobaczyć szczegóły, których nie mogliby zobaczyć na obrazie o normalnej wielkości.

Jest to świetny efekt dla samouczków i obrazów o wysokim poziomie szczegółowości.

Możesz również użyć go w swoim sklepie internetowym, aby dodać efekt powiększenia, taki jak Amazon.

Najprostszym sposobem na dodanie powiększenia obrazu i powiększenia efektów do obrazów jest użycie wtyczki WordPress.

Zalecamy korzystanie z wtyczki WP Image Zoom. Ta wtyczka pozwala po prostu dodawać zoom i powiększać efekty do obrazów.

Jest również wyposażony w funkcje, które pozwalają wybrać kształt obiektywu zoom, poziom zoomu i wiele więcej.

Aby uzyskać więcej informacji, zobacz nasz przewodnik, Jak dodać powiększenie powiększające dla obrazów w WordPress.

3. Dodawanie efektów animacji obrazu w WordPress

Istnieją różnego rodzaju dodatkowe efekty hover można dodać do WordPress.

Na przykład masz animowane galerie obrazów, obrazy lightbox, obrazy porównawcze, nakładki tekstowe i inne.

Aby dodać efekty najechania, takie jak te, zalecamy użycie wtyczki efekty najechania obrazu Ultimate.

Ta wtyczka jest bardzo lekka, więc nie wpłynie na wydajność Twojej witryny i szybkość ładowania. Jest również bardzo łatwy w użyciu. Możesz dodać unikalne efekty obrazu za pomocą kilku kliknięć.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować Ultimate Plugin efekty Hover obrazu. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po zainstalowaniu i aktywowaniu wtyczki musisz kliknąć „najedź kursorem obrazu” w panelu administracyjnym WordPress. Spowoduje to wyświetlenie ośmiu różnych efektów najechania na obraz, z których możesz wybierać.

W tym samouczku użyjemy efektu „efekty podpisów”. Spowoduje to dodanie animowanego tekstu nad obrazem po najechaniu kursorem myszy.

Najpierw kliknij pole „efekty podpisów”. Wyświetla menu różnych opcji animacji do wyboru.

Po znalezieniu efektu obrazu, który Ci się podoba, kliknij „Utwórz styl”.

W wyskakującym okienku nadaj nazwę efekt najazdu i wybierz układ. Wybrany numer układu odpowiada uporządkowanej sekwencji obrazów.

Pamiętaj, aby kliknąć „Zapisz”.

Na następnym ekranie będziesz mieć wiele opcji, aby dostosować efekt najechania.

Zostawimy jednak domyślne opcje animacji.

Jeśli wprowadzisz zmiany, zobaczysz je w polu „Podgląd”.

Aby zmienić domyślny obraz, najedź kursorem na obraz i kliknij opcję „Edytuj”.

W tym wyskakującym okienku możesz zmienić tytuł i opis, które pojawią się po najechaniu kursorem.

Aby przesłać obraz, kliknij pole pod tytułem „obraz” i prześlij lub wybierz obraz z biblioteki multimediów.

Możesz również dodać link i tekst przycisku, jeśli chcesz, aby twój obraz przeniósł użytkowników na inną stronę w Twojej witrynie.

Po zakończeniu kliknij przycisk „Wyślij”.

Aby dodać obraz do swojej witryny, skopiuj skrócony kod w polu „skrócony Kod”.

Następnie otwórz dowolną stronę, post lub widżet, w którym ma się pojawić obraz, i wklej krótki kod.

Upewnij się, że klikasz „Publikuj” lub „Aktualizuj”, aby zapisać zmiany i aktywować efekt najechania na obraz.

4. Dodawanie efektów wyskakujących po najechaniu na obraz w WordPress

Powyższe wtyczki pomogą Ci dodać funkcje, takie jak klapki, efekty najazdu, animacje i inne.

Co zrobić, jeśli chcesz dodać inny efekt najazdu obrazu, który nie jest objęty powyższymi wtyczkami?

Najlepszym sposobem na to jest użycie niestandardowej wtyczki CSS WordPress. Pozwala to na wprowadzanie zmian wizualnych w obrazach bez konieczności edytowania kodu.

Możesz edytować pliki CSS ręcznie lub dodawać CSS za pomocą WordPress customizer, jednak korzystanie z wtyczki jest najłatwiejszą opcją.

Zalecamy korzystanie z wtyczki CSS Hero. Ta wtyczka pozwala edytować prawie każdy styl CSS w witrynie WordPress bez pisania linii kodu.

Istnieją wszelkiego rodzaju wbudowane efekty CSS specjalnie dla obrazów.

Aby uzyskać więcej informacji na temat instalacji wtyczki, zobacz nasz przewodnik Jak zainstalować wtyczkę WordPress.

Po zainstalowaniu wtyczki musisz kliknąć przycisk „Przejdź do Aktywacji produktu”.

To poprowadzi Cię przez proces aktywacji wtyczki.

Po aktywacji wtyczki możesz rozpocząć dostosowywanie obrazów.

Otwórz stronę lub post z obrazem lub obrazami, które chcesz animować, i kliknij „CSS Hero” na górze strony.

Spowoduje to otwarcie menu edytora, w którym możesz dodać różne efekty CSS.

Dodamy wyskakujące okienko na efekt najazdu. Najpierw musisz kliknąć obraz, który chcesz edytować, a następnie kliknąć „urywki”.

Następnie kliknij „efekty najazdu”.

Spowoduje to wyświetlenie menu różnych efektów CSS. Następnie wybierz ’.HVR-pop „efekt i kliknij „Zastosuj”.

Kliknij „Zapisz i opublikuj”, a efekt CSS zostanie automatycznie zastosowany do Twoich obrazów.

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodać efekty hover obrazu w WordPress. Możesz również zobaczyć nasz przewodnik na temat optymalizacji obrazów w Internecie i nasz przewodnik dla początkujących do SEO obrazu.

Jeśli podoba Ci się ten artykuł, zasubskrybuj nasz kanał YouTube dla samouczków wideo WordPress. Znajdziesz nas również na Twitterze i Facebooku.