메뉴 이동하기

메뉴를 이동하여 상단 및 하단 메뉴의 순서를 변경하거나 그룹 메뉴로 구성할 수 있습니다.

설정방법

1. 디자인 모드에 접속합니다. 
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
3. 상단 메뉴 또는 하단 메뉴 항목에서, 이동할 메뉴를 클릭합니다.

4. 원하는 위치에 검정선이 나타나면 마우스 버튼을 놓습니다.

   참고: 상단 메뉴 항목에서 메뉴의 위치를 위에 둘수록 가장 왼쪽에 표시됩니다. 하단 메뉴의 경우, 적용된 하단 디자인에 따라 가장 왼쪽 또는 상단에 위치할 수 있습니다.

   

5. 메뉴 이동이 완료되면 상단 메뉴 및 하단 메뉴의 순서가 변경됩니다.

관련 도움말

• 메뉴명 변경하기
• 메뉴 설정하기
• 메뉴 복제하기
• 메뉴 삭제하기
• 그룹 메뉴 만들기 (하위 메뉴)

그룹 메뉴 만들기 (하위 메뉴)

여러 개의 메뉴를 상위 메뉴, 하위 메뉴로 그룹화 시킬 수 있습니다. 이 도움말에서는 기본적인 그룹 메뉴 구성방법을 설명합니다.

시작에 앞서

새로운 메뉴 생성 및 구성에 앞서, 아래의 용어를 알아두면 메뉴 구성에 도움이 됩니다.

• 홈 메뉴 : 사이트 대표 도메인(예: mydomain.com)으로 웹사이트 접속 시 첫 번째로 표시되는 메뉴를 의미합니다. Index 메뉴, 홈 메뉴 등으로 불립니다

  참고 : 위멘토에서는 메뉴 관리 창에서 메뉴를 최상단에 배치하는 경우, 해당 메뉴는 첫 메뉴로 설정됩니다. 메인페이지 변경 방법

• 상위 메뉴 : 메뉴에 여러 개의 하위 메뉴를 포함되는 경우, 해당 메뉴는 상위 메뉴가 됩니다.
• 하위 메뉴 : 메뉴가 상위 메뉴에 포함되는 경우, 해당 메뉴는 하위 메뉴가 됩니다. 아임웹은 최대 4단까지 하위 메뉴 구성을 허용합니다.
• 최상위 메뉴(대메뉴) : 메뉴가 2단 이상으로 구성된 경우, 최상단에 위치한 메뉴가 최상위 메뉴가 됩니다. 일반적으로 웹사이트 상단에는 최상위 메뉴가 표시되며, 방문자는 최상위 메뉴를 시작으로 하위 메뉴로 이동해 갈 수 있습니다. 상위/하위 메뉴에 대한 더 상세한 설명 및 2단 이상으로 그룹 메뉴를 구성하는 방법은 그룹 메뉴 2단 이상으로 구성하기 도움말을 참고해 주세요.

구성방법

1. 디자인 모드에 접속합니다. 
2. 왼쪽 상단의 메뉴 관리  아이콘을 클릭합니다.
3. 그룹의 하위 메뉴에 속할 메뉴를 마우스로 클릭해 드래그합니다.
4. 그룹의 상위 메뉴에 속할 메뉴명 왼쪽에 화살표가 표시되면 마우스를 놓습니다.

   
   

5. 같은 방식으로 하위 메뉴를 추가 이동합니다.
6. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭해, 상위 메뉴에 마우스 포인터를 올려 봅니다.
7. 의도한대로 그룹화 되었다면, 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

그룹 상품 카테고리 만들기 (하위 카테고리)

여러 개의 상품 카테고리를 하나의 그룹으로 구성할 수 있으며, 최대 2단까지 구성이 가능합니다. 상품 카테고리는 일반 페이지 메뉴와 달리 관리자 페이지에서 구성할 수 있으며, 구성한 상품 카테고리 그대로 디자인 모드에서 표시가 가능합니다.

