툴팁이 포함된 Elementor 이미지 핫스팟 위젯(Pro)
Image Hotspot 은 이미지 위에 마커를 고정하는 Master Addons Pro 위젯입니다. 마커는 일반 점,짧은 텍스트 레이블,글꼴 멋진 아이콘 또는 작은 그림이 될 수 있으며 방문자가 마우스를 올리면 각각 도구 설명을 열거나 클릭 시 트리거를 켜면 탭합니다. 보기 사진,제품 콜아웃,평면도, 캠퍼스 지도 및 레이블이 지정된 다이어그램에 적합합니다. 원하는 것이 버튼이나 제목에 대한 호버 힌트라면 무료입니다 툴팁 위젯 또는 the 툴팁 확장 (Pro) 는 더 가까운 핏.
Elementor에 이미지 핫스팟을 추가하는 방법
Elementor 에서 이미지 핫스팟을 추가하려면 Master Addons Pro 를 활성화하고 Elementor 로 페이지를 편집한 후 위젯 패널에서 이미지 핫스팟을 검색합니다. 드래그하여 이미지 아래에서 그림을 선택한 다음 핫스팟을 열고 모든 마커에 대한 항목 추가를 클릭합니다. 각 마커의 유형,도구 설명 내용 및 위치를 설정한 다음 게시합니다.
패널에서 “핫스팟”을 검색하면 두 개의 결과가 돌아옵니다. MA 배지가 달린 것은이 위젯입니다. 그 옆에있는 자물쇠가 달린 것은 Elementor Pro 라이센스가 필요한 Elementor 자체 Hotspot 이므로 빌드하기 전에 이미 소유하고있는 것을 확인하는 것이 좋습니다.
위젯을 넣고 이미지를 선택한 후 설정하세요 이미지 해상도 그림이 미세한 디테일을 전달하는 경우 전체로. 마커는 렌더링된 이미지에 위치하므로 축소된 소스를 사용하면 모든 핀이 대략적으로 보입니다. 열기 핫스팟를 누르고 항목 추가를 누르고 마커당 한 번 반복합니다. 각 항목에는 고유한 콘텐츠,스타일 및 위치 탭이 있습니다.
두 가지가 첫 번째 빌드에서 사람을 넘어뜨립니다. 마커는 위치 슬라이더를 터치할 때까지 왼쪽 상단에 위치하므로 세 개의 새로운 항목이 하나처럼 쌓입니다. 그리고 Tooltip Content 상자는 전체 편집기이므로 단락을 붙여넣고 싶은 유혹을 느끼게 됩니다. 더 아래로 덮어두면 이에 저항할 이유가 있습니다.
제품 사진, 지도, 다이어그램을 사용한 작업 예가 나와 있습니다 elementor 에서 이미지 핫스팟을 추가하는 방법. 모든 컨트롤은 에 나열되어 있습니다 이미지 핫스팟 위젯 설정 가이드.


하나의 이미지에 4가지 마커 유형이 있습니다
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 유형 마커의 콘텐츠 탭에서 제어하면 네 가지 모양이 제공되며 단일 이미지 내에서 네 가지를 모두 혼합할 수 있습니다.
없음 맨 색깔의 점을 남깁니다. 라벨이 서로 충돌하는 조밀한 다이어그램에 가장 깨끗한 옵션입니다.
텍스트 마커 안에 짧은 문자열을 인쇄합니다. 숫자는 잘 작동하기 때문에 01,02 및 03 제품 샷에 걸쳐 작성할 전설이없는 가이드 투어로 읽습니다. 긴 문자열은 점을 알약으로 바꾸어 “쾰른 5 호”와 같은 것에 대해 원하는 모양입니다.
아이콘 라이브러리에서 멋진 글꼴 아이콘을 가져와 나뭇잎이 재료를 나타내고 별표가 등급을 나타낼 수 있습니다.
이미지 미디어 라이브러리의 그림에 대한 마커를 교환합니다. 제품 썸네일과 아바타가 가장 잘 읽습니다; 바쁜 것은 마커 크기에서 흐릿하게 변합니다.
각 마커는 또한 다음을 허용합니다 링크니다. 해당 링크는 공구 팁이 호버에서 열리거나 공구 팁을 껐던 중단점에서 발생합니다. 클릭 시 트리거가 켜져 있는 동안에는 실행되지 않습니다. 탭이 이미 사용되었기 때문입니다.
모든 마커를 백분율로 배치합니다
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 위치 탭에는 두 개의 슬라이더,수평 위치와 수직 위치가 있으며 둘 다 이미지의 백분율로 측정됩니다. 50 과 24 를 설정하면 중간 아래로 4 분의 1 의 방식으로 마커가 표시됩니다. 드래그 온 캔버스 배치가 없으므로 숫자를 살짝 밀고 미리보기를 볼 수 있습니다.
퍼센트는 전화기에서 마커를 정직하게 유지하는 것입니다. 기본 이미지는 용기로 확장되고 각 마커는 상대 지점을 유지하므로 병뚜껑에 고정된 라벨은 여전히 병뚜껑에 390px 너비로 표시되어 있으며 픽셀 오프셋이 표류했을 것입니다.
동일한 탭에는 마커당 표시가 있습니다 보여주다그 1 개의 감적을 위한 세계적인 tooltip 측을 재정의하는. 그것은 감적이 우측 가장자리 가까이에 앉고 그것의 tooltip 가 이미지 떨어져 달릴 때 돕는다: 좌로 그 것을 놓고 나머지를 정상에 남겨두십시오.
마커는 기본적으로 펄스를 발생시킵니다. The 펄스 효과 비활성화 핫스팟 섹션 하단의 스위치는 모든 마커에 대해 한 번에 애니메이션을 끄는데, 이는 일반적으로 15개의 핀이 있는 평면도에 필요한 것입니다.


