메뉴 리스트 위젯을 활용해 간편하게 메뉴 경로를 표시할 수 있습니다.



설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭하고, 경로를 표시하려는 메뉴를 클릭해 이동합니다.
  3. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  4. 메뉴 리스트 위젯을 클릭합니다.
  5. 메뉴 리스트 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  6. 컨텍스트 메뉴가 나오면, 메뉴/카테고리 설정을 클릭합니다.
  7. 다른 스타일 버튼을 클릭합니다.
  8. 메뉴 경로 스타일을 선택합니다.

  9. 아래의 그림과 설명을 참고해 메뉴 경로의 스타일을 변경합니다.


  • 메뉴: 메뉴 텍스트의 크기 및 간격을 변경할 수 있습니다.
  • 텍스트: 메뉴 텍스트의 기본색, HOVER(롤오버), 활성화, 자간을 변경할 수 있습니다.
  • 정렬: 메뉴 경로의 위치를 왼쪽, 가운데, 오른쪽 중 하나를 선택할 수 있습니다.

10. 메뉴/카테고리 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

11. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.

12. 메뉴 경로가 정상적으로 표시되는지 확인합니다.

13. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



도움말에 찾으시는 답변이 없으신가요? 문의하기


회원가입 버튼에 방문자의 가입을 유도, 촉구하는 말풍선을 추가할 수 있습니다.


설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 디자인 모드 오른쪽 상단에 위치한 상단설정을 클릭합니다.
  3. 상단 디자인 모드에서 로그인/장바구니 위젯을 추가합니다. 상단 위젯 추가방법
    참고: 이미 로그인/장바구니 위젯이 있는 경우 이 과정은 건너뜁니다. 대개 오른쪽에 위치해 있습니다.
  4. 로그인/장바구니 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 컨텍스트 메뉴가 나오면 로그인 설정을 클릭합니다.

  6. 로그인 전 탭을 선택하고, 아래 회원가입(Join) 버튼을 선택합니다.
    참고: 회원가입 버튼을 추가하지 않은 경우 이 도움말의 하단 글을 참고할 수 있습니다.
  7. 회원가입 항목에서 아래 설명을 참고해 말풍선 옵션을 설정합니다.
  • 말풍선 문구: 말풍선에 표시할 문구를 입력해 주세요.
  • 말풍선 배경색: 말풍선 배경색을 선택해 주세요. 흰색 선택 시 말풍선 문구는 보이지 않을 수 있습니다.
  • 위치: 회원가입 버튼을 기준으로 말풍선의 위치를 선택할 수 있습니다.
  • 바운스 효과: 이 옵션을 선택하면 말풍선을 위 아래로 튕기는 바운스 효과를 추가할 수 있습니다.

8. 로그인 설정 창 바깥 영역을 클릭해 설정을 완료합니다.

9. 디자인 모드 오른쪽 상단의 게시하기 버튼을 클릭해 설정을 적용합니다.

10. Google 크롬 시크릿 창을 켜고, 내 사이트에 접속합니다. 크롬 시크릿 창 활용방법

참고: 가입 버튼 말풍선은 로그아웃 된 접속자에게만 표시됩니다. 시크릿창을 활용하면 아임웹에서 로그아웃 할 필요없이 간편하게 테스트가 가능합니다.

11. 회원가입 버튼에 가입 버튼 말풍선이 표시되는지 확인합니다.



관련 도움말: 회원가입 버튼이 안 보이세요?


로그인 설정 창 왼쪽 상단 +추가를 클릭해 회원가입 버튼을 추가할 수 있습니다. 기존 메뉴 또는 외부사이트로 링크를 추가하려면 링크 옵션을 선택해 주세요.



도움말에 찾으시는 답변이 없으신가요? 문의하기


 

구매자가 작성한 구매평을 하나의 게시판에 모아서 노출할 수 있습니다.

리뷰게시판은 상품 상세페이지에 작성된 구매평들을 불러오는 구조이기 때문에, 상품 등록 및 상품 진열을 완료하지 않으면 게시판이 정상적으로 동작하지 않을 수 있습니다.

참고: 아직 쇼핑 기본설정을 마치지 않았다면 다음 쇼핑몰 시작하기 도움말을 참고해 쇼핑 설정을 진행할 수 있습니다.


