단일 지도 위젯

위젯 소개

위치 정보를 사용자에게 알려주고자 할 때 사용합니다. 주로 "찾아오시는 길" 또는 Contact 메뉴 등에서 많이 활용합니다.

지도 사용 전 필수 선행작업

지도 기능이 포함된 위젯을 사용하려면 앞서 지도 API 설정을 완료해야 합니다.

위젯 설정

1. 단일 지도 위젯을 추가합니다.

2. 단일 지도검색 위젯 설정을 엽니다.

   

단일 지도 설정항목

지도 종류
네이버 지도, Google 지도 중 하나를 선택할 수 있습니다. *지도를 사용하려면 네이버 또는 Google 지도 API 설정을 마쳐야 합니다. 

위 내용을 참조하세요.

주소
표시할 위치 주소를 입력합니다.

• 1단계, 주소의 전체 또는 일부를 입력하고 키보드 엔터(Enter)를 누릅니다. *예시 : 연희동 413-16

  
• 2단계, 주소 목록이 나타나면 하나를 선택합니다.
• 3단계, 위치 정보가 반영되면 상세 주소를 추가 입력합니다. *건물 층수나 호수 등
• 4단계, (필요한 경우) 핀의 위치를 변경합니다. 지도에서 위치를 더블클릭하고 적용 버튼을 누릅니다.

정보
핀에 말풍선으로 표시될 정보를 입력합니다.

효과
기본 지도의 확대 정도와 유형을 설정할 수 있습니다.

옵션

• 가로 100% 확장 : 사이트 본문폭을 넘어 브라우저 끝까지 100% 확장됩니다.
• 확대/축소 버튼 숨기기 : 확대/축소 버튼을 숨깁니다.
• 스트리트뷰 버튼 숨기기 : 스트리트뷰 버튼을 숨깁니다.
• 지도/위성 전환버튼 숨기기 : 지도/위성 전환버튼을 숨깁니다.
• 마우스 휠로 확대/축소 허용 : 네이버 지도에서 마우스 휠로 확대/축소가 되는 것을 허용합니다.
• 흑백 효과 : 지도에 흑백 효과를 적용합니다. *Internet Explorer 등 일부 브라우저에서는 적용되지 않습니다.

지도 게시판 위젯

위젯 소개

여러 위치정보를 한 번에 표시하고자 할 때 사용합니다. 

예를 들어 서대문구에 있는 모든 음식점 정보를 표시하거나, 프랜차이즈 가맹점 위치를 표시하고자 할 때 사용할 수 있습니다.

단, 개인정보법 개정 이후 개인 위치정보 기능을 사용하려면 SSL이 필수로 설치 되어야 합니다. 

지도 게시판 사용 전 필수 선행작업

지도 기능이 포함된 위젯을 사용하려면 앞서 지도 API 설정을 완료해야 합니다.

위젯 설정

위젯 설정에서 지도 게시판을 설정하고, 페이지에 접속해 지도게시글을 추가할 수 있습니다.

1. 지도 게시판 위젯을 추가합니다.

2. 지도 게시판 위젯 설정을 엽니다.

   
3. 설정을 완료하고 지도 게시판이 삽입된 페이지에 접속합니다.
4. 글쓰기를 클릭해 지도 게시물을 추가합니다.

지도 게시판 설정항목

지도 게시판 설정 메뉴를 알아봅니다.

1. 지도 연동 : 지도 위젯을 삭제하더라도 데이터는 삭제되지 않습니다.(단일 지도형 은 지도를 삭제할 경우 데이터가 사라집니다) 다른 메뉴에서 같은 지도 리스트 데이터를 사용하고자 할 때 이를 활용합니다. 연동된 지도 리스트 명을 알기 쉬운 말로 변경하여 사용하시기 권장합니다. (예: 성북구 맛집)
2. 지도 종류 : 네이버 지도 또는 구글 지도 중 하나를 선택합니다. *지도 API 설정이 앞서 완료되어야 합니다.
3. 카테고리 : 게시물 카테고리를 추가합니다. 차후 카테고리 별 게시물만 모아 보기/표시가 가능합니다.
4. 정보 : 게시물 보기, 읽기, 등록, 댓글 권한을 설정합니다.
5. 글쓰기 : 대표 이미지 지정 기능 사용유무를 선택합니다.
6. 작성자 표시방식 : 작성자 표시방식을 선택합니다.
7. 옵션 : 지도게시판에 대한 옵션을 선택합니다.
8. 리스트 항목 : 지도 리스트에서 표시될 항목을 설정합니다. 이곳에서 해제한 항목은 상세 정보에서도 표시되지 않습니다.
9. 정렬 옵션 : 기본 정렬 방법을 선택합니다. 방문자가 임의로 변경 가능합니다.
10. 댓글 정렬 : 게시물에 달린 댓글 정렬 방법을 선택합니다.
11. 제목/ 본문 양식 : 게시물 작성 시 미리 작성된 양식을 만들 수 있습니다.
12. 지도 본문 상단/하단 코드 : 게시물 상단 또는 하단에 추가할 코드를 입력할 수 있습니다. 코드를 입력하는 경우 모든 게시물 상단/하단에서 작동됩니다.

