이미지 핫스팟
그림은 천 단어의 가치가 있지만 주석을 달 수 있다면 어떨까요? 방문자가 제품 샷,지도 또는 다이어그램에서 중요한 것이 무엇인지 추측하지 못하게하십시오. 마스터 애드온 이미지 핫스팟 요소를 사용하면 대화 형 마커를 모든 이미지에 직접 배치 할 수 있습니다. 아이콘을 추가하고 모양을 사용자 정의하고 텍스트,이미지 또는 링크로 채워진 풍부한 도구 설명을 첨부합니다. 대화 형 제품 가이드를 만들고 복잡한 인포 그래픽을 설명하거나 매력적인 포트폴리오 쇼케이스를 구축하십시오. 정적 비주얼을 탐색적이고 자명한 경험으로 전환하십시오.
시각적 핫스팟 배치 및 관리
기본 이미지 – 제품,지도, 기술 다이어그램으로 시작하십시오. 그런 다음 픽셀 완벽한 정밀도로 대화 형 마커를 배치하십시오. 직관적 인 위치 컨트롤을 사용하여 수평 및 수직 비율 슬라이더를 조정하여 각 핫스팟을 필요한 곳으로 정확하게 이동하십시오. + 항목 추가 버튼으로 원하는만큼 핫스팟을 추가하여 각각을 독립적으로 관리하십시오. 이 시각적 배치는 모든 이미지를 상세한 대화 형 캔버스로 바꿉니다.
- 정확한 핀포인트 지정: 가로 (%) 및 세로 (%) 슬라이더를 사용하여 이미지의 아무 곳에나 핫스팟을 배치합니다.
- 무제한 핫스팟: + 항목 추가 중계기로 수많은 관심 지점을 추가합니다.
- 간편한 관리: 개별 핫스팟 (#1, #2 등) 에 쉽게 라벨을 붙이거나 재정렬하거나 삭제합니다.
- 실시간 위치 지정: 완벽한 배치를 위해 슬라이더를 조정하면서 편집기에서 핫스팟 이동을 확인하세요.
리치 툴팁 콘텐츠 시스템
마법은 툴팁에서 발생합니다. 각 핫스팟에 대해 툴팁 콘텐츠 편집기 – 설명을 작성하거나 미디어를 추가하거나 단축 코드를 삽입 할 수있는 모든 기능을 갖춘 텍스트 영역을 엽니 다. 제품 기능을 설명하거나 통계를 제공하거나 다른 페이지로 링크가 나타날 때 제어합니다: 트리거를 Hover 로 설정하여 빠른 검색 또는 모바일 사용자에게 특히 중요한 의도적 인 상호 작용을 클릭하십시오.
- 고급 콘텐츠 편집기: 각 툴팁 안에 서식이 지정된 텍스트, 이미지 또는 비디오를 추가합니다.
- 유연한 트리거링: 즉각적인 미리보기를 위해 호버를 선택하거나 제어된 모바일 친화적인 상호 작용을 위해 클릭하세요.
- Action-Oriented: 도구 설명 내에 링크를 포함시켜 사용자를 관련 페이지나 제품으로 유도합니다.
- 상황별 정보: 툴팁을 사용하여 이미지에 바로 사양, 가격, 설명 또는 지침을 표시합니다.
이미지 핫스팟에 대해 자주 묻는 질문
호버가 없는 휴대폰에서는 어떤 일이 발생하나요?
툴팁 설정에서 클릭 시 툴팁 트리거를 설정할 수 있습니다. 이렇게 하면 터치 장치에서 핫스팟을 탭하여 공개할 수 있으므로 모든 기능이 보장됩니다. 또는 툴팁을 모바일에서 비활성화 로 설정하여 핫스팟 자체를 클릭 가능한 추가 정보 링크가 되도록 할 수 있습니다.
핫스팟 마커에 아이콘 대신 사용자 지정 이미지를 사용할 수 있습니까?
예. 미디어 라이브러리에서 사용자 지정 이미지를 마커로 업로드하거나 추가할 수 있습니다. 간단한 이미지를 쉽게 이해할 수 있는 마커로 사용하는 것이 좋습니다.
기본 이미지 자체가 반응성이 있습니까?
예. 선택한 이미지는 컨테이너에 따라 반응적으로 확장됩니다. 핫스팟 위치 (백분율로 설정) 도 상대적이므로 모든 화면 크기에 걸쳐 이미지의 올바른 지점에 유지됩니다.
이 요소의 좋은 사용 사례는 무엇입니까?
전자상거래 제품 이미지(강조 기능), 대화형 지도(위치 표시), 인포그래픽(데이터 포인트 설명), 기술 다이어그램(부분 라벨링) 또는 팀 사진(개별 약력에 연결)에 적합합니다.
트렌드 엘리먼트 위젯 및 확장
더 짧은 시간에 정교한 웹사이트를 구축하세요.