제작방법

1단계: 게시판 위젯 추가 및 설정 열기

메뉴에 게시판 위젯을 추가하고, 게시판 설정을 열어줍니다.

  1.  디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 리뷰게시판을 추가하려는 메뉴를 클릭해 이동하거나, 새로운 메뉴를 생성합니다. 메뉴 추가방법
  4. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭하고, 게시판 위젯을 선택합니다.
  5. 게시판 위젯 위에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  6. 컨텍스트 메뉴가 나오면 게시판 설정을 클릭합니다.
  7. 게시판 설정 창이 나타납니다.


2단계: 리뷰게시판 설정하기

일반 게시판을 리뷰 게시판으로 전환하고, 설정합니다. 


  1. 게시판 연동 항목에서 구매평/기타 게시판을 선택합니다. (이 옵션을 선택하는 즉시 상품 상세페이지에 등록된 구매평들을 해당 게시판으로 불러옵니다.)
  2. 연동 게시판 선택 항목에서 구매평 게시판(쇼핑)을 선택합니다. 사진이 있는 구매평만 노출하려면 오른쪽 포토 구매평만 표시를 선택할 수도 있습니다.
    참고: 예약 상품을 판매하는 경우 구매평 게시판(예약)을 선택할 수 있습니다.
  3. 게시판 이름을 입력합니다. (예시: 리뷰게시판, Review 등)
  4. (선택 사항) 옵션항목을 설정합니다.


  • 게시물 정렬: 작성시간순, 업데이트순으로 구매평을 정렬할 수 있습니다.
  • NEW 표기시한: 새롭게 추가된 구매평에 표시되는 NEW 뱃지의 표시기한을 설정합니다. NEW 뱃지 사용을 중지하려면 0을 입력합니다.
  • 댓글 표시: 새 댓글 출력 순서를 정할 수 있으며, 구매평 댓글을 사용하지 않으려면 사용 중지할 수 있습니다.


3단계: 게시판 디자인 변경하기

게시판 스타일 및 디자인 요소를 변경합니다. 

  1. 게시판 설정 창 상단의 디자인 탭을 클릭합니다.
  2. 다른 스타일 버튼을 클릭해, 원하는 스타일을 선택합니다.
  3. 리스트에 표시될 항목, 이미지 비율, 한줄에 표시될 이미지 수, 텍스트 크기, 색상 등 게시판 디자인 요소를 변경합니다.
  4. 게시판 설정 창 바깥 영역을 클릭해 설정을 완료합니다.


4단계: 미리보기 및 게시하기

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 등록한 상품의 상세페이지로 이동해 테스트 구매평을 작성합니다.
  3. 리뷰게시판이 삽입된 메뉴로 이동해 작성한 구매평이 정상적으로 표시되는지 확인합니다.
  4. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



도움말에 찾으시는 답변이 없으신가요? 문의하기


가로 영역 확장 옵션을 선택했는데, 여전히 좌우 여백이 남아 있는 경우 섹션의 기본 그리드 간격이 꺼져 있거나, 섹션 좌우 그리드 간격이 설정되어 있기 때문입니다.

다음 도움말을 참고해 섹션 그리드 간격을 조절하여, 좌우 여백을 없애는 방법을 알아보세요.


설정방법

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

  2. 가로 영역 확장한 위젯이 삽입된 섹션의 섹션 설정을 열어줍니다. 섹션 설정 열기

  3. 기본 그리드 간격 옵션이 꺼져 있다면, 옵션을 선택해 활성화 시켜주세요.
    참고: 이 옵션으로 인해 디자인이 틀어지는 경우 페이지 하단 도움말을 참고해 주세요.


기본 그리드 간격을 사용할 수 없는 경우

기본 그리드 간격 옵션을 선택하면 해당 섹션 내 모든 위젯 간의 상하, 좌우 간격이 15px로 고정됩니다. 이 옵션은 경우에 따라 작업한 디자인에 따라 의도한 디자인을 틀어지게 만들 수 있습니다.

이 경우 기본 그리드 간격을 선택 해제하고, 왼쪽의 그리드 좌우 간격0px로 입력해 보세요. 해당 섹션 내 모든 위젯 간의 좌우 간격이 0이 되어 좌우 여백이 사라집니다.

