주요 시사점
- Elementor 이미지 핫스팟은 사진에 고정된 마커로, 호버링이나 탭에서 짧은 레이블을 열고, Master Addons Image Hotspot 위젯은 핫스팟 목록의 모든 항목에 대해 하나의 마커를 추가합니다.
- 무료 Elementor에는 핫스팟 위젯이 없고 Elementor Pro에는 별도의 핫스팟 위젯이 제공되므로 Image Hotspot 위젯에는 Elementor 및 Master Addons Pro가 필요합니다.
- 각 이미지 핫스팟 마커는 이미지의 백분율로 수평 및 수직 위치 슬라이더와 함께 배치되며 해당 위치는 데스크톱, 태블릿 및 휴대폰에 적용됩니다.
- 페이지 렌더링 시 도구 설명 콘텐츠 상자에 입력된 굵은 텍스트, 링크, 이미지 및 단축 코드가 제거되므로 이미지 핫스팟 도구 설명은 일반 텍스트만 표시합니다.
- 이미지 핫스팟 도구 설명 섹션에서 클릭 시 트리거를 사용하면 휴대폰에서 마커가 작동하지만, 공구 설명이 호버링 시 열릴 때만 마커의 링크가 이어집니다.
- 이미지 핫스팟 위젯은 연결된 포인트 마커가 있는 간단한 이미지 맵 역할을 할 수 있지만 클릭 가능한 모양을 그릴 수는 없으며 SVG 이미지 맵 플러그인이 할 수 있는 방식의 윤곽선을 보여줍니다.
Elementor 이미지 핫스팟은 방문자가 마우스를 올리거나 탭할 때 짧은 레이블을 보여주는 사진에 고정된 작은 마커입니다. Free Elementor에는 이에 대한 위젯이 없으므로 이 가이드에서는 다음을 사용합니다 마스터 애드온 이미지 핫스팟 위젯사용자 정의 코드 없이 Elementor 패널의 모든 이미지에 마커를 추가하는 것입니다. 이를 위해서는 Master Addons Pro가 필요합니다.
아래 단계는 빈 컨테이너에서 게시된 대화형 이미지로 이동합니다: 마커를 퍼센트별로 배치하고,각각의 라벨을 작성하고,데스크톱 및 휴대폰용 마커를 스타일링합니다. 이후 섹션에서는 빌드하기 전에 알아야 할 한계,핫스팟을 간단한 이미지 맵으로 사용하는 방법 및 위젯이 Elementor Pro 의 핫스팟 위젯과 비교하는 방법을 다룹니다.
목차
Elementor의 이미지 핫스팟은 무엇입니까
이미지 핫스팟은 이미지의 설정 지점에 배치되는 마커입니다. 각 마커에는 자체 짧은 레이블이 있으며 원하는 경우 링크가 있습니다. 데스크톱에서는 레이블이 호버에 나타납니다. 전화에서 방문자는 마커를 탭합니다.
제품 사진에는 각 기능에 마커가 있을 수 있습니다. 평면도는 객실이나 책상을 표시할 수 있습니다. 스크린샷은 새로운 사용자가 필요로 하는 버튼을 가리킬 수 있습니다. 이미지는 동일하게 유지되며 마커를 통해 방문자는 별도의 사양 목록이나 범례로 스크롤하지 않고도 이를 탐색할 수 있습니다.
Free Elementor 에는 핫스팟 위젯이 없습니다. Elementor Pro 에는 Hotspot 이라는 것이 있으며 Master Addons Pro 는 작은 그림을 마커로 사용할 수도 있는 Image Hotspot 을 추가합니다. 이 가이드에서는 Master Addons 위젯을 다룹니다.
버튼이나 제목에만 호버 힌트를 원한다면 핫스팟은 잘못된 도구입니다. The 툴팁 위젯 master Addons Pro 없이도 처리됩니다 도구 설명 확장 (Pro) 는 이미 페이지에 있는 요소에 힌트를 추가합니다.
당신이 건설하기 전에 작동보고 싶어? X-1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 1000 X 이미지 핫스팟 위젯 페이지 라이브 데모, 전체 설정 목록 및 Elementor Pro Hotspot과 나란히 있습니다.
Elementor에서 이미지 핫스팟을 추가하는 방법
4~5개의 마커가 있는 이미지의 설정에는 약 5분이 소요됩니다.
1 단계: 마스터 애드온을 설치하고 Pro를 활성화합니다
WordPress 대시 보드에서 플러그인,새로 추가 및 “마스터 애드온”을 검색하십시오. 설치하고 활성화 한 다음 귀하의 프로 라이센스 마스터 애드온,라이센스 하에서. 이미지 핫스팟은 Pro 가 활성화된 후에만 Elementor 패널에 나타납니다. 무료 Elementor 와 함께 작동합니다.
2 단계: 이미지 핫스팟 위젯을 페이지로 드래그하십시오
Elementor 편집기에서 페이지를 열고 Elements 패널에서 “핫스팟”을 검색합니다. MA 배지가 있는 결과는 Image Hotspot 입니다. 옆에 자물쇠가 달린 Hotspot 위젯도 보이면 그 위젯은 Elementor Pro 컨테이너에 Image Hotspot 을 드래그합니다.
3 단계: 이미지를 선택하십시오
콘텐츠 탭에서 이미지 섹션을 열고 이미지 선택을 클릭합니다. 사진에 미세한 디테일이 있는 경우 이미지 해상도를 전체 또는 크게 설정합니다. 왜냐하면 마커가 렌더링된 이미지에 있고 축소된 복사본이 모든 핀을 대략적으로 보이게 하기 때문입니다. 정렬은 이미지를 해당 열의 왼쪽,중앙 또는 오른쪽에 배치합니다.
4 단계: 핫스팟을 추가하고 위치를 설정합니다
핫스팟 섹션을 엽니다. 목록의 각 항목은 하나의 마커이므로 표시하려는 모든 지점에 대해 항목 추가를 한 번 클릭합니다. 항목 수에는 제한이 없습니다.
각 항목에는 내용,스타일 및 위치 탭이 있습니다. 위치 탭에서 가로 위치 (%) 및 세로 위치 (%) 슬라이더를 이동하여 마커를 배치합니다. 값은 이미지의 퍼센트이므로 50 및 50 은 마커를 중앙에 놓을 수 없습니다. 캔버스에 마커를 드래그할 수 없으며 새 항목은 모두 이동할 때까지 왼쪽 상단에서 시작하므로 세 개의 신선한 항목이 하나처럼 보일 수 있습니다.
모든 화면 크기에 한 가지 위치가 적용됩니다. 가로 22%, 아래 52%의 마커가 노트북과 휴대폰의 사진의 같은 부분에 있습니다.
목록 아래에서 펄스 효과를 비활성화하시겠습니까? 위젯의 모든 마커 주변의 펄스 링을 끕니다.
5 단계: 마커 유형을 선택하고 레이블을 작성합니다
각 항목의 콘텐츠 탭에서 Type 은 마커 안에 표시되는 내용을 설정합니다: 없음 (일반 점), 텍스트 (기본적으로 더하기 기호 또는 입력하는 숫자 또는 단어), 아이콘 (모든 글꼴 멋진 아이콘) 또는 이미지 (작은 그림). 하나의 이미지에 유형을 혼합하면 잘 작동합니다.
링크 필드는 방문자가 마커를 클릭하면 다른 페이지로 보냅니다. 호버에서 도구 설명이 열리면 따라옵니다. 클릭 시 트리거가 켜져 있으면 (6 단계) 클릭하면 도구 설명이 열리고 링크가 무시됩니다.
툴팁 콘텐츠는 핫스팟 툴팁에 나타나는 줄입니다. 상자는 전체 텍스트 편집기처럼 보이지만 툴팁은 일반 텍스트를 보여줍니다: 굵게,기울임꼴, 링크,이미지 및 단축 코드는 페이지가 렌더링될 때 모두 제거됩니다. 짧은 줄 하나를 씁니다.
6 단계: 마커가 열리는 방법을 선택합니다
콘텐츠 탭으로 돌아가서 도구 설명 섹션은 위젯의 모든 마커를 한 번에 제어합니다.
- 위치 보이기 도구 설명이 열리는 쪽을 선택합니다: 위,아래, 왼쪽 또는 오른쪽. 마커는 위치 탭의 표시 옵션을 사용하여 이를 재정의할 수 있습니다.
- 애니메이션은 공개 효과를 설정합니다: Shift-Away, Shift-Toward, Fade, Scale 또는 Perspective.
- 화살표는 도구 설명의 포인터를 마커에 추가합니다.
- 오프셋 및 거리 마커를 따라 멀리 도구 설명 이동.
- 클릭 시 트리거 클릭 또는 탭 시 도구 설명이 열립니다. 전화기에는 호버가 없으므로 많은 방문자가 전화를 사용하는 경우 이 기능을 켭니다.
7 단계: 미리보기 및 게시
게시 를 클릭하고 새 탭에서 페이지를 엽니다. 각 마커를 마우스로 가리켜 도구 설명 텍스트와 측면을 확인한 다음,창 크기를 전화기 너비로 조정하고 마커가 서로 덮지 않는지 확인합니다.
마커와 이미지의 스타일을 지정합니다
스타일링은 두 곳에서 이루어집니다: 각 마커의 자체 스타일 탭과 위젯의 기본 스타일 탭.
마커별 스타일
핫스팟 항목 안의 스타일 탭에는 색상,배경 및 불투명도에 대한 기본값 및 호버 설정이 있습니다. 이를 사용하여 제품 사진의 판매 항목과 같이 하나의 마커에 다른 색상을 지정합니다.
뒤에 있는 사진과 대비되는 마커 색상을 선택합니다. 바쁜 사진의 음소거된 마커가 사라지고 방문자는 호버링할 항목이 없음을 알 수 없습니다.
이미지
메인 스타일 탭의 이미지 섹션은 사진을 제어합니다: 불투명도, 테두리, 테두리 반경, 상자 그림자 및 CSS 필터. 반경과 부드러운 그림자는 이미지가 카드 레이아웃 안에 위치하도록 도와줍니다.
핫스팟
핫스팟 섹션은 모든 마커를 한 번에 스타일링합니다: 크기,패딩, 테두리 반경,불투명도, 색상 및 배경,각각 호버 버전이 있습니다. 개별 마커에 대한 설정이 이러한 것들을 이깁니다.
도구 설명
툴팁 섹션은 핫스팟 툴팁을 스타일링합니다: 텍스트 정렬,패딩, 테두리 반경,배경, 텍스트 색상,화살표 색상 및 타이포그래피.
Elementor 에서 인터랙티브 이미지를 빌드합니다
대화형 이미지는 방문자가 질문을 가리킬 때 질문에 답하는 사진입니다. Elementor 에서 위의 단계에 따라 이미지 핫스팟으로 하나를 빌드합니다: 스팟당 하나의 마커,각각에 한 줄 도구 설명,트래그거 온 클릭 트래픽이 대부분 모바일인 경우.
옆에 있는 짧은 목록과 이미지를 페어링하면 잘 작동합니다. 방문자는 마커를 올리거나 목록을 읽을 수 있으며,둘 다 동일한 항목을 가리킵니다. The 이 방 데모 쇼핑 가격표가 옆에 있는 거실 사진에 번호가 매겨진 표시를 사용합니다.
인터랙티브 이미지에 적합한 다른 레이아웃으로는 각 부품에 마커가 있는 시계 또는 장치, 조명과 바퀴에 마커가 있는 자동차 목록, 각 기능에 라벨이 있는 부동산 사진, 각 사람의 이름이 있는 팀 사진 등이 있습니다.
이미지 핫스팟을 간단한 이미지 맵으로 사용합니다
이미지 맵은 그림의 일부를 클릭 가능하게 만듭니다. 이미지 핫스팟은 일반적인 경우를 다룹니다: 다른 페이지에 대한 링크가있는 각 지점의 마커,호버에서 도구 설명이 열릴 때 따라옵니다. 포인트 마커 만 배치합니다. 클릭 가능한 모양을 그리지 않으므로 모든 방 윤곽선을 클릭 할 수 있어야하는 평면도에는 다음과 같은 전용 이미지 맵 플러그인이 필요합니다 이미지 맵 프로이미지에 벡터 모양을 그리는 것입니다(2026년 11월 기준).
캠퍼스 지도,상점 레이아웃 또는 체육관 바닥의 핀의 경우 마커가 충분하고 더 빨리 설정됩니다. The 체육관 구역지도 데모 사진에 5 개의 구역을 표시하고, 각 표시는 해당 구역의 예약 페이지로 연결됩니다.
휴대폰과 태블릿의 이미지 핫스팟
마커 위치는 이미지의 퍼센트이므로 각 마커는 모든 화면 크기에서 사진의 동일한 부분에 유지됩니다. 태블릿이나 휴대폰의 위치는 따로 없습니다.
마커는 이미지가 축소됨에 따라 기본적으로 약 40px 의 크기를 유지합니다. 휴대폰에서 마커가 많은 이미지는 혼잡해집니다. 더 적은 수의 마커를 사용하거나 스타일,핫스팟 아래의 크기를 낮추거나 휴대폰 방문자에게 더 간단한 이미지를 제공하십시오.
전화기에는 호버가 없으므로 도구 설명 섹션에서 클릭 시 트리거를 켜십시오. 방문자는 마커를 탭하여 도구 설명을 엽니다. 클릭 모드를 켜면 탭이 도구 설명을 열고 마커의 링크를 따르지 않으므로 링크가 도구 설명보다 중요하면 트리거를 끕니다.
이미지 핫스팟을 사용하는 데 필요한 것
| 설정 | 핫스팟 위젯을 얻을 |
|---|---|
| 프리 엘리멘터 자체 | 없음. Core Elementor 에는 핫스팟 위젯이 없습니다. |
| 엘리멘터 프로 | Elementor의 자체 Hotspot 위젯, 포맷된 툴팁 콘텐츠 및 자체 마커 애니메이션 포함. |
| Pro가 없는 마스터 애드온 | 이미지 핫스팟 없음. 다른 많은 위젯이 포함되어 있습니다. |
| 마스터 애드온 프로와 | 이미지 핫스팟, 툴팁 확장 및 나머지 80+ 위젯 및 확장. |
마스터 애드온은 다음에서 설치됩니다 워드 프레스 플러그인 디렉토리. 이미지 핫스팟은 다음을 필요로 합니다 마스터 애드온 프로 라이센스 그 위에. 모든 컨트롤은 에 나열됩니다 이미지 핫스팟 설정 가이드.
이미지 핫스팟 작업을 위한 팁
- 스페이스 마커 아웃. 두 개가 서로 가까이 앉아 있으면 각 마커의 위치 탭에 있는 옵션으로 표시와 함께 도구 설명을 반대쪽으로 보내거나 하나를 놓습니다.
- 각 레이블을 한 줄로 유지합니다. 도구 설명 은 일반 텍스트로 렌더링되므로 페이지에 더 긴 세부 정보를 넣고 마커의 링크를 사용합니다.
- 게시하기 전에 전화 폭에서 테스트합니다. 동일한 퍼센트 위치가 모든 곳에 적용되고 마커가 줄어들지 않으므로 데스크톱에서 잘 보이는 마커는 전화의 작은 세부 사항을 다룰 수 있습니다.
- 방문자가 자신이 어느 마커에 있는지 알 수 있도록 마커에 호버 색상을 사용하십시오.
- 정확한 숫자로 마커를 정렬합니다. 퍼센트 필드에 값을 입력하는 것은 마커가 다이어그램이나 스크린샷의 작은 부분에 있어야 할 때 슬라이더를 누르는 것보다 빠릅니다.
자주 묻는 질문
Elementor의 이미지 핫스팟이란 무엇입니까?
이미지 핫스팟은 이미지 위에 놓인 작은 마커입니다. 방문자가 마우스를 올리거나 탭하면 사진의 해당 부분에 대한 짧은 레이블이 나타납니다. Elementor Pro 에는 자체 Hotspot 위젯이 있으며 Master Addons Pro 는 작은 이미지를 마커로 사용할 수도 있는 Image Hotspot 위젯을 추가합니다.
단일 이미지에 몇 개의 핫스팟을 추가할 수 있나요?
하드 제한은 없습니다. 이미지당 5~7 개의 마커는 읽을 수 있도록 유지하며,휴대폰에서 볼 수 있는 이미지에서는 더 적습니다. 마커는 이미지와 함께 줄어들지 않기 때문입니다. 더 필요한 경우 콘텐츠를 두 개의 이미지로 분할합니다.
이미지 핫스팟은 모바일에서 작동합니까?
예. 전화기에는 호버가 없으므로 클릭 시 트리거를 켜고 방문자는 마커를 탭하여 도구 설명을 엽니다. 위치는 이미지의 퍼센트이며 모든 화면에서 동일하므로 마커가 전화기 너비에서 서로 붐비지 않는지 확인하십시오.
핫스팟을 다른 페이지에 연결할 수 있습니까?
예. 모든 마커에는 링크 필드가 있습니다. 호버에서 도구 설명이 열리면 링크가 따라오므로 방문자는 호버에서 도구 설명을 읽고 클릭 시 페이지로 이동합니다. 클릭 시 트리거를 사용하면 대신 도구 설명이 열리고 링크가 따라오지 않습니다.
핫스팟 툴팁 안에 굵은 글씨, 링크 또는 이미지를 넣을 수 있나요?
아니요. 툴팁 콘텐츠 상자는 리치 편집기이지만 페이지가 렌더링될 때 굵은 텍스트,링크, 이미지 및 단축코드가 제거되므로 툴팁에 일반 텍스트가 표시됩니다. 짧은 한 줄을 쓰고 더 긴 콘텐츠에 마커의 링크를 사용합니다.
이미지 핫스팟용 Master Addons Pro가 필요합니까?
예. Image Hotspot 은 Master Addons Pro 위젯이며,무료 Elementor 와 함께 작동합니다. Elementor 패널에 a 번 나타납니다 프로 라이센스 활동적입니다.
Image Hotspot 은 Elementor Pro Hotspot 위젯과 어떻게 다른가요?
Elementor Pro Hotspot 은 포맷된 툴팁 콘텐츠를 허용하고 Soft Beat,Expand 및 Overlay 마커 애니메이션을 가지고 있으며,호버에서 열리거나 클릭하거나 전혀 열리지 않습니다. Master Addons Image Hotspot 은 일반 텍스트 툴팁,마커에 대한 펄스 효과 및 5 개의 툴팁 애니메이션을 사용하며 작은 그림을 마커로 사용할 수 있습니다.
최종 생각
이미지 핫스팟은 평면 사진을 인터랙티브 이미지로 바꿉니다: 4 가지 마커 유형,퍼센트로 설정된 위치,마커당 하나의 일반 텍스트 라인 및 5 개의 공개 애니메이션,모두 Elementor 패널에서 전화가 볼 이미지에 마커 몇 개를 유지하고 트리거 켜기 대부분의 트래픽이 모바일일 때를 클릭합니다.
더 많은 이미지 위젯을 보려면 다음을 참조하세요 이미지 비교 그리고 이미지 호버 효과. 이미지 대신 버튼이나 텍스트에 호버 힌트가 필요한 경우 툴팁 위젯 튜토리얼 그 내용과 전체 목록을 다룹니다 마스터 애드온 위젯 및 확장 플러그인과 함께 제공되는 다른 내용을 보여줍니다.
마스터 애드온 프로를 받으세요 image Hotspot과 나머지 80+ 위젯 및 확장 기능을 Elementor에 추가하려면.
