위멘토 사용가이드


포토샵을 못해도 코딩을 못해도 쉽고 간편하게 관리 해보세요

관리자페이지

사이트 편집(디자인모드)[위젯‧섹션설정] 이미지 맵 위젯

이미지맵 위젯

하나의 이미지에 여러 링크 영역을 구현하고자 할 때 사용합니다.

*빠른 연습을 위해 하단에 PSD 예시파일을 첨부해두었습니다.


이미지맵 위젯 사용 방법

1단계, 위젯 목록 창 열기

빈 섹션을 추가해 곧바로 + 아이콘을 클릭하거나, 좌측 툴바에서 + 아이콘을 클릭해 위젯 목록 창을 열어주세요.


2단계, 이미지맵 위젯 선택하기

위젯 목록이 나타나면, [이미지맵] 위젯을 선택해주세요.



3단계, 이미지맵 위젯 설정 창 열기

이미지맵 위젯에 마우스 커서를 올려놓고, 마우스 오른쪽 버튼을 클릭하면 나타나는 [이미지맵 설정]을 클릭해주세요.


4단계, 이미지 업로드하기

이미지맵 설정 창이 열리면 [이미지 업로드] 버튼을 클릭해주세요. 

이미지맵으로 사용할 이미지 파일을 내 PC에서 선택해 업로드할 수 있습니다.


5단계, 이미지맵 링크 추가하기

1) 아래 그림 1번 영역에 이전 단계에서 업로드한 이미지가 표시됩니다.
2) 이미지 내 링크를 추가하기 위해 이미지맵 링크 [추가] 버튼을 클릭해주세요.


6단계, 링크 URL 및 클릭 영역 설정하기

1) 이미지맵 링크 [추가] 버튼을 클릭하면 아래 그림처럼 링크 URL을 입력할 수 있는 칸이 나타납니다. URL 입력칸 우측에 있는 [새창] 옵션을 체크하면, 이 링크를 클릭했을 때 새 브라우저 창이 뜨도록 설정할 수 있습니다.
2) 이미지맵 링크를 추가하면 2번 영역에 반투명한 파란 네모가 함께 추가됩니다. 이 네모 영역은 방문자가 마우스로 클릭할 수 있는 영역을 가리키며, 그 크기는 마우스로 조절할 수 있습니다.


7단계, 링크는 사이트 내부 메뉴도 연결 가능

링크 URL은 반드시 외부로만 연결하거나, URL을 입력해야 하는 건 아닙니다. 

링크 입력란을 클릭하면 아래 그림처럼 내부 메뉴를 연결할 수도 있습니다. 

[링크] 대신 [전화걸기]나 [문자발송], [이메일] 방식으로도 설정 가능합니다.

*전화걸기 및 문자발송은 스마트폰에서만 정상적으로 작동합니다.
*PC 환경에 따라서는 스카이프 또는 페이스 타임으로 동작할 수도 있습니다.



TIP. 이미지맵 위젯의 이미지가 깨져 보인다면?

이미지 위젯에 사용한 이미지가 [공통 디자인 설정]에서 설정한 [본문폭] 보다 가로 길이가 긴 경우, 섹션 설정에 따라 이미지가 깨져 나올 수도 있습니다. 

그런 경우 아래 그림처럼 섹션 설정 창에서 [좌우 여백] 크기를 0px로 바꿔주시면 이미지 깨짐 현상을 없앨 수 있습니다.

*공통 디자인 설정 또는 섹션 설정에 따라 이미지 깨짐 현상의 이유는 매우 다양합니다. 

아래 방법으로 이미지가 깨짐이 해결되지 않는 경우 이미지 크기에 영향을 주는 어떤 옵션을 사용 중인 건 아닌지 확인해주세요.


INFORMATION


상호명 : (주)위멘토


사업자등록번호 : 506-87-00931

통신판매업신고번호 : 서울금천-1375

고객센터 : 1800-2142 ∣ 이메일 : sales@wemento.kr

대표자 : 김성진 ∣ 개인정보책임자 : 박예린

주소 : 서울특별시 금천구 가산디지털1로 168, 우림라이온스밸리 A동 703호

호스팅주소 : 서울특별시 금천구 가산디지털1로 168, 우림라이온스밸리 A동 703호


© BYULZZI Corp. All Rights Reserved. hosting by byulzzi