만약 위 설정으로 인해 위젯 간의 좌우 간격이 너무 붙어 버린 경우, 가로 영역을 확장하려는 위젯만을 위한 새로운 빈 섹션을 사용해도 좋습니다. 빈 섹션 추가방법



도움말에 찾으시는 답변이 없으신가요? 문의하기 



디자인 모드에서 위젯 추가 시, 해당 위젯은 기본적으로 페이지 본문폭(가로폭)에 맞춰 삽입됩니다. 이때 사용자는 필요에 따라 위젯이 차지하는 가로 영역이 본문폭을 넘어 100% 확장되도록 설정할 수 있습니다.

예를 들어, 가로선 위젯을 좌우 100% 확장하여, 페이지의 상하 구분을 위한 구분선으로 활용할 수 있습니다.

이 도움말에서는 가로선 위젯을 예시로 가로 영역 100% 확장하는 방법을 설명합니다.



설정방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단 위젯 추가   아이콘을 클릭하고, 가로선 위젯을 클릭합니다.참고: 위와 다른 위젯을 선택해도 무방하며, 이미 위젯을 추가한 경우 이 과정은 건너 뜁니다.
  3. 가로선 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 가로 영역 확장을 클릭합니다.
  5. 위젯 영역이 본문폭을 넘어 가로 100% 확장된 걸 확인할 수 있습니다.


좌우 여백이 남아있나요?

선택하신 템플릿 또는 작업물에 따라 여백이 남아 있을 수 있습니다. 아래 도움말을 참고해 해결방법을 알아보세요.

가로 영역을 확장했는데, 좌우에 여백이 남아있습니다.



도움말에 찾으시는 답변이 없으신가요? 문의하기



섹션 설정의 배경 패턴 기능을 사용해, 아래 그림처럼 패턴 배경을 제작할 수 있습니다. 패턴 이미지는 해상도 높은 이미지 사용 대비 속도가 빠르고, 보기에도 수려한 느낌을 주어 사이트 제작에 종종 사용됩니다.

이 도움말에서는 패턴 이미지를 사용해 섹션 배경에 패턴 이미지를 적용하는 방법을 설명합니다.


적용방법

  1. 디자인 모드에 접속합니다. 접속방법
  2. 패턴 배경을 적용하려는 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  3. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.

  4. 섹션 설정 창 이미지 표시 영역에 마우스 포인터를 올리고, 이미지 찾기 버튼을 클릭합니다.
    샘플 파일: 위 예시의 패턴 이미지를 사용할 수 있습니다. 다운로드

  5. 내 PC에서 패턴 이미지를 선택해 올립니다.
  6. 배경 항목의 이미지 옵션에서 반복을 선택합니다.
  7. 섹션 설정 창 오른쪽 상단의 ✕ 아이콘을 클릭해 설정을 완료합니다.
  8. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  9. 섹션 배경에 정상적으로 패턴 이미지가 표시되는지 확인하고, 문제가 없다면 게시하기 버튼을 클릭해 적용합니다.


도움말에 찾으시는 답변이 없으신가요? 문의하기


로고 위젯을 사용하면 사이트 상단에 로고를 추가할 수 있습니다. 로고 위젯은 로고 이미지와 텍스트를 함께 사용할 수 있습니다. 때때로 로고 이미지 아래 텍스트 추가할 수 있음을 모르고, 로고 위젯과 텍스트 위젯을 함께 사용하는 예가 있습니다.

이 도움말에서는 로고 이미지 아래 텍스트를 추가하여, 세로 정렬된 로고를 제작하는 방법을 설명합니다.


제작방법


1단계: 상단 로고 위젯 설정 켜기

상단 디자인 모드에 진입해 로고 위젯의 설정을 켜는 과정을 설명합니다.


  1.  디자인 모드에 접속합니다. 접속방법
  2. 디자인 모드의 오른쪽 상단에 위치한 상단설정 을 클릭합니다.
  3. 로고 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
    참고: 로고 위젯이 없거나 삭제한 경우 새로 추가합니다. 상단 위젯 추가방법
  4. 컨텍스트 메뉴가 나오면 로고 설정 을 클릭합니다.



2단계: 로고 이미지 추가하기

