Jak dodać efekty najechania myszką na obrazy w WordPress (krok po kroku)

Wiemy, ile wysiłku wkłada się w wybór idealnych zdjęć na stronę internetową. Ale czasami nawet najlepsze zdjęcia mogą wydawać się nieco statyczne i nie przyciągać pełnej uwagi odwiedzającego.

Dodanie prostej animacji najechania myszką może być tym drobnym szczegółem, który sprawi, że Twoja strona będzie wyglądać bardziej profesjonalnie i angażująco. Wielu uważa, że wymaga to niestandardowego kodu, ale znaleźliśmy kilka łatwych sposobów, aby zrobić to w naszych projektach bez żadnego kodowania.

W tym artykule przeprowadzimy Cię przez pięć prostych, krok po kroku metod dodawania pięknych efektów najechania myszką na obrazy w WordPress. Omówimy wszystko, od prostych zanikania po interaktywne flipboxy.

Dlaczego warto używać efektów najechania myszką na obrazy w WordPress?

Efekty najechania myszką na obrazek pozwalają dodawać krótkie animacje do obrazków, takie jak powiększenia, zanikania, wyskakujące okienka i inne. Sprawi to, że Twoje obrazy będą bardziej interesujące i angażujące, nawet jeśli strona zawiera wiele obrazów.

Możesz również użyć efektów najechania myszką, aby przyciągnąć uwagę odwiedzającego do najważniejszych treści. Na przykład możesz użyć animacji CSS, aby wyróżnić logo Twojej witryny lub wezwanie do działania.

Zanurzmy się w 5 przyjaznych dla początkujących sposobach dodawania różnych efektów najechania na obrazek do Twojej witryny WordPress. Po prostu użyj poniższych szybkich linków, aby przejść bezpośrednio do efektu, którego chcesz użyć:

• Opcja 1: Dodaj efekty Flipbox w WordPress (szybko i łatwo)
• Opcja 2: Dodaj efekty powiększenia i zbliżenia obrazu (najlepsze dla sklepów internetowych)
• Opcja 3: Zanikanie obrazów po najechaniu myszą w WordPress (najlepsze dla wydajności)
• Opcja 4: Dodaj wiele efektów najechania myszką na obrazy w WordPress (najbardziej konfigurowalne)
• Opcja 5: Dodaj efekty wyskakujących okienek najechania myszką na obrazy za pomocą wizualnego edytora CSS
• Często zadawane pytania dotyczące efektów najechania na obrazek
• Dowiedz się więcej sposobów używania i zarządzania obrazami w WordPress

Opcja 1: Dodaj efekty Flipbox w WordPress (szybko i łatwo)

Najprostszym sposobem na dodanie efektów najechania myszką w WordPressie jest użycie skrzynek obracających się (flipboxów). Flipbox to po prostu pudełko, które obraca się po najechaniu na nie myszką. Pozwala to na wyświetlenie innego obrazu, tekstu lub wezwania do działania po najechaniu myszką.

Jeśli jesteś fotografem, możesz umieścić zdjęcie po jednej stronie flipboxa, a informacje o modelu aparatu lub rozdzielczości po drugiej stronie.

Jeśli sprzedajesz cyfrową sztukę lub grafikę online, możesz nawet dodać przycisk, który odwiedzający mogą kliknąć, aby kupić to zdjęcie.

Najłatwiejszym sposobem na tworzenie flipboxów jest użycie Flipbox – Awesomes Flip Boxes Image Overlay. Ten darmowy plugin oferuje kilka różnych stylów flipboxów z mieszanką obrazów, tekstu i przycisków wezwania do działania.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Flipbox. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress.

Po zainstalowaniu i aktywowaniu wtyczki możesz utworzyć swoje pierwsze pudełko obrotowe, przechodząc do Pudełko obrotowe » Utwórz nowe.

Pokazuje to wszystkie różne szablony, których możesz użyć.

Aby wybrać projekt, kliknij przycisk „Utwórz styl”.

W pojawiającym się oknie wpisz nazwę dla projektu flipbox. Jest to tylko do Twojej wiadomości, więc możesz użyć czegokolwiek chcesz.

Możesz również wybrać układ, którego chcesz użyć, klikając na pierwszy, drugi lub trzeci.

Po wybraniu stylu flipbox możesz zmienić czcionki, dopełnienie i marginesy.

Następnie możesz dodać tekst, obrazy i ikony po obu stronach flipboxa.

