예를 들어 서대문구에 있는 모든 음식점 정보를 표시하거나, 프랜차이즈 가맹점 위치를 표시하고자 할 때 사용할 수 있습니다.
단, 개인정보법 개정 이후 개인 위치정보 기능을 사용하려면 SSL이 필수로 설치 되어야 합니다.
지도 게시판 사용 전 필수 선행작업
지도 기능이 포함된 위젯을 사용하려면 앞서 지도 API 설정을 완료해야 합니다.
위젯 설정
위젯 설정에서 지도 게시판을 설정하고, 페이지에 접속해 지도게시글을 추가할 수 있습니다.
지도 게시판 위젯을 추가합니다.
지도 게시판 위젯 설정을 엽니다.
설정을 완료하고 지도 게시판이 삽입된 페이지에 접속합니다.
글쓰기를 클릭해 지도 게시물을 추가합니다.
지도 게시판 설정항목
지도 게시판 설정 메뉴를 알아봅니다.
지도 연동 : 지도 위젯을 삭제하더라도 데이터는 삭제되지 않습니다.(단일 지도형 은 지도를 삭제할 경우 데이터가 사라집니다) 다른 메뉴에서 같은 지도 리스트 데이터를 사용하고자 할 때 이를 활용합니다. 연동된 지도 리스트 명을 알기 쉬운 말로 변경하여 사용하시기 권장합니다. (예: 성북구 맛집)
지도 종류 : 네이버 지도 또는 구글 지도 중 하나를 선택합니다. *지도 API 설정이 앞서 완료되어야 합니다.
카테고리 : 게시물 카테고리를 추가합니다. 차후 카테고리 별 게시물만 모아 보기/표시가 가능합니다.
정보 : 게시물 보기, 읽기, 등록, 댓글 권한을 설정합니다.
글쓰기 : 대표 이미지 지정 기능 사용유무를 선택합니다.
작성자 표시방식 : 작성자 표시방식을 선택합니다.
옵션 : 지도게시판에 대한 옵션을 선택합니다.
리스트 항목 : 지도 리스트에서 표시될 항목을 설정합니다. 이곳에서 해제한 항목은 상세 정보에서도 표시되지 않습니다.
정렬 옵션 : 기본 정렬 방법을 선택합니다. 방문자가 임의로 변경 가능합니다.
댓글 정렬 : 게시물에 달린 댓글 정렬 방법을 선택합니다.
제목/ 본문 양식 : 게시물 작성 시 미리 작성된 양식을 만들 수 있습니다.
지도 본문 상단/하단 코드 : 게시물 상단 또는 하단에 추가할 코드를 입력할 수 있습니다. 코드를 입력하는 경우 모든 게시물 상단/하단에서 작동됩니다.
지도 게시물 작성하기
지도 게시물은 디자인 모드에서 추가할 수 없으며, 미리보기 또는 직접 페이지에 접속해 추가합니다.
빈 섹션을 추가해 곧바로 + 아이콘을 클릭하거나, 좌측 툴바에서 + 아이콘을 클릭해 위젯 목록 창을 열어주세요.
2단계, 이미지맵 위젯 선택하기
위젯 목록이 나타나면, [이미지맵] 위젯을 선택해주세요.
3단계, 이미지맵 위젯 설정 창 열기
이미지맵 위젯에 마우스 커서를 올려놓고, 마우스 오른쪽 버튼을 클릭하면 나타나는 [이미지맵 설정]을 클릭해주세요.
4단계, 이미지 업로드하기
이미지맵 설정 창이 열리면 [이미지 업로드] 버튼을 클릭해주세요.
이미지맵으로 사용할 이미지 파일을 내 PC에서 선택해 업로드할 수 있습니다.
5단계, 이미지맵 링크 추가하기
1) 아래 그림 1번 영역에 이전 단계에서 업로드한 이미지가 표시됩니다. 2) 이미지 내 링크를 추가하기 위해 이미지맵 링크 [추가] 버튼을 클릭해주세요.
6단계, 링크 URL 및 클릭 영역 설정하기
1) 이미지맵 링크 [추가] 버튼을 클릭하면 아래 그림처럼 링크 URL을 입력할 수 있는 칸이 나타납니다. URL 입력칸 우측에 있는 [새창] 옵션을 체크하면, 이 링크를 클릭했을 때 새 브라우저 창이 뜨도록 설정할 수 있습니다. 2) 이미지맵 링크를 추가하면 2번 영역에 반투명한 파란 네모가 함께 추가됩니다. 이 네모 영역은 방문자가 마우스로 클릭할 수 있는 영역을 가리키며, 그 크기는 마우스로 조절할 수 있습니다.
7단계, 링크는 사이트 내부 메뉴도 연결 가능
링크 URL은 반드시 외부로만 연결하거나, URL을 입력해야 하는 건 아닙니다.
링크 입력란을 클릭하면 아래 그림처럼 내부 메뉴를 연결할 수도 있습니다.
[링크] 대신 [전화걸기]나 [문자발송], [이메일] 방식으로도 설정 가능합니다.
*전화걸기 및 문자발송은 스마트폰에서만 정상적으로 작동합니다. *PC 환경에 따라서는 스카이프 또는 페이스 타임으로 동작할 수도 있습니다.
TIP. 이미지맵 위젯의 이미지가 깨져 보인다면?
이미지 위젯에 사용한 이미지가 [공통 디자인 설정]에서 설정한 [본문폭] 보다 가로 길이가 긴 경우, 섹션 설정에 따라 이미지가 깨져 나올 수도 있습니다.
그런 경우 아래 그림처럼 섹션 설정 창에서 [좌우 여백] 크기를 0px로 바꿔주시면 이미지 깨짐 현상을 없앨 수 있습니다.
*공통 디자인 설정 또는 섹션 설정에 따라 이미지 깨짐 현상의 이유는 매우 다양합니다.
아래 방법으로 이미지가 깨짐이 해결되지 않는 경우 이미지 크기에 영향을 주는 어떤 옵션을 사용 중인 건 아닌지 확인해주세요.
단일 지도 위젯
위젯 소개
위치 정보를 사용자에게 알려주고자 할 때 사용합니다. 주로 "찾아오시는 길" 또는 Contact 메뉴 등에서 많이 활용합니다.
지도 사용 전 필수 선행작업
지도 기능이 포함된 위젯을 사용하려면 앞서 지도 API 설정을 완료해야 합니다.
위젯 설정
단일 지도검색 위젯 설정을 엽니다.
단일 지도 설정항목
지도 종류
네이버 지도, Google 지도 중 하나를 선택할 수 있습니다. *지도를 사용하려면 네이버 또는 Google 지도 API 설정을 마쳐야 합니다.
위 내용을 참조하세요.
주소
표시할 위치 주소를 입력합니다.
1단계, 주소의 전체 또는 일부를 입력하고 키보드 엔터(Enter)를 누릅니다. *예시 : 연희동 413-16
정보
핀에 말풍선으로 표시될 정보를 입력합니다.
효과
기본 지도의 확대 정도와 유형을 설정할 수 있습니다.
옵션
지도 게시판 위젯
위젯 소개
여러 위치정보를 한 번에 표시하고자 할 때 사용합니다.
예를 들어 서대문구에 있는 모든 음식점 정보를 표시하거나, 프랜차이즈 가맹점 위치를 표시하고자 할 때 사용할 수 있습니다.
단, 개인정보법 개정 이후 개인 위치정보 기능을 사용하려면 SSL이 필수로 설치 되어야 합니다.
지도 게시판 사용 전 필수 선행작업
지도 기능이 포함된 위젯을 사용하려면 앞서 지도 API 설정을 완료해야 합니다.
위젯 설정
위젯 설정에서 지도 게시판을 설정하고, 페이지에 접속해 지도게시글을 추가할 수 있습니다.
지도 게시판 위젯 설정을 엽니다.
지도 게시판 설정항목
지도 게시판 설정 메뉴를 알아봅니다.
지도 게시물 작성하기
지도 게시물은 디자인 모드에서 추가할 수 없으며, 미리보기 또는 직접 페이지에 접속해 추가합니다.
위치추가 버튼을 클릭해 주소 및 상세주소, 전화번호, 웹사이트(옵션)를 작성합니다.
이미지 맵 위젯
이미지맵 위젯
하나의 이미지에 여러 링크 영역을 구현하고자 할 때 사용합니다.
*빠른 연습을 위해 하단에 PSD 예시파일을 첨부해두었습니다.
이미지맵 위젯 사용 방법
1단계, 위젯 목록 창 열기
빈 섹션을 추가해 곧바로 + 아이콘을 클릭하거나, 좌측 툴바에서 + 아이콘을 클릭해 위젯 목록 창을 열어주세요.
2단계, 이미지맵 위젯 선택하기
위젯 목록이 나타나면, [이미지맵] 위젯을 선택해주세요.
3단계, 이미지맵 위젯 설정 창 열기
이미지맵 위젯에 마우스 커서를 올려놓고, 마우스 오른쪽 버튼을 클릭하면 나타나는 [이미지맵 설정]을 클릭해주세요.
4단계, 이미지 업로드하기
이미지맵 설정 창이 열리면 [이미지 업로드] 버튼을 클릭해주세요.
이미지맵으로 사용할 이미지 파일을 내 PC에서 선택해 업로드할 수 있습니다.
5단계, 이미지맵 링크 추가하기
1) 아래 그림 1번 영역에 이전 단계에서 업로드한 이미지가 표시됩니다.
2) 이미지 내 링크를 추가하기 위해 이미지맵 링크 [추가] 버튼을 클릭해주세요.
6단계, 링크 URL 및 클릭 영역 설정하기
1) 이미지맵 링크 [추가] 버튼을 클릭하면 아래 그림처럼 링크 URL을 입력할 수 있는 칸이 나타납니다. URL 입력칸 우측에 있는 [새창] 옵션을 체크하면, 이 링크를 클릭했을 때 새 브라우저 창이 뜨도록 설정할 수 있습니다.
2) 이미지맵 링크를 추가하면 2번 영역에 반투명한 파란 네모가 함께 추가됩니다. 이 네모 영역은 방문자가 마우스로 클릭할 수 있는 영역을 가리키며, 그 크기는 마우스로 조절할 수 있습니다.
7단계, 링크는 사이트 내부 메뉴도 연결 가능
링크 URL은 반드시 외부로만 연결하거나, URL을 입력해야 하는 건 아닙니다.
링크 입력란을 클릭하면 아래 그림처럼 내부 메뉴를 연결할 수도 있습니다.
[링크] 대신 [전화걸기]나 [문자발송], [이메일] 방식으로도 설정 가능합니다.
*전화걸기 및 문자발송은 스마트폰에서만 정상적으로 작동합니다.
*PC 환경에 따라서는 스카이프 또는 페이스 타임으로 동작할 수도 있습니다.
TIP. 이미지맵 위젯의 이미지가 깨져 보인다면?
이미지 위젯에 사용한 이미지가 [공통 디자인 설정]에서 설정한 [본문폭] 보다 가로 길이가 긴 경우, 섹션 설정에 따라 이미지가 깨져 나올 수도 있습니다.
그런 경우 아래 그림처럼 섹션 설정 창에서 [좌우 여백] 크기를 0px로 바꿔주시면 이미지 깨짐 현상을 없앨 수 있습니다.
*공통 디자인 설정 또는 섹션 설정에 따라 이미지 깨짐 현상의 이유는 매우 다양합니다.
아래 방법으로 이미지가 깨짐이 해결되지 않는 경우 이미지 크기에 영향을 주는 어떤 옵션을 사용 중인 건 아닌지 확인해주세요.
검색 위젯
위젯 소개
방문자가 사이트 내 콘텐츠를 검색할 수 있도록 검색 위젯을 추가할 수 있습니다.
검색 결과는 통합 검색 형식으로 표시되며, 필요한 경우 검색결과에 노출하고 싶은 콘텐츠만을 나눌 수도 있습니다.
위젯 설정
검색 위젯 설정을 엽니다.
검색 설정항목
검색 위젯 설정항목을 알아봅니다.
다른 스타일 : 검색 아이콘 또는 필드 디자인 스타일을 선택합니다.
통합검색 설정하기
방문자들이 사이트에서 검색 시 표시될 통합검색 영역을 어떻게 표시할지 설정할 수 있습니다.
글로벌 메뉴에서 통합 검색 메뉴를 클릭합니다.
표시할 검색 탭, 검색 범위, 기본 검색 탭 선택합니다.
타이틀 위젯
위젯 소개
현재 위치한 메뉴명을 출력해 줍니다.
일반적으로는 잘 사용하지 않지만 섹션 설정에서 사이드 영역의 상단에 타이틀 위젯을 배치하면 매번 페이지 제목을 입력하지 않아도 되므로 편리합니다.
단, 타이틀 위젯이 관련 모든 페이지에 자동으로 삽입되는 것은 아니기 때문에 각 페이지마다 타이틀 위젯을 복사해 붙여넣으셔야 합니다.
위젯 설정
타이틀 위젯 설정을 엽니다.
타이틀 설정항목
현재 메뉴명이 나타나며, 타이틀 텍스트의 크기, 색상, 자간, 굵기, 기울기 등을 조절할 수 있습니다.
필요한 경우 타이틀 텍스트의 정렬을 변경합니다.
텍스트 위젯, 비주얼섹션, 상품 요약설명 등에 버튼 추가하는 방법
개요
비주얼 섹션 설정, 텍스트 위젯, 상품 요약설명, 상품 상세 설명 등 텍스트 입력 가능한 편집도구를 통해 버튼을 삽입할 수 있습니다.
제작방법
1단계, 버튼 텍스트 입력하기
버튼명으로 사용할 텍스트를 입력합니다. *본 가이드에서는 텍스트 위젯이 사용되었습니다.
2단계, 텍스트 선택하기
마우스로 드래그하여 입력한 텍스트를 선택합니다.
3단계, 링크 클릭하기
을 클릭합니다.
텍스트 편집도구 오른쪽 상단에 위치한 링크 아이콘
4단계, 메뉴 선택 또는 링크 주소 입력하기
버튼 클릭시 이동할 경로는 메뉴를 직접 선택하거나 주소(URL)를 입력하는 방식으로 지정할 수 있습니다.
1) 메뉴 선택 : 돋보기 아이콘을 클릭해 기존에 만든 메뉴 중 하나를 선택합니다. [삽입]을 클릭해야 저장됩니다.
2) 직접 입력 : 링크 주소(URL)를 입력합니다. 입력 후에는 꼭 [삽입]을 클릭해주세요.
5단계, 스타일 변경하기
링크 삽입 후 나타는 보조 메뉴에서 두 번째 스타일을 클릭합니다.
다음으로 큰 버튼, 작은 버튼, 아주 작은 버튼 중 하나를 선택합니다.
6단계, 버튼 삽입 완료
버튼이 정상적으로 삽입, 적용 되었는지 미리보기를 통해 확인합니다.
버튼명 또는 링크 수정이 필요하다면?
1단계, 버튼 클릭하기
마우스로 버튼을 클릭합니다.
2단계, 링크 수정 클릭하기
보조 메뉴가 나타나면 3번째 링크 수정 메뉴를 클릭합니다.
3단계, 텍스트 및 링크 수정하기
텍스트 및 링크 주소(URL) 편집 후 업데이트를 눌러 저장합니다.
메뉴 리스트 위젯
위젯 소개
메뉴 관리에서 상단(헤더)에 표시되는 메뉴들을 그룹으로 설정한 경우, 아래 그림 1번처럼 풀다운 형태로 하위 메뉴들이 표시합니다.
만약 풀다운 형태가 아니라 그림 2번처럼 본문에 서브 메뉴를 표시하고자 하는 경우, 메뉴 리스트 위젯을 추가하고 표시할 메뉴들을 선택해보세요.
따라서 모바일에서도 표시되게 하려면, 모바일 설정에서 모바일 표시 옵션을 체크해주셔야 합니다.
위젯 설정
표시할 메뉴(기본값 : 현재 메뉴)를 선택하고 스타일 및 디자인을 변경합니다.
1단계, 메뉴 리스트 위젯을 추가합니다.
2단계, 메뉴 리스트 위젯 설정 엽니다.
3단계, 설정 항목을 확인하고 변경합니다.
1) 다른 스타일
위젯 설정창 중앙부에 있는 '다른 스타일' 버튼을 눌러 메뉴 리스트 위젯의 스타일을 선택할 수 있습니다.
가로형부터, 세로형까지 다양한 스타일 준비되어 있습니다.
2) 연동 대상
3) 기준 위치
4) 메뉴
5) 텍스트
6) 정렬
섹션 설정하기
섹션 설정 창을 열어 섹션에 배경(색상, 이미지, 동영상)을 추가하거나 위젯 간의 간격 조절, 여백 조절, 사이드 나누기, 각종 효과를 줄 수 있습니다.
섹션 설정 열기
위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
*주의 : 위젯에 마우스 오른쪽 버튼을 클릭하지마세요.
보조 메뉴에서 섹션 설정을 클릭합니다.
섹션 설정항목
섹션 추가, 이동, 복제, 삭제하기
섹션이란?
위멘토는 페이지(메뉴) 안에 섹션이 있고, 섹션 안에 위젯이 올라가는 구조로 이루어져 있습니다.
여기서 섹션(Section)이란 페이지 내 구획 또는 단락을 의미합니다.
다음 그림처럼 하나의 페이지는 여러 개 섹션으로 나눌 수 있으며, 각 섹션마다 위젯으로 콘텐츠를 추가하고, 섹션 배경에 이미지나 동영상을 추가, 그외 기타 다양한 효과를 추가하여 특별한 디자인도 가능합니다.
적절하게 섹션을 나누면 방문자들이 페이지 콘텐츠를 보기에도 수월하며 향후 모바일 디자인시에도 도움이 되기에 적극 활용해보실 것을 추천드립니다.
섹션 추가하기
섹션을 추가하는 방법에는 2가지가 있습니다.
1. 비주얼 섹션 또는 미리 구성된 섹션 템플릿 추가하기
콘텐츠, 상품 소개, 구성원, 연락처 등 자주 사용되는 레이아웃으로 미리 구성된 섹션 템플릿을 추가할 수 있습니다.
2. 빈 섹션 추가하기
위젯이 하나도 없는 빈 섹션을 추가할 수 있습니다.
섹션 복사하기, 섹션 붙여넣기
섹션 이동하기
섹션 삭제하기
섹션 이동하기 (위로 이동, 아래로 이동)
하나의 페이지에 여러 개 섹션이 있는 경우 특정 섹션을 위 또는 아래로 이동시킬 수 있습니다. 섹션에 대한 추가 정보 및 섹션 추가 방법은 다음 도움말을 참조하세요.
섹션 이동방법