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.
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.
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.
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.
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ęć.
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.
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ć.
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.
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”.
Na następnym ekranie będziesz mieć różne opcje dostosowania efektu najechania kursorem.
Jednak pozostawimy 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ć 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.
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”.
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.
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.
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”.
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”.
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.
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 .