로고로 사용할 이미지를 업로드하는 방법을 설명합니다.

  1.  버튼을 클릭합니다.
  2. 왼쪽 상단의 + 추가 를 클릭하고, 내 PC에서 로고 이미지를 올립니다. 로고 이미지는 여러 개 추가할 수 있습니다.
  3. 로고 이미지 업로드를 완료하면, 지금 필요한 로고를 마우스로 클릭해 선택합니다.



3단계: 텍스트 로고 추가하기

로고와 함께 표시될 텍스트를 입력합니다.

참고: 본래 텍스트 로고는 이미지 대신 텍스트로 로고를 대신할 사람들을 위한 기능이지만, 필요에 따라 다르게 입력 또는 사용하셔도 무방합니다. 단, 너무 길면 디자인에 문제가 생길 수 있으니 주의하세요.
  1.  타이틀명 항목을 확인합니다.
  2. 타이틀명을 키보드 입력하고, 사용하기 체크박스를 선택합니다.
    참고: 사용하기 체크박스를 선택 해제하는 경우, 텍스트 로고는 숨겨집니다.



4단계: 텍스트 위치 변경하기

이미지 오른쪽에 있는 텍스트 로고의 위치를 이미지 아래로 변경합니다.

  1.  스타일 항목에서 오른쪽 끝 텍스트 위치 옵션을 확인합니다.
  2. 텍스트 위치이미지 하단으로 변경 선택합니다.
  3. 이제 로고 이미지 아래로 위 3단계에서 입력한 텍스트가 이동됩니다.
  4. 로고 설정 창 오른쪽 상단의 닫기 ✕ 아이콘을 클릭해 로고 설정을 완료합니다.
  5. (선택 사항) 로고 이미지가 너무 크거나 작은 경우, 로고 이미지 하단 끄트머리를 마우스로 클릭 후 드래그하여 크기를 조절합니다.

    참고: 브라우저에 따라 이미지 조절에 문제가 있는 경우가 있습니다. 만약 이미지 조절이 잘 안 되는 경우, 위 3단계 2번 항목의 사용하기 를 선택 해제한 다음 시도해 보세요.
  6. (선택 사항) 만약 로고가 깨져 보이는 경우 로고 설정에서 선명하기 옵션을 해제하거나, 크기를 아주 살짝 늘리거나 줄여 보시길 바랍니다.
    참고: 위 두 가지 방법을 써도 로고가 깨져 보이는 경우, 이미지 파일의 문제일 수 있습니다. 사용 중인 로고 이미지의 형식 및 파일 형식에 대해 알아보고 이미지를 변경해 보시길 바랍니다. 로고의 경우 PNG 형식이 권장됩니다. 사이트 이미지 파일 형식은 무얼 써야 할까요?



5단계: 미리보기 및 게시하기

제작한 디자인을 미리보고, 문제가 없다면 게시합니다.

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 로고 이미지 아래 텍스트가 표시되는 로고가 중앙 정렬 형식으로 정상 표시되는지 확인합니다.
  3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.



관련 도움말


  • 빈 섹션 추가하기
  • 섹션 이동하기 (위로 이동, 아래로 이동)
  • 섹션 상하 여백, 좌우 여백 추가하기
  • 상단 섹션 구분선 추가하기


도움말에 찾으시는 답변이 없으신가요? 문의하기

 

특정 메뉴에 접근 권한을 설정하여 허용된 그룹이 아닌 경우 보이지 않도록 설정할 수 있습니다. 예를 들어 로그인한 회원 또는 어떤 특정 상품을 구매한 사용자(회원그룹 이용권)에게 특정 메뉴를 보여줄 때 유용합니다.


설정방법

  1.  디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 접근 권한을 변경하고 싶은 메뉴의 오른쪽 끝 ⓘ 아이콘을 클릭합니다.
  4. 메뉴 설정 창이 나오면 접근 권한 항목에서 로그인 사용자 또는 사용자 지정 그룹을 선택합니다.
  • 로그인 사용자: 회원에게만 메뉴가 표시되며 접속이 가능합니다.
  • 소유자: 소유자에게만 메뉴가 표시되며 접속이 가능합니다.
  • 사용자 지정 그룹: 선택한 그룹에게만 메뉴가 표시되며 접속이 가능합니다.

