Jak dodać hotspoty z obrazami w WordPress (prosty sposób)

Czasami samo dodanie obrazów i wizualizacji nie wystarczy, aby przyciągnąć uwagę odwiedzających.

To właśnie tam hotspoty graficzne mogą przyjść na ratunek. Te klikalne obszary mogą zmienić prosty obraz w angażujące, informacyjne doświadczenie dla odwiedzających. Sami eksperymentowaliśmy z nimi, aby pokazać punkty na mapie, tagi członków zespołu na zdjęciu i podkreślić cechy produktu.

Jeśli zastanawiasz się, jak zrobić to samo, jesteś we właściwym miejscu. Ten przewodnik pokaże ci 2 proste metody tworzenia hotspotu obrazu dla twojej strony WordPress bez żadnego kodu.

Kiedy dodawać hotspoty do zdjęć w WordPress?

Hotspoty na obrazach to klikalne miejsca, które mogą przekształcić zwykłe obrazy w interaktywne treści, które odwiedzający mogą eksplorować. Kiedy jednak warto pomyśleć o dodaniu hotspotów do zdjęć?

Jednym z dobrych momentów na użycie hotspotów jest pokazanie różnych części obrazu produktu.

Załóżmy, że sprzedajesz nowy telefon. Możesz dodać hotspoty, aby wskazać jego aparat, ekran i inne funkcje. Pomoże to klientom poznać produkt bez konieczności czytania długich opisów.

Wiele witryn z artykułami domowymi wykorzystuje również hotspoty graficzne, aby wyróżnić szczegóły produktów wyświetlanych na zainscenizowanych zdjęciach.

Hotspoty są również świetne do tworzenia bardziej angażujących infografik i wizualizacji danych. Zamiast upychać wszystkie informacje na jednym obrazie, można ukryć dodatkowe szczegóły za hotspotami. Gdy ludzie klikają na różne części infografiki, mogą zobaczyć więcej faktów i liczb.

Jeśli prowadzisz witrynę e-learningową, hotspoty mogą poprawić wrażenia użytkownika i sprawić, że lekcje będą bardziej interaktywne. Na przykład, możesz dodać hotspoty do mapy, pozwalając uczniom klikać, aby dowiedzieć się o różnych krajach lub punktach orientacyjnych.

Mając to na uwadze, przyjrzyjmy się, jak łatwo dodać hotspoty graficzne do witryny WordPress. Wymyśliliśmy 2 metody i możesz skorzystać z poniższych szybkich linków, aby poruszać się po artykule:

Metoda 1: Dodawanie hotspotów z obrazami za pomocą SeedProd (dla stron docelowych/motywów niestandardowych)

Ta pierwsza metoda wykorzystuje SeedProd, kreator stron typu „przeciągnij i upuść„, aby dodać hotspoty graficzne do witryny WordPress. Zalecamy tę metodę, jeśli tworzysz niestandardową stronę docelową lub niestandardowy motyw WordPress i chcesz korzystać z platformy z blokiem hotspotów obrazu.

SeedProd 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. Jest więc opcja dla każdego typu witryny.

Jedną rzeczą, którą powinieneś wziąć pod uwagę jest to, że jeśli chcesz po prostu darmowego rozwiązania do tworzenia hotspotów obrazu, to ta metoda może nie być dla Ciebie. Wynika to z faktu, że blok hotspotów SeedProd jest dostępny tylko w płatnych wersjach SeedProd. W takim przypadku zalecamy skorzystanie z metody 2.

Aby uzyskać więcej informacji na temat funkcji i cen wtyczki, zapoznaj się z naszą recenzją SeedProd.

Po zakupie planu SeedProd można pobrać i zainstalować wtyczkę WordPress w obszarze administracyjnym. Następnie przejdź do SeedProd „ Ustawienia i wprowadź swój klucz licencyjny. Informacje te można znaleźć na stronie konta SeedProd.