툴팁 위치, 애니메이션 및 모바일 동작
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 도구 설명 섹션은 위젯의 모든 도구 설명을 함께 구동합니다: 위치 표시(상단, 하단, 왼쪽 또는 오른쪽), 애니메이션(Shift-Away, Shift-Toward, Fade, Scale 또는 Perspective), 화살표 토글, 미세 너지를 위한 오프셋 및 거리.
도구 설명 호버에 열려 있습니다. 전화기에는 호버가 없으므로 두 가지 정직한 옵션이 남습니다. 스위치 켜기 클릭 시 트리거 그리고 탭하면 도구 설명이 열립니다. 또는 설정 켜짐 비활성화 해당 화면에 툴팁을 숨기고 각 마커의 링크에 작업을 전달하는 모바일 또는 태블릿 및 모바일로 이동합니다.
계획을 세우는 한 가지 제한 사항입니다. 툴팁 콘텐츠는 WYSIWYG 상자입니다. 하지만 위젯은 렌더링하기 전에 마크업을 제거하므로 굵게 표시되고 링크,이미지 및 단축 코드는 모두 사라지고 툴팁은 일반 텍스트를 표시합니다. 각 항목을 짧은 한 줄로 유지하십시오. 포맷된 툴팁 콘텐츠가 필요할 때 Elementor Pro 의 Hotspot 위젯은 서식 있는 텍스트를 처리하며 이 위젯은 그렇지 않습니다.
툴팁 자체를 스타일링하는 것은 전체 세트입니다: 정렬,패딩, 반경,배경, 텍스트 색상,테두리, 화살표 색상,타이포그래피 및 상자 그림자 기본 이미지는 불투명도,테두리, 반경,상자 그림자 및 CSS 필터를 얻습니다.
기본값 및 호버용 스타일 마커
마커 스타일링은 두 곳에 위치하며 분할을 알고 나면 들리는 것보다 간단합니다.
위젯의 스타일 탭은 모든 마커를 한 번에 다룹니다: 텍스트 패딩, 테두리 반경, 타이포그래피, 전환 그룹, 그리고 불투명도, 크기, 색상, 배경 색상, 테두리 유형 및 상자 그림자를 포함하는 기본 및 호버 탭. 크기는 0.5 에서 2 까지의 배율 승수이므로 호버를 1.15 로 설정하면 페이지의 다른 항목을 이동하지 않고 마커가 커서 아래에서 가볍게 들어 올릴 수 있습니다.
단일 마커 안의 스타일 탭은 해당 마커의 색상, 배경 및 불투명도를 기본값으로 무시하고 호버링합니다. 그렇게 하면 매진된 항목을 표시하거나 원하는 핫스팟에 먼저 표시하기 위해 보라색 벽에 하나의 마커를 빨간색으로 만듭니다.
100 의 테두리 반경은 원과 알약을 제공합니다. 6 에 떨어 뜨리면 텍스트 마커가 사각형 태그가되어 거품 행보다 건축 도면에서 더 잘 읽혀집니다.

