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 poprawi zaangażowanie i pomoże zmniejszyć współczynnik odrzuceń. Efekty hover są szczególnie przydatne w e-commerce. Pozwalają one klientom bliżej przyjrzeć się produktom, zachęcając ich do dalszego odkrywania i przejścia do kasy.

Istnieje wiele sposobów dodawania efektów hover w WordPress, od prostych zanikań po przyciągające uwagę animacje flip. Poniżej znajdziesz kilka metod, aby zacząć!

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

• 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 nowe menu Hover obrazu w swoim kokpicie.

• Kliknij menu, aby otworzyć ustawienia wtyczki. 

• Wybierz dowolne efekty, których chcesz użyć. W tym poradniku będziemy eksperymentować z Powiększeniem obrazu.
• 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 Edytuj

• 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ź treść do bloku Okładka. 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 Animacji po najechaniu znajdziesz różnorodne gotowe efekty.

• Tutaj wybraliśmy Rozwijanie jako przykład. Następnie możesz dostosować czas trwania przejścia, krycie oraz inne ustawienia, aby dopasować je do wyglądu Twojej strony.

• 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 dowolną animację, która Ci się podoba. Gdy już ją znajdziesz, 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 Prześlij, aby zapisać.

• 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 menu Wtyczki i wybierz 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żyć tego efektu, 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 wykorzystanie 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!