Jak dodać efekty najechania na obraz w WordPress (krok po kroku)

Chcesz dowiedzieć się, jak dodawać efekty najechania na obraz w WordPress?

Efekty najechania na obraz mogą sprawić, że Twoja witryna będzie bardziej interaktywna i wciągająca. Zapewnia to lepsze pierwsze wrażenie i skraca czas spędzony w witrynie.

W tym artykule pokażemy, jak krok po kroku dodawać efekty najeżdżania na obraz w WordPress.

How to add image hover effects in WordPress

Jakie są efekty po najechaniu na obraz?

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

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

Po najechaniu na obrazki możesz także w kreatywny sposób wyświetlać zdjęcia, galerie i miniatury.

Interaktywne obrazy i elementy po najechaniu mogą pomóc Twojej witrynie na wiele sposobów:

  • Popraw czas spędzany przez odwiedzających w Twojej witrynie
  • Daj ci kreatywne sposoby prezentowania treści odwiedzającym
  • Poinformuj użytkowników, że element witryny można kliknąć

Jak tworzyć efekty najechania na obraz w WordPress

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

Dzięki wtyczce nie musisz tracić czasu na edycję, formatowanie i dodawanie CSS w celu tworzenia efektów graficznych. Po prostu działa.

Istnieją różne rodzaje wtyczek, których można użyć do tworzenia unikalnych efektów i animacji po najechaniu na obraz.

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

1. Dodawanie efektów kursora obrazu w WordPress

Odwracane pudełko to pudełko, które przewraca się, gdy najedzie na nie mysz.

Możesz dodać tę animację do swoich obrazów, aby odsłonić tekst, a nawet zmienić obraz po najechaniu kursorem.

Image hover flipbox

Możesz kontrolować sposób odwracania obrazu, wraz z projektem obrazu po obu stronach.

Jeśli jesteś fotografem , możesz użyć tego do zaprezentowania swojej pracy i oddzielenia portfolio.

Najłatwiejszym sposobem dodania efektów flipbox obrazu jest użycie wtyczki WordPress. Wtyczka umożliwia szybkie tworzenie i dostosowywanie tych efektów.

Zalecamy używanie wtyczki Flipbox – Awesomes Flip Boxes Image Overlay . To najlepsza wtyczka Flipbox i Image Hover do WordPress.

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

Image hover flipbox plugin settings

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

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem , jak tworzyć nakładki flipbox i dymki w WordPress .

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

Efekty powiększenia obrazu pozwalają użytkownikom zobaczyć szczegóły, których nie byliby w stanie zobaczyć na obrazie o normalnym rozmiarze.

To świetny efekt w przypadku 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.

Image zoom magnify

Najłatwiejszym sposobem dodania powiększenia obrazu i efektów powiększania do obrazów jest użycie wtyczki WordPress.

Zalecamy używanie wtyczki WP Image Zoom . Ta wtyczka umożliwia po prostu dodawanie efektów powiększania i powiększania do zdjęć.

WP Image Zoom plugin settings

Jest również wyposażony w funkcje umożliwiające wybór kształtu obiektywu zmiennoogniskowego, poziomu powiększenia i wiele więcej.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem , jak dodać powiększające powiększenie obrazów w WordPress .

3. Dodawanie efektów animacji obrazu w WordPress

Istnieje wiele dodatkowych efektów najechania kursorem, które możesz dodać do WordPressa.

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

Image animation effect hover

Aby dodać takie efekty po najechaniu, zalecamy użycie wtyczki Image Hover Effects Ultimate .

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

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywacja wtyczki Image Hover Effects Ultimate . Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku dotyczącym instalacji wtyczki WordPress .

Po zainstalowaniu i aktywowaniu wtyczki należy kliknąć „Image Hover” na swoim panelu administracyjnym WordPress. Spowoduje to wyświetlenie ośmiu różnych efektów najechania na obraz, które możesz wybrać.

Choose image hover effect

W tym samouczku użyjemy efektu „Efekty napisów”. Spowoduje to dodanie animowanego tekstu do obrazu po najechaniu myszą.

Najpierw kliknij pole „Efekty napisów”. Spowoduje to wyświetlenie menu z różnymi opcjami animacji do wyboru.

Image hover animation create style

Po znalezieniu odpowiedniego efektu graficznego kliknij „Utwórz styl”.

W wyskakującym okienku nazwij efekt najechania kursorem i wybierz układ. Wybrany numer układu odpowiada uporządkowanej sekwencji obrazów.

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

Name new image hover

Na następnym ekranie będziesz mieć różne opcje dostosowania efektu najechania kursorem.

Jednak pozostawimy domyślne opcje animacji.

Hover animation settings

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

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

Edit hover animation

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

Aby przesłać obraz, kliknij pole poniżej tytułu „Obraz” i prześlij lub wybierz obraz z biblioteki multimediów.

Change image hover image

Możesz także dodać łącze i tekst przycisku, jeśli chcesz, aby obraz przenosił użytkowników na inną stronę w Twojej witrynie.

Po zakończeniu kliknij „Prześlij”.

Image hover shortcode

Aby dodać obraz do swojej witryny, skopiuj krótki kod z pola „Krótki kod”.

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

Paste hover animation shortcode

Nie zapomnij kliknąć „Opublikuj” lub „Aktualizuj”, aby zapisać zmiany i aktywować efekt najechania kursorem.

4. Dodawanie efektów wyskakujących okienek w WordPress

Powyższe wtyczki pomogą Ci dodać funkcje, takie jak flipboxy, efekty najechania kursorem, animacje i nie tylko.

A jeśli chcesz dodać inny efekt najechania na obraz, którego nie obejmują powyższe wtyczki?

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

Możesz edytować swoje pliki CSS ręcznie lub dodawać je za pomocą dostosowywania WordPressa, jednak użycie wtyczki jest najłatwiejszą opcją.

Zalecamy użycie wtyczki CSS Hero . Ta wtyczka umożliwia edycję prawie każdego stylu CSS w witrynie WordPress bez pisania linii kodu.

CSS hover effects

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

Aby uzyskać więcej informacji na temat instalowania wtyczki, zapoznaj się z naszym przewodnikiem jak zainstalować wtyczkę WordPress .

Po zainstalowaniu wtyczki należy kliknąć przycisk „Przejdź do aktywacji produktu”.

Activate CSS Hero

To poprowadzi Cię przez proces aktywacji wtyczki.

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

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

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

Zamierzamy dodać wyskakujące okienko obrazu po najechaniu kursorem. Najpierw kliknij obraz, który chcesz edytować, a następnie kliknij „Fragmenty”.

Następnie kliknij „Efekty najechania”.

CSS Hero hover effects

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

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

Save image hover changes

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak dodawać efekty najechania na obraz w WordPress. Możesz również zapoznać się z naszym przewodnikiem , jak optymalizować obrazy w internecie , oraz naszym przewodnikiem po pozycjonowaniu obrazów dla początkujących .

Jeśli podobał Ci się ten artykuł, zasubskrybuj nasz kanał YouTube z samouczkami wideo WordPress. Możesz nas również znaleźć na Twitterze i Facebooku .