Elementor Pro 핫스팟 대 마스터 애드온 이미지 핫스팟
Elementor Pro 는 자체 Hotspot 위젯을 제공합니다. Elementor Pro 에 대해 이미 비용을 지불했다면 먼저 해당 위젯을 확인하십시오. 왜냐하면이 위젯이 전혀 필요하지 않을 수 있기 때문입니다.
| 특징 | 엘리멘터 프로 핫스팟 | 마스터 애드온 이미지 핫스팟 |
|---|---|---|
| 가격 | Elementor Pro가 필요합니다 | 마스터 애드온 프로가 필요합니다 |
| 마커 유형 | 사용자 정의 크기의 라벨 텍스트와 아이콘입니다 | 없음, 텍스트, 아이콘 또는 이미지 |
| 마커 애니메이션 | 순차 애니메이션이 포함된 소프트 비트, 확장 또는 오버레이 | 펄스 켜기 또는 끄기 |
| 툴팁 콘텐츠 | 서식이 있는 서식 있는 텍스트 | 일반 텍스트만 |
| 도구 설명 트리거 | 호버링, 클릭 또는 없음 | 마우스를 올리거나 클릭 시 트리거로 클릭하세요 |
| 툴팁 애니메이션 | 지속 시간 설정으로 스타일을 페이드하고 슬라이드합니다 | 이동 거리, 이동 방향, 페이드, 스케일, 원근법, 화살표 더하기, 오프셋 및 거리 |
| 모바일 | 장치 위치별 | 태블릿 및 모바일 또는 모바일에서 도구 설명을 비활성화합니다 |
풍부한 툴팁 텍스트 및 마커 애니메이션에서 Elementor Pro 가 승리합니다. 이미지 마커를 원하거나 Elementor Pro 없이 Master Addons Pro 를 이미 사용하고 있다면 Master Addons 가 선택됩니다. 관련 항목: 무료 툴팁 위젯, 그만큼 툴팁 확장 (Pro), 이미지 비교 그리고 이미지 호버 효과.
이미지 핫스팟이 그 자리를 차지하는 곳
Shop-the-look 사진은 명백한 것입니다. 단일 라이프 스타일 샷,제품 당 이미지 마커,각 항목의 이름을 지정하는 툴팁 및 제품 페이지로 연결되는 링크. 방문자가 가격이 책정되기 전에 함께 스타일링 된 조각을보기 때문에 썸네일의 격자보다 더 잘 작동합니다.
사양 테이블이 없는 사양은 더 조용한 용도입니다. 카메라 본체, 시계 및 기계에서는 번호가 매겨진 마커가 선택한 순서대로 판독기를 대상 주위로 걸어다니며 아무도 테이블의 4행에 다시 사진을 매핑할 필요가 없습니다.
그런 다음 평면도,캠퍼스지도 및 레이블이 지정된 다이어그램이 있습니다. 펄스 효과 비활성화가있는 점,클릭 시 트리거로 설정된 도구 설명,전체 페이지를 가리키는 각 마커에 링크가 있습니다. 15 개의 핀은 그런 식으로 읽을 수있게 유지됩니다; 15 개의 펄스 알약은 그렇지 않습니다.














이미지 핫스팟에 대해 자주 묻는 질문
호버가 없는 휴대폰에서는 어떤 일이 발생하나요?
트리거 켜기 도구 설명 섹션에서 클릭하면 방문자가 마커를 탭하여 도구 설명을 열 수 있습니다. 모바일 또는 태블릿 및 모바일로 켜기 사용 안 함을 설정할 수도 있습니다. 이 설정에서는 해당 화면에 도구 설명을 숨기고 마커 링크가 방문자를 더 많은 정보로 안내할 수 있습니다.
핫스팟 마커에 아이콘 대신 사용자 지정 이미지를 사용할 수 있습니까?
예. 핫스팟 유형을 이미지로 설정하고 미디어 라이브러리에서 그림을 선택합니다. 제품 축소판이나 아바타와 같은 작고 간단한 이미지는 마커 크기에서 가장 잘 읽혀집니다.
기본 이미지 자체가 반응성이 있습니까?
예. 열이 있는 이미지 스케일링과 마커 위치가 퍼센트로 설정되므로 각 마커는 화면 크기에 걸쳐 이미지의 동일한 부분에 유지됩니다. 도구 설명에는 작은 화면의 경우 클릭 시 트리거 또는 켜짐 사용 안 함이 필요할 수 있습니다.
Image Hotspot 위젯은 무료인가요?
아니요. 이미지 핫스팟은 일부입니다 마스터 애드온 프로. 무료 플러그인에는 다음이 있습니다 툴팁 위젯단일 요소에 호버 힌트를 추가하지만 이미지에 마커를 고정하지 않는. Elementor Pro 사용자는 Elementor 자체 Hotspot 위젯을 사용할 수도 있습니다.
펄스 애니메이션을 끌 수 있나요?
예. 펄스 효과 비활성화는 핫스팟 섹션의 하단에 위치하며 해당 위젯의 모든 마커에 대해 펄스를 끕니다. 마커당 펄스 토글이 없으므로 한 페이지에서 두 가지 모양이 모두 필요한 경우 두 번째 이미지 핫스팟 위젯을 사용하십시오.
툴팁의 서식이 사라지는 이유는 무엇입니까?
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
![Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)