Gdy będziesz zadowolony z wyglądu flipboxa, możesz dodać więcej pól, klikając „+” w sekcji „Dodaj nowe pola flipbox”.

Pozwala to na tworzenie wielu flipboxów o tym samym stylu, a następnie organizowanie ich w kolumnach i wierszach.

Na przykład, możesz stworzyć flipbox dla każdego planu cenowego.

Kupujący mogą następnie najechać myszką na plan, aby zobaczyć koszt.

Kiedy będziesz zadowolony z animacji najechania myszką, możesz dodać je do dowolnej strony, wpisu lub obszaru gotowego na widżety, używając krótkiego kodu, który wtyczka automatycznie udostępnia.

Aby uzyskać instrukcje krok po kroku, zapoznaj się z naszym przewodnikiem na temat tworzenia nakładek i efektów najechania flipbox.

Opcja 2: Dodaj efekty powiększenia i zbliżenia obrazu (najlepsze dla sklepów internetowych)

Efekty powiększenia pozwalają użytkownikom zobaczyć szczegóły, które normalnie nie byłyby widoczne. Jeśli masz sklep e-commerce lub rynek online, pozwala to kupującym na dokładniejsze zapoznanie się z produktem, co może przynieść Ci więcej sprzedaży.

Efekty powiększenia mogą również dodać więcej interakcji i zaangażowania na Twojej stronie.

Na przykład możesz tworzyć proste łamigłówki i gry, które zachęcają odwiedzających do dostrzegania drobnych szczegółów na Twoich obrazach. Może to sprawić, że pozostaną na Twojej stronie dłużej, co zwiększy liczbę wyświetleń strony i zmniejszy współczynnik odrzuceń.

Najlepszym pluginem WordPress do dodawania efektów powiększenia i lupy obrazu jest WP Image Zoom.

Ten plugin efektów najechania myszką pozwala dostosować wygląd i działanie efektu powiększenia na całej Twojej stronie WordPress. Następnie możesz włączyć powiększenie dla dowolnego obrazu.

W tym przewodniku użyjemy darmowej wersji, ale jeśli chcesz więcej opcji dostosowywania, możesz sprawdzić WP Image Zoom Pro. Więcej szczegółów znajdziesz w naszej recenzji WP Image Zoom.

Najpierw musisz zainstalować i aktywować wtyczkę WP Image Zoom . Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji musisz przejść do strony WP Image Zoom » Ustawienia powiększenia z paska bocznego administratora WordPress. Jeśli nie jest jeszcze zaznaczone, kliknij „Ustawienia powiększenia”.

Na początek możesz wybrać jeden z kilku różnych kształtów soczewki.

Możesz również wybrać typ kursora, ustawić efekt animacji, włączyć powiększenie po najechaniu myszką lub kliknięciu myszką oraz zdefiniować poziom powiększenia.

Kiedy będziesz zadowolony z konfiguracji powiększenia, możesz dodać efekt do dowolnego obrazu. W edytorze bloków Gutenberg kliknij, aby wybrać obraz, do którego chcesz dodać efekt powiększenia. Lub, najpierw prześlij obraz do WordPressa.

W menu po prawej stronie wybierz przycisk „z powiększeniem”.

Jeśli używasz WooCommerce, możesz włączyć powiększanie wszystkich obrazów produktów w ustawieniach wtyczki. Jest to idealne rozwiązanie, jeśli chcesz włączyć powiększanie na całej swojej sklepie internetowym bez konieczności aktualizowania każdego produktu indywidualnie.

W zakładce „Ustawienia ogólne” zaznacz pole „Włącz powiększenie…”, a klienci będą mogli powiększyć dowolny obraz produktu.

Więcej szczegółów znajdziesz w naszym przewodniku na temat dodawania powiększenia obrazów w WordPressie.

Opcja 3: Zanikanie obrazów po najechaniu myszą w WordPress (najlepsze dla wydajności)

Inną opcją jest prosta animacja zanikania, w której Twoje obrazy powoli pojawiają się lub znikają, gdy odwiedzający najedzie na nie kursorem. To świetny sposób na wyróżnienie obrazów, gdy użytkownik porusza się po stronie.

Możesz użyć tego efektu, aby poprowadzić odwiedzającego przez treść lub nawet dodać element opowiadania do posta.

W przeciwieństwie do niektórych złożonych animacji, efekt zanikania jest bardzo subtelny. Nie wpłynie negatywnie na doświadczenie czytania ani nie zakłóci Twoich wysiłków związanych z optymalizacją obrazu.