상품 카테고리를 쇼핑 위젯에 연결하고, 페이지에 상품을 표시하는 방법은 상품 진열하기 도움말을 참고할 수 있으며, 이 도움말에서는 상품 카테고리를 상위/하위 카테고리로 구성하는 방법을 설명합니다.

구성방법

1. 내 사이트 관리자 페이지에 접속합니다. 
2. 왼쪽 메뉴에서 [쇼핑 > 상품관리]를 클릭해 이동합니다.
3. 카테고리 관리를 클릭합니다.

   
   

4. ⨁ 새 카테고리를 클릭해, 새로운 카테고리를 추가합니다.
5. 오른쪽 카테고리명 항목에서 카테고리의 이름을 작성합니다.
6. (선택 사항) 위 4~5번 과정을 반복해 상품 카테고리를 필요한 만큼 추가합니다.
7. 하위 카테고리로 지정할 카테고리를 마우스로 클릭합니다.
8. 마우스 클릭을 유지한 체로 하위 메뉴를 드래그합니다. 드래그한 하위 카테고리를 상위 카테고리 위에 올린 다음, 마우스 버튼을 놓습니다.
9. 그룹 카테고리로 구성되면, 관련 하위 카테고리를 반복해서 추가합니다.
10. (선택 사항) 상품 카테고리는 최대 2단까지 구성 가능합니다. 필요에 따라 카테고리를 2단으로 구성합니다. 예를 들어, 위 애니메이션에서 패션/뷰티 카테고리 아래 상의, 하의, 점퍼, 신발 카테고리를 2단으로 구성하는 걸 확인할 수 있습니다.
11. 저장 버튼을 클릭합니다.
12. 이제 디자인 모드에 접속해 쇼핑 위젯을 추가하고, 쇼핑 위젯에 위에서 구성한 카테고리를 적용합니다. 상품 진열방법

관련 도움말

일반 페이지 메뉴를 그룹 메뉴로 구성하려면 아래 도움말을 참고하세요.

그룹 메뉴 만들기 (하위 메뉴)

메뉴 관리에서 쇼핑 메뉴의 하위 메뉴(카테고리) 이동이 되지 않아요.

일반 메뉴는 디자인 모드 메뉴 관리에서 자유롭게 추가하고 그룹화, 이동, 수정이 가능합니다. 그런 반면 쇼핑 메뉴는 일반 메뉴에 쇼핑 위젯이 추가된 메뉴(선물 아이콘)로, 하위 메뉴가 상품 카테고리(아래 그림 회색 텍스트)들로 구성됩니다.

1. 메뉴와 상품 카테고리의 차이

1. COMMUNITY 메뉴

• COMMUNITY 메뉴에 마우스를 올리면, 메뉴 관리에서 그룹 메뉴로 구성한 하위 메뉴들이 나타납니다.
• 하위 메뉴 클릭 시 해당 메뉴(페이지)가 나타나는 걸 보실 수 있습니다.
• 이 하위 메뉴들은 메뉴 관리에서 순서를 변경하거나, 각 메뉴별로 디자인을 다르게 만들 수 있습니다.

2. SHOP 메뉴

• SHOP 메뉴에 마우스 포인터를 올리면, 상품 카테고리가 나타납니다.
• 상품 카테고리 클릭 시 페이지 디자인은 변하지 않으며, 해당 상품 카테고리에 등록된 상품들만 변경됩니다.

2. 상품 카테고리 변경하기

상품 카테고리 이름 및 순서 변경 등 카테고리 변경은 카테고리 관리에서 편집할 수 있습니다.

상품 카테고리별 다른 디자인 적용하기

시작에 앞서

쇼핑 위젯과 쇼핑 기획전 위젯 2가지를 함께 사용해, 메뉴마다 다른 디자인으로 페이지를 꾸미고 상품을 진열할 수 있습니다. 

다음 사이트에서 샘플을 확인하실 수 있습니다.

