• 가이드

커스텀 상단 만들기 (헤더, 상단 디자인)

상단 숨김섹션 고정 옵션을 활용해 커스텀 상단 섹션을 디자인할 수 있습니다. 기본 상단을 이용할 수 없거나, 특정 페이지에서 특별한 상단 디자인이 필요할 때 이용할 수 있습니다.

설정방법

기본 상단을 숨기는 방법을 설명합니다.

  1. 디자인 모드에 접속합니다. 접속방법
  2. 왼쪽 상단의 메뉴 관리 ≡ 아이콘을 클릭합니다.
  3. 커스텀 상단을 추가할 메뉴명을 클릭하고, 메뉴명 오른쪽의 ⓘ 아이콘을 클릭합니다.

  4. 메뉴 설정 창이 켜지면 옵션 항목에서 상단 숨김 옵션을 선택합니다.

  5. 메뉴 설정 창 바깥 영역을 클릭해 설정을 완료합니다.
  6. 메뉴 관리를 끄고, 상단 섹션이 숨겨졌는지 확인합니다.

상단 섹션을 숨긴 메뉴에 새로운 빈 섹션을 추가합니다.

  1. 위젯이 없는 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

    참고: 위젯에 마우스 오른쪽 버튼을 클릭하면 위젯 컨텍스트 메뉴가 나타납니다. 위젯이 없는 섹션에 마우스 오른쪽 버튼을 클릭하세요.
  2. 컨텍스트 메뉴가 나오면 빈 섹션추가를 클릭합니다.
  3. 새로운 빈 섹션이 추가됩니다.

섹션 고정 옵션을 설정하고, 해당 섹션을 디자인하기 위해 스타일을 설정합니다.

  1. 빈 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  2. 섹션 컨텍스트 메뉴가 나오면 섹션 설정을 클릭합니다.
  3. 아래 그림과 설명을 참고해 섹션 고정 옵션을 설정하고, 필요에 따라 배경, 간격 등 스타일을 지정합니다.

  4. 빈 섹션의 중앙에 표시된 ⨁를 클릭합니다.
  5. 위젯 목록이 나오면 텍스트 위젯, 메뉴 리스트 위젯, 여백 위젯 등을 사용해 상단 메뉴를 디자인합니다. (로고 위젯, 메뉴 위젯, 로그인/장바구니 위젯 등은 상단 전용 위젯으로, 커스텀 상단 디자인에는 사용할 수 없습니다.)

    참고: 메뉴 리스트 위젯을 사용하는 경우, 메뉴 리스트 설정을 열어 메뉴 항목에서 모바일에서 표시 옵션을 선택해야 모바일 버전에서도 메뉴가 나타납니다.

디자인 완료한 섹션을 페이지 상단으로 이동시킵니다.

  1. 디자인한 섹션에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.

    참고: 위젯에 마우스 오른쪽 버튼을 클릭하면 위젯 컨텍스트 메뉴가 나타납니다. 위젯이 없는 섹션에 마우스 오른쪽 버튼을 클릭하세요.
  2. 섹션 컨텍스트 메뉴가 나오면 위로 이동을 클릭합니다.

  3. 섹션이 페이지 상단에 위치할 때까지 이동을 계속합니다.

커스텀 상단은 PC에서는 디자인한 그대로 표시되지만, 모바일에서는 문제가 발생할 수 있습니다. 이때 사용자는 모바일 뷰포트로 전환해, 별도의 모바일 전용 커스텀 상단을 수정할 수 있습니다.

  1. 뷰포트를 모바일로 전환합니다. 뷰포트 변경방법
  2. 자동으로 구성된 커스텀 상단 섹션의 왼쪽에 위치한 눈 모양 아이콘을 클릭합니다. (섹션을 숨기면 PC에서는 이전 디자인이 유지되지만, 모바일에서는 보이지 않게 됩니다.)

  3. 위젯이 없는 영역에 마우스 포인터를 올리고, 마우스 오른쪽 버튼을 클릭합니다.
  4. 섹션 컨텍스트 메뉴가 나오면 모바일 전용 섹션추가를 클릭합니다.

  5. 새로운 모바일 전용 섹션이 생기면 ⨁ 아이콘을 클릭해 위젯을 추가하여, 모바일 전용 커스텀 상단을 디자인합니다.

    참고: 메뉴 리스트 위젯으로 상단 메뉴를 추가할 때 메뉴가 정상적으로 나열되지 않으면 메뉴 리스트의 디자인을 변경해 보세요. 디자인 탭에서 다른 디자인 버튼을 클릭해 변경할 수 있습니다.
  6. (선택 사항) 만약 디자인한 모바일 전용 커스텀 상단이 페이지 상단에 위치하지 않는 경우, 해당 섹션을 위로 이동시켜 주세요.

  1. 디자인 모드 오른쪽 상단의 미리보기 아이콘을 클릭합니다.
  2. 마우스 휠 스크롤을 내렸을 때, 상단 메뉴가 따라오는지 확인합니다.
  3. 다른 메뉴를 클릭했을 때, 기본 상단 디자인이 나오는지 확인합니다.
  4. 문제가 없다면 디자인 모드로 돌아가 게시하기 버튼을 클릭합니다.

관련 도움말

상단 섹션 외 하단 섹션도 사용자가 직접 디자인할 수 있습니다. 하단 숨김 및 섹션 반복 기능을 활용해 나만의 커스텀 하단을 디자인해 보세요.

커스텀 하단 만들기 (푸터)

목록으로

시작이 어려우신가요?

교육 받아보시면 쉽습니다.

온라인 교육 바로가기

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

아임웹에서 당신의 생각을 표현해보세요.
568.6K
누적 사이트 이용 수
이미 수만 명이 아임웹 팬이 되어
각자의 생각을 표현하고 있습니다.
315
일 평균 사이트 개설 수
지금 이 순간에도 매일
새로운 브랜드가 소개되고 있습니다.
2.9K
전국 파트너/리셀러 수

아임웹 공식제휴사

아임웹은 페이팔, KG이니시스, 네이버, KCP, 나이스페이, 엑심베이 공식파트너입니다.