아래에 사양의 단락이있는 제품 사진은 거의 읽히지 않습니다. 옆으로 떨어져있는 범례가있는 평면도는 무시됩니다. 문제는 항상 동일합니다: 이미지와 정보는 두 개의 다른 장소에 살고 있으며 대부분의 방문자는 그들을 연결할만큼 멀리 스크롤하지 않습니다.
안 이미지 핫스팟 그걸 고칩니다. 사진에 작은 마커를 직접 고정시키면,누군가가 맴돌거나 탭하면 각각 짧은 라벨이 드러납니다. The 이미지 핫스팟 위젯 master Addons 에서 Elementor 편집기 내부에서이 작업을 수행합니다. 이미지를 업로드하고 원하는 곳에 마커를 놓아두고 각각에 대한 레이블을 작성하면 완료됩니다. CSS 가없고 사용자 정의 코드가 없습니다.
Elementor의 이미지 핫스팟이란 무엇입니까?
이미지 핫스팟은 이미지의 특정 위치에 고정된 작은 대화형 마커입니다. 각 마커에는 자체 레이블,아이콘 또는 링크가 있습니다. 데스크톱에서 마커 위로 마우스를 가져가면 콘텐츠가 있는 부동 패널이 표시됩니다. 모바일에서는 탭해도 같은 작업을 수행합니다.
제품 사진에는 각 기능에 마커가있을 수 있습니다. 평면도는 개별 객실을 표시 할 수 있습니다. 스크린 샷은 짧은 설명으로 버튼이나 설정을 지적 할 수 있습니다. 이미지 자체는 변경되지 않습니다. 마커는 방문자에게 탐색 할 수있는 방법을 제공합니다.
Elementor 에는 핫스팟 위젯이 내장되어 있지 않습니다. Master Addons 버전은 위젯 패널에서 모든 것을 처리합니다: 마커 배치,라벨 내용,아이콘, 애니메이션,스타일링. 리피터를 통해 각 핫스팟을 개별적으로 구성하고 위젯은 위치 지정과 반응성을 관리합니다.
왜 귀하의 웹 사이트에 이미지 핫스팟을 사용?
정적 이미지는 방문자가 보는 것과 알아야 할 것 사이에 간격을 만듭니다. 핫스팟은 그 간격을 좁힙니다.
제품 사진에서 각 기능에 마커를 고정하여 방문자가 별도의 목록으로 스크롤하지 않고 사양을 볼 수 있도록 합니다. 평면도에서는 객실이나 부스에 표시하여 각 위치가 이름과 세부 정보로 열립니다. 인포그래픽에서는 시각적인 부분을 깨끗하게 유지하고 마커에 추가 컨텍스트를 표시하도록 합니다. 스크린샷에서는 튜토리얼이나 온보딩 흐름에 대한 특정 버튼이나 설정을 지적합니다. 팀 사진에서는 사람이나 부서에 라벨을 붙입니다.
구조는 항상 동일합니다: 하나의 이미지, 여러 개의 마커, 상호 작용할 때 각각 내용을 드러냅니다. 방문자는 이미지와 그 아래의 텍스트 블록 사이를 튀는 대신 이미지에 머물러 있습니다.
Elementor에 이미지 핫스팟을 추가하는 방법(단계별)
전체 설정에는 약 5분이 소요됩니다.
1 단계: 마스터 애드온을 설치하고 Pro를 활성화합니다
플러그인으로 이동하여 WordPress 대시 보드에 새로 추가 한 다음 “마스터 애드온”을 검색하십시오. 무료 플러그인을 설치하고 활성화하십시오. 가있는 경우 프로 라이센스을,마스터 애드온,라이선스 아래에 입력합니다. 이미지 핫스팟 위젯은 Pro 가 활성화된 후에만 나타납니다.
2단계: 이미지 핫스팟 위젯을 페이지로 드래그합니다
Elementor 편집기에서 아무 페이지나 엽니다. 왼쪽의 Elements 패널에서 Image Hotspot 을 검색하거나 Master Addons 섹션으로 스크롤합니다 (위젯은 보라색 MA 배지를 가지고 있습니다). 페이지로 드래그하면 샘플 이미지와 편집할 수 있는 자리 표시자 마커 몇 개가 로드됩니다.
3단계: 이미지를 업로드하세요
콘텐츠 탭에서 이미지 섹션을 엽니다. 이미지 선택 을 클릭하고 미디어 라이브러리에서 그림을 선택합니다. 이미지 해상도를 선명한 렌더링의 경우 전체 또는 크게 설정합니다. 정렬 옵션은 해당 열 내에 이미지의 위치를 지정합니다: 왼쪽,중앙 또는 오른쪽.
4단계: 이미지에 핫스팟을 추가합니다
핫스팟 섹션을 엽니다. 리피터의 각 항목은 하나의 마커입니다. 항목 추가를 클릭하여 새 항목을 만듭니다. 이미지에 필요한 만큼 추가할 수 있습니다. 이미지의 각 마커를 드래그하여 위치를 지정하거나 정확한 수평 및 수직 좌표를 설정하여 정확한 배치를 수행합니다.
기본 펄스 애니메이션 대신 정적 마커를 원하는 경우 펄스 효과 비활성화 토글이 있습니다.
5 단계: 마커 유형 및 라벨 내용 설정
핫스팟 항목을 클릭하여 설정을 엽니다. 유형 아래에서 마커 내부에 나타나는 것을 선택하십시오: 아무것도 (단지 점), 아이콘 또는 작은 이미지. 텍스트 필드는 부동 패널에 표시되는 짧은 레이블을 보유합니다. 링크 필드는 URL 을 추가하여 마커도 클릭 시 어딘가를 탐색합니다.
Tooltip Content 편집기는 전체 레이블 텍스트에 대한 WYSIWYG 상자입니다. 거기에 서식,이미지 또는 단축 코드를 사용할 수 있습니다.
6 단계: 마커 동작 구성
기본 콘텐츠 탭으로 돌아가서 도구 설명 섹션은 모든 마커에서 레이블이 어떻게 동작하는지 제어합니다:
- 위치를 표시합니다: 라벨이 열리는 마커의 어느 쪽(상단, 하단, 왼쪽, 오른쪽).
- 화살표: 마커와 레이블 사이의 포인터를 전환합니다.
- 애니메이션: Shift-Toward와 같이 레이블이 나타날 때 표시 효과입니다.
- 클릭 시 트리거: 호버에서 공개로 전환합니다. 터치스크린에는 호버가 없기 때문에 이것이 모바일에 원하는 것입니다.
마커 스타일링 옵션
각 핫스팟에는 마커의 모양에 대한 자체 스타일 탭이 있습니다:
- 기본 색상 그리고 기본 배경: 정지 상태의 마커.
- 호버 색상 그리고 배경 호버링: 호버링 시 어떻게 변하나요.
- 불투명도: 마커가 이미지에 대해 얼마나 견고하게 보이는지. 값이 낮을수록 더 미묘해집니다.
뒤에 있는 이미지에서 눈에 띄는 마커 색상을 선택합니다. 바쁜 사진은 대비가 낮은 마커를 삼키고 방문자는 핫스팟을 알아차리지 못합니다.
이미지와 라벨 스타일링
위젯의 기본 스타일 탭에는 세 개의 섹션이 있습니다.
이미지 패널
이미지 자체를 제어합니다: 불투명도,경계 반경,상자 그림자,CSS 필터.경계 반경 또는 그림자는 이미지가 카드 스타일 레이아웃 내부에 위치하도록 도와줍니다.CSS 필터를 사용하면 이미지를 다시 내보내지 않고도 밝기,대비 또는 채도를 조정할 수 있습니다.
마커 패널
모든 마커에 대한 전역 설정: 크기 및 기본 색상. 개별 핫스팟 스타일은 이러한 항목을 재정의합니다.
라벨 패널
마커가 상호작용할 때 나타나는 부동 패널을 제어합니다: 배경색, 텍스트 색상, 타이포그래피, 패딩, 테두리 반경 및 그림자.
모바일에서의 반응 행동
마커는 백분율 기반 위치 지정을 사용하므로 화면 크기에 관계없이 이미지의 동일한 지점에 고정되어 있습니다. 레이블의 크기 조정 및 위치 변경은 뷰포트 내에 유지됩니다.
터치 장치에는 호버가 없으므로 도구 설명 섹션의 클릭 시 트리거 토글에서 전체 위젯을 탭하여 공개하도록 전환합니다. 방문자는 마커를 탭하여 레이블을 열고 다른 곳을 탭하여 닫습니다. 잠재 고객이 대부분 모바일인 경우 처음부터 이 기능을 켜십시오.
레이블이 겹치기 시작하는 매우 작은 화면에서는 특정 중단점 아래에서 레이블을 비활성화하고 대신 마커 링크가 작업을 수행하도록 할 수 있습니다. 각 마커는 여전히 탭에서 해당 URL 로 이동합니다.
이미지 핫스팟 대 툴팁 위젯: 차이점은 무엇입니까?
마스터 애드온은 호버 라벨을 생산하는 두 가지 기능을 가지고 있으며, 사람들은 그들을 혼합:
| 특징 | 그것이 하는 일 | 위한 최고의 |
|---|---|---|
| 이미지 핫스팟 위젯 | 이미지의 특정 x/y 위치에 대화형 마커를 고정합니다. 각 마커는 호버링 또는 클릭 시 레이블을 엽니다. | 주석이 달린 사진, 제품 콜아웃, 평면도, 대화형 지도. |
| 도구 설명 위젯 및 도구 설명 확장 | Tooltip 위젯은 자체 트리거가 있는 독립 실행형 힌트입니다. Tooltips 확장 프로그램은 버튼,아이콘, 텍스트 블록 또는 섹션과 같은 기존 Elementor 요소에 호버 레이블을 연결합니다. | 버튼에 힌트를 표시하고, 양식 필드에 도움말 텍스트를 표시하고, 모든 페이지 요소에 추가 컨텍스트를 표시합니다. |
이미지 핫스팟은 이미지용으로 제작되었으며 위치별로 마커를 배치합니다. 사진에 마커가 필요한 경우 이미지 핫스팟을 사용하십시오. 이미 존재하는 버튼이나 텍스트 블록의 호버 라벨은 다음을 사용하십시오 도구 설명 확장. 대신 독립형 힌트를 원한다면 툴팁 위젯 그렇게 합니다.
Image Hotspot 과 Tooltips 확장 프로그램에는 Master Addons Pro 가 필요한 반면 Tooltip 위젯은 무료 플러그인에 있습니다. 선택기 또는 이벤트 핸들러를 공유하지 않으므로 동일한 페이지에서 사용할 수 있습니다.
이미지 핫스팟 작업 팁
- 공간 마커가 꺼졌습니다. 겹치는 마커는 이미지를 사용하기 어렵게 만듭니다. 두 개의 핫스팟이 서로 가깝게 위치하면 레이블을 반대쪽으로 밀거나 그 중 하나를 떨어 뜨립니다.
- 라벨을 짧게 유지하세요. 한두 줄은 부동 패널 내부의 단락보다 더 잘 읽습니다. 빠른 요약을 위해 레이블을 사용하고 전체 세부 정보를 위해 밖으로 연결하십시오.
- 클릭 시 트리거를 켜세요. 모바일용입니다. 데스크톱에서 호버가 작동하더라도 터치 사용자에게는 탭 타겟이 필요합니다. 위젯은 두 모드를 동시에 처리합니다.
- 다른 화면에서 테스트. 데스크톱에서 간격이 잘 보이는 마커는 휴대폰에 뭉칠 수 있습니다. 게시하기 전에 휴대폰,태블릿 및 와이드 모니터를 확인하십시오.
- 마커를 이미지와 대조합니다. 어두운 사진의 밝은 마커가 작동합니다. 바쁜 배경의 음소거 마커가 사라집니다. 호버 상태를 사용하여 누군가가 마커에 초점을 맞출 때 강조를 추가하십시오.
- 정렬이 중요할 때는 위치 탭을 사용하십시오. 드래그하면 거친 배치가 빠릅니다. 정확한 백분율 값이 있는 위치 탭은 다이어그램이나 스크린샷의 특정 부분과 정렬할 마커가 필요할 때 더 좋습니다.
무료 vs 프로: 당신이 얻는 것
| 계획 | 이미지 핫스팟 | 기타 위젯 |
|---|---|---|
| 무료 | 포함되지 않음 | 제목, 버튼, 정보 상자, 아코디언 등을 포함한 40+ 위젯. |
| 프로 | 포함 | 모든 무료 위젯과 이미지 핫스팟, 툴팁 확장, 표시 조건 및 나머지 80+ 위젯 및 확장. |
기본 플러그인은 다음에서 무료로 설치할 수 있습니다 워드프레스 저장소. 이미지 핫스팟 위젯에는 특히 다음이 필요합니다 프로 라이센스.
Elementor의 이미지 핫스팟이란 무엇입니까?
이미지 핫스팟은 이미지 위에 놓인 작은 인터랙티브 마커입니다. 방문자가 마우스를 올리거나 탭하면 사진의 특정 영역에 대한 텍스트,설명 또는 링크가 포함된 레이블이 나타납니다. Elementor 에는 핫스팟 위젯이 내장되어 있지 않으므로 이 기능을 추가하려면 Master Addon 과 같은 애드온이 필요합니다.
단일 이미지에 몇 개의 핫스팟을 추가할 수 있나요?
하드 제한은 없습니다. 실질적으로 이미지당 5~7 개의 핫스팟이 읽을 수 있도록 유지합니다. 그 외에도 마커가 겹치기 시작합니다. 더 많은 영역에 주석을 달아야 한다면 여러 이미지에 걸쳐 콘텐츠를 분할합니다.
이미지 핫스팟은 모바일에서 작동합니까?
예. 터치 장치에서 위젯은 호버링에서 탭 투 공개로 전환됩니다. 클릭 시 트리거를 활성화하여 모바일 방문자가 마커를 탭하여 레이블을 열 수 있습니다. 백분율 기반 위치 지정은 화면 크기에 걸쳐 핫스팟을 올바르게 고정합니다.
핫스팟을 다른 페이지에 연결할 수 있습니까?
예. 모든 핫스팟에는 링크 필드가 있습니다. 링크는 클릭 시 작동하므로 마커는 라벨에 정보를 표시하고 방문자를 제품 페이지,문서 섹션 또는 외부 URL 로 이동할 수 있습니다.
Image Hotspot 위젯은 무료인가요, 아니면 Pro인가요?
Image Hotspot 위젯은 Pro 기능입니다. 기본 Master Addons 플러그인은 무료이며 40개 이상의 위젯을 포함하지만 핫스팟 위젯에는 다음이 필요합니다 프로 라이센스.
Image Hotspot 위젯과 Tooltip 위젯의 차이점은 무엇입니까?
이미지 핫스팟 위젯은 이미지의 특정 위치에 대화형 마커를 고정하며,각각은 호버링 또는 클릭 시 레이블을 표시합니다. The 툴팁 위젯 는 자체 트리거가 있는 독립 실행형 힌트이며 Tooltips 확장 프로그램은 버튼,텍스트 또는 아이콘과 같은 기존 요소에 호버 레이블을 연결합니다. 주석이 달린 사진의 경우 이미지 핫스팟을 사용하고 다른 페이지 요소의 호버 힌트의 경우 도구 설명 옵션을 사용합니다.
감싸는 중
이미지 핫스팟 위젯은 평면 이미지를 가져와서 호버링이나 클릭 시 정보를 드러내는 마커를 추가합니다. 이미지를 업로드하고 설명이 필요한 영역에 마커를 놓은 다음 각각에 대해 짧은 레이블을 작성하고 디자인에 맞게 마커의 스타일을 지정합니다. 모든 것은 Elementor 편집기 내부에서 발생합니다.
Elementor의 이미지에 대한 자세한 내용은 다음을 참조하세요 이미지 비교 위젯 그리고 the 이미지 호버 효과 위젯. 이미지 대신 버튼이나 텍스트에 호버 라벨이 필요한 경우 툴팁 위젯 튜토리얼 그것을 다룹니다. 그리고 의 전체 목록 마스터 애드온 위젯 및 확장 다른 것이 무엇인지 확인하고 싶다면 검색해 볼 가치가 있습니다.
마스터 애드온 프로를 받으세요 image Hotspot 위젯과 Elementor용 나머지 80+ 위젯 및 확장 기능을 잠금 해제합니다.