Po zakończeniu kliknij „Zweryfikuj klucz”.

Następnie przejdź do SeedProd ” Landing Pages.

Następnie kliknij „Dodaj nową stronę docelową”.

Zobaczysz teraz wszystkie szablony oferowane przez SeedProd. Dostępne są opcje dla wiralowej strony docelowej listy oczekujących, strony docelowej reklamy Google, strony wkrótce dostępnej i innych.

Upewnij się, że przewijasz opcje i przeglądasz je jeden po drugim, abyś mógł wybrać tę, która najlepiej odpowiada Twoim potrzebom.

Po wybraniu szablonu wystarczy najechać na niego kursorem.

Następnie kliknij pomarańczowy znacznik wyboru.

Teraz pojawi się nowe wyskakujące okienko z prośbą o nazwanie strony i wstawienie jej adresu URL.

Następnie kliknij przycisk „Zapisz i rozpocznij edycję strony”.

Spowoduje to otwarcie edytora przeciągania i upuszczania SeedProd.

Działa podobnie do edytora bloków WordPress, gdzie można przeciągać i upuszczać bloki na stronę i klikać na nie, aby dostosować je w dowolny sposób.

Aby utworzyć hotspoty obrazu, można znaleźć blok „Hotspot” na lewym pasku bocznym.

Następnie wystarczy przeciągnąć i upuścić go bezpośrednio na stronie.

Następnie musisz przesłać obraz WordPress, do którego chcesz dodać hotspoty.

Można to zrobić, klikając blok „Hotspot” i wybierając opcję „Use Your Own Image” lub „Use a Stock Image”, aby wybrać obraz.

Pierwsza opcja otworzy bibliotekę multimediów, w której można wybrać istniejący obraz lub przesłać nowy. Jeśli rozmiar jest dość duży, możesz zapoznać się z naszym przewodnikiem na temat przesyłania dużych obrazów w WordPress.

Po przesłaniu obrazu można wprowadzić tekst alternatywny, aby opisać obraz dla wyszukiwarek i narzędzi do czytania ekranu.

Można również dostosować rozmiar i wyrównanie obrazu.

Następnie możesz przewinąć w dół, aby rozpocząć dodawanie hotspotów.

Można to zrobić, klikając przycisk „+ Dodaj hotspot”.

Na obrazie pojawi się teraz pomarańczowa kropka. Możesz dostosować jej położenie, przeciągając poziome i pionowe paski orientacji.

Dodatkowo można wstawić tekst, który powinien pojawić się po najechaniu kursorem użytkownika na hotspot.

Przechodząc w dół, można zmienić kolor hotspotu.

Wystarczy kliknąć ustawienia „Kolor”, aby wybrać kolor pasujący do marki i projektu witryny.

Przewijając dalej w dół, można włączyć przełącznik „Ustawienia zaawansowane”.

W tym miejscu można dodać link do tekstu etykietki hotspotu, aby przekierować użytkowników na wybraną stronę.

Oprócz tego można wybrać niestandardową ikonę, która zastąpi domyślny kształt koła.

Aby to zrobić, wystarczy kliknąć przycisk „Wybierz ikonę”.

Pojawi się wyskakujące okno, w którym można wybrać różne ikony z biblioteki SeedProd. Możesz także wybrać ikony z Font Awesome, jeśli potrzebujesz więcej opcji.

Aby użyć ikony, wystarczy ją kliknąć.

Po wybraniu ikony można przeciągnąć pasek „Rozmiar ikony”, aby zmniejszyć lub powiększyć kształt, w zależności od preferencji.

Następnie można powtórzyć kroki, aby utworzyć więcej interaktywnych hotspotów obrazu.

Poniżej można dodać animowany efekt do hotspotów obrazu. Dostępne są 2 opcje: „Soft Beat” i „Expand”.

Przejdźmy teraz do sekcji „Etykietka”.

W tym miejscu można zmienić położenie etykietki (w prawo, w lewo, nad lub pod hotspotem) oraz zmienić wyzwalacz.

