디자인 모드의 상단 설정에서 활용할 수 있는 기능들에 대해 알려드릴게요!

🚩 상단의 위젯 표시 영역

상단은 배치한 위젯의 위치(왼쪽, 가운데, 오른쪽)에 따라 가로로 최대 3개의 영역으로 나눠져 있는데요 😃
각 영역은 상단에 마우스 포인터를 올려두면, 표시되는 열 구분선(파란색 세로 점선)을 통해 구분할 수 있어요!

🧐 상단의 세부 기능

1 - [디자인 모드로 돌아가기]

이 버튼을 클릭하면, 기존의 디자인 모드로 돌아가서 다시 사이트를 전체적으로 디자인할 수 있어요.

2 - [상단 기본] / [겹치기] 전환 버튼

각 버튼 탭을 클릭하면, 기본 디자인의 상단과 배경이 겹쳐지는 상단을 각각 디자인할 수 있도록 전환돼요!

👉 겹치기 상단이 궁금하다면?

3 - [뷰포트] 전환 버튼

’뷰포트’ 로 명칭하는 이 버튼은 상단뿐만 아니라, 디자인 모드 자체에서 사용하는 전환 버튼이에요.
이 버튼을 통해 상단 설정을 전환해서, PC에서 보이는 상단과 모바일에서 보이는 상단을 다르게 디자인할 수 있어요!

4 - 고정메뉴 활성화 (토글, 설정]

’고정메뉴’ 좌측에 있는 토글을 활성화시키면 사이트에서 스크롤 시, 고정되어 따라 내려오는 상단을 구현할 수 있어요.
토글 옆 [설정] 버튼을 누르면 고정메뉴 상단을 디자인할 수도 있답니다 😊

👉 고정메뉴 구현 방법이 궁금하다면?

5 - 상단 테마

상단 디자인을 시작할 때 기반으로 사용할 수 있는 상단 전용 템플릿이에요!
상단 테마 중에 마음에 드는 테마를 선택하면, 어느 정도 구성이 되어있는 상태에서 상단을 디자인할 수 있어요 😃

6 - 스크롤 고정 (고정핀 아이콘)

섹션 좌측에 있는 고정 핀 아이콘을 클릭하여 활성화시키면, 해당 섹션을 페이지 상단에 고정할 수 있어요.
고정한 섹션은 상단에 고정되어, ‘고정메뉴 상단’ 처럼 스크롤 시 따라 내려와요!

👉 상단 섹션 고정 방법이 궁금하다면?

7 - 상단 열 구분선 (파란색 선)

섹션 구분을 위한 선이에요!
위젯은 이 선에 맞추어 나열할 수 있는데, 포스팅 시작에서 설명한 것처럼 상단은 최대 3개의 열로 나눌 수 있어 3개의 선이 표시돼요.

여기까지 상단에서 제공하는 기능들을 알아봤어요.
상단 기능들을 활용하여 상단 디자인을 구현해 볼까요?

👉상단기능 알아보기 동영상 가이드