Chcesz, aby Twoje obrazy w WordPress były bardziej interaktywne i angażujące? Punkty interaktywne przekształcają statyczne zdjęcia w dynamiczne treści, dodając klikalne obszary, które ujawniają dodatkowe informacje.
Sami eksperymentowaliśmy z nimi, aby pokazać punkty na mapie, oznaczyć członków zespołu na zdjęciu i wyróżnić cechy produktu. Z naszych badań wynika, że znaleźliśmy 2 łatwe sposoby na dodanie punktów interaktywnych do obrazów w WordPress.
Gotowy na ulepszenie wizualnych wrażeń na swojej stronie internetowej? Zacznijmy.
Kiedy dodawać punkty interaktywne do obrazów w WordPress
Punkty interaktywne to klikalne miejsca, które mogą zamienić proste zdjęcia w interaktywne treści, które odwiedzający mogą eksplorować. Ale kiedy powinieneś rozważyć dodanie punktów interaktywnych do swoich obrazów?
Dobrym momentem na użycie punktów interaktywnych jest sytuacja, gdy chcesz zaprezentować różne części zdjęcia produktu.
Załóżmy, że sprzedajesz nowy telefon. Możesz dodać punkty interaktywne, aby wskazać jego aparat, ekran i inne funkcje. Pomaga to klientom dowiedzieć się o produkcie bez czytania długich opisów.
Wiele stron internetowych z artykułami gospodarstwa domowego wykorzystuje również adnotacje do obrazów, aby podkreślić szczegóły produktu przedmiotów wyświetlanych na zaaranżowanych zdjęciach.
Hotspoty świetnie nadają się również do tworzenia angażujących infografik i wizualizacji danych. Zamiast upychać wszystkie informacje w jednym obrazku, możesz ukryć dodatkowe szczegóły za hotspotami. Kiedy ludzie klikną w różne części infografiki, mogą zobaczyć więcej faktów i liczb.
Jeśli prowadzisz stronę eLearning, hotspoty mogą poprawić doświadczenie użytkownika i uczynić Twoje lekcje bardziej interaktywnymi. Na przykład, możesz dodać hotspoty do mapy, pozwalając uczniom klikać, aby dowiedzieć się o różnych krajach lub zabytkach.
Mając to na uwadze, zobaczmy, jak łatwo dodać hotspoty obrazkowe do Twojej strony WordPress. Przygotowaliśmy 2 metody, a poniższe szybkie linki pozwolą Ci nawigować po artykule:
- Metoda 1: Dodaj hotspoty obrazkowe za pomocą SeedProd (dla stron docelowych/niestandardowych motywów)
- Metoda 2: Dodaj hotspoty obrazkowe za pomocą wtyczki Image Hotspot Plugin (bezpłatna, ale ograniczona)
- Więcej wskazówek dotyczących projektowania WordPress, które powinieneś znać
Metoda 1: Dodaj hotspoty obrazkowe za pomocą SeedProd (dla stron docelowych/niestandardowych motywów)
Ta pierwsza metoda wykorzystuje SeedProd, kreator stron metodą przeciągnij i upuść, do dodawania hotspotów obrazów do Twojej witryny WordPress. Zalecamy tę metodę, jeśli tworzysz niestandardową stronę docelową lub niestandardowy motyw WordPress i chcesz użyć platformy z blokiem hotspotów obrazów.
Testowaliśmy inne kreatory stron w przeszłości, takie jak Divi i WPBakery, ale SeedProd zawsze wychodzi na prowadzenie.
To, co kochamy w SeedProd, to fakt, że oferuje ponad 350 szablonów stron docelowych i zestawów motywów dla różnych kategorii branżowych, od butików internetowych i usług sprzątania po firmy SaaS. Zatem jest opcja dla każdego typu witryny.
Jedną rzeczą, którą należy wziąć pod uwagę, jest to, że jeśli po prostu chcesz darmowego rozwiązania do tworzenia hotspotów obrazów, ta metoda może nie być dla Ciebie. Dzieje się tak, ponieważ blok hotspotów SeedProd jest dostępny tylko w płatnych wersjach SeedProd. W takim przypadku zalecamy przejście do metody 2.
Więcej informacji o funkcjach i cenach wtyczki znajdziesz w naszej recenzji SeedProd.
Po zakupieniu planu SeedProd możesz pobrać i zainstalować wtyczkę WordPress w swoim obszarze administracyjnym. Następnie przejdź do SeedProd » Ustawienia i wprowadź swój klucz licencyjny. Te informacje znajdziesz na stronie swojego konta SeedProd.
Po zakończeniu kliknij „Zweryfikuj klucz”.
Następnie przejdź do SeedProd » Strony docelowe.
Następnie kliknij „Dodaj nową stronę docelową”.
Zobaczysz teraz wszystkie szablony oferowane przez SeedProd. Dostępne są opcje dla wirusowej strony docelowej z listą oczekujących, strony docelowej dla reklam Google, strony „wkrótce” i inne.
Pamiętaj, aby przewinąć opcje i podglądać je po kolei, aby wybrać tę, która najlepiej odpowiada Twoim potrzebom.
Gdy już zdecydujesz się na szablon, najedź na swój wybór.
Następnie kliknij pomarańczowy przycisk z zaznaczeniem.
Teraz pojawi się nowe okno, w którym zostaniesz poproszony o nazwanie strony i podanie jej adresu URL (slug).
Po wykonaniu tej czynności kliknij „Zapisz i zacznij edytować stronę”.
Otworzy to edytor typu „przeciągnij i upuść” SeedProd.
Działa on podobnie do edytora bloków WordPress, gdzie możesz przeciągać i upuszczać bloki na stronę i klikać na nie, aby je dostosować według własnych potrzeb.
Aby utworzyć punkty interaktywne na obrazie, możesz znaleźć blok ‘Hotspot’ w lewym pasku bocznym.
Następnie po prostu przeciągnij i upuść go na swoją stronę.
Następnie musisz przesłać obraz WordPress, do którego chcesz dodać punkty interaktywne.
Możesz to zrobić, klikając blok ‘Hotspot’ i wybierając ‘Use Your Own Image’ (Użyj własnego obrazu) lub ‘Use a Stock Image’ (Użyj obrazu z biblioteki), aby wybrać obraz.
Pierwsza opcja otworzy bibliotekę multimediów, gdzie możesz wybrać istniejący obraz lub przesłać nowy. Jeśli rozmiar jest dość duży, możesz zapoznać się z naszym przewodnikiem na temat jak przesyłać duże obrazy w WordPress.
Po przesłaniu obrazu możesz wprowadzić tekst alternatywny, aby opisać obraz dla wyszukiwarek i narzędzi do odczytu ekranu.
Możesz również dostosować rozmiar i wyrównanie obrazu.
Następnie możesz przewinąć w dół, aby zacząć dodawać punkty interaktywne.
Możesz to zrobić, klikając przycisk ‘+ Add Hotspot’ (Dodaj punkt interaktywny).
Na obrazie pojawi się teraz pomarańczowa kropka. Możesz dostosować jej pozycję, przeciągając poziome i pionowe paski orientacji.
Dodatkowo możesz wstawić tekst, który powinien pojawić się, gdy kursor użytkownika najedzie na punkt interaktywny.
Przesuwając w dół, możesz zmienić kolor punktu interaktywnego.
Po prostu kliknij ustawienia ‘Color’ (Kolor), aby wybrać kolor pasujący do Twojej marki i projektu strony internetowej.
Jeśli będziesz przewijać dalej w dół, możesz włączyć przełącznik ‘Advanced Settings’ (Ustawienia zaawansowane).
Tutaj możesz dodać link do tekstu podpowiedzi swojego punktu dostępowego, aby użytkownicy mogli zostać przekierowani na wybraną stronę.
Ponadto możesz wybrać niestandardową ikonę, aby zastąpić domyślny kształt koła.
Aby to zrobić, po prostu kliknij przycisk „Wybierz ikonę”.
Pojawi się okno podręczne, w którym możesz wybrać różne ikony z biblioteki SeedProd. Możesz również wybrać ikony z Font Awesome, jeśli potrzebujesz więcej opcji.
Aby użyć ikony, po prostu kliknij ją.
Po wybraniu ikony możesz przeciągnąć suwak „Rozmiar ikony”, aby zmniejszyć lub powiększyć kształt, w zależności od preferencji.
Następnie możesz powtórzyć kroki, aby utworzyć więcej interaktywnych punktów na obrazie.
Poniżej możesz dodać efekt animacji do swoich punktów na obrazie. Dostępne są 2 opcje: „Miłe pulsowanie” i „Rozszerzanie”.
Teraz przejdźmy do sekcji „Podpowiedź”.
Tutaj możesz zmienić pozycję podpowiedzi (po prawej, po lewej, powyżej lub poniżej punktu) i zmienić wyzwalacz.
Jeśli wybierzesz „Kliknięcie”, oznacza to, że podpowiedź pojawi się, gdy użytkownik kliknie punkt. Z drugiej strony, „Najazd” oznacza, że podpowiedź pojawi się, gdy kursor najedzie na nią.
Następnie możesz zmienić czas trwania podpowiedzi.
Odnosi się to do tego, jak długo podpowiedź będzie się pojawiać po najechaniu kursorem lub kliknięciu punktu przez użytkownika. Jeśli chcesz, aby tekst pojawił się natychmiast, ustaw go na 0.
Możesz również wyłączyć strzałkę podpowiedzi, w zależności od preferencji.
Teraz, jeśli przełączysz się na kartę „Zaawansowane”, możesz jeszcze bardziej dostosować wygląd obrazu.
Na przykład możesz dodać cień pola lub dostosować wypełnienie i margines.
Po zakończeniu kliknij przycisk „Zapisz” w prawym górnym rogu.
Następnie kliknij „Opublikuj”, aby strona stała się aktywna.
I to wszystko! Upewnij się, że wyświetlasz stronę na urządzeniach mobilnych, komputerach i tabletach, aby sprawdzić, czy wygląda dobrze na wszystkich urządzeniach.
Oto jak wygląda nasz interaktywny punkt na obrazie:
Metoda 2: Dodaj hotspoty obrazkowe za pomocą wtyczki Image Hotspot Plugin (bezpłatna, ale ograniczona)
Jeśli korzystanie z kreatora stron i zmiana motywu wydaje się zbyt skomplikowane, możesz zamiast tego użyć darmowego wtyczki WordPress Image Hotspot. Jest to jedna z najlepszych wtyczek do tworzenia interaktywnych map obrazów, które wypróbowaliśmy, i stanowi świetną alternatywę dla metody 1.
Należy jednak pamiętać, że darmowa wersja pozwala na dodanie tylko do 6 punktów na jednym obrazie.
Aby użyć Image Hotspot, możesz zainstalować i aktywować wtyczkę WordPress w swoim obszarze administracyjnym. Następnie przejdź do Image Map Hotspot » All Image Map Hotspot i kliknij przycisk „Dodaj nowy”.
Teraz nadaj swojej nowej interaktywnej mapie obrazu nazwę. Następnie wybierz jeden z typów wyświetlania podpowiedzi. Możesz sprawić, aby podpowiedzi interaktywnego punktu pojawiały się po najechaniu myszką lub kliknięciu.
Po zakończeniu kliknij „Zapisz”.
Po zakończeniu dodajmy Twój obraz.
Aby to zrobić, po prostu kliknij przycisk „Prześlij obraz”.
Otworzy się biblioteka multimediów, gdzie możesz przesłać nowy obraz lub wybrać istniejący.
Następnie możesz dodać punkty do swojej mapy obrazu. Aby to zrobić, po prostu kliknij przycisk „Dodaj punkt”.
Teraz pojawi się okno dialogowe, w którym możesz skonfigurować swój interaktywny punkt na obrazie.
Najpierw przejdź do zakładki „Marker”. Tutaj możesz dostosować wygląd obrazu punktu. Aby zmienić ikony, kliknij znak „+” obok pól „Ikony” i/lub „Ikony po najechaniu”.
„Ikony” odnoszą się do domyślnego symbolu punktu, gdy nie jest on klikany ani najechany. Tymczasem „Ikony po najechaniu” to symbol, który pojawia się, gdy użytkownik klika lub najeżdża na punkt.
Teraz wybierz ikonę, aby zastąpić bieżącą domyślną opcję. Wtyczka oferuje wiele do wyboru.
Po dokonaniu wyboru, kliknij na niego i naciśnij przycisk „Zamknij”.
Po skonfigurowaniu obrazów punktów dostępu możesz zmienić kolory ikon.
Wtyczka pozwala na ustawienie innego koloru domyślnej ikony punktu aktywnego niż kolor ikony po najechaniu na nią. W ten sposób użytkownicy mogą łatwo rozpoznać, czy punkt aktywny jest aktywny po kliknięciu lub najechaniu na niego.
Aby zmienić kolor, wystarczy kliknąć przycisk wyboru koloru w kształcie kwadratu i wybrać kolor, którego chcesz użyć.
Następnie możesz kliknąć w dowolnym miejscu na stronie, aby przejść do innego ustawienia.
Możesz również dostosować rozmiar ikony punktu aktywnego na komputerze. Im wyższa liczba, tym większa będzie ikona.
Gdy będziesz zadowolony z wyglądu ikony, kliknij „Zapisz”.
Teraz przewiń w górę i przejdź do zakładki „Treść”. Tutaj możesz dostosować tekst i wygląd etykietki.
Wtyczka oferuje 4 szablony do wyboru, dzięki czemu możesz wybrać ten, który najlepiej pasuje do projektu Twojej strony internetowej.
Poza tym upewnij się, że zastąpiłeś domyślną treść tytułu własnym tekstem.
A w zależności od projektu Twojej strony, możesz chcieć zwiększyć rozmiar czcionki i zmienić kolor tekstu, aby poprawić jego czytelność.
Gdy będziesz zadowolony z ustawień, po prostu kliknij „Zapisz”.
Ostatnia zakładka to „link”. Tutaj masz możliwość uczynienia tekstu etykietki hiperłączem, dzięki czemu użytkownicy mogą zostać przekierowani na inną stronę.
Jeśli chcesz to zrobić, wybierz „Tak” w ustawieniu „Czy chcesz linkować tytuł?”.
Następnie w odpowiednim polu wstaw adres URL swojego linku do tytułu i wybierz, czy chcesz, aby link otwierał się w nowej karcie, czy nie.
Na koniec kliknij „Zapisz”.
Teraz na Twoim obrazku powinien pojawić się nowy punkt aktywny, który możesz przeciągnąć do pożądanej pozycji.
Możesz również powtórzyć te same kroki, aby utworzyć więcej punktów aktywnych na obrazku.
Po skonfigurowaniu mapy obrazu możesz ponownie kliknąć przycisk „Zapisz”.
Aby dodać punkt interaktywny do obrazu na dowolnej ze swoich stron, wpisów i/lub widżetów, możesz skopiować krótki kod znajdujący się nad obrazem.
Następnie po prostu wklej krótki kod do bloku krótkiego kodu w swoim widżecie, stronie lub wpisie w edytorze bloków. Więcej informacji na ten temat znajdziesz w naszym przewodniku krok po kroku jak dodawać i używać krótkich kodów w WordPress.
Oto jak wygląda nasz interaktywny punkt interaktywny do obrazu:
Więcej wskazówek dotyczących projektowania WordPress, które powinieneś znać
Oprócz tworzenia interaktywnych punktów interaktywnych do obrazów, istnieje wiele innych sposobów na angażujące projektowanie Twojej strony internetowej. Oto kilka przewodników, które mogą Ci pomóc:
- Kluczowe elementy projektowe skutecznej strony internetowej WordPress
- Jak dodać nieskończone przewijanie do swojej witryny WordPress (krok po kroku)
- Jak dodać nieskończone przewijanie do swojej witryny WordPress (krok po kroku)
- Jak stworzyć wizualną mapę strony w WordPress (krok po kroku)
- Jak stworzyć przyklejony, pływający pasek stopki w WordPress
- Jak dodać zmieniacz rozmiaru czcionki w WordPress dla dostępności
- Jak dodać przycisk „Kliknij, aby zadzwonić” w WordPressie (krok po kroku)
- Jak dodać niestandardowy pasek przewijania w WordPress
- Jak dodać pasek postępu do swoich wpisów na WordPressie
- Jak utworzyć niestandardowy separator kształtów w WordPress
- Jak dodać przewijany ticker wiadomości w WordPress
Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak łatwo dodawać punkty interaktywne do obrazów w WordPress. Możesz również zapoznać się z naszym ostatecznym przewodnikiem po sztuczkach dotyczących pasków bocznych WordPress, aby uzyskać maksymalne rezultaty, oraz naszymi ekskluzywnymi wyborami najlepszych kreatorów motywów WordPress.
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.
Masz pytanie lub sugestię? Zostaw komentarz, aby rozpocząć dyskusję.