지도 게시물 작성하기

지도 게시물은 디자인 모드에서 추가할 수 없으며, 미리보기 또는 직접 페이지에 접속해 추가합니다.

1. 지도 게시판이 있는 페이지에 접속합니다. 또는 미리보기를 클릭합니다.
2. 글쓰기 버튼을 클릭합니다.
3. 제목 및 본문을 작성합니다.

4. 위치추가 버튼을 클릭해 주소 및 상세주소, 전화번호, 웹사이트(옵션)를 작성합니다.

   

이미지 맵 위젯

이미지맵 위젯

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

*빠른 연습을 위해 하단에 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. 검색 위젯 설정을 엽니다.

   

검색 설정항목

검색 위젯 설정항목을 알아봅니다.

1. 다른 스타일 : 검색 아이콘 또는 필드 디자인 스타일을 선택합니다.

   
2. 버튼 : 검색 버튼 텍스트 또는 아이콘을 추가합니다. 글자색 및 Hover 색상, 크기를 변경할 수 있습니다.
3. 폼 : 크기, 여백, 정렬, 배경색, 선 색상/두께/라운딩을 편집해 검색 폼을 변경할 수 있습니다.
4. 텍스트 : 검색 폼 내 텍스트를 편집합니다.

통합검색 설정하기

방문자들이 사이트에서 검색 시 표시될 통합검색 영역을 어떻게 표시할지 설정할 수 있습니다.

1. 디자인 모드에서 메뉴 관리를 엽니다.

2. 글로벌 메뉴에서 통합 검색 메뉴를 클릭합니다.

   
3. 통합 검색 위젯 설정창을 엽니다.

4. 표시할 검색 탭, 검색 범위, 기본 검색 탭 선택합니다.

   
5. 창을 닫고 미리보기를 클릭해 검색 결과를 확인합니다.

타이틀 위젯

위젯 소개

현재 위치한 메뉴명을 출력해 줍니다. 

일반적으로는 잘 사용하지 않지만 섹션 설정에서 사이드 영역의 상단에 타이틀 위젯을 배치하면 매번 페이지 제목을 입력하지 않아도 되므로 편리합니다. 

단, 타이틀 위젯이 관련 모든 페이지에 자동으로 삽입되는 것은 아니기 때문에 각 페이지마다 타이틀 위젯을 복사해 붙여넣으셔야 합니다.

위젯 설정

1. 타이틀 위젯을 추가합니다.

2. 타이틀 위젯 설정을 엽니다.

타이틀 설정항목

현재 메뉴명이 나타나며, 타이틀 텍스트의 크기, 색상, 자간, 굵기, 기울기 등을 조절할 수 있습니다. 

필요한 경우 타이틀 텍스트의 정렬을 변경합니다.

1. 텍스트 : 타이틀 텍스트의 크기, 색상, 자간을 설정할 수 있습니다.
2. 정렬 : 타이틀 텍스트를 왼쪽, 가운데, 오른쪽 중 하나로 설정합니다.
3. 옵션 : 타이틀 텍스트의 굵기, 기울리기를 설정합니다.

텍스트 위젯, 비주얼섹션, 상품 요약설명 등에 버튼 추가하는 방법

개요

비주얼 섹션 설정, 텍스트 위젯, 상품 요약설명, 상품 상세 설명 등 텍스트 입력 가능한 편집도구를 통해 버튼을 삽입할 수 있습니다.

제작방법

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) 텍스트

• 텍스트의 기본색, HOVER 시 색상, 선택 되었을 때 색상, 자간을 변경할 수 있습니다.

6) 정렬

• 메뉴 리스트 위젯의 정렬을 왼쪽, 중앙, 오른쪽 중 하나로 변경할 수 있습니다.

섹션 설정하기

섹션 설정 창을 열어 섹션에 배경(색상, 이미지, 동영상)을 추가하거나 위젯 간의 간격 조절, 여백 조절, 사이드 나누기, 각종 효과를 줄 수 있습니다.

섹션 설정 열기

1. 디자인 모드에 접속합니다.

2. 위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
   *주의 : 위젯에 마우스 오른쪽 버튼을 클릭하지마세요.

   

3. 보조 메뉴에서 섹션 설정을 클릭합니다.

   
4. 다음 항목별 옵션을 확인하고 수정합니다.

섹션 설정항목

