사이트의 분위기를 설정하는 가장 중요한 요소 중 하나는 바로 로고와 상단 영역입니다. 이 섹션에서는 상단 설정에 대한 설명을 다룹니다.

상단 설정 진입 방법: 메뉴 및 로고가 있는 상단 영역에서 마우스 오른쪽 버튼을 누른 후 상단 설정을 누르면 오른쪽 사이드바에서 상단 설정창이 나타납니다.

상단 설정 저장방법: 상단 설정과 관련된 오른쪽 창을 모두 닫으면 저장 여부를 묻는 대화상자가 나타납니다. 이 때 저장 버튼을 누르면 저장됩니다.

로고 변경하기

기본 로고는 사이트명이 텍스트로 노출됩니다. 이미지나 텍스트를 변경하고 싶다면 다음 단계를 따르세요.

1. 상단 설정창에 진입합니다.
2. 로고/색상 항목의 Logo 부분을 누릅니다.
3. 로고 설정창이 더 나타납니다.
4. 로고를 이미지로 대체하고 싶다면 로고 이미지 사용에 체크박스를 누릅니다.
5. 업로드 버튼을 눌러 이미지를 업로드 합니다.
6. 텍스트를 표시하고 싶지 않다면 로고 텍스트의 체크박스를 해제합니다.

상단 영역 색상 변경

로고와 마찬가지로 상단 설정의 로고/색상 영역을 통해 상단 영역의 색상을 조정할 수 있습니다.

배경: 상단바의 전체적인 배경색을 설정합니다.
활성화: 현재 위치한 페이지를 표시하는 메뉴명의 색상을 설정합니다.
비활성: 기본 메뉴명의 색상을 설정합니다.
Hover: 메뉴에 마우스 커서가 올라갔을 때 변할 색상을설정합니다.

메인 메뉴 스타일 변경

로고나 메뉴의 정렬 및 위치를 변경할 수 있습니다.

1. 메인 메뉴 설정창이 나타나면 정렬 바꾸기 버튼을 누릅니다.

2. 

   위 그림과 같은 유형 중 원하는 항목을 선택합니다.

메인 메뉴의 활성화 스타일도 변경할 수 있습니다.

메인 메뉴 설정창에서 활성화 스타일 항목의 활성화 모양을 누르고 원하는 모양을 선택하면 됩니다.

메뉴 공통 항목에서는 메뉴에 표시되는 텍스트에 대한 설정도 가능합니다.

이 설정에서는 모양에 대해서만 선택할 수 있으며 색상은 상단 설정의 로고/색상 항목에서 제어할 수 있습니다.

서브메뉴(풀다운) 스타일 설정

대메뉴의 하위에 속한 메뉴(서브메뉴)는 데스크톱에서 마우스를 올리면 풀다운으로 표시됩니다. 메뉴 설정에서 서브 메뉴 항목을 눌러 풀다운 스타일에 대한 설정을 할 수 있습니다.

메뉴(페이지)별로 다른 메뉴 색상과 로고 적용하기

각각의 메뉴별로 다른 색상이나 로고를 적용할 수 있습니다. 예를 들어 메인 페이지에서는 밝은 톤 의 메뉴바와 어두운 톤의 로고를 사용했지만 서브 페이지에서는 반대로 사용하고자 하는 경우에 활용이 가능합니다.

홈페이징은 색상이나 로고와 관련된 부분은 대부분 공통적으로 적용됩니다. 앞서 설명한 메뉴의 정렬, 활성화 모양, 메뉴 텍스트 크기 등 모양과 관련한 것들은 모든 페이지에 공통적으로 적용됩니다.

대신 색상이나 로고와 관련된 부분은 프리셋을 추가하여 페이지별로 다르게 만들 수 있습니다.

1단계: 새로운 프리셋 추가하기

1. 메뉴 설정의 로고/색상 항목의 셀렉트 박스를 누릅니다.
2. 현재 보고 있는 페이지에서 선택한 프리셋은 체크 표시 됩니다.
3. 하단의 사용자 정의 추가를 누릅니다.
4. 기본 프리셋의 색상값과 같은 사용자 정의 프리셋이 추가되며 이 프리셋이 적용됩니다.

2단계: 프리셋 색상 및 로고 설정

새 프리셋을 만들 때 모든 데이터는 기본 프리셋으로부터 복사되므로 기본 프리셋에서 설정한 로고 이미지, 텍스트, 색상값들이 자동으로 포함됩니다.

새로운 프리셋에서 사용할 각종 색상과 로고를 앞서 설명드린 것과 동일한 방법으로 변경합니다.

이곳에서 색상을 변경하거나 로고를 삭제 및 변경하여도 다른 프리셋에는 영향을 미치지 않으니 안 심하고 변경할 수 있습니다.

3단계: 페이지별로 프리셋 적용하기

다른 메뉴(페이지)에서도 새로 추가한 프리셋을 적용하려면 다음과 같은 단계를 따릅니다.

1. 디자인 모드에서 프리셋을 적용할 페이지로 이동합니다.
2. 상단에서 마우스 오른쪽 버튼을 눌러 상단 설정으로 진입합니다.
3. 로고/색상 항목에서 새로 추가한 프리셋을 선택합니다.
4. 설정 창을 닫아 저장합니다.

프리셋은 여러 개 생성이 가능하기 때문에 위 과정을 반복하면 페이지별로 많은 색상을 연출할 수 있습니다.

겹치기

아래 우측 이미지 처럼 겹치기를 사용하면 상단 영역을 본문과 더 자연스럽게 연출할 수 있습니다. 

겹치기는 메뉴(페이지) 단위로 동작합니다. A라는 메뉴에서 발동하더라도 B나 C메뉴에서 발동하지않습니다.

이 효과를 발동하려면 겹치기를 원하는 메뉴의 상단 영역에서 마우스 오른쪽 버튼을 눌러 겹치기를선택하기 만 하면 됩니다.

겹쳐진 상태에서 로고나 메뉴 텍스트 색상이 배경요소와 어울리지 않는다면 프리셋 설정으로 다른색상으로 변경해 주시면 됩니다.

모바일 메뉴 설정

모바일 기기 또는 미리보기에서 브라우저의 폭을 모바일 기기 수준으로 좁힌 상태에서는 메뉴가 감 춰집니다. 왼쪽 상단의 메뉴 버튼을 누르면 모바일 메뉴가 표시됩니다. 이는 대부분의 모바일 웹사 이트에서 사용하는 매우 일반적인 인터페이스입니다.

상단 설정의 모바일 항목에서는 여기서 표시되는 색상을 일부 조정할 수 있습니다.

조정 가능 색상: 프로필 영역 배경색 및 텍스트 색. 단, 모바일 메뉴 색상은 사용자 정의할 수 없습니다.