To sprawia, że jest to idealny wybór dla stron z wieloma zdjęciami w wysokiej rozdzielczości.

Najłatwiejszym sposobem na dodanie tego efektu jest użycie darmowego pluginu WPCode. Pozwala on na dodawanie niestandardowego CSS bez konieczności bezpośredniej edycji plików motywu, co jest znacznie bezpieczniejsze.

Tutaj w WPBeginner używamy WPCode do zarządzania wszystkimi niestandardowymi fragmentami kodu, które zasilają naszą stronę. Jest to niezawodne narzędzie, które polecamy do dodawania wszelkiego rodzaju niestandardowego kodu. Aby uzyskać więcej informacji, możesz przeczytać naszą pełną recenzję WPCode.

Pełne instrukcje dotyczące używania WPCode dla tego efektu znajdziesz w naszym przewodniku jak uzyskać efekt zanikania obrazków po najechaniu myszką w WordPress.

Opcja 4: Dodaj wiele efektów najechania myszką na obrazy w WordPress (najbardziej konfigurowalne)

Możesz chcieć użyć wielu różnych efektów najechania myszką na obraz na swojej stronie internetowej. Na przykład, jeśli masz wiele galerii obrazów, możesz chcieć animować te zdjęcia w różny i interesujący sposób.

Najlepszym sposobem na dodanie wielu efektów najechania myszką do WordPressa jest użycie Image Hover Effects Ultimate. Ten darmowy plugin obsługuje szeroki zakres efektów, które można dostosować do własnych potrzeb.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i aktywować wtyczkę Image Hover Effects Ultimate. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku na temat jak zainstalować wtyczkę WordPress.

Po aktywacji wybierz „Efekt najechania obrazem” z panelu WordPress. Zobaczysz teraz wszystkie różne typy efektów najechania, których możesz użyć.

W tym przewodniku wybierzemy „Efekty podpisów”, które dodają animowany tekst na obrazku.

Możesz stworzyć dowolny efekt najechania, jaki chcesz, chociaż dostępne opcje mogą się różnić.

Po kliknięciu „Efekty napisów” zobaczysz wszystkie dostępne style.

Po prostu najedź kursorem na styl, aby zobaczyć podgląd animacji.

Gdy znajdziesz styl, który Ci się podoba, kliknij przycisk „Utwórz styl”.

Otworzy się okno podręczne, w którym możesz wybrać dokładny układ, którego chcesz użyć. Po prostu kliknij pierwszy, drugi lub trzeci.

Po zakończeniu wpisz tytuł w polu „Nazwa”. Jest to tylko do Twojej wiadomości, więc możesz użyć czegokolwiek, co pomoże Ci zidentyfikować animowany obraz w panelu administracyjnym WordPress.

Następnie kliknij „Zapisz”.

To przeniesie Cię do ekranu, na którym możesz dostosować efekt najechania myszką. Obejmuje to zmianę szerokości i wysokości treści, zwiększenie odstępów i dodanie cienia pola.

W miarę wprowadzania zmian podgląd na żywo będzie się automatycznie aktualizował, dzięki czemu możesz wypróbować różne ustawienia, aby zobaczyć, co wygląda najlepiej.

W przypadku niektórych efektów najechania możesz zmienić kierunek efektu.

Na przykład, na poniższym obrazie zmieniamy kierunek efektu „żaluzji”, tak aby szedł w prawo.

Możesz również sprawić, że efekt będzie szybszy lub wolniejszy, przesuwając suwak „Czas efektu”. Jeśli użyjesz wyższej liczby, efekt będzie trwał dłużej. Jeśli zmniejszysz liczbę, efekt będzie szybszy i krótszy.

Jeśli masz na myśli konkretną liczbę, możesz ją wpisać w polu obok suwaka „Czas efektu”.

Gdy będziesz zadowolony z konfiguracji efektu, czas dodać zawartość.

Aby to zrobić, najedź kursorem na sekcję „Podgląd” i kliknij przycisk „Edytuj”, gdy się pojawi.

Otwiera to okno dialogowe, w którym można wpisać tytuł i krótki opis.

To jest treść, która pojawi się, gdy odwiedzający najedzie kursorem na obraz.

Następnie możesz zastąpić domyślny obrazek własnym zdjęciem.

Po prostu najedź kursorem na zdjęcie zastępcze, a następnie kliknij „Wybierz obrazek”, gdy się pojawi.

