툴팁이 포함된 Elementor 이미지 핫스팟 위젯(Pro)

Image Hotspot 은 이미지 위에 마커를 고정하는 Master Addons Pro 위젯입니다. 마커는 일반 점,짧은 텍스트 레이블,글꼴 멋진 아이콘 또는 작은 그림이 될 수 있으며 방문자가 마우스를 올리면 각각 도구 설명을 열거나 클릭 시 트리거를 켜면 탭합니다. 보기 사진,제품 콜아웃,평면도, 캠퍼스 지도 및 레이블이 지정된 다이어그램에 적합합니다. 원하는 것이 버튼이나 제목에 대한 호버 힌트인 경우,the 툴팁 위젯 (master Addons Pro가 필요하지 않음) 또는 툴팁 확장 (Pro) 는 더 가까운 핏.

Elementor에 이미지 핫스팟을 추가하는 방법

Elementor 에서 이미지 핫스팟을 추가하려면 Master Addons Pro 를 활성화하고 Elementor 로 페이지를 편집한 후 위젯 패널에서 이미지 핫스팟을 검색합니다. 드래그하여 이미지 아래에서 그림을 선택한 다음 핫스팟을 열고 모든 마커에 대한 항목 추가를 클릭합니다. 각 마커의 유형,도구 설명 내용 및 위치를 설정한 다음 게시합니다.

패널에서 “핫스팟”을 검색하면 두 개의 결과가 돌아옵니다. MA 배지가 달린 것은이 위젯입니다. 그 옆에있는 자물쇠가 달린 것은 Elementor Pro 라이센스가 필요한 Elementor 자체 Hotspot 이므로 빌드하기 전에 이미 소유하고있는 것을 확인하는 것이 좋습니다.

위젯을 넣고 이미지를 선택한 후 설정하세요 이미지 해상도 그림이 미세한 디테일을 전달하는 경우 전체로. 마커는 렌더링된 이미지에 위치하므로 축소된 소스를 사용하면 모든 핀이 대략적으로 보입니다. 열기 핫스팟를 누르고 항목 추가를 누르고 마커당 한 번 반복합니다. 각 항목에는 고유한 콘텐츠,스타일 및 위치 탭이 있습니다.

두 가지가 첫 번째 빌드에서 사람을 넘어뜨립니다. 마커는 위치 슬라이더를 터치할 때까지 왼쪽 상단에 위치하므로 세 개의 새로운 항목이 하나처럼 쌓입니다. 그리고 Tooltip Content 상자는 전체 편집기이므로 단락을 붙여넣고 싶은 유혹을 느끼게 됩니다. 더 아래로 덮어두면 이에 저항할 이유가 있습니다.

제품 사진, 지도, 다이어그램을 사용한 작업 예가 나와 있습니다 elementor 에서 이미지 핫스팟을 추가하는 방법. 모든 컨트롤은 에 나열되어 있습니다 이미지 핫스팟 위젯 설정 가이드.

핫스팟을 검색하는 Elementor 위젯 패널, Elementor Pro의 잠긴 핫스팟 위젯 옆에 Master Addons 이미지 핫스팟 위젯을 표시하고 향수 플랫 레이에 텍스트 라벨 마커를 표시합니다

이미지 핫스팟을 한눈에 살펴보세요

위젯이 수행하는 작업은 Master Addons Pro 코드에서 읽어보세요.

항목이미지 핫스팟 위젯
마커 유형없음, 텍스트, 아이콘 또는 이미지
이미지당 마커핫스팟 목록에 추가한 만큼
포지셔닝이미지의 백분율로 표시된 수평 및 수직 슬라이더, 모든 화면 크기에 대해 하나의 위치, 드래그 없음
마커별 설정링크, 툴팁 텍스트, 툴팁 측면, 기본 및 호버 색상, 불투명도
툴팁 콘텐츠일반 텍스트(HTML은 렌더링 시 제거됨)
툴팁 측면상단, 하단, 왼쪽 또는 오른쪽
툴팁 애니메이션이동-떨어져, 이동-향하여, 퇴색, 규모, 원근법
트리거마우스를 올리거나 클릭 시 트리거를 사용하여 클릭하세요
화살표, 오프셋 및 거리예
맥박 효력기본적으로 켜짐, 하나의 스위치는 위젯에 대해 꺼져
마커 링크공구 팁이 호버에서 열릴 때 따라갔습니다
스타일마커 크기, 패딩, 반경, 기본 및 호버 색상; 툴팁 패딩, 반경, 색상, 화살표 색상, 타이포그래피
필요Elementor 및 마스터 애드온 프로

Elementor에서 대화형 이미지를 구축하세요

인터랙티브 이미지는 방문자가 질문을 가리킬 때 질문에 답하는 사진입니다. Elementor 에서는 Image Hotspot 으로 3 단계로 하나를 빌드합니다.

  1. 이미지 핫스팟을 컨테이너에 넣고 이미지 아래의 사진을 선택합니다.
  2. 핫스팟에서 스팟당 하나의 항목을 추가합니다. 마커로 텍스트,아이콘 또는 이미지를 선택하고 한 줄 도구 설명을 입력한 다음 수평 및 수직 위치를 퍼센트로 설정합니다.
  3. 도구 설명을 열고 측면과 애니메이션을 선택한 다음 대부분의 방문자가 휴대폰에 있는 경우 클릭 시 트리거를 켭니다.

