위멘토 사용가이드


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

위멘토 사용 가이드

가이드 137

메뉴명 Hover 효과 적용하기



상단 메뉴에 마우스 커서를 올렸을 때 메뉴명이 바뀌는 Hover 효과를 간단하게 적용할 수 있습니다.


적용방법

  1. 디자인 모드에 접속합니다. 
  2. 왼쪽 상단 메뉴 관리를 클릭합니다.
  3. 변경을 원하는 메뉴명 오른쪽 끝 ⓘ 아이콘을 클릭해 메뉴 설정을 켭니다.


  4. 메뉴명 Hover 항목에 마우스 포인터를 올리면 변경될 메뉴명을 입력합니다.
  5. 닫기 ✕ 아이콘을 클릭해 메뉴 설정 창을 끕니다.
  6. 닫기 ✕ 아이콘을 클릭해 메뉴 관리를 끕니다.
  7. 디자인 모드 오른쪽 상단 미리보기를 클릭해 확인합니다.
  8. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.



메뉴 삭제하기



메뉴(페이지)는 언제든 삭제할 수 있습니다. 메뉴를 삭제하면 상단 또는 하단에 표시된 메뉴명도 함께 사라집니다.

삭제방법

  1. 디자인 모드에 접속합니다. 
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 삭제하려는 메뉴에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 삭제를 클릭합니다.


  5. 메뉴가 삭제됩니다.



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



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




사용방법

메뉴 추가하기


웹사이트를 디자인할 때 가장 먼저 해야 할 일은 메뉴(페이지)를 추가하는 것입니다. 사용자는 '메뉴 관리'를 열어 상단 메뉴 및 하단 메뉴를 추가할 수 있으며, 생성된 메뉴는 각 항목에 해당하는 영역에 추가됩니다.

또한, 메뉴를 마우스로 클릭 후 드래그하여 메뉴가 표시되는 순서를 변경하거나, 상위·하위 메뉴로 그룹화 할 수도 있습니다.

메뉴 추가하기

참고: 모달은 버튼 또는 링크를 클릭했을 때 나타나는 팝업 한 종류입니다. 모달 메뉴는 새롭게 생성해도 페이지에 메뉴로서 표시되지는 않습니다.


메뉴 이동하기

상단 메뉴 또는 하단 메뉴 항목에 추가한 메뉴를 위 또는 아래로 이동하여 메뉴 표시 순서를 변경할 수 있습니다. 또한, 메뉴가 너무 많아 상단 메뉴에 모두 표시하기 어렵다면 메뉴 이동을 통해 여러 개의 메뉴를 하나의 그룹으로 구성하는 것도 가능합니다.


메뉴 복제하기

기존 메뉴를 복제할 수 있습니다. 웹사이트 제작 중 같은 디자인을 여러번 반복 사용해야 하는 경우, 메뉴 복제 기능을 사용해 보세요. 복제한 메뉴의 일부 콘텐츠를 수정하며 작업하면 더 효율적이고 빠른 작업이 가능합니다.

메뉴 복제하기

참고: 메뉴명은 동일하게 사용할 수 있지만, 메뉴 URL은 다르게 작성해야 합니다.



메뉴 설정하기

메뉴의 이름, URL(주소), 페이지 제목과 설명, 메뉴 숨김, 상단·하단 숨김, 접속권한 등의 메뉴에 관한 다양한 옵션을 수정할 수 있습니다.

메뉴 설정하기



메뉴 삭제하기

불필요한 메뉴는 언제든 삭제할 수 있습니다.

메뉴 삭제하기




메뉴 추가하기



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


설정방법

  1. 디자인 모드에 접속합니다. 
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 메뉴 항목별 오른쪽 끝에 메뉴 추가 ⊕ 아이콘을 클릭합니다.

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




관련 도움말




메뉴 복제하기




메뉴(페이지)를 복제할 수 있습니다. 단, 복제 시 일부 DB요소 위젯은 복제가 불가능하거나, 복제가 되어도 연동 설정은 별도로 해줘야 할 수 있습니다.


복제방법

  1. 디자인 모드에 접속합니다. 
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 복제하려는 메뉴에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 메뉴 복제를 클릭합니다.


  5. 메뉴 복제가 완료됩니다.



