Jak dodać efekt najechania kursorem na obrazek w WordPress (krok po kroku)

Chcesz dowiedzieć się, jak dodać efekty najechania na obrazek w WordPress?

Efekty najechania kursorem mogą sprawić, że twoja witryna będzie bardziej interaktywna i wciągająca, co zatrzyma użytkowników na dłużej. Możesz nawet użyć flipboxów i innych efektów najechania kursorem, aby ujawnić informacje w przyciągający wzrok sposób.

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

Dlaczego warto używać efektów najechania na obrazek w WordPress?

Efekty najechania kursorem na obrazek umożliwiają dodawanie krótkich animacji do twoich obrazków, takich jak powiększenia, zaniki, wyskakujące okienka i inne. Dzięki temu twoje obrazy będą bardziej interesujące i wciągające, nawet jeśli strona zawiera wiele obrazków.

Możesz także użyć efektów hover, aby importować uwagę odwiedzającego na najważniejsze treści. Na przykład, możesz użyć animacji CSS, aby wyróżnić logo twojej witryny internetowej lub wezwanie do działania.

Niektóre efekty najechania kursorem mogą nawet prezentować informacje w bardziej interesujący sposób. Na przykład, można tworzyć obrazki, które obracają się, aby ujawnić ceny, ocenę w gwiazdkach lub opinie klientów.

Mając to na uwadze, zobaczmy 5 przyjaznych dla początkujących sposobów dodawania różnych efektów najechania kursorem na obrazek w WordPress. Po prostu użyj poniższych odnośników, aby przejść bezpośrednio do efektu, którego chcesz użyć:

Opcja 1: Dodawanie efektów Flipbox w WordPress (szybko i łatwo)

Najprostszym sposobem na dodanie efektów najechania kursorem do WordPressa jest użycie flipboxów. Flipbox to po prostu pole, które odwraca się po najechaniu na nie myszką. Pozwala to na wyświetlenie innego obrazka, tekstu lub wezwania do działania po najechaniu myszą.

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

Jeśli sprzedajesz cyfrowe dzieła sztuki lub grafiki online, możesz nawet dodać przycisk, który odwiedzający mogą kliknąć, aby kupić to zdjęcie.

Najprostszym sposobem na tworzenie flipboxów jest użycie Flipbox – Awesomes Flip Boxes Image Naklay. Ta darmowa wtyczka zawiera kilka różnych stylów flipboxów z funkcją łączenia obrazków, tekstu i przycisków wezwania do działania.

Pierwszą rzeczą, którą będziesz musiał zrobić, jest zainstalowanie i włączanie wtyczki Flipbox. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po zainstalowaniu i włączaniu wtyczki możesz utworzyć twój pierwszy flipbox, przechodząc do Flip Box ” Create New.

To pokazuje wszystkie różne szablony, których można użyć.

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

W wyświetlonym oknie wpisz rodzaj nazwy dla projektu flipbox. Jest to tylko twoje odniesienie, więc możesz użyć czegokolwiek chcesz.

Możesz również wybrać układ, z którego chcesz korzystać, klikając 1, 2 lub 3.

Po wybraniu stylu flipbox można zmienić krój pisma, dopełnienie i marginesy.

Następnie można dodać tekst, obrazki i ikonki po obu stronach flipboxa.

Gdy będziesz zadowolony z wyglądu flipboksa, możesz dodać więcej pól, klikając „+” w sekcji „Utwórz nowe flipboksy”.

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

Można na przykład utworzyć flipbox dla każdego planu cenowego.

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

Gdy jesteś zadowolony z animacji najechania kursorem, możesz dodać je do dowolnej strony, wpisu lub obszaru gotowego na widżet za pomocą krótkiego kodu, który wtyczka zapewnia automatycznie.

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