Jeśli wybierzesz „Kliknij”, oznacza to, że etykietka pojawi się, gdy użytkownik kliknie hotspot. Z drugiej strony, „Hover” oznacza, że etykietka pojawi się po najechaniu na nią kursorem.

Następnie można zmienić czas trwania etykietki.

Odnosi się to po prostu do tego, jak długo potrwa wyświetlenie etykietki po najechaniu kursorem lub kliknięciu hotspotu. Jeśli chcesz, aby tekst pojawiał się natychmiast, ustaw wartość 0.

Można również wyłączyć strzałkę etykietki narzędzia, w zależności od preferencji.

Teraz, jeśli przejdziesz do karty „Zaawansowane”, możesz jeszcze bardziej dostosować wygląd obrazu.

Można na przykład dodać cień ramki lub dostosować wypełnienie i margines.

Po zakończeniu kliknij przycisk „Zapisz” w prawym górnym rogu.

Następnie kliknij „Opublikuj”, aby uruchomić stronę.

I to wszystko! Upewnij się, że przeglądasz stronę na telefonie komórkowym, komputerze stacjonarnym i tablecie, aby sprawdzić, czy wygląda dobrze na wszystkich urządzeniach.

Oto jak wygląda nasz interaktywny hotspot z obrazami:

Metoda 2: Dodawanie hotspotów z obrazami za pomocą wtyczki Image Hotspot (bezpłatnej, ale ograniczonej)

Jeśli korzystanie z kreatora stron i zmiana motywu brzmi trochę za dużo, możesz zamiast tego użyć darmowej wtyczki WordPress Image Hotspot. Wtyczka ta jest świetną alternatywą dla metody 1, ale należy pamiętać, że darmowa wersja umożliwia dodanie tylko do 6 hotspotów na jednym obrazie.

Aby korzystać z Image Hotspot, należy zainstalować i aktywować wtyczkę WordPress w obszarze administracyjnym. Następnie przejdź do Image Map Hotspot ” All Image Map Hotspot i kliknij przycisk „Add New”.

Teraz nadaj nazwę nowemu hotspotowi mapy obrazów. Następnie wybierz jeden z typów wyświetlania etykietek. Etykietki hotspotów mogą być wyświetlane po najechaniu kursorem lub kliknięciu.

Po zakończeniu kliknij „Zapisz”.

Po zakończeniu dodajmy obraz.

Aby to zrobić, wystarczy kliknąć przycisk „Upload Image”.

Spowoduje to otwarcie biblioteki multimediów, w której można przesłać nowy obraz lub wybrać istniejący.

Następnie można dodać hotspoty do mapy obrazu. W tym celu wystarczy kliknąć przycisk „Dodaj punkt”.

Pojawi się wyskakujące okienko, w którym można skonfigurować interaktywny hotspot obrazu.

Najpierw przejdź do karty „Marker”. W tym miejscu można dostosować wygląd obrazu hotspotu. Aby zmienić ikony, możesz kliknąć znak „+” obok pól „Ikony” i/lub „Ikony najechania kursorem”.

„Ikony” odnoszą się do domyślnego symbolu hotspotu, gdy nie jest on kliknięty lub najechany. Tymczasem „Hover Icons” to symbol, który pojawia się, gdy użytkownik kliknie lub najedzie na hotspot.

Teraz wybierz ikonę, która zastąpi bieżącą opcję domyślną. Wtyczka ma wiele opcji do wyboru.

Po dokonaniu wyboru wystarczy kliknąć na niego i nacisnąć przycisk „Zamknij”.

Po skonfigurowaniu obrazów hotspotów można zmienić kolory ikon.

Wtyczka umożliwia zmianę domyślnego koloru ikony hotspotu na inny niż kolor po najechaniu na nią kursorem. W ten sposób użytkownicy mogą łatwo stwierdzić, czy hotspot jest aktywny po kliknięciu lub najechaniu na niego kursorem.