Możesz teraz wybrać obraz z biblioteki multimediów WordPress lub przesłać nowy plik z komputera.

Czasami możesz używać efektów najechania, aby wysyłać ludzi do innych obszarów swojego bloga WordPress lub strony internetowej. Na przykład, jeśli prowadzisz sklep internetowy, możesz dodać link do produktu pokazanego na obrazku.

Możesz to zrobić, dodając przycisk CTA, który pojawi się pod krótkim opisem.

Aby rozpocząć, dodaj adres URL w polu „Link”.

Następnie dodaj swoją wiadomość, wpisując ją w polu Tekst przycisku.

Gdy będziesz zadowolony z wprowadzonych informacji, kliknij „Prześlij”.

Teraz, gdy dodałeś tekst, dobrym pomysłem jest kliknięcie zakładki „Typografia”.

Tutaj możesz zmienić rozmiar czcionki, dodać cień do tekstu, powiększyć lub zmniejszyć marginesy i wiele więcej.

Jeśli używasz przycisku CTA, upewnij się, że klikniesz, aby rozwinąć sekcję „Ustawienia przycisku”.

Tutaj możesz zmienić wygląd przycisku w jego domyślnym stanie i stanie „hover”, czyli jak wygląda, gdy odwiedzający najeżdża na niego kursorem. Możesz również zmienić wyrównanie przycisku.

Większość tych ustawień jest prosta, więc warto je przejrzeć, aby zobaczyć, jakie różne rodzaje efektów można stworzyć.

Gdy będziesz zadowolony z podglądu, kliknij „Zapisz”, aby zachować zmiany.

Czy chcesz utworzyć wiersz lub kolumnę animowanych obrazów?

Na przykład, możesz użyć efektów najechania myszką na obrazy, aby reklamować najlepsze cechy swojego produktu. Na poniższym obrazku odwiedzający może najechać myszką na każde zdjęcie, aby przeczytać o innej funkcji.

Chcesz stworzyć cały wiersz lub galerię tych animowanych obrazków? Żaden problem. Aby dodać kolejny, po prostu przewiń w górę do sekcji „Dodaj nowy obrazek z efektem najechania”.

Tutaj kliknij przycisk „+”.

Otworzy się okno, w którym możesz utworzyć nowy efekt najechania myszką na obrazek, postępując zgodnie z powyższym procesem.

Gdy będziesz zadowolony z konfiguracji efektu, kliknij przycisk „Prześlij”, aby zapisać zmiany.

Aby stworzyć więcej efektów najechania, po prostu powtórz ten sam proces opisany powyżej.

Gdy będziesz zadowolony z ustawień efektów, przewiń do pola „Krótki kod”. Możesz dodać ten efekt najechania myszką do dowolnej strony lub wpisu, kopiując i wklejając ten kod.

Aby uzyskać więcej informacji na temat umieszczania skróconego kodu, zapoznaj się z naszym przewodnikiem jak dodać skrócony kod w WordPress.

Opcja 5: Dodaj efekty wyskakujących okienek najechania myszką na obrazy za pomocą wizualnego edytora CSS

Wiele z powyższych wtyczek pozwala na tworzenie zaawansowanych animowanych obrazów, takich jak flipboxy, a następnie umieszczanie ich na stronie za pomocą kodu skrótu. Czasami jednak możesz chcieć dodać efekt najechania na obraz, który już znajduje się na stronie.

W tym przypadku możesz użyć wtyczki niestandardowego CSS w WordPressie. Pozwala to na wprowadzanie wizualnych zmian w obrazach bez kodowania, a także nie musisz osobno tworzyć efektów najechania w panelu administracyjnym WordPressa.

Tutaj polecamy użycie CSS Hero. Ta wtyczka pozwala edytować prawie każdy styl CSS na Twojej stronie WordPress za pomocą wizualnego edytora. Posiada również wbudowane efekty najechania myszką, które można zastosować do obrazów jednym kliknięciem przycisku.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie pluginu CSS Hero. Aby uzyskać więcej szczegółów na temat instalacji pluginu, zapoznaj się z naszym przewodnikiem jak zainstalować plugin WordPress.

Po zainstalowaniu wtyczki będziesz musiał kliknąć przycisk „Przejdź do aktywacji produktu”.

Zostaniesz przekierowany na stronę internetową CSS Hero, gdzie możesz zalogować się na swoje konto i uzyskać klucz licencyjny. Po prostu postępuj zgodnie z instrukcjami na ekranie, a po kilku kliknięciach zostaniesz przekierowany z powrotem na swoją stronę.

