메뉴 리스트 위젯

위젯 소개

메뉴 관리에서 상단(헤더)에 표시되는 메뉴들을 그룹으로 설정한 경우, 아래 그림 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. 컨텍스트 메뉴가 나타나면 위로 이동 또는 아래로 이동을 클릭합니다.
   

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

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

추가 방법

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

2. 디자인 모드 왼쪽 상단 마술봉 아이콘(섹션 추가)를 선택합니다.

   

3. 비주얼, 컨텐츠, 푸터/메뉴 중 하나에 마우스를 대면 템플릿이 나타납니다.

   
4. 템플릿이 나타나면 필요한 섹션을 클릭합니다.
5. 선택하신 섹션 템플릿이 페이지에 추가됩니다.

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

메뉴(페이지), 위젯에 이어 섹션도 복제가 가능합니다.

다음 샘플 사이트에 접속해보시면 REVIEW 및 COMMUNITY 메뉴 상단 섹션이 모두 같은 것을 보실 수 있습니다. 

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

사이트를 빠르고 효율적으로 제작하면서 디자인에 일관성 및 통일성을 줄 수도 있습니다.

섹션 복제 방법

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

2. 복사하려는 섹션에 마우스 오른쪽 버튼을 클릭합니다.

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

   

3. 보조 메뉴가 나타나면 섹션 복사를 클릭합니다.

   
4. (선택 사항) 붙여넣기 할 메뉴로 이동합니다.
5. 다시 마우스 오른쪽 버튼을 클릭해 섹션 보조 메뉴를 열어주세요.

6. 다음 그림처럼 섹션 붙여넣기가 활성화 되었다면 클릭합니다.

   
7. 같은 섹션이 복제된 것을 확인할 수 있습니다.

섹션에 동영상 배경 넣기

섹션 배경에 동영상을 넣는 기능은 두가지로 나뉩니다.

1. 비주얼 섹션에 동영상 넣기

- 디자인모드 좌측 상단 섹션추가를 누릅니다.
- 비주얼의 2번째 항목 동영상 섹션을 클릭합니다.

추가된 비주얼 동영상 섹션에서 우측 마우스를 통해 설정에 접속 → 배경 동영상에 삽입할 동영상 URL을 입력합니다.

2. 섹션에 동영상 배경 넣기

섹션에서 우측 마우스를 통해 섹션 설정에 접속합니다.

섹션 설정에서 [동영상]을 클릭하면 YouTube 동영상 URL을 입력하는 창이 나옵니다.

** 동영상 위젯에서는 YouTube와 Vimeo 동영상 URL 등록이 가능하지만 섹션 배경은 YouTube만 지원되는 점 참고바랍니다.

빈 섹션 추가하기

빈 섹션을 추가할 수 있습니다. 

빈 섹션에 위젯을 추가하고 배경색 또는 배경 이미지를 추가하여 섹션을 디자인 할 수 있습니다. 

섹션(구획, 구역)에 대한 상세한 도움말을 다음 문서를 확인해보세요.

빈 섹션 추가 방법

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

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

   

3. 섹션 보조 메뉴가 나타납니다.

   
4. 빈 섹션 추가를 클릭합니다.

5. 빈 섹션이 추가됩니다.

   

섹션 삭제하기

섹션을 삭제하려면 다음 절차에 따라 삭제할 수 있습니다.

섹션 삭제 방법

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

2. 삭제하려는 섹션에 마우스 오른쪽 버튼을 클릭합니다.

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

   

3. 보조 메뉴가 나타나면 섹션 삭제를 클릭합니다.
   

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

   
   

섹션 사이드 나누기 (사이드 섹션, 섹션 사이드 고정)

섹션을 나누어 사이드 영역을 만들 수 있습니다. 섹션 사이드에는 종종 2차 메뉴를 삽입하곤 하지만, 광고 배너, 페이지 타이틀 등 다양하게 응용해 사용할 수 있습니다.

이 도움말에서는 섹션을 둘로 나누어, 왼쪽 또는 오른쪽에 섹션 사이드 영역을 추가하는 방법을 설명합니다.

설정방법

1. 디자인 모드에 접속합니다. 
2. 사이드 영역을 추가하려는 섹션 내, 위젯이 없는 빈 공간에 마우스 오른쪽 버튼을 클릭합니다.
3. 컨텍스트 메뉴가 나타나면 섹션 설정을 클릭합니다.
4. 사이드 항목에서 왼쪽 또는 오른쪽을 선택합니다.

   
   

5. 본문과 사이드 간의 간격을 설정합니다.

   
   

6. (선택 사항) 선 스타일 항목에서 섹션 본문과 섹션 사이드 사이에 세로선을 추가합니다.

   
   

   • 선두께 : 세로선의 두께를 입력합니다.
   • 선모양 : 실선, 점선, 긴점선 중 하나를 선택해 세로선 모양을 정합니다.
   • 선색 : 컬러피커를 활용해 세로선의 색상을 지정합니다.
7. (선택 사항) 섹션 사이드 고정 옵션을 선택할 수 있습니다. 해당 옵션을 활성화하면 페이지를 스크롤해도 사이드 섹션이 현재 위치에 고정됩니다.
8. 섹션 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
9. 선택한 방향에 사이드 영역이 생긴 걸 확인할 수 있습니다. 이제 사이드 영역에 ⨁를 클릭해 위젯을 추가해 꾸밉니다. (예를 들어, 메뉴 리스트 위젯을 추가해 세로형 사이드 메뉴를 추가할 수도 있습니다.)
   

   참고: 사이드 영역이 정상적으로 표시되지 않는 경우 새로고침(F5)해 주세요.