Jak dodać interaktywne obrazy w WordPress

Stworzenie atrakcyjnych stron internetowych, które nie zostaną mentalnie porzucone przez użytkowników w mgnieniu oka, wymaga starannego planowania i użycia wysokiej jakości treści wizualnych. W większości przypadków same słowa po prostu nie wystarczą, aby zatrzymać odwiedzających na stronie, ponieważ:

Szczególnie dobrym sposobem na nawiązanie kontaktu z odbiorcami jest użycie interaktywnych treści wizualnych ze względu na ich moc opowiadania historii w bardziej żywy sposób niż statyczne grafiki.

Dlaczego obrazy interaktywne są ważne

Interaktywne obrazy pozwalają podnieść poziom zaangażowania użytkowników. Na przykład możesz przesłać zdjęcie dzikiej przyrody, a następnie umożliwić użytkownikom dotknięcie każdego zwierzęcia, aby dowiedzieć się o nim więcej. Lub, jeśli prowadzisz sklep internetowy, ludzie mogą kliknąć każdy produkt, aby przeczytać recenzje użytkowników i zobaczyć więcej jego zdjęć.

Rzecz w tym, umieszczając punkty aktywne na zdjęciach, a następnie łącząc je z treściami tekstowymi, audio, wideo lub innymi rodzajami treści, możesz ożywić strony i sprawić, że Twoja witryna będzie bardziej zapadająca w pamięć. Możesz je również wzmocnić wyróżnieniami, dodatkowymi informacjami, opisami, linkami do innych stron internetowych i bawić się kolorami, aby zachęcić użytkowników do podjęcia działań i zaangażowania się w Twoją markę.

Jak dodać interaktywne obrazy w WordPress

Kiedy jest coś, czego WordPress nie może zrobić od razu po wyjęciu z pudełka, wtedy w centrum uwagi pojawiają się wtyczki. Nie inaczej jest i tym razem.

Najszybszym sposobem dodawania interaktywnych obrazów w WordPressie jest użycie wtyczki. Podczas gdy kilka wtyczek premium dostępnych na rynku może ci pomóc w wykonaniu tej pracy, w tym Profesjonalna mapa obrazów dla WordPress, Reklama, oraz WooMapper, naprawdę podobały nam się funkcje, które Przyciągnąć uwagę pakiety wtyczek. Zyskujesz dużą wartość bez konieczności wydawania pieniędzy, ponieważ wtyczkę można pobrać bezpłatnie z oficjalnego repozytorium wtyczek WordPress.

Pierwszym krokiem jest zainstalowanie wtyczki i aktywacja jej na swojej stronie. Aby rozpocząć tworzenie interaktywnego obrazu, poszukaj Przyciągnąć uwagę w menu i kliknij Edytuj obrazek.

Najpierw możesz dodać tytuł obrazu, który będzie widoczny po wyświetleniu obrazu.

Następnie po prawej stronie ekranu dodaj nowy obraz, który chcesz edytować lub wybierz jeden z biblioteki multimediów.

Po przesłaniu zdjęcia możesz dostosować wiele opcji stylizacji i zmodyfikować kolory, wprowadź domyślne Więcej informacji tekst itp.

Jeśli przewiniesz trochę w dół strony, dojdziesz do Obszary hotspotów Sekcja. W tym miejscu możesz zacząć dodawać obszary hotspot do obrazu.

Na początek kliknij Obszar klikalny nr 1. Twój obraz pojawi się teraz pod Współrzędne.

Teraz po prostu kliknij część obrazu, w której chcesz dodać pierwszy punkt. Możesz narysować różne kształty hotspotów, dodając więcej punktów, które następnie utworzą obszar hotspot.

Pod obrazem znajdziesz zestaw dodatkowych opcji, które pozwolą Ci: dodaj tytuł dla obszaru hotspotu, wybierz, co się stanie, gdy użytkownik kliknie hotspot (możesz wstawić więcej informacji lub dodać link, który przeniesie ich na inną stronę), wprowadź opis i prześlij obraz, który będzie wyświetlany, gdy użytkownik kliknie w hotspot.

Gdy jesteś zadowolony z efektu końcowego, naciśnij Aktualizacja przycisk.

Teraz, aby dodać swój interaktywny obraz do strony lub posta, skopiuj krótki kod wyświetlany po prawej stronie ekranu.

Następnie przejdź do strony, na której chcesz wyświetlić interaktywny obraz. Jeśli nadal korzystasz z klasycznego edytora, wklej kod w Edytor tekstu. W Gutenbergu dodaj Krótki kod najpierw zablokuj i wstaw swój kod. Jeśli Elementor jest Twoim preferowanym kreatorem stron, dodaj kod do Krótki kod widget i interaktywny obraz pojawi się na Twojej stronie.

Importuj/eksportuj obrazy interaktywne

Wtyczka Draw Attention zawiera kolejną praktyczną opcję, która przydaje się w przypadku, gdy pracujesz na wielu witrynach i chcesz importować i eksportować interaktywne obrazy z jednej witryny do drugiej.

W takim przypadku należy najpierw zainstalować wtyczkę na obu stronach. W witrynie, z której chcesz wyeksportować obraz, przejdź do Przyciągnij uwagę > Importuj/Eksportuj, wybierz odpowiednie obrazy i naciśnij Wygeneruj kod eksportu przycisk.

Teraz skopiuj cały kod.

Następnie przejdź do innej witryny, z której chcesz zaimportować obraz, i ponownie kliknij Przyciągnij uwagę > Importuj/Eksportuj, wklej swój kod w Import pole i naciśnij Import przycisk.

Wadą korzystania z darmowej wersji tej wtyczki jest to, że pozwala ona dodać tylko jeden interaktywny obraz do Twojej witryny. Jeśli zdecydujesz się na uaktualnienie do jednego z ich plany premium możesz jednak dodać tyle interaktywnych obrazów, ile potrzebujesz i ustawić nieograniczoną liczbę hotspotów, wybrać preferowany układ i jedną z 20 predefiniowanych palet kolorów, uzyskać roczne wsparcie i aktualizacje i nie tylko.

Końcowe przemyślenia

Korzystanie z interaktywnych obrazów może bez wątpienia pomóc zatrzymać odwiedzających na Twojej stronie i prawdopodobnie zwiększyć współczynniki konwersji. Im ciekawsze i bardziej atrakcyjne treści, które oferujesz, tym więcej osób będzie chciało z Tobą współpracować. Draw Attention to świetna wtyczka, jeśli potrzebujesz rozwiązania, które pozwoli Ci bezproblemowo dodać interaktywny obraz do swoich stron. Tylko nie zapomnij zoptymalizować obrazów przed ich przesłaniem, aby uniknąć pogorszenia wydajności witryny i UX.