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

Dodanie efektu najechania na Twoją stronę internetową może wydawać się drobnym szczegółem, ale może poprawić wygląd i użyteczność witryny. Gdy odwiedzający najeżdżają myszką na obraz lub przycisk i widzą, że nieznacznie się on zmienia, sygnalizuje to, że element jest interaktywny. 

Ten subtelny ruch zwiększy zaangażowanie i pomoże zmniejszyć współczynnik odrzuceń. Efekty podświetlenia są szczególnie przydatne w e‑commerce. Pozwalają klientom dokładniej podglądać produkty, zachęcając ich do dalszego eksplorowania i przejścia do kasy.

Istnieje wiele sposobów dodawania efektów podświetlenia obrazów w WordPress, od prostych zanikań po przyciągające uwagę animacje przewracania. Poniżej znajdziesz kilka metod, aby rozpocząć! 

Jak dodać efekty najechania myszką na obraz w WordPress

W tym artykule zebraliśmy pięć prostych sposobów na dodanie efektów najechania do Twojej strony. Wybierz ten, który działa najlepiej dla Ciebie!

Metoda 1: Używanie wtyczki

Wtyczka pozwoli Ci zaoszczędzić dużo czasu i wysiłku, zwłaszcza jeśli chcesz użyć wielu efektów najechania na ten sam element strony.

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

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

Instalowanie wtyczki

• Otwórz obszar administracyjny WordPress.
• Kliknij Dodaj wtyczkę z menu 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 przycisk Aktywuj , aby rozpocząć korzystanie z wtyczki.

Używanie wtyczki Image Hover Effects WordPress

• Po zainstalowaniu wtyczki zobaczysz nowy Image Hover menu w panelu sterowania. 

• Kliknij menu, aby otworzyć ustawienia wtyczki. 

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

Gdy znajdziesz odpowiedni, kliknij Utwórz styl. 

• Pojawi się okno podręczne. Wprowadź tytuł w Nazwa pole i wybierz efekt z układu (1., 2. lub 3.). Następnie kliknij Zapisz , aby kontynuować.
• Zostaniesz przeniesiony na nową stronę, gdzie możesz dostosować ustawienia, takie jak wysokość, szerokość i przezroczystość. Przetestuj różne ustawienia, aby zobaczyć, co wygląda najlepiej.

• Gdy będziesz zadowolony z ustawień, kliknij Edit aby dostosować swój obraz. 

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

• Możesz również zastąpić obraz klikając na Wybierz obraz przycisk.
• Po ustawieniu wszystkiego, kliknij Zapisz , aby zapisać efekt najechania myszką.

• Aby zastosować efekt na Twojej stronie, skopiuj i wklej krótki kod do swojego posta lub strony. 

• Teraz Twój prosty efekt najechania na obraz jest gotowy do użycia w dowolnej części Twojej strony. 

Metoda 2: Używanie CSS

Nie musisz instalować żadnych wtyczek dla tej metody. Używając niestandardowego CSS, możesz dodać różne efekty hover do swojego motywu.

Zacznijmy od czegoś prostego, jak efekt podświetlenia po najechaniu. Jeśli chcesz dodać ten efekt do swojego motywu, postępuj zgodnie z poniższymi prostymi krokami:

• Przejdź do posta, gdzie chcesz dodać efekt najechania.
• Dodaj obraz klikając na Okładka blok z +.

• Wprowadź swoją treść do Cover bloku. Tutaj dodamy tytuł i przycisk. 

• Ustaw czcionkę i style według własnych upodobań.
• Zapisz stronę jako wersję roboczą.
• Następnie przejdź do Wygląd menu w swoim panelu administracyjnym.

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