스크린샷을 통한 전체 연습을 보려면 다음을 읽어보세요 elementor 에서 이미지 핫스팟을 추가하는 방법.

사무실 사진에 4개의 번호가 매겨진 핫스팟 마커가 있는 Elementor 대화형 이미지, 회의 테이블 이름을 지정하는 하나의 도구 설명 열기

사무실 사진에 번호가 매겨진 4개의 마커가 있으며 회의 테이블 도구 설명이 열려 있습니다.

이미지 핫스팟을 간단한 이미지 맵으로 사용하세요

이미지 맵은 그림의 일부를 클릭 가능하게 만듭니다. 이미지 핫스팟은 일반적인 경우를 다룹니다: 다른 페이지에 대한 링크가있는 각 지점의 마커. 이는 도구 설명이 호버에서 열릴 때 작동합니다. Image Map Pro 와 같은 SVG 이미지 맵 플러그인이하는 것처럼 클릭 가능한 모양이나 영역을 그리지는 않으므로 모든 방 윤곽선을 클릭 할 수 있어야하는 평면도에는 전용 이미지 맵 플러그인이 필요합니다.

캠퍼스 지도,매장 레이아웃 또는 제품 다이어그램의 핀의 경우 마커가 충분하고 빠르게 설정됩니다. The 체육관 구역지도 데모 이런 식으로 작동합니다.

유형, 텍스트, 링크 및 도구 설명 콘텐츠 컨트롤이 있는 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 가 승리합니다. 이미지 마커를 원하거나 Elementor Pro 없이 Master Addons Pro 를 이미 사용하고 있는 경우 Master Addons 가 선택입니다. 관련: the 툴팁 위젯, 그만큼 툴팁 확장 (Pro), 이미지 비교 그리고 이미지 호버 효과.

이미지 핫스팟이 그 자리를 차지하는 곳

Shop-the-look 사진은 명백한 것입니다. 단일 라이프 스타일 샷,제품 당 이미지 마커,각 항목의 이름을 지정하는 툴팁 및 제품 페이지로 연결되는 링크. 방문자가 가격이 책정되기 전에 함께 스타일링 된 조각을보기 때문에 썸네일의 격자보다 더 잘 작동합니다.

사양 테이블이 없는 사양은 더 조용한 용도입니다. 카메라 본체, 시계 및 기계에서는 번호가 매겨진 마커가 선택한 순서대로 판독기를 대상 주위로 걸어다니며 아무도 테이블의 4행에 다시 사진을 매핑할 필요가 없습니다.

그런 다음 평면도,캠퍼스지도 및 레이블이 지정된 다이어그램이 있습니다. 펄스 효과 비활성화 기능이있는 점,각각에 한 줄 도구 설명,전체 페이지를 가리키는 각 마커에 링크가 있으며,호버에 도구 설명이 남아 있으므로 링크가 여전히 실행됩니다. 15 개의 핀은 그런 식으로 읽을 수있게 유지됩니다; 15 개의 펄스 알약은 그렇지 않습니다.

잘 어울리는 쌍: the 툴팁 위젯, 그만큼 도구 설명 확장 (프로), 이미지 호버 효과, 고급 이미지 그리고 이미지 비교.

이미지 핫스팟 예

위젯으로 제작된 14개의 라이브 데모는 각각 이미지 핫스팟에 대해 서로 다른 용도로 사용됩니다.

템플릿 뷰어
페이스북
트위터
왓츠앱
링크 복사
지금 구매하기
이미지 핫스팟
이미지 핫스팟
이미지로서의 핫스팟
이미지로서의 핫스팟
이미지 핫스팟 V1
이미지 핫스팟 V1
이미지 핫스팟 V2
이미지 핫스팟 V2
이미지 핫스팟 V3
이미지 핫스팟 V3
이미지 핫스팟 V4
이미지 핫스팟 V4
모양, 번호가 매겨진 마커를 쇼핑하세요
모양, 번호가 매겨진 마커를 쇼핑하세요
접시 고장, 아이콘 마커
접시 고장, 아이콘 마커
부동산 투어, 라벨 배지
부동산 투어, 라벨 배지
어둠에 자동차 목록 사양
어둠에 자동차 목록 사양
이미지 마커가 있는 플랫 레이
이미지 마커가 있는 플랫 레이
링크가 있는 체육관 구역 지도
링크가 있는 체육관 구역 지도
해부학, 작은 아이콘을 시청하세요
해부학, 작은 아이콘을 시청하세요
코워킹 투어, 평범한 점들
코워킹 투어, 평범한 점들

이미지 핫스팟에 대해 자주 묻는 질문

사용자가 Image Hotspot 에 대해 가장 많이 묻는 쿼리를 알아보고 한 곳에서 답변을 찾으십시오.
호버가 없는 휴대폰에서는 어떤 일이 발생하나요?