Następnie otwórz stronę lub wpis, który zawiera obraz, który chcesz animować. Następnie kliknij „CSS Hero” na pasku administracyjnym WordPress.

Spowoduje to otwarcie tej strony lub wpisu w edytorze CSS Hero.

Tutaj kliknięcie na dowolny element treści otworzy panel ze wszystkimi ustawieniami, których można użyć do dostosowania tej treści. Mając to na uwadze, po prostu kliknij, aby wybrać dowolny obraz.

W menu po lewej stronie wybierz zakładkę „Fragmenty”.

Następnie kliknij „Efekty najechania”. Zobaczysz teraz wszystkie różne efekty CSS.

Aby wyświetlić podgląd efektu, po prostu najedź kursorem na jego niebieski przycisk w menu po lewej stronie.

Gdy znajdziesz efekt, którego chcesz użyć, po prostu kliknij „Zastosuj”.

Ważne: Domyślnie CSS Hero zastosuje ten efekt najechania do każdego obrazu na stronie. Jest to świetne do tworzenia jednolitego stylu, ale jeśli chcesz animować tylko jeden, konkretny obraz, jedna z innych metod wtyczek opisanych w tym przewodniku może być lepszym wyborem.

Aby wprowadzić tę zmianę na żywo, kliknij przycisk „Zapisz i publikuj”.

Często zadawane pytania dotyczące efektów najechania na obrazek

Pomagając tysiącom użytkowników WordPress, usłyszeliśmy już chyba każde pytanie dotyczące dodawania interaktywnych elementów do strony internetowej. Oto niektóre z najczęstszych pytań, które otrzymujemy na temat efektów najechania myszką na obrazy.

Czy efekty najechania na obrazek działają na urządzeniach mobilnych?

Efekty najechania myszką są przeznaczone dla kursorów myszy, więc nie działają na urządzeniach dotykowych, takich jak smartfony i tablety. Na urządzeniach mobilnych obrazek zazwyczaj wyświetla swój domyślny stan bez żadnej animacji.

Niektóre wtyczki oferują opcje zapasowe, takie jak wyzwalanie animacji przy pierwszym dotknięciu. Z tego powodu zawsze zalecamy sprawdzanie swoich stron na smartfonie lub tablecie, aby zobaczyć, jak dokładnie Twoje obrazy będą wyglądać dla odwiedzających mobilnych.

Zapewnia to wspaniałe wrażenia dla każdego, niezależnie od używanego urządzenia! 👍

Czy dodawanie efektów najechania na obrazek spowolni moją stronę internetową?

Większość nowoczesnych efektów najechania myszką jest tworzona za pomocą CSS, który jest bardzo lekki i wydajny. Korzystając z wysokiej jakości wtyczki, efekty te nie powinny mieć zauważalnego wpływu na szybkość lub wydajność Twojej witryny.

Czy mogę dodać efekty najechania na obraz bez wtyczki?

Tak, możliwe jest dodanie efektów najechania myszką na obrazy poprzez napisanie własnego niestandardowego kodu CSS. Jednak ta metoda wymaga wiedzy technicznej i wiąże się z edycją plików motywu, co może być ryzykowne dla początkujących.

Korzystanie z wtyczki jest najbezpieczniejszą i najłatwiejszą metodą dla większości użytkowników, ponieważ zajmuje się całym kodem za Ciebie.

Dowiedz się więcej sposobów używania i zarządzania obrazami w WordPress

Efekty najechania myszką na obraz nie są jedynym sposobem na dodanie wizualnego zainteresowania Twojej stronie internetowej. Oto inne samouczki, które możesz przeczytać o używaniu obrazów w WordPress:

• Jak tworzyć interaktywne obrazy w WordPress
• Jak powiększyć obrazy po kliknięciu w WordPress (3 łatwe metody)
• Jak pokazać zdjęcie przed i po w WordPressie (z efektem przesuwanej ramki)
• Jak dodać galerię w WordPress z efektem lightbox
• Jak dodać filtry zdjęć w stylu Instagram w WordPress (krok po kroku)
• Jak używać AI do generowania obrazów w WordPressie
• Jak dodać animowane GIF-y w WordPress (WŁAŚCIWY sposób)

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 naszymi najlepszymi wyborami najlepszych pluginów do sliderów WordPress oraz naszą listą źródeł darmowych obrazów w domenie publicznej.

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