상단은 웹사이트의 분위기를 결정 짓는 매우 중요한 요소 중 하나입니다.
위멘토(별찌)에서 상단이란 웹사이트 최상단에 위치한 로고, 메뉴, 마이페이지 등이 들어가는 영역을 가리킵니다.
워드로 치면 머리말이며, 웹사이트 개발 때는 전문용어로 헤더(Header) 라고 부릅니다.
이 섹션에서는 위멘토(별찌) 상단 디자인 메뉴가 가진 주요 기능 및 특징에 대해 알아보겠습니다.
우리는 페이지 본문을 디자인할 때, 메뉴를 추가한 다음, 위젯을 추가해 콘텐츠를 삽입하고, 필요한 경우 섹션을 나누기도 합니다.
상단 역시 기본적인 제작 방식은 같습니다. 상단은 가로로 최대 3개 단까지 나눌 수 있으며, 각 단마다 필요한 위젯을 나누어 배치할 수 있습니다.
1) 위젯 배치에 따라 자동으로 나눠지는 상단 섹션
처음 1개 위젯을 추가하면 상단 섹션은 기본적으로 1개 단으로 삽입됩니다.
다음으로 새로운 위젯을 왼쪽 또는 오른쪽에 추가하는 경우 자동으로 새로운 단이 생겨나며, 왼쪽/가운데/오른쪽 모두 위젯을 추가하는 경우, 3개 단으로 설정됩니다.
2) 단 크기 조절하는 방법
단의 크기는 파란 점선을 통해 구분이 가능합니다. 각 단은 파란 세로 점선을 마우스로 좌우로 드래그함으로써 그 크기를 조절할 수 있습니다.
페이지 본문을 여러 개의 섹션으로 구성할 수 있듯, 상단도 2개 이상의 섹션들로 구성할 수 있게 되었습니다.
이로써 더욱 차별적인 상단 디자인이 가능하게 되었으며, 특정 섹션은 마우스 스크롤을 해도 상단에 고정되도록 설정할 수 있는 기능도 추가되었습니다.
1) 상단 전용 섹션을 추가하는 방법
상단 영역에 마우스 커서를 놓고 우클릭하면 보조 메뉴가 나타납니다. 보조 메뉴에서 [빈 섹션 추가]를 클릭하여 섹션을 여러 개로 늘릴 수 있습니다.
2) 섹션 단위 상단 스크롤 고정하기
상단 전용 섹션 좌측에 위치한 [핀] 아이콘을 클릭하는 것으로, 원하는 섹션을 상단에 고정시킬 수 있습니다.
상단에 고정되길 원하는 섹션만 핀을 클릭해주세요. 물론 모든 섹션 핀을 클릭하면 모든 섹션들을 고정시키는 것도 가능합니다.
3) 상단 고정메뉴 설정하기
상단 섹션 고정과는 별개 디자인 스타일로 [상단 고정메뉴]를 만들 수도 있습니다.
기본 상단 디자인과는 다른 스타일로 상단 고정메뉴를 만들고 싶은 경우 사용할 수 있습니다.
상단 디자인을 위한 다양한 전용 위젯들이 추가되었으며, 이 전용 위젯들을 사용해 상단 메뉴를 풍성하게 꾸밀 수 있습니다.
1) 위젯을 추가하는 방법
빈 상단 전용 섹션을 추가하면 처음에는 한 개 위젯만 추가가 가능합니다.
위젯 추가 후 필요하다면, 마우스 커서를 상단 섹션 위쪽 끄트머리에 놓으면, 플러스(+) 아이콘이 나타납니다. 이 플러스(+) 아이콘을 클릭하는 것으로 새로운 위젯을 추가할 수 있습니다.
추가로 왼쪽 끄트머리에 마우스 커서를 대면, 왼쪽 단에 위젯이 추가되며, 오른쪽 끄트머리에 오른쪽 단에 추가됩니다.
2) 위젯을 배치하는 방법
기존 위젯 위치 이동 방법과 똑같이 마우스로 위젯을 클릭 후 드래그하는 것으로 위치를 옮길 수 있습니다.
위젯이 위치하는 단 역시 좌 또는 우로 드래그하여 변경이 가능합니다. 보다 간편하게 위젯이 위치한 단을 변경하려면, 위젯 보조 메뉴를 열고 '이동' 메뉴를 클릭해 왼쪽/가운데/오른쪽을 선택해주세요.
3) 위젯 디자인 변경 및 설정 방법
상단 전용 위젯 역시 고유의 설정을 가지고 있습니다. 설정 창을 열면 각 위젯이 가진 디자인 및 옵션을 변경할 수 있습니다.
상단이 본문 배경과 '겹치기'한 상태와 그렇지 않은 기본 상태의 상단 디자인을 다르게 꾸밀 수 있습니다.
기본 상단과 겹치기 한 상단 디자인 별도 관리 가능
디자인 모드 상단 중앙에 위치한 탭 메뉴를 클릭해 '기본 상단' 또는 '겹치기 한 상단' 디자인을 따로따로 관리할 수 있습니다.
구형 상단의 경우 모바일 버전은 별도 디자인할 수 있는 옵션이 매우 적었습니다. 그러나 신형 상단의 경우 PC 상단을 디자인하듯, 똑같이 편집이 가능해졌습니다.
도움말에 찾으시는 답변이 없으신가요?
