Jak tworzyć interaktywne obrazy w WordPress

Znalezienie idealnego obrazu do swojego wpisu na WordPressie to świetny początek, ale standardowe zdjęcia często mają ograniczenia. Twoi odwiedzający widzą obraz, ale mogą przegapić kluczowe szczegóły, które chcesz podkreślić.

Może to być frustrujące, gdy próbujesz zaprezentować konkretne funkcje lub przeprowadzić użytkowników przez proces. Interaktywne obrazy rozwiązują ten problem, pozwalając na dodawanie klikalnych punktów i podpowiedzi.

Po przetestowaniu kilku wtyczek znaleźliśmy metodę, która pozwala każdemu dodawać te funkcje bez kodowania. W tym przewodniku pokażemy Ci, jak łatwo tworzyć interaktywne obrazy w WordPressie.

W tym przewodniku przeprowadzimy Cię przez cały proces. Oto szybki przegląd tego, czego się nauczysz.

Czym jest interaktywny obraz?

Interaktywne zdjęcie może zawierać obszary interaktywne, podświetlenia, linki, klikalne przyciski, kolory, treści audiowizualne i inne.

Natychmiast jest to znacznie bardziej angażujące niż proste, standardowe zdjęcie, które przesyłasz na swoją stronę WordPress.

Interaktywne obrazy mogą przyciągnąć uwagę odwiedzającego do konkretnych funkcji i treści, a następnie wyświetlić dodatkowe informacje.

Na przykład możesz wyświetlić wyskakujące okienko, gdy odwiedzający najedzie kursorem na określony pasek na wykresie.

Ta interakcja może zachęcić odwiedzających do dokładniejszego przeglądania Twoich obrazów, co sprawi, że pozostaną oni na stronie dłużej. Może również stworzyć bardziej interaktywne i interesujące doświadczenie, które może zwiększyć liczbę wyświetleń strony i zmniejszyć współczynnik odrzuceń w WordPressie.

Interaktywne obrazy mogą również pokazywać odwiedzającym kolejne kroki, które powinni podjąć. Na przykład możesz dodać linki do innych części swojej witryny lub wyświetlić przycisk wezwania do działania.

Zobaczmy, jak możesz tworzyć interaktywne obrazy dla swojej witryny WordPress.

Jak dodać interaktywne obrazy do treści WordPress

Najłatwiejszym i najbardziej przyjaznym dla początkujących sposobem dodawania klikalnych obszarów lub interaktywnych punktów jest użycie wtyczki Draw Attention. Ta wtyczka pozwala na wyświetlenie okna z informacją „więcej informacji” lub otwarcie nowego adresu URL, gdy użytkownik wejdzie w interakcję z obrazem.

Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i aktywowanie wtyczki Draw Attention. Więcej szczegółów znajdziesz w naszym przewodniku krok po kroku jak zainstalować wtyczkę WordPress.

Po aktywacji przejdź do Zwróć uwagę » Edytuj obraz w panelu administracyjnym WordPress. Spowoduje to przejście do ekranu, na którym możesz tworzyć różne interakcje, a następnie dodawać je do obrazu jako klikalne obszary.

Na początek wpisz tytuł dla interaktywnego obrazu.

Pojawi się to obok obrazu na Twojej stronie WordPress. Na przykład, na poniższym obrazie używamy tytułu „Funkcje OptinMonster”.

Po wpisaniu tytułu przewiń do sekcji „Obraz” i wybierz obraz, którego chcesz użyć.

Możesz wybrać obraz z biblioteki multimediów lub przesłać nowy obraz.

Po wybraniu obrazu możesz dodawać kolory i linki, tworzyć klikalne obszary i wiele więcej, przewijając w dół do sekcji „Obszary hotspotów”.

Wtyczka domyślnie tworzy Klikalny Obszar 1, więc kliknij, aby rozwinąć tę sekcję.

Aby rozpocząć, musisz podświetlić obszar, który chcesz uczynić interaktywnym.

Draw Attention ma kilka różnych kształtów, których możesz użyć do podświetlenia, więc po prostu kliknij kształt, którego chcesz użyć. Na poniższym obrazku wybraliśmy prostokąt.

