WordPress에서 핫스팟 이미지를 만들고 사용하는 방법(5가지 쉬운 단계)

하나의 이미지는 복잡한 아이디어를 설명하는 데 도움이 될 수 있으며 설명보다 더 효과적입니다. 이미지를 확대하고 더 자세히 탐색할 수 있기 때문입니다. 그러나 이미지를 생생하게 만들려면 클릭 가능하게 만들어야 합니다. 이를 위해서는 핫스팟 이미지를 사용해야 합니다.

이미지를 통해 전달되는 정보가 이해하기 쉽고 기억하기 쉽다는 것은 알려진 사실입니다.

이미지 핫스팟의 개념은 전달하려는 정보를 이해하는 데 도움이 되는 대화형 이미지를 사용자에게 제공하는 것입니다. 핫스팟은 클릭하면 창이 팝업되는 이미지 영역의 지점입니다. 해당 팝업에는 도구 설명, 텍스트, 비디오 또는 URL 링크가 포함될 수 있습니다. 다음은 예입니다.

자전거 부품에 대해 알아보려면 뾰족한 부분을 클릭하고 어떤 부품인지 알 수 있습니다. 설명을 읽을 필요가 없습니다.

그러나 핫스팟 이미지를 만드는 것은 복잡한 작업입니다. WordPress 사이트가 없다면. 그런 다음 HappyAddons를 사용하여 핫스팟이 있는 이미지를 만들 수 있습니다.

HappyAddons는 최고의 Elementor 애드온입니다. 100,000개 이상의 활성 설치로 현재 업계에서 인기 있는 Elementor 애드온 중 하나입니다. 현재 16개의 고유한 기능과 함께 88개의 프로 및 무료 위젯이 있습니다. Pro 위젯 중 Happy Addons는 위와 같은 대화형 이미지를 만드는 데 사용할 수 있는 Hot Spot Widget 을 제공합니다.

그래서 오늘 포스트에서는 핫스팟으로 반응형 이미지를 만드는 방법과 이러한 이미지를 사용하는 방법에 대한 영감을 보여 드리겠습니다.

Happy Addons를 사용하여 WordPress용 핫스팟 이미지를 만드는 방법

이미지에 핫스팟을 추가하는 것은 사용자와 상호작용할 수 있는 재미있는 방법이자 사용자의 관심을 끌 수 있는 좋은 방법입니다. 그것은 그들이 당신의 콘텐츠에 참여하도록 권장합니다.

이를 염두에 두고 HappyAddons 핫스팟 위젯을 사용하여 5단계로 완벽한 핫스팟 이미지를 만드는 방법을 보여 드리겠습니다.

1단계: 섹션에서 위젯 선택 및 드롭

먼저 Elementor 편집기를 열고 왼쪽 사이드바에서 핫스팟 위젯을 선택합니다. 그런 다음 편집 섹션으로 끌어다 놓습니다.

2단계: 추가할 이미지 선택

이제 이미지를 추가해야 합니다. 표시된 영역을 클릭하고 이미지를 선택합니다. 기존 이미지를 선택하거나 새 이미지를 업로드할 수 있습니다.

3단계: 이미지에 핫스팟 추가

이미지를 추가하면 이미지에 한 지점이 표시됩니다. 이제 ' 스팟 ' 옵션을 찾으십시오. 스팟 옵션을 클릭하면 원하는 만큼 스팟을 추가할 수 있습니다.

이미지의 중요한 부분을 표시하는 데 실패하지 않도록 원하는 수의 스팟을 사용할 수 있는 이유입니다.

또한 스팟을 개별적으로 사용자 지정할 수 있습니다. 텍스트, 아이콘 및 이미지를 추가하는 옵션을 찾을 수 있습니다. 그러나 이 결정은 전적으로 배경 이미지에 달려 있습니다.

텍스트 추가를 선택하면 그 자리에서 전체 텍스트를 추가할 수 있습니다. 텍스트가 파란색 팝업 창에 나타납니다.

' 도구 설명 ' 옵션을 클릭하십시오. 그리고 여기에 표시하려는 텍스트를 추가할 수 있습니다. 다른 모든 핫스팟에 텍스트를 추가하려면 동일한 프로세스를 따라야 합니다.

4단계: 핫스팟 스타일 지정

앞서 말했듯이 핫스팟을 개별적으로 사용자 지정할 수 있습니다. ' 스타일 ' 옵션에서 모든 사용자 정의 옵션을 찾을 수 있습니다.

여기에서 다음과 같은 핫스팟의 다양한 요소를 편집할 수 있습니다.

• 너비
• 키
• 심
• 국경
• 색깔
• 텍스트 색상
• 그리고 툴팁 배경색.

디자인이나 레이아웃에 따라 이러한 옵션을 조정할 수 있으며 원하는 결과를 얻을 수 있습니다.

원하는 경우 도구 설명을 사용자 지정할 수 있습니다. 도구 설명 옵션을 클릭하고 레이아웃에 따라 올바른 조합을 찾을 때까지 조정하십시오.

5단계: 고급 섹션을 사용하여 더 많은 효과 추가

