일부 이미지는 제품 샷,평면도 또는 지도와 같이 약간의 설명이 필요합니다. The 이미지 핫스팟 위젯 인 Elementor용 마스터 애드온 이미지의 어느 곳에나 클릭 가능한 마커를 고정하고 방문자가 마우스를 올리거나 탭하면 각각 텍스트나 링크가 포함된 도구 설명을 표시합니다.
이미지를 로드하고 원하는 위치에 핫스팟을 놓은 다음 도구 설명 텍스트를 추가한 다음 마커의 스타일을 지정하고 도구 설명의 동작 방식을 설정합니다. 이 안내서는 위젯의 모든 설정을 다룹니다.
이미지 핫스팟 위젯이 수행하는 작업 #
위젯은 단일 이미지 위에 마커를 놓습니다. 각 핫스팟에는 고유한 위치,아이콘 및 도구 설명이 있으므로 사진의 일부에 레이블을 지정하거나 다른 페이지에 연결할 수 있습니다. 마커를 가리키거나 클릭하면 옆에 도구 설명이 나타납니다.
세 개의 탭이 실행됩니다. 콘텐츠 이미지, 핫스팟 및 도구 설명 동작을 보유합니다. 스타일 이미지, 마커 색상 및 도구 설명 모양을 처리합니다. 고급 일반적인 Elementor 간격 및 가시성입니다.
시작하기 전에 #
- 워드 프레스 와 함께 엘리멘터 설치되고 활성화됩니다.
- Elementor용 마스터 애드온 설치되고 활성화되었습니다. 플러그인에 새로운? 참조 설치 가이드.
- 이미지, 각 핫스팟에 표시하려는 레이블 또는 링크.
이미지 핫스팟 위젯을 추가하는 방법 #
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 위젯입니다. 각 핫스팟에는 자체 위치,아이콘 및 텍스트 또는 링크가 포함된 툴팁이 있으며,호버 또는 클릭에 표시됩니다. 모든 것은 코드 없이 Elementor 패널에서 설정됩니다.
이미지에 핫스팟을 더 추가하려면 어떻게 해야 하나요?
콘텐츠 탭에서 핫스팟 섹션을 열고 항목 추가를 사용하여 다른 마커를 만듭니다. 각각의 새로운 핫스팟은 고유한 콘텐츠,스타일 및 위치를 가져오며 이미지의 위치로 드래그하거나 위치 탭에서 정확한 좌표를 설정할 수 있습니다.
핫스팟에 링크를 추가할 수 있나요?
예. 각 핫스팟에는 콘텐츠 탭에 링크 필드가 있으므로 마커는 모든 URL 을 가리킬 수 있습니다. 이를 통해 이미지가 클릭 가능한 맵 역할을 하여 방문자를 사진의 핀에서 제품 페이지,섹션 또는 외부 사이트로 보낼 수 있습니다.
이미지 핫스팟은 모바일에서 작동합니까?
예,하지만 터치 시 호버링이 존재하지 않습니다. 도구 설명 섹션에서 트리거 켜기 클릭을 통해 모바일 사용자가 마커를 탭하여 도구 설명을 열 수 있습니다. 중단점 아래에 도구 설명을 숨기고 대신 마커 링크를 사용할 수도 있습니다.
사용자 정의 아이콘이나 이미지를 마커로 사용할 수 있나요?
예. 각 핫스팟에는 콘텐츠 탭에 기본값 대신 마커 내부에 아이콘이나 이미지를 표시할 수 있는 유형 옵션이 있습니다. 이렇게 하면 마커가 브랜드나 이미지의 주제와 일치할 수 있습니다.
감싸는 #
이미지 핫스팟 위젯은 평면 이미지를 인터랙티브 이미지로 바꿉니다: 그림을 불러오고,마커를 고정하고,툴팁을 추가한 다음,마커의 스타일을 지정하고 툴팁 동작을 설정합니다. 관련 위젯은 다음을 참조하세요 이미지 비교 위젯 그리고 the 이미지 호버 효과 위젯, 전체를 찾아보세요 마스터 애드온 위젯 및 확장, 그리고 확인해 보세요 가격 페이지 각 계획에 포함된 내용입니다.