본 튜토리얼을 진행하기에 앞서 기본 쇼핑설정을 하지 않으셨다면 다음 도움말을 먼저 읽어주세요.

PART 1. 숨김 쇼핑 메뉴 만들기

쇼핑 위젯이 삽입된 숨김 메뉴를 제작합니다. 

본 숨김 메뉴는 쇼핑몰 자동 구성을 위한 메뉴이며, 실제 페이지에는 표시되지 않습니다.

1단계, 빈 메뉴 추가하기

1. 디자인 모드에 접속합니다.
2. 왼쪽 상단 메뉴 관리를 클릭합니다.

3. 상단 메뉴 오른쪽 끝 ⨁를 클릭해 새로운 빈 메뉴를 추가합니다.

   

4. 메뉴명을 입력하고 확인을 클릭합니다. (예시 메뉴명 : SHOP 숨김)

   

2단계, 메뉴 숨기기

1. 새로 추가한 메뉴에 마우스 오른쪽 버튼을 클릭해 메뉴 설정을 켭니다.

2. 설정 창 하단 옵션 항목에서 메뉴 숨김를 체크합니다.

   
3. 상단 메뉴바에서 상품 메뉴가 숨겨집니다.

3단계, 쇼핑 위젯 추가 및 설정 열기

1. 왼쪽 상단 더하기를 클릭해 쇼핑 위젯을 추가합니다.
2. 추가한 쇼핑 위젯에 마우스 오른쪽 버튼을 클릭해 위젯 설정을 엽니다.

4단계, 위젯 설정하기

쇼핑 위젯에 상품 카테고리를 연동하고 주요 설정 요소들을 수정합니다.

1. 진열 항목에서 상품 카테고리를 선택합니다.
2. 디자인 항목에서 이미지 비율 지정합니다.
   *주의 : 이곳에서 지정한 비율이 상품 상세페이지 이미지에도 적용됩니다.

3. Hover 효과를 지정합니다. *예 : 상품명, 가격 표시

   

5단계, 글로벌 메뉴 확인하기

1. 디자인 모드 왼쪽 상단 메뉴 관리를 클릭합니다.

2. 글로벌 메뉴에 상품 상세페이지, 장바구니, 마이페이지 메뉴가 생성 되었는지 확인합니다. *쇼핑 위젯 추가 시 자동 생성

   

PART 2. 상품 카테고리 메뉴 디자인

상품 카테고리 수만큼 메뉴를 만들고, 추가한 메뉴에 쇼핑 기획전 위젯 외 기타 위젯들을 사용해 페이지를 디자인하고 상품을 진열하는 방법을 알아봅니다.

1단계, 메뉴 추가하기

1. 디자인 모드 왼쪽 상단 메뉴 관리를 켭니다.

2. 상품 카테고리 메뉴로 사용할 메뉴를 추가(4개) 합니다. *상품 카테고리 수에 따라 메뉴 개수는 달라질 수 있습니다.

   

2단계, 메뉴 그룹화 및 메뉴명 수정하기

1. 메뉴를 다음 그림처럼 그룹 메뉴로 구성합니다.

   
2. (필요한 경우) 메뉴명과 메뉴별 주소(URL)를 수정합니다.

3단계, 상위 메뉴 디자인 및 상품 진열하기

SHOP(상위 메뉴)에 상품을 진열하고 페이지를 디자인합니다.

1. SHOP(상위 메뉴)로 이동합니다.
2. 원하는 구성으로 SHOP 페이지를 디자인합니다.
3. 기획전 위젯을 추가합니다.
4. 추가한 위젯에 마우스 오른쪽 버튼을 클릭하고 쇼핑 기획전 설정을 클릭합니다.

5. 표시 대상 항목에서 표시할 상품 카테고리를 선택합니다.

   

4단계, 하위 메뉴 디자인 및 상품 진열하기