Aby zmienić kolor, wystarczy kliknąć kwadratowy przycisk wyboru koloru i wybrać żądany kolor.

Następnie można kliknąć w dowolnym miejscu na stronie, aby przejść do innego ustawienia.

Można również dostosować rozmiar ikony hotspotu na pulpicie. Im wyższa liczba, tym większa będzie ikona.

Gdy będziesz zadowolony z wyglądu ikony, po prostu kliknij „Zapisz”.

Teraz przewiń w górę i przejdź do karty „Treść”. To tutaj możesz dostosować tekst i wygląd etykietki.

Wtyczka oferuje 4 szablony do wyboru, dzięki czemu można wybrać ten, który najlepiej pasuje do projektu witryny.

Poza tym, upewnij się, że zastąpiłeś domyślną treść tytułu własnym tekstem.

W zależności od projektu witryny możesz zwiększyć rozmiar czcionki i zmienić kolor tekstu, aby poprawić jego czytelność.

Gdy ustawienia są satysfakcjonujące, wystarczy kliknąć „Zapisz”.

Ostatnia karta to „link”. W tym miejscu masz możliwość ustawienia hiperłącza do tekstu etykietki, dzięki czemu użytkownicy mogą zostać przekierowani na inną stronę.

Jeśli chcesz to zrobić, wybierz „Tak” w ustawieniu „Czy łączyć tytuł?”.

Następnie wstaw adres URL linku tytułowego w odpowiednim polu i wybierz, czy chcesz, aby link otwierał się w nowej karcie, czy nie.

Na koniec kliknij „Zapisz”.

Teraz na obrazie powinien pojawić się nowy hotspot, który można przeciągnąć w wybrane miejsce.

Możesz również powtórzyć te same kroki, co poprzednio, aby utworzyć więcej hotspotów obrazu.

Po skonfigurowaniu mapy obrazu można ponownie kliknąć przycisk „Zapisz”.

Aby dodać hotspot z obrazem do dowolnej strony, postu i/lub widżetu, można skopiować krótki kod znajdujący się nad obrazem.

Następnie wystarczy wkleić krótki kod do bloku krótkiego kodu na widżecie, stronie lub w poście w edytorze bloków. Więcej informacji na ten temat można znaleźć w naszym przewodniku krok po kroku na temat dodawania i używania krótkich kodów w WordPress.

Oto jak wygląda nasz interaktywny hotspot z obrazem:

Odkryj więcej ekscytujących funkcji projektowych dla swojej witryny WordPress

Oprócz tworzenia interaktywnych hotspotów z obrazami, istnieje wiele innych sposobów na to, aby projekt strony internetowej był angażujący. Oto kilka przewodników, które mogą ci w tym pomóc:

• Kluczowe elementy projektu dla skutecznej witryny WordPress
• Jak dodać nieskończone przewijanie do witryny WordPress (krok po kroku)
• Jak dodać nieskończone przewijanie do witryny WordPress (krok po kroku)
• Jak utworzyć wizualną mapę witryny w WordPress (krok po kroku)
• Jak utworzyć pływający pasek stopki w WordPress?
• Jak dodać zmianę rozmiaru czcionki w WordPress dla ułatwienia dostępu?
• Jak dodać przycisk Click-to-Call w WordPress (krok po kroku)
• Jak dodać niestandardowy pasek przewijania w WordPress?
• Jak dodać pasek postępu w swoich postach WordPress
• Jak utworzyć niestandardowy dzielnik kształtu w WordPress?
• Jak dodać przewijany pasek aktualności w WordPress?

Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo dodawać hotspoty graficzne w WordPress. Możesz również zapoznać się z naszym kompletnym przewodnikiem po sztuczkach dotyczących paska bocznego WordPress, aby uzyskać maksymalne wyniki, a także z naszymi najlepszymi kreatorami motywów WordPress.

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.