Jak dodać efekty najechania kursorem na obraz w WordPressie (5 prostych sposobów)

Dodanie efektu najechania kursorem myszy na stronę internetową może wydawać się drobiazgiem, ale może poprawić jej wygląd i użyteczność. Gdy odwiedzający najeżdżają kursorem myszy na obraz lub przycisk i widzą, że lekko się zmienia, sygnalizuje to interaktywność elementu. 

Ten subtelny ruch poprawi zaangażowanie i pomoże zmniejszyć współczynnik odrzuceń. Efekty najechania kursorem są szczególnie przydatne w handlu elektronicznym. Pozwalają kupującym na dokładniejszy podgląd produktów, zachęcając ich do dalszego eksplorowania i przejścia do kasy.

Istnieje wiele sposobów na dodanie efektów najechania kursorem na obraz w WordPressie, od prostych przejść po przyciągające wzrok animacje flip. Poniżej znajdziesz kilka metod na początek!

Jak dodać efekty najechania kursorem na obraz w WordPressie

W tym artykule zebraliśmy pięć prostych sposobów na dodanie efektów najechania kursorem myszy na Twoją stronę. Wybierz ten, który najlepiej sprawdzi się w Twoim przypadku!

Metoda 1: Korzystanie z wtyczki

Wtyczka zaoszczędzi Ci mnóstwo czasu i wysiłku, zwłaszcza jeśli chcesz używać wielu efektów najechania kursorem na tę samą stronę.

Na przykład, jeśli masz wiele galerii zdjęć, możesz zastosować do każdej z nich różne animacje, na przykład proste powiększenie miniaturek blogów lub efekt odwrócenia zdjęć produktów.

Użycie wtyczki takiej jak Image Hover Effects Ultimate znacznie ułatwia ten proces. Wtyczka ta jest darmowa dla wszystkich i oferuje szeroki wachlarz efektów dla każdego elementu. Aby rozpocząć, wystarczy ją zainstalować, postępując zgodnie z poniższym samouczkiem: 

Instalowanie wtyczki

• Otwórz obszar administracyjny WordPress.
• Kliknij Dodaj wtyczkę w Wtyczki na pasku bocznym.

• Wpisz Image Hover Effects Ultimate w pasku wyszukiwania.

• Wybierz pierwszy wynik i kliknij Zainstaluj teraz , aby rozpocząć pobieranie.
• Po zakończeniu instalacji kliknij Aktywuj aby rozpocząć korzystanie z wtyczki.

Korzystanie z wtyczki WordPress Image Hover Effects

• Po zainstalowaniu wtyczki na pulpicie nawigacyjnym pojawi się nowe menu obrazkowe

• Kliknij menu, aby otworzyć ustawienia wtyczki. 

• Wybierz dowolne efekty, których chcesz użyć. W tym samouczku będziemy eksperymentować z lupą obrazu .
• Po wybraniu efektu zobaczysz różnorodne style animacji.

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

• Pojawi się wyskakujące okienko. Wpisz tytuł w Nazwa i wybierz efekt z układu (1., 2. lub 3.). Następnie kliknij Zapisz , aby kontynuować.
• Zostaniesz przeniesiony na nową stronę, na której możesz dostosować ustawienia, takie jak wysokość, szerokość i krycie. Poeksperymentuj, aby sprawdzić, co wygląda najlepiej.

• Gdy będziesz już zadowolony z ustawień, kliknij Edytuj , aby dostosować obraz.

• Pojawi się kolejne okno. Tutaj możesz dostosować pozycję powiększenia. 

• Obraz można również zastąpić przyciskiem Wybierz obraz .
• Po skonfigurowaniu wszystkich ustawień kliknij Prześlij aby zapisać efekt najechania kursorem.

• Aby zastosować efekt na swojej stronie, skopiuj i wklej krótki kod do wpisu lub strony. 

• Teraz Twój prosty efekt najechania kursorem na obraz jest gotowy do użycia w dowolnym miejscu Twojej witryny. 

Metoda 2: Korzystanie z CSS

Nie musisz instalować żadnych wtyczek, aby skorzystać z tej metody. Używając niestandardowego CSS, możesz dodać do swojego motywu różne efekty najechania kursorem.

