상단 디자인 설정 주요 기능 알아보기

아임웹에서 상단이란 웹사이트 최상단에 위치한 로고, 메뉴, 마이페이지 등이 들어가는 영역을 가리킵니다. 이 도움말에서는 아임웹 상단 디자인 모드의 주요 기능들에 대해 설명합니다.

Point 1. 최대 3개 열로 구성

사용자는 페이지 본문을 디자인할 때, 메뉴를 추가한 다음, 위젯을 추가해 콘텐츠를 삽입하고, 필요한 경우 섹션을 나누기도 합니다. 상단 역시 기본적인 제작 방식은 같습니다. 상단은 가로로 최대 3개 열까지 나눌 수 있으며, 각 열마다 필요한 위젯을 나누어 배치할 수 있습니다.

1. 위젯 배치에 따라 자동으로 나눠지는 상단 섹션

상단에 위젯을 추가할 수 있습니다. 추가한 위젯은 왼쪽/가운데/오른쪽으로 배치할 수 있으며, 배치된 위젯의 개수에 따라 최대 3개 열로 구성됩니다.


2. 열 너비 조절 방법

열의 너비를 조절할 수 있습니다. 열의 너비는 파란 점선을 통해 구분이 가능하며, 파란 점선을 마우스 클릭 후 좌우로 드래그함으로써 그 크기를 조절할 수 있습니다. 위젯이 차지하는 영역 대비 열의 너비가 모자라면, 해당 위젯은 정상적으로 표시되지 않을 수 있습니다.


Point 2. 다수의 행으로 구성 가능

페이지 본문을 여러 개의 섹션으로 구성할 수 있듯, 상단도 2개 이상의 섹션들로 구성할 수 있습니다.

1. 상단 섹션을 추가 방법

상단 위젯이 없는 영역에 마우스 포인터를 올리고 마우스 오른쪽 버튼을 클릭하면 컨텍스트 메뉴가 나타납니다. 컨텍스트 메뉴에서 빈 섹션 추가를 클릭해 섹션을 여러 개로 추가할 수 있습니다.

2. 섹션 단위로 상단 스크롤 고정하기

마우스 휠 스크롤 시 상단 섹션이 브라우저 최상단에 고정되도록 설정할 수 있습니다. 섹션을 여러 개 사용하시는 경우 특정 섹션만 고정되도록 개별 설정도 가능합니다.상단에 고정되길 원하는 섹션의 왼쪽 상단에 위치한 핀 아이콘을 클릭해 보세요. 상단 섹션 고정하기


3. 상단 고정메뉴 설정하기

마우스 스크롤 시 기본 상단 디자인과는 완전히 다른 디자인의 상단이 나타나도록 설정할 수도 있습니다. 오른쪽 상단 고정메뉴 설정을 클릭해 보세요.

Point 3. 상단 전용 위젯

로고, 로그인/장바구니, 메뉴 버튼 등 상단 디자인을 위한 전용 위젯들이 제공됩니다. 상단 전용 위젯 살펴보기

1. 위젯 추가 방법

마우스 포인터를 상단에 올리면 위젯 추가  아이콘이 나타납니다. 이 아이콘을 클릭하면 위젯 목록이 나타납니다.

2. 위젯 배치 방법

기존 위젯 위치 이동 방법과 똑같이 마우스로 위젯을 클릭 후 드래그 하는 것으로 위치를 옮길 수 있습니다. 위젯이 위치하는 열 역시 왼쪽 또는 오른쪽으로 드래그 하여 변경할 수 있습니다.


3. 위젯 디자인 변경 및 설정 방법

위젯 설정을 열면 각 위젯이 가진 고유의 옵션을 변경할 수 있습니다.

Point 4. 기본 상단과 겹치기 상단 디자인

상단 디자인은 크게 기본겹치기 상태로 나눠집니다. 겹치기란 상단 기본 디자인과 본문 배경 이미지를 겹치는 기능입니다. 따라서 일부 설정을 제외하고 디자인을 완전 다르게 할 수는 없지만 일부 설정을 다르게 지정할 수 있습니다.

상단 기본을 먼저 제작하고 겹치기 메뉴로 이동해 배경 이미지 어둡기 정도에 맞춰 로고, 메뉴 색상 등 설정을 변경해 보세요.


Point 5. 모바일 상단 디자인 가능

뷰포트모바일로 변경하여, 모바일 상단 디자인을 변경할 수 있습니다. 모바일 상단 편집하기


  1. 상단 기본과 겹치기 상태를 전환해가며 비교/디자인할 수 있습니다.
  2. 섹션이 여러 개인 경우, 원하는 섹션만 핀을 클릭해, 상단에 메뉴를 고정시킬 수 있습니다.
  3. 원하는 위젯을 추가할 수 있으며, 위치 역시 마음대로 변경이 가능합니다.
  4. PC와 마찬가지로 섹션 설정을 통해, 배경색, 글자색, 간격 등을 조절할 수 있습니다.
  5. 평소에는 숨겨져 있다가, 메뉴를 터치하면 나타나는 펼침메뉴를 넣는 것도 가능합니다.
  6. 뷰포트를 변경해, 언제든 PC와 모바일 상단 디자인을 비교해가며 디자인할 수 있습니다.



자주 묻는 질문 BEST

목록으로