1. Beans(하위 메뉴)로 이동합니다.
2. 원하는 구성으로 Beans 페이지를 디자인합니다.
3. 기획전 위젯을 추가합니다.
4. 추가한 위젯에 마우스 오른쪽 버튼을 클릭하고 쇼핑 기획전 설정을 클릭합니다.

5. 표시 대상 항목에서 표시할 상품 카테고리를 선택합니다.

   

6. 나머지 Cup, Equipment 메뉴도 위 절차에 따라 제작합니다.

5단계, 사이트 미리보기 및 게시하기

미리보기를 클릭해 작업한 내용을 확인하고 게시하기를 클릭해 방문자가 보고 구매할 수 있도록 적용합니다.

갤러리 클릭 시 새로운 갤러리가 나오게 하는 방법 (메뉴 활용)

갤러리 위젯과 메뉴 링크를 활용해 갤러리 이미지 중 하나를 클릭하면, 또 다른 갤러리가 나오도록 페이지를 구성할 수 있습니다.

본 도움말에서는 다음 샘플 사이트와 같이 City, Nature, Sky, Street 4개 중 하나를 클릭하면 관련 갤러리가 나타나는 페이지를 구성하는 방법을 알려드립니다.

설정 방법

1단계, City, Nature, Sky, Street 메뉴 만들기

갤러리를 위한 빈 메뉴 4개를 추가합니다.

1. 디자인 모드에 접속합니다.
2. 왼쪽 상단 메뉴 관리를 클릭합니다.

3. 상단 메뉴 오른쪽 끝 ⨁를 클릭해 City, Nature, Sky, Street 4개 메뉴를 추가합니다. 메뉴 추가 방법
   
   

2단계, 갤러리 만들기

추가한 4개 메뉴에 갤러리 위젯을 추가하고 이미지를 추가합니다.

1. City 메뉴로 이동합니다.

   *참조 : 메뉴 관리에서 이동하거나 상단 메뉴에 City 메뉴를 클릭해 이동할 수 있습니다.

2. 빈 메뉴에 갤러리 위젯을 추가합니다. 

   

3. 갤러리 위젯에 마우스 우클릭하여 추가한 갤러리 설정을 엽니다. 

   
4. 갤러리 설정 창 왼쪽 상단 + 상단 이미지, 동영상 추가에 마우스를 놓습니다.
5. 이미지 추가를 클릭합니다.
6. 내 PC에서 이미지를 업로드합니다.
7. 위 1번부터 6번 절차에 따라 남은 3개 메뉴에도 갤러리 이미지를 추가합니다.

3단계, 갤러리 홈 메뉴 만들기

위 2단계에서 만든 갤러리들로 이동할 수 있는 갤러리 홈 메뉴를 추가합니다.

1. 디자인 모드 왼쪽 상단 메뉴 관리를 클릭합니다.
2. 상단 메뉴 오른쪽 끝 ⨁를 클릭해 빈 메뉴(메뉴명 예 : 갤러리 홈)를 추가합니다.

4단계, 갤러리 이미지 추가 및 링크 걸기

갤러리 홈에 갤러리를 추가하고, 이미지 클릭 시 각 City, Nature, Sky, Street 메뉴로 이동하도록 이미지에 링크를 걸어줍니다.

1. 갤러리 위젯을 추가합니다.

   

2. 갤러리 위젯에 마우스 우클릭하여 갤러리 설정을 엽니다. 

   
3. 설정 창 왼쪽 + 상단 이미지, 동영상 추가에 마우스를 놓습니다.
4. 이미지 추가를 클릭합니다.

5. 위 2단계에서 만든 갤러리들을 대표하는 이미지 4개를 추가합니다.

   
6. 첫 번째 이미지를 클릭합니다.

7. 왼쪽 하단 링크를 클릭하면 추가한 메뉴들이 나타납니다. 그 중 City를 선택합니다.

   
8. 나머지 이미지에도 같은 방식으로 링크 추가합니다. *주의 : 링크를 추가할 때는 반드시 관련 이미지를 선택하고 링크를 추가해야 정상 적용됩니다.
9. (선택 사항) 이미지 내 제목과 설명을 함께 표시하려면 내용을 입력해주세요.