트리거 켜기 도구 설명 섹션에서 클릭하여 방문자가 마커를 탭하여 도구 설명을 엽니다. 마커는 모든 화면에서 동일한 퍼센트 위치를 유지하므로 전화 폭으로 페이지를 미리보고 이미지를 크라우드하면 마커 크기를 낮춥니다.

예. 핫스팟 유형을 이미지로 설정하고 미디어 라이브러리에서 그림을 선택합니다. 제품 축소판이나 아바타와 같은 작고 간단한 이미지는 마커 크기에서 가장 잘 읽혀집니다.

아니요. 각 마커에는 위치 탭에 수평 위치 및 수직 위치 슬라이더가 있으며 이미지의 백분율로 측정됩니다. 슬라이더를 움직여 미리보기를 시청하십시오. 백분율은 이미지 크기가 조정될 때 마커를 같은 지점에 유지합니다.

포인트 링크의 경우, 예: 각 지점에 마커를 놓고 링크를 제공합니다, 공구 팁은 호버에 남아. 그것은 클릭 가능한 모양이나 영역을 그리지 않습니다, 그래서 평면도에 방 윤곽선을 위해 이미지 맵 프로와 같은 이미지 맵 플러그인을 사용합니다.

아니요. Elementor 의 Hotspot 위젯은 Elementor Pro 의 일부이며 Image Hotspot 은 Master Addons Pro 가 필요합니다. 일부 다른 애드온 팩에는 무료 버전에 핫스팟 위젯이 포함되어 있습니다.

기본 이미지 자체가 반응성이 있습니까?

예. 열이 있는 이미지 스케일링과 마커 위치가 퍼센트로 설정되므로 각 마커는 화면 크기에 걸쳐 이미지의 동일한 부분에 유지됩니다. 휴대폰에서는 트리거를 클릭하면 탭으로 도구 설명이 열립니다.

아니요. 이미지 핫스팟은 일부입니다 마스터 애드온 프로. Pro 없이 당신은 사용할 수 있습니다 툴팁 위젯단일 요소에 호버 힌트를 추가하지만 이미지에 마커를 고정하지 않는. Elementor Pro 사용자는 Elementor 자체 Hotspot 위젯을 사용할 수도 있습니다.

예. 펄스 효과 비활성화는 핫스팟 섹션의 하단에 위치하며 해당 위젯의 모든 마커에 대해 펄스를 끕니다. 마커당 펄스 토글이 없으므로 한 페이지에서 두 가지 모양이 모두 필요한 경우 두 번째 이미지 핫스팟 위젯을 사용하십시오.

위젯은 Tooltip Content 가 렌더링되기 전에 HTML 을 제거하므로 굵은 텍스트,링크, 이미지 및 단축 코드가 삭제되고 도구 설명에 일반 텍스트가 표시됩니다. 각 도구 설명을 짧은 한 줄로 유지합니다. 포맷된 도구 설명의 경우 Elementor Pro 의 Hotspot 위젯은 서식 있는 텍스트를 지원합니다.

트렌드 엘리먼트 위젯 및 확장

더 짧은 시간에 정교한 웹사이트를 구축하세요.

Elementor용 Master Addons Glassmorphism 확장: 흐림 값 컨트롤이 20px로 설정된 반투명 유리 카드

유리형성

집 무료 Elementor Glassmorphism 확장: 하나의 토글에서 서리 유리 효과 Glassmorphism 서리입니다...
자세히 보기
Elementor용 마스터 애드온 컨테이너 추가 확장: 최대 너비, 최대 높이, 최소 너비 및 최소 높이 컨트롤이 포함된 컨테이너의 최대 너비는 1400px입니다

컨테이너 엑스트라

홈 Elementor 컨테이너 최대 너비 및 최대 높이 제어 컨테이너 엑스트라는 무료 마스터입니다...
자세히 보기
Elementor용 마스터 애드온 패턴 확장: 보라색 그라데이션 그리드 왼쪽 스타일, 세 가지 패턴 스타일 및 패턴 활성화 패널이 있는 영웅입니다

패턴

홈 70+ 무료 Elementor 배경 패턴 패턴은 추가되는 무료 Master Addon 확장입니다...
자세히 보기
Elementor용 마스터 애드온 게시물/페이지 복제기 확장: 랜딩 페이지를 생성하는 WordPress 페이지 목록의 MA 복제기 행 링크 - [복제된 #128] 초안

게시물/페이지 복제기

홈 중복 엘리멘터 페이지 및 게시물 한 번의 클릭으로 게시물/페이지 복제기는 무료 마스터입니다...
자세히 보기
Elementor용 마스터 애드온 읽기 진행률 표시줄 확장: 활성화, 위치, 높이 및 채우기 색상 설정이 포함된 개인 정보 보호 정책 페이지 상단에 파란색 표시줄 42%가 채워져 있습니다

읽기 진행률 표시줄

홈 WordPress (Elementor) 에서 읽기 진행률 표시 줄 추가 읽기 진행률 표시 줄은 무료입니다...
자세히 보기