상단 디자인 작업환경 살펴보기

시작에 앞서

이번 섹션에서는 상단 디자인 모드에 어떤 메뉴들이 있는지 알아보겠습니다. 상단을 디자인하려면 먼저 상단 설정을 열어야 합니다.

1단계, 상단 영역에 마우스 커서를 놓고, 마우스 오른쪽 버튼을 클릭해보세요.
2단계, 보조 메뉴가 나타나면 가장 위에 '상단 설정'을 클릭합니다.

그럼 아래와 같이 상단 디자인 모드로 진입합니다.




상단 디자인 편집 메뉴 살펴보기

페이지 디자인 모드 내에서도 상단 디자인 편집 모드가 추가되었습니다. 상단 디자인 편집 모드를 켜는 방법은 기존과 동일합니다. 페이지 디자인 모드에서 상단 영역에 마우스 커서를 놓고, 마우스 우클릭을 하면 나타나는 보조 메뉴에서 [상단 설정]을 클릭해주세요.


메뉴 살펴보기

1) 디자인 모드로 돌아가기
상단 디자인 편집 모드를 끄고, 디자인 모드로 돌아갑니다.


2) 상단 기본/겹치기 모드 전환하기
메뉴를 클릭해, 기본 상단 또는 겹치기 한 상단 디자인을 따로따로 관리할 수 있습니다.


3) 뷰포트 변경
모바일 버전 상단 디자인도 사용자가 직접 편집할 수 있게 되었습니다. 뷰포트 변경을 클릭해, 모바일 뷰포트로 변경하면 모바일 전용 상단 디자인을 꾸밀 수 있습니다.


4) 공통 디자인 설정
공통 디자인 설정을 클릭해, 기본적인 글자 색, 메뉴 색, 활성화 메뉴 색, 글꼴 등을 지정할 수 있습니다. 제 경우 상단 디자인 편집 모드에서 공통 디자인 설정 메뉴는, 상단 디자인을 하는 과정에서 일관성 있는 디자인을 위해 주로 브랜드 색상 및 메뉴 색상 확인하는 데 사용합니다.


5) 위젯 추가
각 섹션 위쪽 끄트머리 부분에 마우스 커서를 대면, 위 그림 7번과 같은 (+) 아이콘이 나타납니다. 이를 클릭하여 상단메뉴에 들어갈 위젯을 추가할 수 있습니다.


6) 상단 고정메뉴
상단 고정메뉴는 아래 8번 스크롤 고정과 유사하게, 상단메뉴를 페이지 최상단에 고정시키는 기능입니다. 상단 고정메뉴 제작법은 기본 상단 디자인 제작법과 같지만, 섹션을 추가할 수는 없습니다. 간편하게 페이지 상단에 고정되는 상단메뉴를 만들거나, 기본 상단 디자인과는 다른 색상 구성으로 디자인하고자 할 때 사용할 수 있습니다.


7) 상단 테마
상단 디자인을 다른 테마로 바꿀 수 있습니다.

*이전 상단 디자인으로 돌아가고 싶으신 경우, 상단 테마에서 메뉴를 찾으실 수 있습니다.


8) 스크롤 고정
위 5번 상단 고정메뉴와 유사한 기능이지만, 스크롤 고정의 경우 원하는 특정 섹션만 고정시킬 수 있다는 점이 큰 차별점입니다. 핀 아이콘을 클릭해 고정이 가능합니다. 일부 섹션을 고정하거나, 모든 섹션을 다 고정시킬 수도 있습니다.

*단, 모든 섹션을 고정시키는 경우 본문 페이지의 많은 부분이 상단메뉴에 가려질 수 있으니 주의해주세요.


9) 섹션 구분선
각 섹션 단과 행이 어떻게 나누어졌는지 확인할 수 있습니다. 세로 구분선의 경우 마우스로 드래그하면, 가로 단의 크기를 조절할 수 있습니다.


10) 섹션 설정
ⓘ 아이콘을 클릭해 빠르게 섹션 설정 창을 켤 수 있습니다.



목록으로

한 번 이용하면 팬이 됩니다.

아임웹에서 당신의 생각을 표현해보세요.

53.7K

누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.

157

일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.

154

전국 파트너 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 채널 공식파트너입니다.