갤러리 스타일은 설정에서 [다른 스타일]을 클릭해 변경할 수 있습니다.

(선택 사항) 5단계, 그룹 메뉴 만들기

상단 메뉴바에 갤러리 홈(DIARY)만 표시되도록 메뉴를 그룹화 시키려면 다음 도움말을 참조하세요.

메뉴 추가, 이동, 복제, 설정, 삭제하기

메뉴를 추가하고, 복제, 이동, 삭제할 수 있습니다. 메뉴를 추가하면 새로운 빈 페이지가 생성되며, 사용자는 빈 페이지에 위젯과 섹션을 추가해 페이지를 꾸밀 수 있게 됩니다.

사용방법

메뉴 추가하기

메뉴 이동하기

메뉴 복제하기

메뉴 설정하기

메뉴 삭제하기

메뉴 추가하기

디자인 모드의 메뉴 관리에서 새로운 메뉴를 추가해 페이지를 생성하고, 메뉴의 순서를 변경할 수 있습니다. 이 도움말에서는 상단, 하단, 모달 메뉴에 새로운 메뉴를 생성하는 방법을 안내합니다.

설정방법

1. 디자인 모드에 접속합니다. 
2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.

3. 메뉴 항목별 오른쪽 끝에 메뉴 추가 ⊕ 아이콘을 클릭합니다.

   

4. 메뉴명을 입력하고, 확인을 클릭해 저장합니다.
5. 위 3~4번 과정을 반복해 메뉴를 추가합니다.

관련 도움말

• 메뉴명 변경하기
• 메뉴 이동하기
• 메뉴 설정하기
• 메뉴 복제하기
• 메뉴 삭제하기
• 그룹 메뉴 만들기 (하위 메뉴)

메뉴 클릭 시 첫 번째 하위 메뉴로 이동하기

접근시 첫 번째 하위 메뉴로 이동 옵션을 활성화 하면, 해당 메뉴 클릭 시 그룹 메뉴 내 첫 번째 하위 메뉴로 이동합니다.

설정방법

1. 디자인 모드에 접속합니다. 
2. 디자인 모드 왼쪽 상단 메뉴 관리 를 클릭합니다.
3. 링크를 걸 메뉴명 오른쪽 끝의 ⓘ 아이콘을 클릭합니다.

   
   

4. 옵션 항목에서 접근시 첫 번째 하위 메뉴로 이동 옵션을 선택합니다.

   
   

5. 메뉴 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
6. 디자인 모드 오른쪽 상단 미리보기 아이콘을 클릭합니다.
7. 상단 메뉴 클릭 시 하위 첫 번째 메뉴로 이동하는지 확인합니다.
8. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.

주의사항

접근시 첫 번째 하위 메뉴로 이동 옵션을 활성화 하면 해당 메뉴는 더 이상 사용하지 않게 되므로 페이지 편집이 제한됩니다. 편집 제한을 해제하려면 위 4번 항목의 옵션을 선택 해제해 주세요.

상품 카테고리별 다른 디자인 적용하기

PART 1. 숨김 쇼핑 메뉴 만들기

쇼핑 위젯이 삽입된 숨김 메뉴를 제작합니다. 본 숨김 메뉴는 쇼핑몰 자동 구성을 위한 메뉴이며, 실제 페이지에는 표시되지 않습니다.

1단계, 빈 메뉴 추가하기

1. 디자인 모드에 접속합니다.
2. 왼쪽 상단 메뉴 관리를 클릭합니다.

3. 상단 메뉴 오른쪽 끝 ⨁를 클릭해 새로운 빈 메뉴를 추가합니다.

   

4. 메뉴명을 입력하고 확인을 클릭합니다. (예시 메뉴명 : SHOP 숨김)

   

2단계, 메뉴 숨기기