모션 효과, 해피 효과, 배경을 추가하거나 페이지를 반응형으로 만들려면 ' 고급 '을 클릭하여 해당 옵션을 탐색하십시오. ' 고급 '은 Elementor의 기본 기능입니다. 고급 기능과 그 용도에 대해 자세히 알아보려면 이 문서를 읽으십시오.

그게 다야

참고 : 이미지 맵에 추가할 수 있는 핫스팟 수에는 제한이 없습니다.

또한 Elementor 반응 모드를 사용하면 이미지가 모든 플랫폼에서 완벽하게 정렬되었는지 쉽게 확인할 수 있습니다.

핫스팟 이미지: 사용 사례 및 중요성

"그림은 천 마디 말의 가치가 있다"는 영어 표현으로 잘 알려져 있습니다. 그러나 이것이 하나의 이미지로 모든 것을 말할 수 있다는 것을 의미하지는 않습니다. 이것이 바로 핫스팟 이미지가 차이를 만드는 곳입니다. 이 기능은 이미지에 추가 컨텍스트를 제공하기 때문입니다. 또한 이미지를 사용자 친화적이고 대화형으로 만듭니다.

이미지와 텍스트를 결합하면 좋은 반응을 얻을 수 있습니다. 다음은 이미지 핫스팟이 유용할 수 있는 몇 가지 예입니다.

제품 마케팅

2021년 에는 1,200만~2,400만 개의 온라인 상점이 있습니다.

디지털 내부

이것은 명백한 선택입니다. 전 세계적으로 수백만 개의 온라인 상점이 있습니다. 그렇다면 사용자들은 왜 당신의 스토어를 선택할까요? 다른 매장과 다른 점은 무엇인가요? – 제품 이미지의 핫스팟.

다른 제품과 차별화하려면 제품 이미지에 핫스팟을 사용하는 것이 좋습니다. 제품에 대한 추가 정보가 표시됩니다. 그러나 주요 매력은 고객이 제품 이미지를 클릭하는 것만으로 제품의 개념을 이해할 수 있다는 것입니다.

또한 텍스트로 설명하지 않고 고유한 포인트를 쉽게 끌어낼 수 있습니다. 사용자가 설명을 놓칠 가능성이 있기 때문입니다.

인포그래픽

인포그래픽은 사용자에게 정보를 전달하는 좋은 방법입니다. 많은 인포그래픽에 튜토리얼, 통계, 가이드 등이 포함되어 있다는 것을 알게 될 것입니다. 즉, 인포그래픽은 매우 상호작용적입니다.

그러나 이러한 인포그래픽에 핫스팟 기능을 적용할 수 있다면 더 반응이 빨라질 것입니다. 인포그래픽 디자인을 변경하지 않고도 정보를 추가할 수 있습니다.

학습

이미지 핫스팟은 수업에서 대화형 이미지를 표시하는 좋은 방법입니다. 여기 예시들이 있습니다,

생물학

글쎄, 우리는 인체에 ​​대해 배우는 가장 좋은 방법이 이미지를 통해서라고 말할 필요가 없습니다. 그리고 이미지 핫스팟을 사용하면 올바른 스팟을 표시하여 모든 신체 부위 이름을 추가할 수 있습니다. 다음은 짧은 예입니다.

지리학

글쎄요, 학생들에게 어떤 수업이 가장 지루하고 어렵다고 묻는다면 지리학이 목록을 만들 것입니다. 어떤 나라나 대륙의 이름도 읽기로 기억하기 어렵기 때문입니다. 그렇다면 지도에 표시하는 것은 어떨까요? 예, 핫스팟을 사용하면 지도에 국가를 표시할 수 있습니다. 그래야 학생들이 모든 국가를 쉽게 기억할 수 있습니다.

역사

글쎄요, 역사 수업에서 핫스팟 기능을 사용하는 것은 이례적인 일입니다. 그러나 사용할 수 있습니다. 유명인이 관련된 역사적 사건을 설명할 때 핫스팟을 사용하는 사람을 표시할 수 있습니다. 이렇게 하면 학생들은 유명한 전설을 쉽게 식별하고 역사적 사건도 기억할 수 있습니다.

핫스팟 이미지에 관한 FAQ

핫스팟 인터랙티브 이미지로 더 많은 전환 유도

웹사이트를 디자인할 때 항상 더 많은 사용자를 유도하고 참여를 유도할 수 있는 방법을 찾아야 합니다. 핫스팟 이미지는 실행 가능한 옵션이 될 수 있습니다. 이미지를 보다 상호 작용하고 매력적으로 만들 수 있습니다. 하지만 그 이상으로 웹사이트와 콘텐츠에 가치를 더할 것입니다.

그리고 HappyAddons Hot Spot Widget으로 이미지 핫스팟을 만드는 것이 매우 쉽다는 것을 우리 기사에서 볼 수 있습니다. Elementor의 반응 모드를 사용하면 모든 플랫폼에서 이미지가 어떻게 표시되는지 쉽게 확인할 수 있습니다.

질문이 있는 경우 저희에게 연락하는 것을 잊지 마십시오.