메뉴 숨김 처리하기




메뉴 숨김 옵션을 주면 특정 메뉴가 상단 메뉴, 메뉴 위젯, 모바일 서랍 메뉴 등에서 표시되지 않도록 숨길 수 있습니다. URL을 알면 접속은 가능하지만 메뉴에서는 표시되지 않기 때문에 방문자는 이 메뉴의 존재를 알 수 없습니다.


설정방법

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


  4. 옵션 항목에서 메뉴 숨김을 선택합니다.
  5. 닫기 ✕ 아이콘을 클릭해 메뉴 설정 창을 닫습니다.
  6. 디자인 모드 오른쪽 상단에 위치한 미리보기 아이콘을 클릭합니다.
  7. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.



관련 도움말


메뉴 주소(URL) 변경하기



새로운 메뉴 추가 시, 추가한 메뉴에는 숫자로 된 페이지 주소(URL)가 자동으로 부여됩니다.

방문자는 이 페이지 주소(URL)를 브라우저 주소창에 입력해 접속할 수 있으며, 페이지 주소는 다음 절차를 통해 언제든 변경할 수 있습니다.


변경방법

  1. 디자인 모드에 접속합니다.
  2. 왼쪽 상단 메뉴 관리를 클릭합니다.
  3. 변경을 원하는 메뉴명 오른쪽 끝 ⓘ 아이콘을 클릭해 메뉴 설정을 켭니다.
  4. URL 항목에 숫자로 된 페이지 주소를 삭제하고, 원하는 URL을 입력합니다.

    주의 : 페이지 주소(URL)는 다른 메뉴 페이지 URL과 중복 사용할 수 없습니다.
  5. 닫기아이콘을 클릭해 메뉴 설정을 끕니다.
  6. 닫기아이콘을 클릭해 메뉴 관리를 끕니다.
  7. 새 브라우저 탭을 열고, 위에서 설정한 페이지 URL을 입력해 접속을 테스트합니다.

    입력 예시 : http://내도메인.com/board-review



메뉴 접근 권한 설정하기



특정 메뉴(페이지)를 열어 볼 수 있는 권한을 사용자마다 달리 설정할 수 있습니다. 특정 콘텐츠를 회원만 볼 수 있게끔 설정하거나, 지정한 그룹만 볼 수 있도록 설정하려면 다음 절차에 따라 페이지 접근 권한을 설정해 보세요.


설정방법

  1. 디자인 모드에 접속합니다. 
  2. 왼쪽 상단 메뉴 관리  아이콘을 클릭합니다.
  3. 접근 권한을 설정할 메뉴명의 오른쪽 끝에 위치한 ⓘ 아이콘을 클릭합니다.
  4. 접근 권한 항목에서 모든 사용자를 클릭합니다. 아래 그림과 설명을 참고해, 해당 메뉴에 접근 가능한 그룹을 선택합니다.
    • 모든 사용자: 모든 사용자가 메뉴를 열어 볼 수 있습니다.
    • 로그인 사용자: 사이트 회원만 메뉴를 열어 볼 수 있습니다.
    • 소유자: 소유자만 메뉴를 열어볼 수 있습니다.
    • 사용자 지정 그룹: 지정된 사용자 그룹만 메뉴를 열어볼 수 있습니다. 사용자 그룹을 추가하는 방법은 사용자 그룹 지정하기 도움말을 참고하세요. 사용자 지정 그룹 선택 시 아래 그림처럼 허용 그룹을 선택할 수 있습니다.
  5. 닫기 ✕ 아이콘을 클릭해 메뉴 설정 창을 종료합니다.



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



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


설정방법

  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단계, 사이트 미리보기 및 게시하기

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

INFORMATION


상호명 : (주)위멘토


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

통신판매업번호 : 제2022-서울강서-1096호 

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

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

주소 : 서울특별시 강서구 공항대로 212(퀸즈파크11), B동 404호

호스팅주소 : 서울특별시 강서구 공항대로 212(퀸즈파크11), B동 404호


© BYULZZI Corp. All Rights Reserved. hosting by byulzzi