1. 새로 추가한 메뉴에 마우스 오른쪽 버튼을 클릭해 메뉴 설정을 켭니다.

2. 설정 창 하단 옵션 항목에서 메뉴 숨김를 체크합니다.

   
3. 상단 메뉴바에서 상품 메뉴가 숨겨집니다.

3단계, 쇼핑 위젯 추가 및 설정 열기

1. 왼쪽 상단 더하기를 클릭해 쇼핑 위젯을 추가합니다.
2. 추가한 쇼핑 위젯에 마우스 오른쪽 버튼을 클릭해 위젯 설정을 엽니다.

4단계, 위젯 설정하기

쇼핑 위젯에 상품 카테고리를 연동하고 주요 설정 요소들을 수정합니다.

*참조 : 일부 설정 값들은 쇼핑 위젯 및 쇼핑 기획전 위젯 디자인에 영향을 줄 수 있습니다.

1. 진열 항목에서 상품 카테고리를 선택합니다.
2. 디자인 항목에서 이미지 비율 지정합니다.
   *주의 : 이곳에서 지정한 비율이 상품 상세페이지 이미지에도 적용됩니다.

3. Hover 효과를 지정합니다. *예 : 상품명, 가격 표시

   

5단계, 글로벌 메뉴 확인하기

1. 디자인 모드 왼쪽 상단 메뉴 관리를 클릭합니다.

2. 글로벌 메뉴에 상품 상세페이지, 장바구니, 마이페이지 메뉴가 생성 되었는지 확인합니다. *쇼핑 위젯 추가 시 자동 생성

   

PART 2. 상품 카테고리 메뉴 디자인

상품 카테고리 수만큼 메뉴를 만들고, 추가한 메뉴에 쇼핑 기획전 위젯 외 기타 위젯들을 사용해 페이지를 디자인하고 상품을 진열하는 방법을 알아봅니다.

1단계, 메뉴 추가하기

1. 디자인 모드 왼쪽 상단 메뉴 관리를 켭니다.

2. 상품 카테고리 메뉴로 사용할 메뉴를 추가(4개) 합니다. *상품 카테고리 수에 따라 메뉴 개수는 달라질 수 있습니다.

   

2단계, 메뉴 그룹화 및 메뉴명 수정하기

1. 메뉴를 다음 그림처럼 그룹 메뉴로 구성합니다.

   
2. (필요한 경우) 메뉴명과 메뉴별 주소(URL)를 수정합니다. 메뉴 수정방법

3단계, 상위 메뉴 디자인 및 상품 진열하기

SHOP(상위 메뉴)에 상품을 진열하고 페이지를 디자인합니다.

참고 : SHOP 메뉴 클릭 시 바로 아래 하위 메뉴(Beans)로 이동하게 하려면 다음 도움말을 참조하세요.

1. SHOP(상위 메뉴)로 이동합니다.
2. 원하는 구성으로 SHOP 페이지를 디자인합니다.
3. 기획전 위젯을 추가합니다.
4. 추가한 위젯에 마우스 오른쪽 버튼을 클릭하고 쇼핑 기획전 설정을 클릭합니다.

5. 표시 대상 항목에서 표시할 상품 카테고리를 선택합니다.

   

4단계, 하위 메뉴 디자인 및 상품 진열하기

1. Beans(하위 메뉴)로 이동합니다.
2. 원하는 구성으로 Beans 페이지를 디자인합니다.
3. 기획전 위젯을 추가합니다.
4. 추가한 위젯에 마우스 오른쪽 버튼을 클릭하고 쇼핑 기획전 설정을 클릭합니다.

5. 표시 대상 항목에서 표시할 상품 카테고리를 선택합니다.

   

6. 나머지 Cup, Equipment 메뉴도 위 절차에 따라 제작합니다.

5단계, 사이트 미리보기 및 게시하기

미리보기를 클릭해 작업한 내용을 확인하고 게시하기를 클릭해 방문자가 보고 구매할 수 있도록 적용합니다.