5. 위 4번 항목에서 세 가지 옵션 중 하나를 선택하면, 로그인창 자동 표시, 권한이 없을 때 메뉴 숨김, 비밀번호 입력시 접근 가능 옵션이 표시됩니다. 그중 권한이 없을 때 메뉴 숨김 옵션을 선택합니다. 

6. 사이트에서 로그아웃한 다음 위에서 접근 권한을 제한한 메뉴가 숨겨졌는지 확인합니다. 

참고: Google 크롬 시크릿 창을 활용해 보세요. 로그아웃 할 필요없이 비로그인 회원의 시각에서 간편하게 확인할 수 있습니다. 구글 크롬 시크릿창 활용하기



도움말에 찾으시는 답변이 없으신가요? 문의하기


롤오버(Hover) 효과란 텍스트, 이미지, 버튼 등에 마우스 포인터가 올라갔을 때 발동되는 일종의 전환효과를 말합니다. 이 도움말에서는 이미지 위젯에 롤오버 효과를 적용하는 방법을 설명합니다.


설정방법

이미지 위젯은 아래의 그림처럼 두 가지 이미지를 추가할 수 있도록, 이미지 설정 항목이 기본 이미지 와 롤오버 이미지 항목이 나눠져 있습니다. 사용자는 기본 이미지에 기본으로 표시될 이미지를 추가하고, 롤오버 이미지엔 마우스 포인터를 올렸을 때 전환될 이미지를 추가할 수 있습니다.


1단계: 이미지 위젯 추가 및 설정 열기

이미지 위젯을 삽입하고, 해당 위젯의 설정을 여는 과정을 설명합니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 위젯 추가 + 아이콘을 클릭합니다.
  3. 이미지 위젯을 클릭합니다.
  4. 삽입한 이미지 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  5. 컨텍스트 메뉴가 나오면 이미지 설정 을 클릭합니다.


2단계: 기본 이미지 추가 및 효과 설정하기

기본 이미지를 추가하고 효과, 설명 등을 추가 설정합니다.

  1.  기본 이미지를 업로드합니다.
    1. 이미지 설정 창 왼쪽의 그림 아이콘이 표시된 영역에 마우스 포인터를 올립니다.
    2. 업로드 버튼을 클릭해 이미지를 추가합니다. 준비된 이미지가 없는 경우, 무료 이미지를 클릭해 추가합니다.
  2. 효과 항목에서 옵션을 선택합니다. (각 옵션명 오른쪽의 물음표 아이콘을 클릭해 해당 옵션에 관한 추가 도움말을 볼 수 있습니다.)
  3. 음영 항목에서 이미지 위에 올릴 색상을 추가로 설정할 수 있습니다. 컬러픽커를 클릭해 색상을 선택하거나 직접 색상값을 입력합니다. 필요에 따라 알파값을 조절해 색상을 투명하게 변경할 수 있습니다.
  4. 설명 항목에 텍스트를 입력할 수 있습니다. 입력한 텍스트는 감추거나, 이미지 아래 표시하거나, 이미지 위에 표시할 수 있습니다.
  5. 텍스트 항목에서 위 설명에 입력한 텍스트의 크기 및 색상을 변경합니다. 또한, 아이콘을 클릭해 위치를 변경할 수도 있습니다.
  6. 음영 항목에서 업로드한 이미지 위에 색상을 추가할 수 있습니다. 투명도를 조절해 지정한 색상을 반투명하게 조절할 수도 있습니다. 컬러픽커로 투명도 조절하기
  7. 링크 항목에 링크를 추가하면, 이미지 클릭 시 지정한 주소로 이동합니다.


3단계: 롤오버 이미지 추가 및 효과 설정하기

롤오버 이미지를 추가하고, 효과 및 음영을 추가 설정합니다. 위 2단계에서 설정한 기본 이미지의 설정과 롤오버 이미지의 설정이 같으면 전환 시 차이점이 드러나지 않으니 주의해 주세요.

  1.  롤오버 이미지를 업로드합니다.
    1. 이미지 설정 창 오른쪽의 그림 아이콘이 표시된 영역에 마우스 포인터를 올립니다.
    2. 업로드 버튼을 클릭해 이미지를 추가합니다. 준비된 이미지가 없는 경우 무료 이미지를 클릭해 추가합니다.
  2. 효과 항목에서 옵션을 선택합니다. (각 옵션명 오른쪽의 물음표 아이콘을 클릭해 해당 옵션에 관한 추가 도움말을 볼 수 있습니다.)
  3. 설명 항목에서 텍스트 표시여부 및 감추기 여부를 선택합니다.
  4. 음영 항목에서 이미지 위에 색상을 추가할 수 있습니다. 컬러픽커를 클릭해 색상을 선택하거나 직접 색상값을 입력합니다. 필요에 따라 알파값을 조절해 색상을 투명하게 변경합니다. 컬러픽커로 투명도 조절하기.