1. 배경 이미지/동영상 설정방법 : 섹션의 상단 회색 부분에 마우스 커서를 올리면 이미지 찾기 버튼으로 이미지를 업로드하거나 YouTube영상을 배경으로 설정할 수 있습니다.
2. 배경-이미지 : 올려진 배경 이미지를 표시하는 방법을 선택합니다. 9칸으로 구성된 네모난 버튼은 이미지가 표시되는 기준위치를 설정합니다.
3. 배경-배경색 : 배경색을 지정합니다. 업로드 된 이미지가 있는 경우 이미지 위에 겹쳐 보이기 때문에 이미지와 함께 사용하려면 투명도를 조정하세요.
4. 배경-텍스트 : 섹션에 표시되는 기본 텍스트 색상을 설정합니다. 이 값을 비워두면 공통 디자인 설정 의 텍스트 색상을 따릅니다.
5. 흑백 이미지 : 업로드된 배경 이미지를 흑백으로 처리합니다.
6. 배경 이미지 고정 : 스크롤을 하더라도 배경이 고정된 위치에 표시됩니다.
7. 마우스 포인터 움직임 : 마우스 포인터의 움직임에 따라 배경 이미지가 움직입니다.
8. 간격-상하여백, 좌우여백 : 섹션의 안쪽 여백을 설정합니다.
9. 그리드 간격 : 기본 그리드 간격 옵션을 해제하고 그리드 상하 및 좌우 간격을 조정하여 공통 디자인 설정의 그리드 간격을 따르지 않고 해당 섹션에만 위젯간 간격을 조정할 수 있습니다.
10. 가로 100% 확장 : 섹션의 본문영역을 브라우저 크기만큼 확장합니다.
11. 사이드 : 좌측이나 우측에 사이드 메뉴를 삽입하려면 분할된 모양의 아이콘을 선택합니다. 사이드 영역의 폭과 사이드 영역과 본문 영역간의 간격을 조정할 수 있습니다.

섹션 추가, 이동, 복제, 삭제하기

섹션이란?

위멘토는 페이지(메뉴) 안에 섹션이 있고, 섹션 안에 위젯이 올라가는 구조로 이루어져 있습니다. 

여기서 섹션(Section)이란 페이지 내 구획 또는 단락을 의미합니다. 

다음 그림처럼 하나의 페이지는 여러 개 섹션으로 나눌 수 있으며, 각 섹션마다 위젯으로 콘텐츠를 추가하고, 섹션 배경에 이미지나 동영상을 추가, 그외 기타 다양한 효과를 추가하여 특별한 디자인도 가능합니다.

적절하게 섹션을 나누면 방문자들이 페이지 콘텐츠를 보기에도 수월하며 향후 모바일 디자인시에도 도움이 되기에 적극 활용해보실 것을 추천드립니다.

섹션 추가하기

섹션을 추가하는 방법에는 2가지가 있습니다.

1. 비주얼 섹션 또는 미리 구성된 섹션 템플릿 추가하기

콘텐츠, 상품 소개, 구성원, 연락처 등 자주 사용되는 레이아웃으로 미리 구성된 섹션 템플릿을 추가할 수 있습니다. 

2. 빈 섹션 추가하기

위젯이 하나도 없는 빈 섹션을 추가할 수 있습니다. 

섹션 복사하기, 섹션 붙여넣기

• 섹션도 복제가 가능합니다. 메뉴별로 반복적으로 사용하는 디자인이 있는 경우 섹션 복제 기능을 활용해보세요.

섹션 이동하기

• 하나의 페이지에 여러 개 섹션이  있는 경우 특정 섹션을 위 또는 아래로 이동시킬 수 있습니다.

섹션 삭제하기

• 섹션은 언제든 삭제할 수 있습니다. 삭제 방법은 다음 도움말을 참조해주세요.

섹션 이동하기 (위로 이동, 아래로 이동)

하나의 페이지에 여러 개 섹션이  있는 경우 특정 섹션을 위 또는 아래로 이동시킬 수 있습니다. 섹션에 대한 추가 정보 및 섹션 추가 방법은 다음 도움말을 참조하세요.

• 섹션 추가하기 (섹션 템플릿)
• 빈 섹션 추가하기

섹션 이동방법

1. 디자인 모드에 접속합니다. 
2. 이동 시키려는 섹션에 마우스 오른쪽 버튼을 클릭합니다.
   

   주의: 위젯에 마우스 오른쪽 버튼을 클릭하지 마세요.

3. 
4. 컨텍스트 메뉴가 나타나면 위로 이동 또는 아래로 이동을 클릭합니다.
   

   참고: 이동하려는 섹션이 페이지의 최상단 또는 최하단에 있는 경우 한 방향으로만 이동 가능합니다.