Zacznijmy od czegoś prostego, na przykład efektu podkreślenia po najechaniu kursorem. Jeśli chcesz dodać ten efekt do swojego motywu, wykonaj poniższe proste kroki:

• Przejdź do wpisu, do którego chcesz dodać efekt najechania kursorem.
• Aby dodać obraz, kliknij Okładka z + .

• Wprowadź treść w „Okładka” . Tutaj dodamy tytuł i przycisk.

• Ustaw czcionkę i styl według własnych upodobań.
• Zapisz stronę jako wersję roboczą.
• Następnie przejdź do Wygląd na pulpicie nawigacyjnym.

• Następnie kliknij „Dostosuj” i przejdź do sekcji „Dodatkowy CSS” . Dodaj następujący kod:

ciało { wyświetlacz: flex; wyrównanie zawartości: do środka; wyrównanie elementów: do środka; wysokość: 100vh; tło: #0f0f0f; margines: 0; rodzina czcionek: Arial, sans-serif; } .hover-underline { rozmiar czcionki: 2rem; kolor: #ffffff; pozycja: względna; wyświetlacz: blokowy; } .hover-underline::after, .hover-underline::before { zawartość: ''; pozycja: absolutna; szerokość: 100%; wysokość: 2px; tło: gradient liniowy (do prawej, #ff0000, #00ffff); dół: -5px; lewy: 0; transformacja: scaleX(0); początek transformacji: prawy; przejście: transformacja 0,4s ease-out; } .hover-underline::before { góra: -5px; początek transformacji: lewy; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• Kliknij Publikuj , aby zapisać kod.

• Teraz wróć do swojego wpisu i zaznacz tekst, do którego chcesz zastosować efekt podkreślenia.
• Otwórz Zaawansowane na pasku bocznym bloku i wpisz underline-hover w Dodatkowe klasy CSS .

• Zapisz stronę i wyświetl jej podgląd, aby zobaczyć efekt. 

Dostępnych jest tak wiele efektów najechania kursorem, że wybierz ten, który najlepiej pasuje do Twojego stylu. Możesz nauczyć się pisać CSS samodzielnie lub poszukać przykładów w społeczności WordPressa. Wszystko jest dostępne!

Metoda 3: Korzystanie z kreatorów stron (np. Elementor)

Kreator stron taki jak Elementor pozwala na kreatywne tworzenie stron internetowych. Posiada wbudowane efekty najechania kursorem, gotowe do użycia, aby ożywić witrynę bez konieczności kodowania.

Można go również użyć do tworzenia efektów najechania kursorem na obraz w WordPressie. W tej sekcji poeksperymentujemy z wbudowanymi efektami najechania kursorem w samym kreatorze stron.

Aby skonfigurować efekty:

• Otwórz Elementor z poziomu panelu administratora.
• Dodaj swój obraz.

• Wybierz obraz i przejdź do Styl .
• Przewiń w dół i kliknij Hover .

• W rozwijanym Animacja najechania kursorem znajdziesz różnorodne gotowe do użycia efekty.

• Tutaj wybraliśmy „Rozwój” jako przykład. Następnie możesz dostosować czas trwania przejścia, krycie i inne ustawienia, aby dopasować je do projektu swojej witryny.

• Po zakończeniu pracy będziesz mógł od razu zobaczyć efekt, bez konieczności jego podglądu. 

Metoda 4: Korzystanie z wtyczek Flipbox

Jeśli szukasz szybkiego rozwiązania, możesz zainstalować wtyczkę Flipbox. Efekt Flipbox polega na tym, że obraz odwraca się, odsłaniając zawartość z przodu lub z tyłu po najechaniu na niego kursorem.

Ten efekt świetnie sprawdza się w przypadku fotografii, gdzie zdjęcie można wyświetlić z przodu, a szczegóły aparatu z tyłu. Możliwości są jednak nieograniczone.

• W panelu WordPress kliknij Wtyczki . Następnie wybierz Dodaj wtyczkę .
• Wpisz Flipbox - Awesome Flip Boxes Image Overlay w pasku wyszukiwania.

• Kliknij Zainstaluj teraz , a następnie Aktywuj wtyczkę.

• Aby utworzyć flipbox, przejdź do Flip Box i kliknij Utwórz nowy .
• Wybierz dowolną animację. Po znalezieniu odpowiedniej kliknij Utwórz styl .

• Pojawi się okno podręczne. Wybierz żądany układ (1., 2. lub 3.) i wpisz tytuł. 

• Kliknij Zapisz , aby kontynuować.
• Następnie zostaniesz przeniesiony do menu personalizacji, w którym możesz ustawić efekty i dodać swoją treść.

• Przewiń w dół, aby znaleźć Podgląd . Kliknij Edytuj , aby dostosować zawartość zarówno przodu, jak i tyłu flipboxa.

• Po zakończeniu kliknij Prześlij , aby zapisać.

• Aby dodać ten flipbox do swojej strony, po prostu skopiuj i wklej wygenerowany krótki kod w dowolnej sekcji swojej witryny. 

• I to wszystko, oto gotowy produkt! 

Metoda 5: Korzystanie z bloków Gutenberga

Gutenberg to domyślny edytor bloków WordPressa, który umożliwia dodawanie efektów najechania kursorem bezpośrednio w edytorze.

Mimo że nie oferuje zaawansowanych efektów najechania kursorem, możesz udoskonalić animacje, używając niestandardowego kodu CSS.

Na przykład, stworzymy prosty efekt zanikania po najechaniu kursorem. Oto samouczek krok po kroku:

• Przejdź do wpisu lub strony, do której chcesz dodać efekt najechania kursorem.
• Kliknij + , aby dodać nowy blok, a następnie wybierz Okładka .

• Wewnątrz Okładka dodaj Akapit .

• Wprowadź tytuł i krótki opis.
• Dostosuj rozmiar czcionki, krycie, wyrównanie i kolor według potrzeb.

• Następnie wybierz Cover , aby dodać niestandardową klasę CSS.
• Otwórz Zaawansowane na pasku bocznym po prawej stronie.
• Wpisz fade-hover-effect w polu Dodatkowa klasa CSS .

• Następnie zapisz stronę jako wersję roboczą.

• Przejdź do Wtyczki i wybierz wtyczkę z fragmentem kodu. W tym przykładzie używamy WPCode .
• Utwórz nowy fragment kodu CSS, a następnie wklej następujący kod:

.fade-hover-effect { krycie: 0; transformacja: translateY(10px); przejście: krycie 0,4s łatwość, transformacja 0,4s łatwość; } .fade-hover-effect:hover { krycie: 1; transformacja: translateY(0); } 

• Zapisz fragment kodu i aktywuj go.
• Teraz wyświetl podgląd swojej strony, aby zobaczyć efekt zanikania po najechaniu kursorem myszy.

Możesz ponownie wykorzystać ten efekt, dodając klasę fade-hover-effect do dowolnego bloku lub obrazu. Jeśli jednak masz do czynienia z dużą liczbą obrazów, rozważ użycie wtyczki takiej jak WP Media Folder aby uporządkować bibliotekę multimediów w folderach. Ułatwia to wyszukiwanie i ponowne wykorzystywanie powiązanych treści.

Czy użycie zbyt wielu efektów wpływa na wydajność?

Tak, zbyt wiele efektów najechania kursorem myszy na Twojej stronie może potencjalnie wpłynąć na wydajność, zwłaszcza jeśli nie jest ona odpowiednio zoptymalizowana. Dzieje się tak, ponieważ niektóre efekty najechania kursorem wymagają dodatkowego kodu CSS. Rozmiar kodu CSS Twojej witryny może się kumulować i spowalniać czas ładowania stron.

Najlepiej jest używać tylko niezbędnych efektów najechania kursorem myszy, aby zwiększyć komfort użytkowania, nie przeciążając przy tym witryny.

Podsumowanie

Wiedza na temat tego, jak dodawać efekty najechania kursorem na obraz w WordPressie, może pomóc w ulepszeniu witryny poprzez zwiększenie interakcji użytkowników i utrzymanie ich zaangażowania.

Dzięki wielu sposobom dodawania efektów najechania kursorem, czy to za pomocą wtyczek, niestandardowego CSS, czy kreatorów stron, masz swobodę wyboru tego, co najlepiej Ci odpowiada. Eksperymentuj z różnymi stylami, aby znaleźć ten, który najlepiej pasuje do Twojej witryny!