Teraz po prostu kliknij i przeciągnij, aby zaznaczyć obszar, który chcesz użyć jako punkt interaktywny obrazu.

Draw Attention pokaże teraz nowe ustawienia dla tego klikalnego obszaru. Na początek wpisz nazwę w polu „Tytuł”.

Pojawi się to jako etykietka podręczna, gdy odwiedzający najedzie kursorem myszy na punkt akcji, dlatego warto użyć czegoś opisowego.

Na poniższym obrazku przekształciliśmy obszar odliczania w punkt akcji i dodaliśmy tytuł obrazu „Timer odliczania”.

Po wykonaniu tej czynności otwórz menu rozwijane „Akcja” i wybierz, co się stanie, gdy odwiedzający kliknie ten obszar. Funkcja „Przyciągnij uwagę” może otworzyć link lub wyświetlić pole „więcej informacji”.

Zobaczysz różne ustawienia w zależności od wybranych opcji. Na przykład, jeśli wybierzesz „Przejdź do adresu URL”, będziesz musiał dodać link i określić, czy powinien on otwierać się w nowej karcie.

Jeśli wybierzesz opcję „Pokaż więcej informacji”, będziesz musiał wpisać informacje, które pojawią się po kliknięciu przez odwiedzającego w punkt aktywacji.

Możesz również dodać opcjonalny obraz szczegółowy lub adres URL, który zostanie uwzględniony w polu informacyjnym.

Na poniższym obrazku dodaliśmy tekst do pola „Więcej informacji”.

Dodaliśmy również logo OptinMonster jako obraz szczegółowy.

Gdy będziesz zadowolony z wyglądu punktu aktywnego, kliknij przycisk „Dodaj kolejny obszar”.

Teraz możesz skonfigurować klikalny obszar, postępując zgodnie z tym samym procesem opisanym powyżej.

Po prostu powtórz te kroki, aby dodać wszystkie klikalne obszary do obrazu.

Po wykonaniu tej czynności możesz chcieć dostosować wygląd wyróżnień i pól z dodatkowymi informacjami. Na przykład, możesz zmienić kolor, który Draw Attention pokazuje, gdy odwiedzający najeżdżają kursorem na klikalny obszar, używając ustawień „Kolor wyróżnienia”.

Możesz również zmienić krycie podświetlenia i szerokość obramowania, dodać obramowanie i więcej, korzystając z ustawień w sekcji „Styl podświetlenia”.

Następnie możesz przewinąć do sekcji „Więcej stylów pól informacyjnych” i dopracować wygląd pola. Na przykład możesz zmienić kolor tła, kolor tekstu i inne.

Draw Attention oferuje również różne motywy, które możesz zastosować do swojego interaktywnego obrazu.

Aby przyjrzeć się tym motywom, po prostu przewiń do pola „Zastosuj schemat kolorów” i otwórz menu rozwijane. Możesz wybrać między Jasnym, Ciemnym i Zwróć uwagę.

Wszystkie te opcje są dość proste, więc warto wypróbować różne ustawienia, aby zobaczyć, co najlepiej wygląda na Twojej stronie internetowej.

Podczas testowania różnych opcji możesz zobaczyć, jak będą wyglądać w Twojej witrynie WordPress, klikając „Podgląd zmian”.

Kiedy będziesz zadowolony z tego, jak interaktywny obraz wygląda i działa, upewnij się, że klikniesz 'Aktualizuj', aby zapisać zmiany.

Teraz możesz dodać interaktywny obraz do dowolnej strony lub wpisu. Możesz to zrobić, używając bloku „Obraz interaktywny” w edytorze treści WordPress lub używając krótkiego kodu w bloku „Kopiuj krótki kod”.

Aby uzyskać więcej informacji na temat umieszczania skróconego kodu, zapoznaj się z naszym przewodnikiem jak dodać skrócony kod w WordPress.

Jak importować/eksportować interaktywne obrazy do innych witryn WordPress

Czasami możesz chcieć ponownie wykorzystać ten sam interaktywny obraz na wielu stronach internetowych.

Na przykład, jeśli jesteś marketerem afiliacyjnym, możesz stworzyć interaktywny obraz, który promuje jeden z Twoich produktów. Następnie możesz użyć tego samego interaktywnego obrazu we wszystkich swoich sklepach partnerskich Amazon i innych stronach marketingowych afiliacyjnych.

