Chcesz dowiedzieć się, jak stworzyć interaktywny obraz za pomocą Hotspotów w WordPress dzięki Elementor i niezbędne dodatki?

Obraz jest doskonałym narzędziem do przekazywania informacji. Każdy wie, że informacje przekazywane za pomocą obrazu — i całej formy wizualnej — są łatwiejsze do zrozumienia i zapamiętania.

W kontekście sieci można korzystać z wielu formatów graficznych. Z infografiki, zdjęcia, komiksu, ilustracji itp.

Jeśli chcesz tworzyć treści internetowe, takie jak anatomia czegoś, punkty orientacyjne miasta, mapy lub wskazówki, budowanie obrazu za pomocą Hotspotów może być świetnym pomysłem.

Ideą tego typu treści jest dostarczenie interaktywnego obrazu, który ułatwia czytelnikom zrozumienie przekazywanych informacji. Możesz dodać Hotspoty do obrazu, który zawiera podpowiedź na każdym Hotspocie. Oto przykład.

Jeśli masz a strona internetowa w oparciu o WordPress, tworzenie obrazu z hotspotami nie jest zbyt trudne. Możesz go utworzyć za pomocą modułu Niezbędne dodatki .

Co to jest moduł Essential Addons?

Essential Addons to dodatek doElementor. To jeden z najpopularniejszych modów z ponad 2 milionami pobrań. Ten dodatek dodaje około 60 dodatkowych widżetów do Twojego Elementor.

Jednym z widżetów oferowanych przez Essential Addons jest Hotspoty obrazów EA którego możesz użyć do stworzenia interaktywnego obrazu. Sam Essential Addons jest dodatkiem freemium, ale musisz używać wersji pro, aby tworzyć obrazy za pomocą Hotspotów, ponieważ widżet EA Image Hotspots jest dostępny tylko w tej wersji.

Jak używać modułu Essential Addons do tworzenia obrazów za pomocą Hotspotów

Najpierw musisz zainstalować moduły Elementor i Essential Addons na swoim WordPressie. Możesz pobrać wersję pro Essential Addons na jej temat strona internetowa urzędnik. Podczas gdy w przypadku Elementora możesz użyć darmowej wersji.

Zobacz także: Jak korzystać z globalnego widżetu w Elementorze

Darmowa wersja Elementora jest dostępna w katalogu WordPress Plugin więc możesz go zainstalować, wpisując „elementor” w polu wyszukiwania instalatora wtyczek (Wtyczki – > Dodaj).

utwórz interaktywny obraz za pomocą Hotspotów w WordPressie za pomocą Elementora

Po zainstalowaniu Elementora i niezbędnych dodatków utwórz nową stronę (Strony – > Dodaj) lub nowy przedmiot (Pozycje – > Dodaj) i edytuj go za pomocą Elementora. Po kliknięciu przycisku zostaniesz przekierowany do edytora Elementora Edytuj za pomocą Elementora.

Przed utworzeniem obrazów z punktami aktywnymi możesz najpierw ustawić układ. W tym celu otwórz panel ustawień strony, klikając ikonę koła zębatego w lewym dolnym rogu lewego panelu.

Czytaj także: Jak korzystać z widżetu postów Elementora

Ustaw układ w menu rozwijanym Układ

Dodaj nową sekcję, klikając ikonę plusa w polu edycji i dodaj widżet EA Image Hotspots z lewego panelu.

Dodaj swój obraz, klikając selektor obrazów w lewym panelu.

utwórz interaktywny obraz za pomocą Hotspotów w WordPressie za pomocą Elementora

otwarta opcja hotspoty na lewym panelu, aby dodać punkty dostępu. Domyślnie widżet EA Image Hotspots zawiera hotspot. Możesz kliknąć domyślny punkt dostępu, aby edytować jego zawartość.

Domyślnie typ punktu dostępu jest ustawiony na ikona. Możesz to zmienić na teksty lub odejść Vide jeśli chcesz.

utwórz interaktywny obraz za pomocą Hotspotów w WordPressie za pomocą Elementora

Kliknij zakładkę STANOWISKO aby ustawić pozycję punktu dostępowego. Ustaw pozycje X i Y, przeciągając suwaki.

Kliknij zakładkę ETYKIETA , aby dodać treść podpowiedzi. Aktywuj podpowiedź i dodaj swoją treść w edytorze. Możesz także ustawić położenie podpowiedzi: góra, dół, lewo lub prawo.

Aby dodać więcej hotspotów, po prostu kliknij przycisk DODAJ ELEMENT w sekcji hotspoty i powtórz powyższe kroki, aby ustawić pozycję punktu aktywnego, zawartość podpowiedzi i pozycję podpowiedzi.

Otwórz sekcję Ustawienia podpowiedzi , aby ustawić rozmiar podpowiedzi i efekt animacji.

utwórz interaktywny obraz za pomocą Hotspotów w WordPressie za pomocą Elementora

Teraz przejdź do zakładki Styl stylizować punkty aktywne oraz podpowiedzi. Najpierw otwórz opcję Obraz aby ustawić rozmiar obrazu.

utwórz interaktywny obraz za pomocą Hotspotów w WordPressie za pomocą Elementora

Sekcja otwarta hotspot dostosować hotpoty. Możesz ustawić rozmiar, kolor ikony (lub tekst w zależności od wybranego typu punktu aktywnego), kolor tła, promień obramowania itp.

Odkryj również: Jak dodawać powiązane elementy w Elementorze

Otwórz sekcję Tooltip dostosować podpowiedzi. Możesz ustawić kolor tła, kolor tekstu, typografię (rozmiar czcionki, rodzinę czcionek, styl czcionki) i szerokość.

Do tej pory z powodzeniem tworzyłeś obrazy z punktami aktywnymi. Możesz bawić się lewym panelem, aby dostosować swoje obrazy za pomocą punktów aktywnych, dopóki nie będziesz zadowolony z wyniku. Po zakończeniu możesz kliknąć przycisk PUBLISH opublikować swoją stronę.

Dodaj obrazy z hotspotami do Gutenberga

Jeśli chcesz dodać obrazy z hotspotami jako materiał pomocniczy dla artykułu, nad którym pracujesz, możesz zintegrować go z Gutenberg (domyślnym edytorem WordPress) za pomocą wtyczki Bloki Elementora dla Gutenberga. Ta wtyczka umożliwia użycie szablonu Elementora jako bloku Gutenberga.

Aby zapisać obrazy z punktami aktywnymi powyżej jako szablon sekcji Elementora, kliknij prawym przyciskiem myszy uchwyt sekcji i wybierz Zapisać jako szablon.

Nadaj swojemu modelowi nazwę i kliknij przycisk REKORD.

utwórz interaktywny obraz za pomocą Hotspotów w WordPressie za pomocą Elementora

Otwórz artykuł, w którym chcesz dodać obrazy z punktami aktywnymi. Dodaj nowy blok, wybierz Biblioteka Elementora i wybierz szablon obrazu z właśnie utworzonymi punktami aktywnymi.

Pobierz Elementor Pro teraz !!!

Wnioski

Tutaj ! To tyle, jeśli chodzi o ten artykuł, który pokazuje, jak stwórz interaktywny obraz za pomocą Hotspotów w WordPressie dzięki Elementorowi i Essential Addons. Jeśli masz jakiekolwiek wątpliwości, jak się tam dostać, daj im znać w commentaires.

Możesz jednak również skonsultować się nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji projektów tworzenia stron internetowych, zapoznaj się z naszym przewodnikiem na stronie Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.

Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.

...