Opcja 2: Dodanie efektów powiększenia i powiększenia obrazka (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-handel lub platformę handlową online, pozwala to kupującym na bardziej szczegółowe zapoznanie się z produktem, co może zwiększyć sprzedaż.

Efekty zoomu mogą również zwiększyć interakcję i zaangażowanie na twojej witrynie.

Na przykład, możesz tworzyć proste łamigłówki i gry, które rzucają wyzwanie odwiedzającym, aby dostrzegli drobne szczegóły na twoich obrazkach. Może to zatrzymać ich na twojej witrynie na dłużej, co zwiększy liczbę odsłon i zmniejszy współczynnik odrzuceń.

Najlepszą wtyczką WordPress do dodawania efektów powiększania i powiększania obrazków jest WP Image Zoom.

Ta wtyczka efektów najechania kursorem umożliwia dostosowanie wyglądu i działania efektu powiększenia w całej witrynie internetowej WordPress. Następnie można włączać zoom dla dowolnego obrazka.

W tym przewodniku będziemy korzystać z darmowej wersji, ale jeśli chcesz mieć więcej opcji konfiguratora, możesz sprawdzić WP Image Zoom Pro.

Najpierw należy zainstalować i włączyć wtyczkę WP Image Zoom. Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu należy przejść do strony WP Image Zoom ” Zoom Settings z panelu bocznego administratora WordPress. Jeśli nie jest jeszcze wybrana, kliknij „Ustawienia zoomu”.

Na początek można wybrać spośród kilku różnych kształtów soczewek.

Można również wybrać rodzaj kursora, ustawić efekt animacji, włączyć powiększanie po najechaniu myszą lub kliknięciu myszą oraz zdefiniować poziom powiększenia.

Gdy jesteś zadowolony z ustawienia zoomu, możesz dodać efekt do dowolnego obrazka. W edytorze bloków Gutenberg kliknij, aby wybrać obrazek, do którego chcesz dodać efekt powiększenia.

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

Jeśli korzystasz z WooCommerce, możesz włączyć zoom na wszystkich obrazkach produktów w ustawieniach wtyczki. Jest to idealne rozwiązanie, jeśli chcesz włączyć zoom w całym twoim sklepie internetowym bez konieczności aktualizowania każdego produktu z osobna.

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

Więcej szczegółów można znaleźć w naszym przewodniku na temat dodawania powiększenia dla obrazków w WordPress.

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

Inną opcją jest dodanie animacji zanikania, aby twoje obrazki powoli pojawiały się lub znikały, gdy użytkownik najedzie na nie kursorem.

Pozwala to podświetlać i ukrywać różne obrazki, gdy użytkownik porusza się po stronie. W ten sposób możesz poprowadzić odwiedzającego przez twoją treść, a nawet dodać element opowieści do strony.

W przeciwieństwie do niektórych innych animacji, efekt zanikania obrazu po najechaniu myszą jest subtelny, więc nie wpłynie negatywnie na wrażenia z czytania lub optymalizację obrazka. To sprawia, że jest to świetny wybór dla stron zawierających wiele obrazków lub plików o wysokiej rozdzielczości.

Najprostszym sposobem na dodanie efektu zanikania do twoich obrazków jest użycie WPCode. Ta darmowa wtyczka umożliwia łatwe dodawanie własnego kodu w WordPressie bez konieczności edytowania plików twojego motywu.

Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat wygaszania obrazków po najechaniu myszą w WordPress.

Opcja 4: Dodanie wielu efektów najechania na obrazek do WordPressa (najbardziej konfigurowalne)

Możesz chcieć użyć wielu różnych efektów najechania kursorem na obrazek na twojej witrynie internetowej. Na przykład, jeśli masz wiele galerii obrazków, możesz animować te zdjęcia na różne ciekawe sposoby.

Najlepszym sposobem na dodanie wielu efektów hover do WordPressa jest użycie Image Hover Effects Ultimate. Ta darmowa wtyczka obsługuje szeroką gamę efektów, które można dostosować do własnych potrzeb.

Pierwszą rzeczą, którą musisz zrobić, to zainstalować i włączyć wtyczkę Image Hover Effects Ultimate. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.

Po włączaniu wybierz „Image Hover” z kokpitu WordPress. Zobaczysz teraz wszystkie rodzaje efektów najechania kursorem, których możesz użyć.

W tym przewodniku wybierzemy opcję „Efekty podpisu”, która dodaje animowany tekst na obrazku.

Możesz utworzyć dowolny rodzaj efektu najechania kursorem, chociaż opcje, które widzisz, mogą się różnić.

Po kliknięciu „Efekty podpisu” zobaczysz wszystkie różne style, których możesz użyć.

Wystarczy najechać kursorem na styl, aby zobaczyć podgląd wyglądu animacji.

Gdy znajdziesz odpowiedni styl, kliknij przycisk „Utwórz styl”.

Spowoduje to otwarcie wyskakującego okienka, w którym można wybrać dokładny układ, którego chcesz użyć. Po prostu kliknij 1, 2 lub 3.

Po wykonaniu tej czynności wpisz tytuł w polu „Nazwa”. To jest tylko dla twojego odniesienia, więc możesz użyć czegokolwiek, co pomoże ci zidentyfikować animowany obrazek w twoim kokpicie WordPress.

Następnie kliknij przycisk „Zapisz”.

Spowoduje to przejście do ekranu, na którym można dostosować efekt najechania kursorem. Obejmuje to zmianę szerokości i wysokości treści, zwiększenie dopełnienia i dodanie cienia pudełka.

Podczas wprowadzania zmian podgląd na żywo będzie aktualizowany automatycznie, dzięki czemu można wypróbować różne ustawienia, aby zobaczyć, co wygląda najlepiej.

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

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

Można również przyspieszyć lub spowolnić efekt, przeciągając suwak „Czas trwania efektu”. Wyższa wartość oznacza, że efekt będzie trwał dłużej. Jeśli liczba ta będzie mniejsza, efekt będzie szybszy i krótszy.

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

Kiedy jesteś zadowolony z tego, jak efekt jest skonfigurowany, nadszedł czas, aby dodać treść.

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

Spowoduje to otwarcie wyskakującego okienka, w którym można wpisać tytuł i krótki opis.

Jest to treść, która pojawi się, gdy odwiedzający najedzie kursorem na obrazek.

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

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

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

Czasami możesz użyć efektów najechania kursorem, aby odesłać użytkowników do innych obszarów twojego bloga lub witryny internetowej WordPress. Na przykład, jeśli prowadzisz butik online, możesz dodać odnośnik do produktu pokazanego na obrazku.

Możesz to zrobić, dodając przycisk CTA, który pojawi się poniżej krótkiego opisu.

Aby rozpocząć, dodaj adres URL w polu „Odnośnik”.

Następnie dodaj swój komunikat, wpisując go w polu Tekst przycisku.

Gdy jesteś zadowolony z informacji, które wpiszesz, kliknij „Prześlij”.

Po dodaniu tekstu warto kliknąć kartę „Typografia”.

Można tu zmienić wielkość litery, dodać cień tekstu, zwiększyć lub zmniejszyć marginesy i wiele więcej.

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

W tym miejscu można zmienić wygląd przycisku w stanie domyślnym i po najechaniu kursorem, czyli po najechaniu na niego przez użytkownika. Można również zmienić wyrównanie przycisku.

Większość z 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 wyglądu podglądu, kliknij „Zapisz”, aby zapisać twoje zmiany.

Chcesz utworzyć rząd lub kolumnę animowanych obrazków?

Na przykład, możesz użyć efektów najechania kursorem na obrazek, aby zareklamować najlepsze funkcje twojego produktu. Na poniższym obrazku odwiedzający może najechać kursorem na każdy obrazek, aby przeczytać o innej funkcji.

Aby to zrobić, przewiń do pola „Utwórz nowy obrazek” u góry strony.

Tutaj kliknij przycisk „+”.

Spowoduje to otwarcie wyskakującego okienka, w którym można utworzyć nowy efekt najechania obrazkiem, postępując zgodnie z tym samym procesem opisanym powyżej.

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

Aby utworzyć więcej efektów najechania kursorem, wystarczy powtórzyć ten sam proces opisany powyżej.

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

Więcej informacji na temat umieszczania krótkiego kodu można znaleźć w naszym przewodniku na temat dodawania krótkiego kodu w WordPress.

Opcja 5: Dodawanie efektów wyskakujących obrazków przy użyciu wizualnego edytora CSS

Wiele z powyższych wtyczek umożliwia tworzenie zaawansowanych animowanych obrazków, takich jak flipboxy, a następnie umieszczanie ich na stronie za pomocą krótkiego kodu. Czasami jednak możesz chcieć dodać efekt najechania kursorem do obrazka, który już znajduje się na stronie.

W takim przypadku można użyć własnej wtyczki CSS WordPress. Pozwala to na wprowadzanie zmian wizualnych do twoich obrazków bez kodowania, a także nie musisz osobno tworzyć efektów najechania kursorem w kokpicie WordPress.

W tym przypadku zalecamy użycie CSS Hero. Ta wtyczka pozwala edytować prawie każdy styl CSS na twojej witrynie WordPress za pomocą edytora wizualnego. Posiada również wbudowane efekty hover, które można zastosować do obrazków za pomocą jednego kliknięcia.

Pamiętaj tylko, że możesz użyć tylko jednej animacji CSS na stronę. CSS Hero zastosuje również efekt hover do każdego obrazka na stronie, jak widać na poniższym obrazku.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki CSS Hero. Więcej szczegółów na temat instalacji wtyczki można znaleźć w naszym przewodniku na temat instalacji wtyczek WordPress.

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

Spowoduje to przejście do witryny internetowej CSS Hero, gdzie możesz zalogować się na swoje konto i uzyskać klucz licencyjny. Wystarczy postępować zgodnie z instrukcjami wyświetlanymi na ekranie, a po kilku kliknięciach zostaniesz przekierowany z powrotem na twoją witrynę.

Następnie otwórz stronę lub wpis z obrazkiem, który chcesz animować. Następnie kliknij „Dostosuj za pomocą CSS Hero” na pasku administratora WordPress.

Spowoduje to otwarcie strony lub wpisu w edytorze CSS Hero.

Tutaj kliknięcie na dowolną treść otworzy panel ze wszystkimi ustawieniami, których można użyć, aby dostosować tę treść. W tym celu wystarczy kliknąć, aby wybrać dowolny obrazek.

W menu po lewej stronie wybierz kartę „Fragmenty kodu”. Następnie kliknij „Efekty najechania kursorem”.

Zobaczysz teraz wszystkie różne efekty CSS.

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

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

Teraz CSS Hero zastosuje ten efekt najechania na każdy obrazek na stronie. Aby zobaczyć to w działaniu, po prostu najedź myszką na dowolny obrazek w podglądzie na żywo.

Aby wprowadzić tę zmianę, kliknij przycisk „Zapisz i opublikuj”.

Dowiedz się więcej o sposobach dodawania efektów animacji w WordPressie

Efekty najechania kursorem na obrazek nie są jedynym sposobem na dodanie więcej wizualnego zainteresowania do twojej witryny internetowej. Istnieją inne rodzaje animacji, których możesz użyć, aby poprawić wrażenia użytkownika.

Na przykład, jeśli używasz SeedProd, możesz dodać animacje tła cząsteczek do twoich stron. Ta wtyczka do tworzenia stron ułatwia wstawienie tego efektu bez znajomości jakiegokolwiek kodu.

Dodatkowo, możesz dodać animację preloadera do twojej witryny internetowej. Efekt ten sprawia wrażenie, że strona jest właśnie wczytywana, a użytkownik może cierpliwie czekać na zakończenie ładowania.

Jeśli prowadzisz witrynę internetową dla firm, dobrym pomysłem jest użycie animacji zliczania liczb, aby pokazać twoją obecną sprzedaż, klientów, odwiedzających i inne rodzaje danych. Może to pokazać potencjalnym klientom, że twoja firma rośnie i staje się popularna.

Mamy nadzieję, że ten artykuł pomógł ci nauczyć się dodawać efekty najechania kursorem na obrazek w WordPress. Możesz również zapoznać się z naszym przewodnikiem na temat tworzenia strony docelowej za pomocą WordPressa i naszym wyborem najlepszego oprogramowania do czatu na żywo dla małych firm.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.