body { display: flex; justify-content: center; align-items: center; height: 100vh; background: #0f0f0f; margin: 0; font-family: Arial, sans-serif; } .hover-underline { font-size: 2rem; color: #ffffff; position: relative; display: inline-block; } .hover-underline::after, .hover-underline::before { content: ''; position: absolute; width: 100%; height: 2px; background: linear-gradient(to right, #ff0000, #00ffff); bottom: -5px; left: 0; transform: scaleX(0); transform-origin: right; transition: transform 0.4s ease-out; } .hover-underline::before { top: -5px; transform-origin: left; } .hover-underline:hover::after, .hover-underline:hover::before { transform: scaleX(1); }
 

• Kliknij Opublikuj , aby zapisać kod. 

• Teraz wróć do swojego posta i wybierz tekst, do którego chcesz zastosować efekt podkreślenia.
• Otwórz sekcję Zaawansowane na pasku bocznym bloku i wprowadź underline-hover w polu Dodatkowe klasy CSS .

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

Istnieje tak wiele efektów najechania do wyboru, więc wybierz ten, który najlepiej pasuje do Twojego stylu. Możesz albo nauczyć się pisać kod CSS samodzielnie, albo znaleźć przykłady w społeczności WordPress. To wszystko jest dostępne!

Metoda 3: Używanie kreatorów stron (np. Elementor)

Kreator stron taki jak Elementor pozwala budować witrynę z dużą kreatywnością. Ma wbudowane efekty najechania, wszystkie gotowe do użycia, aby ożywić Twoją witrynę bez konieczności kodowania.

Możesz również użyć go do tworzenia efektów najechania myszką na obrazek w WordPress. W tej sekcji będziemy eksperymentować z wbudowanymi efektami najechania myszką w samym kreatorze stron.

Aby skonfigurować efekty:

• Otwórz edytor Elementor z panelu administracyjnego.
• Dodaj swój obraz.

• Wybierz swój obraz, a następnie przejdź do Styl zakładki.
• Przewiń w dół i kliknij Najedź kursorem.

• W menu rozwijanym Hover Animation znajdziesz różnorodne gotowe do użycia efekty. 

• Tutaj wybraliśmy Rozwijaj efekt jako przykład. Możesz następnie dostosować czas trwania przejścia, krycie i inne ustawienia, aby dopasować je do projektu swojej witryny. 

• Po zakończeniu będziesz mógł zobaczyć efekt natychmiast bez potrzeby wcześniejszego podglądu. 

Metoda 4: Używanie wtyczek Flipbox

Jeśli szukasz skrótu, możesz zainstalować wtyczkę flipbox. Efekt flipbox to sytuacja, gdy obraz obraca się, aby odsłonić zawartość na przodzie lub na tylnej stronie po najechaniu na niego.

Ten efekt jest świetny dla zdjęć fotograficznych, gdzie możesz wyświetlić zdjęcie z przodu, a szczegóły aparatu z tyłu. Ale możliwości są nieograniczone.

• Z poziomu kokpitu WordPress kliknij Wtyczki menu. 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 menu Flip Box i kliknij Utwórz nowy.
• Wybierz dowolne animacje, które lubisz. Gdy znajdziesz jedną, kliknij Utwórz styl.

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

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

• Przewiń w dół, aby znaleźć kartę Podgląd . Kliknij Edytuj , aby dostosować zawartość zarówno przedniej, jak i tylnej części flipbox. 

• Gdy skończysz, kliknij Zatwierdź aby zapisać to. 

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

• I to wszystko, oto gotowy produkt! 

Metoda 5: Używanie bloków Gutenberg

Gutenberg to domyślny edytor blokowy WordPress, który pozwala na dodanie efektu najechania bezpośrednio w edytorze.

Chociaż może nie oferować zaawansowanych efektów najechania myszką, możesz ulepszyć animacje za pomocą niestandardowego CSS.

Jako przykład stwórzmy prosty efekt zanikania po najechaniu. Oto samouczek krok po kroku:

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

• Wewnątrz bloku Okładka , dodaj blok Akapit . 

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

• Następnie wybierz Okładka , aby dodać niestandardową klasę CSS.
• Otwórz sekcję Zaawansowane w prawym panelu bocznym.
• Wprowadź fade-hover-effect w polu Dodatkowa klasa CSS .

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

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

.fade-hover-effect { opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; } .fade-hover-effect:hover { opacity: 1; transform: translateY(0); } 

• Zapisz fragment kodu i aktywuj go.
• Teraz podglądnij swoją stronę, aby zobaczyć efekt najechania w działaniu.

Możesz ponownie używać tego efektu, dodając klasę fade-hover-effect do dowolnego bloku lub obrazu. Jednak jeśli masz do czynienia z dużą liczbą obrazów, rozważ użycie wtyczki takiej jak WP Media Folder aby zorganizować swoją bibliotekę mediów w foldery. To ułatwia znajdowanie i ponowne wykorzystywanie powiązanych treści. 

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

Tak, używanie zbyt wielu efektów najechania na stronie może potencjalnie wpłynąć na wydajność, zwłaszcza jeśli nie jest odpowiednio zoptymalizowane. To dlatego, że niektóre efekty najechania wymagają dodatkowego CSS. Rozmiar CSS Twojej strony może się sumować i spowalniać czasy ładowania strony.

Najlepiej używać tylko niezbędnych efektów najechania, aby poprawić wrażenia użytkownika bez przeciążania witryny.

Podsumowanie

Nauka dodawania efektów hover do obrazów w WordPress może pomóc w ulepszeniu Twojej strony poprzez zwiększenie interakcji użytkownika i utrzymanie jego zaangażowania.

Z wieloma sposobami dodawania efektów najechania myszką, czy to za pomocą wtyczek, niestandardowego CSS, czy kreatorów stron, masz swobodę wyboru tego, co działa najlepiej dla Ciebie. Eksperymentuj z różnymi stylami, aby znaleźć ten, który najlepiej pasuje do Twojej witryny!