Przesyłanie tego samego obrazu, a następnie ręczne odtwarzanie wszystkich interakcji, może zająć dużo czasu i wysiłku.

Zamiast tego zalecamy utworzenie interaktywnego obrazu raz, a następnie skorzystanie z funkcji importu/eksportu funkcji Draw Attention. Pozwala to na ponowne wykorzystanie tego samego obrazu na wielu stronach internetowych lub w sklepach internetowych.

Aby to zrobić, musisz zainstalować wtyczkę Draw Attention na oryginalnej stronie, która zawiera interaktywny obraz, oraz na wszystkich innych stronach internetowych, na których chcesz użyć tego obrazu.

Na swojej oryginalnej stronie przejdź do Zwróć uwagę » Importuj / Eksportuj i zaznacz pole obok każdego obrazu, który chcesz wyeksportować.

Następnie kliknij przycisk „Wygeneruj kod eksportu”. Po kilku chwilach Draw Attention wygeneruje kod.

W innej karcie zaloguj się do swojego innego bloga WordPress lub witryny i przejdź do Draw Attention » Import / Export.

Tutaj skopiuj kod eksportu do pola „Importuj” i kliknij przycisk „Importuj”.

Draw Attention zaimportuje teraz obraz i wszystkie jego interakcje, gotowe do użycia.

Po prostu powtórz te kroki na wszystkich stronach internetowych, na których chcesz użyć interaktywnego obrazu.

Często zadawane pytania dotyczące interaktywnych obrazów

Oto odpowiedzi na niektóre z najczęściej zadawanych pytań dotyczących dodawania interaktywnych obrazów w WordPress.

Jaki jest najlepszy plugin do tworzenia interaktywnych obrazów w WordPressie?

Dla początkujących polecamy wtyczkę Draw Attention, ponieważ jest łatwa w użyciu i ma prosty interfejs. Bezpłatna wersja zapewnia wszystkie podstawowe funkcje, których potrzebujesz, podczas gdy wersja Pro odblokowuje bardziej zaawansowane opcje, takie jak wiele map obrazów i dodatkowe style dla podpowiedzi.

Czy interaktywne obrazy są przyjazne dla urządzeń mobilnych?

Tak, wtyczka Draw Attention jest w pełni responsywna. Oznacza to, że Twoje interaktywne punkty i pola informacyjne automatycznie dostosują się do każdego rozmiaru ekranu, zapewniając doskonałe wrażenia użytkownika na urządzeniach mobilnych.

Czy mogę dodawać filmy lub animacje do interaktywnych hotspotów?

Możesz użyć akcji „Przejdź do adresu URL”, aby połączyć punkt interaktywny z filmem na platformie takiej jak YouTube lub Vimeo. Chociaż bezpośrednie osadzanie filmów w wyskakującym okienku może wymagać wersji pro, linkowanie jest prostym obejściem. W przypadku animowanych obrazów zalecamy skorzystanie z naszego przewodnika na temat dodawania animowanych GIF-ów do WordPress.

Czy dodawanie interaktywnych obrazów spowolni moją stronę internetową?

Podobnie jak w przypadku innych multimediów, interaktywne obrazy zwiększają wagę Twojej strony. Jednak wtyczka Draw Attention jest lekka i dobrze napisana. Największym czynnikiem jest rozmiar oryginalnego pliku obrazu, dlatego zalecamy zawsze optymalizację obrazów dla sieci przed ich przesłaniem.

Dodatkowe zasoby

Mamy nadzieję, że ten artykuł pomógł Ci dowiedzieć się, jak tworzyć interaktywne obrazy w WordPress. Możesz również zapoznać się z tymi dodatkowymi zasobami:

• Jak dodać punkty interaktywne do obrazów w WordPress (łatwy sposób)
• Jak zoptymalizować obrazy pod kątem wydajności sieci bez utraty jakości
• Jak tworzyć nakładki i efekty najazdu flipbox w WordPressie
• Jak dodać animowane GIF-y w WordPress (WŁAŚCIWY sposób)
• Najlepsze wtyczki do sliderów WordPress – Wydajność + Jakość (Porównanie)

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.