Studio 에디터: 메가 메뉴 추가 및 사용자 지정하기

3 분 분량
메가 메뉴는 가로 메뉴에 추가할 수 있는 컨테이너입니다. 방문자가 해당 메뉴 아이템에 마우스오버 시 컨테이너가 열립니다. 컨테이너를 처음부터 디자인하고 다중 탐색, 추천 제품 쇼케이스 또는 기타 목적 중 컨테이너의 용도를 결정하세요.
컨테이너에 다양한 제품 카테고리로 연결되는 여러 탐색 링크가 표시되는 전자상거래 스타일 메가 메뉴 예시
참고 사항:
메가 메뉴 컨테이너는 가로 메뉴에만 추가할 수 있습니다. 메가 메뉴 컨테이너는 세로 메뉴, 앵커 메뉴, 햄버거 메뉴에는 지원되지 않습니다.
다음 지침을 참고하세요.

메가 메뉴 컨테이너 추가 및 설정하기

메가 메뉴 컨테이너를 기존 메뉴에 아이템으로 추가하고 원하는 이름을 지정합니다. '서비스' 또는 '회사 소개'와 같이 콘텐츠의 의도가 반영된 제목을 사용하는 것이 좋습니다.
컨테이너를 추가하고 이름을 지정한 후에는 버튼, 모양 및 텍스트와 같은 요소를 추가해 원하는 콘텐츠를 제작하세요. 

메가 메뉴를 추가하려면:

  1. 에디터에서 해당 가로 메뉴를 선택합니다.
  2. 메뉴 관리를 클릭합니다.
  3. 패널 하단에서 + 아이템 추가를 클릭합니다.
  4. 메가 메뉴를 선택합니다.
  5. 메가 메뉴 제목을 입력합니다.
    도움말: 방문자가 메가 메뉴에 마우스오버하는 제목입니다.
  6. 완료를 클릭합니다.
  7. 메가 메뉴에 콘텐츠를 추가합니다.
    1. (관리 메뉴 패널에서) 컨테이너 편집을 클릭합니다.
    2. 필요한 요소를 컨테이너에 추가합니다.
메뉴 관리 패널에서 편집을 클릭해 새 메가 메뉴 컨테이너에 요소 추가 시작

메가 메뉴 컨테이너 레이아웃 조정하기

메가 메뉴에 원하는 요소를 추가한 후, 페이지 구조에 맞게 레이아웃을 변경하세요. 간격을 조정하고 컨테이너가 늘어나는 정도를 결정할 수 있습니다. 

레이아웃을 변경하려면:

  1. 에디터에서 해당 메뉴를 선택합니다.
  2. 레이아웃 아이콘을 클릭합니다.
  3. 메가 메뉴를 클릭합니다.
  4. 옵션을 사용해 레이아웃을 조정합니다.
    • 컨테이너 늘리기: 컨테이너를 방문자 화면의 전체 너비로 늘릴지 여부를 결정합니다. 비활성화하면 캔버스 또는 속성 패널에서 원하는 너비를 설정할 수 있습니다.
    • 여백: 메가 메뉴 컨테이너와 화면 가장자리 사이에 여백을 추가합니다(px 또는 %).
    • 아이템 및 컨테이너 간격: 슬라이더를 끌어 메뉴와 메가 메뉴 컨테이너 사이의 간격을 조정합니다.
Studio 에디터 메뉴 레이아웃 패널에 있는 메가 메뉴 탭

메가 메뉴 디자인하기

컨테이너의 레이아웃을 조정한 후에는 테두리, 배경 등을 디자인하세요. 일관된 디자인을 유지할 수 있도록 메가 메뉴에 적용한 변경 사항은 추가한 모든 하위 메뉴에도 적용됩니다.

컨테이너의 디자인을 사용자 지정하려면:

  1. 에디터에서 해당 메뉴를 선택합니다.
  2. 에디터 오른쪽 상단에서 속성 열기 화살표를 클릭합니다.
Studio 에디터에서 속성 패널을 여는 스크린샷
  1. 요소 선택 드롭다운 메뉴에서 하위 메뉴 컨테이너를 선택합니다.
  2. 사용 가능한 옵션을 사용해 컨테이너를 디자인합니다.
    • 배경 채우기: 컨테이너의 색상, 그라데이션 또는 이미지 배경을 설정합니다. 다양한 투명도의 배경 레이어를 추가할 수 있습니다. 
    • 테두리: 컨테이너의 테두리를 추가하고 디자인합니다.
    • 모서리: 컨테이너의 모서리를 더 둥글게 또는 각지게 만듭니다. 
    • 음영: 3D 효과를 위해 컨테이너 뒤에 음영을 추가합니다.
속성 패널에서 하위 메뉴 컨테이너를 디자인해 메가 메뉴에 사용 가능한 옵션을 보여주는 디자인

도움이 되었나요?

|