4단계: 롤오버 효과 확인하기

롤오버 효과를 확인합니다. 롤오버 효과는 디자인 모드에서는 동작하지 않으며, 미리보기 모드 또는 게시 후 사이트에서 확인할 수 있습니다.

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 이미지 위에 마우스 포인터를 올립니다.
  3. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭해 적용합니다.


도움말에 찾으시는 답변이 없으신가요? 문의하기






섹션 고정 기능을 활용해 마우스 휠 스크롤을 내려도 서브 메뉴가 상단 메뉴의 바로 아래 고정되도록 디자인할 수 있습니다. 아래의 애니메이션은 그 예시로, 특정 페이지에서 많은 서브 메뉴를 보여줄 때 효과적입니다.



설정방법


1단계: 빈 섹션 추가하기

서브 메뉴를 삽입할 빈 섹션을 생성합니다. 

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭해 서브 메뉴를 추가할 메뉴로 이동합니다.
  3. 위젯이 없는 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 컨텍스트 메뉴가 나오면 빈 섹션추가를 클릭합니다.

  5. 새로운 빈 섹션이 생겨납니다.

2단계: 서브 메뉴 출력하기

메뉴 리스트 위젯을 활용해 출력할 서브 메뉴를 불러옵니다. 

  1. 빈 섹션 중앙의 더하기 ⨁ 아이콘을 클릭합니다.
  2. 위젯 목록이 나오면 메뉴 리스트 위젯을 클릭합니다.
  3. 메뉴 리스트 위젯에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 메뉴 리스트 설정 창이 나타나면 기준 위치 항목에서 표시할 서브 메뉴를 포함하는 상위 메뉴를 선택합니다.

    참고: 위 애니메이션을 예를 들면 모든 서브 메뉴(상품 카테고리)를 포함하는 SHOP을 선택할 수 있습니다.
  5. 메뉴 리스트 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  6. 메뉴 리스트 위젯에 서브 메뉴(상품 카테고리)가 정상적으로 출력되는지 확인합니다.
  7. (선택 사항) 여백 위젯을 메뉴 리스트 위젯의 위, 아래에 추가해 충분한 여백을 추가해 줍니다.


3단계: 섹션 위로 이동하기

메뉴 리스트 위젯이 포함된 섹션을 상단 메뉴 바로 아래까지 이동시킵니다. 

  1. 메뉴 리스트 위젯이 포함된 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
    중요: 위젯이 없는 곳에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭하세요. 더 자세한 방법은 섹션 이동하기 도움말을 참고하시길 바랍니다.
  2. 섹션 컨텍스트 메뉴가 나오면 위로 이동을 클릭합니다. (상단 메뉴 바로 아래까지 위로 이동시켜주세요.)
  3. 섹션을 가장 위로 올리면 아래 그림과 같이 상단 메뉴 바로 아래 위치하게 됩니다.

4단계: 섹션 고정하기

서브 메뉴가 포함된 섹션을 해당 위치에 고정합니다. 

  1. 메뉴 리스트 위젯이 포함된 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  2. 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
  3. 섹션 설정 창 오른쪽 하단의 섹션 고정 옵션을 선택합니다.


5단계: 미리보기 및 게시하기

  1. 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 마우스 휠 스크롤을 아래로 내려봅니다.
  3. 서브 메뉴가 포함된 섹션이 상단에 고정되어 표시되는지 확인합니다.
  4. 문제가 없다면 디자인 모드로 돌아가 오른쪽 상단의 게시하기 버튼을 클릭해 웹에 적용합니다.


도움말에 찾으시는 답변이 없으신가요? 문의하기 





도움말에 찾으시는 답변이 없으신가요? 문의하기
TOP