일부 이미지는 제품 샷,평면도 또는 지도와 같이 약간의 설명이 필요합니다. The 이미지 핫스팟 위젯 에서 Elementor용 마스터 애드온 이미지의 어느 곳에나 클릭 가능한 마커를 고정하는 Pro 위젯입니다. 각 위젯은 짧은 텍스트 도구 설명을 표시하며 방문자가 마우스를 올리거나 탭하면 다른 페이지로 연결할 수 있습니다.
이미지를 로드하고 원하는 위치에 핫스팟을 놓은 다음 도구 설명 텍스트를 추가한 다음 마커의 스타일을 지정하고 도구 설명의 동작 방식을 설정합니다. 이 안내서는 위젯의 모든 설정을 다룹니다.
이미지 핫스팟 위젯이 수행하는 작업 #
위젯은 단일 이미지 위에 마커를 놓습니다. 각 핫스팟에는 고유한 위치,아이콘 및 도구 설명이 있으므로 사진의 일부에 레이블을 지정하거나 다른 페이지에 연결할 수 있습니다. 마커를 가리키거나 클릭하면 옆에 도구 설명이 나타납니다.
세 개의 탭이 실행됩니다. 콘텐츠 이미지, 핫스팟 및 도구 설명 동작을 보유합니다. 스타일 이미지, 마커 색상 및 도구 설명 모양을 처리합니다. 고급 일반적인 Elementor 간격 및 가시성입니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- 마스터 애드온 프로 image Hotspot 이 Pro 위젯이기 때문에 활성 라이센스로 설치되었습니다. 플러그인에 새로 추가되었습니까? 참조 설치 가이드.
- 이미지, 각 핫스팟에 표시하려는 레이블 또는 링크.
이미지 핫스팟 위젯을 추가하는 방법 #
Elementor 편집기에서 을 엽니다 요소 패널 및 검색 이미지 핫스팟또는 Master Addons 섹션으로 스크롤합니다(위젯에는 보라색 MA 배지가 있음). 페이지로 드래그하면 편집할 수 있는 샘플 이미지와 마커가 로드됩니다.
이미지를 선택합니다 #
열다 콘텐츠 탭. 그만큼 이미지 섹션은 핫스팟이 있는 기본 사진을 로드하는 곳입니다.
- 이미지 선택: 미디어 라이브러리에서 그림을 선택합니다.
- 이미지 해상도: large 또는 Full과 같은 크기가 제공됩니다.
- 정렬: 열 내의 왼쪽, 중앙 또는 오른쪽입니다.
핫스팟 추가 #
열다 핫스팟 섹션. 반복기이므로 각 마커는 자체 항목입니다. 항목 추가를 사용하여 마커를 추가한 다음 위치 탭에 슬라이더와 함께 각각을 배치합니다.
- 항목 추가: 이미지에 필요한 만큼 핫스팟을 추가하세요.
- 펄스 효과 비활성화: 마커에서 펄스 애니메이션을 끕니다.
- 위치 탭: 각 마커에 대한 백분율로 표시된 수평 및 수직 위치입니다.
각 핫스팟 설정 #
핫스팟을 클릭하여 설정을 엽니다. The 콘텐츠 탭은 마커 유형, 도구 설명 텍스트 및 선택적 링크를 설정합니다.
- 유형: 마커 안에 아무것도 표시하지 않거나, 짧은 텍스트, 아이콘 또는 이미지를 표시합니다.
- 텍스트 및 링크: 마커 내부의 텍스트와 URL은 도구 설명이 호버에서 열리거나 해당 화면에서 비활성화될 때 작동합니다.
- 툴팁 내용: 툴팁 텍스트. WYSIWYG 상자에서 편집되지만 툴팁에는 일반 텍스트만 표시됩니다.
스타일 각 핫스팟 #
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-toward와 같은 공개 효과.
- 클릭 시 트리거: 호버 대신 클릭에 도구 설명을 열고 터치하는 것이 좋습니다. 켜짐 비활성화 태블릿 및 모바일 또는 모바일에서 도구 설명을 숨깁니다.
이미지와 툴팁을 스타일링하세요 #
열다 스타일 위젯의 탭. The 이미지 section은 그림의 불투명도, 테두리, 필터를 설정하고 분리합니다 핫스팟 그리고 도구 설명 섹션에서는 마커와 도구 설명 상자의 스타일을 지정합니다.
- 이미지: 불투명도, 테두리 반경, 상자 그림자 및 CSS 필터.
- 핫스팟: 마커의 전체 크기 및 색상입니다.
- 도구 설명: 툴팁 배경, 텍스트 색상 및 타이포그래피.
일반적인 사용 사례 #
- 제품 이미지 사진의 일부에 특징이나 사양을 고정합니다.
- 지도 및 평면도 표시 방, 부스, 또는 위치.
- 인포그래픽스 이미지를 어수선하게 만들지 않고 디테일을 추가합니다.
- 팀 또는 사무실 사진 사람이나 영역에 라벨을 붙입니다.
- 튜토리얼 스크린샷에서 단계 또는 부분을 가리키기.
이미지 핫스팟 위젯 작업 팁 #
- 핫스팟을 읽을 수 있게 유지하세요. 작은 화면에서 마커와 툴팁이 겹치지 않도록 공간을 확보하세요.
- 모바일 클릭을 사용하세요. 클릭 시 트리거를 켜면 휴대폰에 호버가 없기 때문에 터치 사용자가 도구 설명을 열 수 있습니다.
- 마커를 대조합니다. 뒤에 있는 이미지에서 눈에 띄는 마커 색상을 선택하세요. 그렇지 않으면 바쁜 사진이 이를 삼켜버릴 것입니다.
- 툴팁 텍스트를 짧게 유지하세요. 한두 줄이 떠다니는 상자에 채워진 문단보다 더 잘 읽혀집니다.
- 정확한 위치를 설정하세요. 위치 탭 슬라이더를 사용한 다음 휴대폰에서 미리보기를 통해 각 마커를 확인하세요.
비디오 자습서를보십시오 #
화면에서 따라하는 것을 선호하시나요? 아래의 비디오 튜토리얼은 이미지 핫스팟 요소를 처음부터 끝까지 살펴보고,Elementor 편집기에서 이미지,핫스팟, 툴팁 및 스타일링이 어떻게 작동하는지 보여줍니다.
자주 묻는 질문 #
마스터 애드온의 이미지 핫스팟 위젯은 무엇입니까?
이미지에 대화형 마커를 고정하는 Elementor 용 Master Addons Pro 위젯입니다. 각 핫스팟에는 자체 위치,마커 유형,일반 텍스트 툴팁 및 옵션 링크가 있으며,호버 또는 클릭에 표시됩니다. 모든 것은 코드 없이 Elementor 패널에서 설정됩니다.
이미지에 핫스팟을 더 추가하려면 어떻게 해야 하나요?
콘텐츠 탭에서 핫스팟 섹션을 열고 항목 추가를 사용하여 다른 마커를 만듭니다. 각각의 새로운 핫스팟은 고유한 콘텐츠,스타일 및 위치를 가져오며 위치 탭의 슬라이더와 함께 배치합니다.
핫스팟에 링크를 추가할 수 있나요?
예. 각 핫스팟에는 콘텐츠 탭에 링크 필드가 있으므로 마커는 모든 URL 을 가리킬 수 있습니다. 링크는 도구 설명이 호버에서 열리거나 해당 화면에서 비활성화되면 작동합니다. 그러면 이미지가 클릭 가능한 맵 역할을 하여 방문자를 사진의 핀에서 제품 페이지,섹션 또는 외부 사이트로 보낼 수 있습니다.
이미지 핫스팟은 모바일에서 작동합니까?
예,하지만 터치 시 호버링이 존재하지 않습니다. 도구 설명 섹션에서 트리거 켜기 클릭을 통해 모바일 사용자가 마커를 탭하여 도구 설명을 열 수 있습니다. 중단점 아래에 도구 설명을 숨기고 대신 마커 링크를 사용할 수도 있습니다.
사용자 정의 아이콘이나 이미지를 마커로 사용할 수 있나요?
예. 각 핫스팟에는 콘텐츠 탭에 기본값 대신 마커 내부에 아이콘이나 이미지를 표시할 수 있는 유형 옵션이 있습니다. 이렇게 하면 마커가 브랜드나 이미지의 주제와 일치할 수 있습니다.
감싸는 #
Image Hotspot 위젯은 평면 이미지를 인터랙티브 이미지로 바꿉니다: 그림을 불러오고,마커를 고정하고,툴팁을 추가한 다음,마커의 스타일을 지정하고 툴팁 동작을 설정합니다. 예제 및 Elementor Pro 의 Hotspot 과의 비교는 다음을 참조하십시오 Elementor 이미지 핫스팟 위젯 페이지. 관련된 위젯은 을 참조하십시오 이미지 비교 위젯 그리고 the 이미지 호버 효과 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
