Jak stworzyć interaktywną mapę obrazu w WordPress
Opublikowany: 2022-07-14Szczegóły, szczegóły, szczegóły… Trudno jest przekazać mnóstwo ważnych drobnych szczegółów produktu bez zrażania klientów ścianą szczegółowego tekstu. Jeśli chcesz wskazać obiekt, pomieszczenie lub obszar – a także podać szczegółowe informacje bez przerywania podróży klienta, wysyłając go do różnych części Twojej witryny – wtedy odpowiedzią jest mapa obrazu WordPress.
Mapa obrazów WordPress to najlepszy sposób na zaprezentowanie pięknych zdjęć i skuteczne dodanie wielu szczegółów, bez psucia efektu. Otrzymujesz maksymalną ilość informacji skompresowanych w najmniejszej ilości internetowej nieruchomości – ale zrobione pięknie.
Funkcja powiększania obrazów w sklepach e-commerce rozwiązuje problem w elegancki sposób, ale instalacja sklepu WooCommerce nie jest rozwiązaniem dla firm, które potrzebują dodatkowego „oomph” dla swoich zdjęć.
Przeczytaj nasz szczegółowy przewodnik, aby dowiedzieć się, jak łatwo tworzyć interaktywne mapy obrazów w WordPress za pomocą wtyczki WP Draw Attention.
Przegląd map obrazów WordPress i WP Draw Attention
Mapa obrazu WordPress to interaktywny element graficzny, który zawiera obszary, które można kliknąć.
Oczywistym zastosowaniem są deweloperzy, pośrednicy w obrocie nieruchomościami oraz właściciele pensjonatów lub hoteli. Wykorzystują mapy obrazów, aby zaprezentować interaktywne plany pięter z pięknymi obrazami dołączonymi do każdego obszaru.
Istnieje jednak więcej zalet map obrazów w WordPress, o czym świadczy narzędzie do mapowania obrazów WP Draw Attention. Szybko staje się tajnym narzędziem marketingowym wybieranym przez majsterkowiczów, rzemieślników, rzemieślników, artystów i innych handlowców internetowych.
Zwróć uwagę: wtyczka interaktywnej mapy obrazówAktualna wersja: 1.9.32
Ostatnia aktualizacja: 16 czerwca 2022
zwrócić uwagę.1.9.32.zip
Interaktywny obraz WP Draw Attention (np. plan piętra) pozwala Twoim klientom na powiększenie do niewiarygodnych szczegółów. Możesz dodać szczegółowe wyjaśnienie, tekst, liczby, obrazy, a nawet wideo dla każdego obszaru, aby podkreślić unikalne cechy Twojego produktu. Możesz rozwinąć wszystkie zalety swojego produktu bez przytłaczania odwiedzającego ścianą tekstu.
Responsywne mapy obrazów utworzone za pomocą wtyczki WP Draw Attention generują własne metadane zgodnie z Twoimi danymi wejściowymi i dlatego są przyjazne dla SEO od samego początku.
Wspomnimy o różnicach między darmowymi i premium planami WP Draw Attention poniżej, ale musimy opowiedzieć o tej wspaniałej funkcji darmowej wtyczki… Dostajesz tylko jeden interaktywny rysunek na stronę, ale nieodpartym czynnikiem jest to, że możesz dodać dowolny liczba obszarów szczegółów do tego rysunku.
Jako przykład użyjmy planu piętra. Możesz połączyć obszary na planie piętra ze zdjęciami każdego pokoju, ale możesz także określić konkretne interesujące elementy na ogólnym planie piętra. Możesz skończyć ze szczegółowymi zdjęciami dzieł sztuki, antyków, kompozycji kwiatowych i mydła… wszystko połączone z Twoim jednym bezpłatnym obrazem podstawowym.
Zacznijmy nasz przewodnik bez zbędnych ceregieli!
Jak stworzyć mapę obrazu w WordPressie za pomocą WP Draw Attention
Skonfigurowanie interaktywnego portfolio za pomocą wtyczki WP Draw Attention jest niezwykle łatwe. Zajmiesz stylizację na każdym rysunku.
Krok 1: Zainstaluj WP Draw uwagę
Pobierz bezpłatną wtyczkę Draw Attention z biblioteki wtyczek WordPress lub z pulpitu WordPress.
W WordPressie przejdź do Wtyczki → Dodaj nowy . Wyszukaj „Przyciągaj uwagę”. Zainstaluj, a następnie aktywuj wtyczkę. Po aktywacji przejdź do niego z menu po lewej stronie (Ustawienia → WP Przyciągnij uwagę).
Krok 2: Utwórz swoją pierwszą mapę obrazu
Po zainstalowaniu kliknij pozycję menu „Przyciągnij uwagę”, aby rozpocząć.
Ponieważ darmowa wersja umożliwia utworzenie tylko jednej mapy obrazu, zobaczysz opcję „Edytuj obraz”, której przyjrzymy się bliżej poniżej.
Na tej stronie „Edytuj obraz” wpisz tytuł (nazwę) nowego interaktywnego obrazu. Będzie on widoczny na Twojej stronie, więc wybierz opisową, przyjazną SEO nazwę.
Krok 3: Prześlij obraz podstawowy i dodaj obszar hotspot
Kliknij sekcję „Upuść obraz tutaj” po prawej stronie ekranu, aby wybrać lub przesłać obraz podstawowy.
W naszym przypadku poniżej zamieściliśmy plan mieszkania jako przykład tego, jak deweloper, architekt, a nawet projektant wnętrz może zaprezentować projekty dla konkretnej nieruchomości.
W sekcji „hotspot” zobaczysz obraz, który właśnie przesłałeś z instrukcją „narysowania klikalnych obszarów naszego obrazu”.
Następnie zaznacz każdą sekcję, do której chcesz dodać link do dodatkowych informacji. Aby to zrobić, kliknij każdy punkt obszaru, który chcesz podświetlić na interaktywnej mapie obrazu, tak jak to zrobiliśmy poniżej.
Możesz instynktownie użyć myszy, aby przeciągnąć kursor, aby prześledzić obraz, ale musisz utworzyć zarys kropek, a nie rysunek. Umieść kursor w pierwszym miejscu obszaru, który chcesz podświetlić. Kliknij i przejdź do następnego miejsca. Powtarzaj, aż utworzysz zarys obszaru.
Po zaznaczeniu trzech kropek możesz chwycić kontur za róg, dodać więcej punktów do konturu, przesunąć klocek i w inny sposób instynktownie bawić się swoim diagramem.
Przejdź do pola „tytuł” pod rysunkiem. Wpisz nazwę podświetlonego obszaru (w powyższym przykładzie sypialnia mieszkania).
Następnie dodaj bardziej szczegółowy opis pomieszczenia lub obiektu. Następnie dodaj link do zdjęcia w bibliotece multimediów (lub zewnętrzny adres URL), który ma się pojawiać, gdy ktoś kliknie lub stuknie mapę obrazu.
Zapisz mapę obrazu (przejdź do sekcji WordPress Publishing w prawym górnym rogu), zanim przejdziesz do następnego kroku.
To wszystko – dodałeś pierwszy klikalny obszar do obrazu podstawowego!
Krok 4: Dodaj więcej obszarów hotspotów i podgląd
Pozostań w sekcji „Obszar hotspotu”. Teraz kliknij następny obszar rozwijany o nazwie „Obszar do klikania nr 2”
Powtórz kroki wykonywania serii kliknięć wzdłuż konturu obszaru, który chcesz wyróżnić. Nazwij obraz mapy (w tym przypadku „łazienka”), połącz obszar z wybranym zdjęciem i zapisz.
Kontynuuj, aż pokryjesz wszystkie obszary oraz nazwałeś i połączysz wszystkie swoje hotspoty. Zapisz i opublikuj swój obraz.
Możesz teraz wyświetlić podgląd mapy obrazu, aby zobaczyć, jak może wyglądać w Twojej witrynie.
Krok 5: Nadaj styl swojemu interaktywnemu obrazowi
Kliknij „Edytuj interaktywny obraz”, aby przejść do automatycznego linku, który pojawia się u góry strony pod nazwą Twojego obrazu. Otwiera nową stronę z Twoim interaktywnym obrazem. Obraz początkowo ma domyślną stylizację WP Draw Attention.
Otwórz / rozwiń funkcję „Więcej stylów okienka informacyjnego” na swojej stronie. Wybierz kolor tła obrazu, kolor tytułu, który pojawi się nad połączonym obrazem, oraz kolor opisu tekstu.
Pole „Więcej informacji o kolorze tła” odnosi się do koloru bloku WordPress zawierającego dodatkowe informacje. Możesz także edytować styl „podświetlenia”. To kolor podświetlonego obszaru, który pojawia się na obrazie podstawowym. Wersja premium zawiera wiele wstępnie ustawionych motywów do szybkiej stylizacji.
Zaktualizuj zmiany. Następnie dodamy Twoją nową mapę obrazu WordPress do nowej strony.
Krok 6: Dodaj interaktywną mapę obrazu do swojej witryny
Krótki kod pojawia się po prawej stronie ekranu edycji, poniżej pola "Dodaj obraz". Po prostu brzmi „Kopiuj krótki kod”, ponieważ darmowa wtyczka oferuje tylko jeden interaktywny diagram. To się zmienia, jeśli używasz wtyczki premium i masz więcej niż jeden interaktywny obraz.
Skopiuj shortcode, utwórz nową stronę w swojej witrynie i wstaw ją do bloku shortcode.
Otóż to.
Mapa obrazu jest teraz widoczna w witrynie WordPress, a odwiedzający mogą z nią wchodzić w interakcje do woli, jak widać na poniższym filmie.
Uaktualnij do WP Draw Attention Pro, aby uzyskać więcej funkcji
Oprócz nieograniczonej liczby map obrazu w WP Draw Attention Pro, te trzy specjalne funkcje mogą zawrzeć umowę dla doświadczonych marketerów cyfrowych:
- Możesz zmienić typ interakcji na „najedź” lub „kliknij”.
- Możesz „zawsze pokazywać” punkty aktywne obrazu. Podświetlony obszar pozostanie podświetlony, dzięki czemu odwiedzający będą mogli od razu zobaczyć, który obszar przeglądają.
- Dodatkowo możesz użyć różnych kolorów podświetlenia w różnych częściach obrazu. Dzięki temu mapy obrazów są natychmiast rozpoznawalne jako obrazy interaktywne.
Spójrz na dodatkowe opcje stylizacji poniżej i zwróć uwagę, jak masz opcję „Wszystkie obrazy” w menu pulpitu nawigacyjnego po lewej stronie. Odblokowałeś opcję tworzenia nieograniczonej liczby map obrazów w WordPressie.
Ogólne opcje stylizacji zwiększają się i stają się łatwiejsze dzięki możliwości wyboru kilku gotowych motywów. Możesz także poprawić wyrównanie każdej mapy obrazu na swojej stronie internetowej.
Jeśli masz kilka różnych planów pięter lub jednostek, które chciałbyś wyróżnić, WP Draw Attention Pro to świetna inwestycja, nie tylko dlatego, że otrzymujesz nieograniczoną liczbę map obrazów, ale także dlatego, że będą wyglądać jeszcze lepiej niż wersja podstawowa .
Więc to jest to. Tworzenie map obrazów w WordPress jest tak łatwe dzięki WP Draw Attention.