# 실제 블록으로 만든 헤더 및 푸터 빌더

URL: https://canvaswp.com/ko/header-builder/
Updated: 2026-11-03

헤더 빌더

헤더, 푸터, 상단 바, 메가 메뉴, 사이드 패널, 페이지 제목, 히어로는 블록 편집기에서 디자인한 다음 사이트 전체 또는 개별 페이지에 지정하는 항목입니다.

[데모에서 확인하기](https://canvaswp.com/ko/demos/) [편집기 작동 방식](https://canvaswp.com/ko/editor/)

최종 업데이트 2026년 11월 3일

헤더를 만드는 방법

## 예상한 대로 중첩되는 블록

헤더 레코드에는 Header Root가 들어 있습니다. Header Root에는 Container가 들어 있고, Container에는 Zone이 들어 있습니다. Zone은 헤더 행의 한 칸입니다. 첫 번째 칸에는 로고, 다음 칸에는 메뉴, 마지막 칸에는 검색 아이콘과 장바구니가 들어갑니다.

### 영역으로 레이아웃을 구성합니다

영역은 요소가 어디에 놓일지를 결정합니다. 영역 하나를 오른쪽으로 밀거나, 검색과 장바구니를 하나의 묶음으로 그룹화하거나, 마크업을 줄이고 싶을 때는 영역을 그대로 비워 둘 수 있습니다.

- 영역은 브레이크포인트마다 순서가 바뀌므로, 하나의 설정으로 데스크톱, 태블릿, 휴대폰을 모두 적용합니다
- 각 영역은 특정 기기 등급에만 표시되도록 제한할 수 있으며, 다른 기기의 마크업에서는 제외됩니다.
- 내 CSS에서 접근하고 싶은 영역에 추가 클래스 지정

[라이브러리의 모든 블록](https://canvaswp.com/ko/blocks/)

### 헤더 블록 22개

#### Header Root

헤더 자체입니다. 나머지 모든 요소는 그 안에 중첩됩니다.

#### Header Container

너비 컨테이너 기능으로 헤더를 상자형, 전체 너비, 또는 브레이크포인트에 따라 두 방식을 혼합한 형태로 배치할 수 있습니다.

#### Header Zone

헤더 행의 셀입니다. 영역은 요소를 담고, 그 위치를 정합니다.

#### Header Logo

고정 상태와 다크 상태를 위한 별도 파일을 포함한 로고입니다.

#### Header Navigation

드롭다운과 메가 메뉴 패널을 포함한 기본 메뉴입니다.

#### Header Search

입력란을 여는 검색 아이콘, 또는 항상 열려 있는 입력란.

#### Header Cart

항목 수와 드롭다운 요약이 포함된 WooCommerce 장바구니입니다.

#### Header Social

한 번 설정해 둔 프로필에서 가져온 소셜 아이콘 한 줄.

#### Header Button

일반적인 크기, 스타일, 링크 설정을 갖춘 콜 투 액션 버튼입니다.

#### Header Icon Link

전화번호나 계정 페이지 등 어디로든 연결할 수 있는 단일 아이콘입니다.

#### Header Info

연락처, 주소, 영업시간을 담는 작은 블록입니다.

#### Header Shop Search

매장용 상품 검색으로, 내 카탈로그 범위 안에서 작동합니다.

#### Header Topbar

헤더 행 위에 상단 바 레코드를 배치합니다.

#### Mega Menu Column

메가 메뉴 패널 안에 있는 열이므로, 패널에 실제 레이아웃을 구성할 수 있습니다.

레이아웃 프리셋

## 시작할 수 있는 프리셋 7개

프리셋은 한 번의 클릭으로 적용하는 레이아웃 설정 묶음입니다. 원하는 동작을 고른 다음, 블록 설정에서 원하는 내용을 자유롭게 바꾸세요.

### 투명성

배경이 없어서 헤더 뒤에 놓인 요소가 그대로 보입니다.

### 반투명

반투명 배경을 사용해 뒤의 이미지가 계속 보이고 텍스트도 읽기 쉽게 유지됩니다.

### 플로팅

헤더가 페이지 안에 떠 있으며, 모든 가장자리에 여백이 있습니다.

### 플로팅 반투명

플로팅 방식이며, 반투명 배경도 사용할 수 있습니다.

### 작은 플로팅

높이를 줄인 플로팅 헤더입니다.

### 전체 너비 고정

뷰포트 전체 너비에 걸쳐 표시되며, 페이지를 스크롤해도 고정된 상태를 유지합니다.

### 위로 스크롤하면 고정

방문자가 아래로 스크롤하면 상단에서 사라지고, 다시 위로 스크롤하면 돌아옵니다.

재사용 가능한 요소

## 상단 바, 메가 메뉴, 사이드 패널도 모두 레코드입니다

각각 한 번씩 디자인해 사이트 기본값으로 설정한 다음, 다른 디자인을 원하는 페이지에서는 이를 재정의하세요.

### 상단 바

상단 바는 전화번호, 영업시간, 언어 전환기, 프로모션 등 자체 블록을 가진 독립된 레코드입니다. Header Topbar 블록은 상단 바를 헤더 행 위에 배치합니다. 전체 사이트에 하나를 지정하고 페이지별로 재정의하세요.

88개 데모 중 12개는 편집 가능한 상단 바를 포함합니다.

### 메가 메뉴

메가 메뉴는 블록으로 디자인하고 메가 메뉴 블록으로 렌더링하는 레코드입니다. 그러면 메뉴 항목을 누를 때 전체 너비 패널이 열리며, 이 패널에는 열, 이미지, 버튼 또는 기타 블록을 넣을 수 있습니다.

Mega Menu Column keeps the panel on a grid. 5 demos ship one.

### 사이드 패널

사이드 패널은 화면 가장자리에서 슬라이드되어 열리는 레코드입니다. 보조 메뉴, 장바구니, 문의 양식 또는 헤더를 복잡하게 만들 수 있는 세부 정보 묶음에 사용합니다.

6개 데모에는 트리거와 이미 연결된 사이드 패널이 포함되어 있습니다.

항목을 지정하는 작업은 필드 설정입니다. 기본 사이드 패널, 열리는 가장자리, 페이지를 밀어낼지 위에 띄울지, 트리거의 모양을 선택합니다. 상단 바, 메가 메뉴, 푸터도 같은 방식으로 지정합니다.

헤더 옵션

## 94개의 필드, 테마 옵션에서 가장 큰 섹션

테마 옵션에는 개별 레코드가 소유해서는 안 되는 사이트 전체 헤더 설정이 들어 있습니다. 데모를 가져오면 이 설정이 모두 자동으로 적용되며, 원하는 항목만 변경하면 됩니다.

- 테마 옵션 필드 533개 중 94개는 헤더에 속합니다
- 기본 헤더 레코드를 설정한 다음, 원하는 페이지에서 이를 재정의하세요.
- 고정 동작, 높이, 간격, 모바일 브레이크포인트
- 모든 필드는 참조 문서에 설명되어 있습니다

[테마 옵션 533개 전체](https://canvaswp.com/ko/features/#options)

**테마 옵션, 헤더.** 실행 중인 사이트에서 촬영한 패널 화면입니다.

패턴

## 시작점으로 쓸 헤더 패턴 40개

패턴을 삽입하면 순서를 바꾸고, 이름을 바꾸고, 삭제할 수 있는 일반 블록이 추가됩니다. 잠긴 항목은 없으며, 접근할 수 없는 레이아웃을 찍은 스크린샷도 없습니다.

- 다른 어떤 카테고리보다 많은 40개의 헤더 패턴
- 페이지 맨 아래를 위한 푸터 패턴 16개
- 총 183개 패턴, 17개 카테고리에 분류
- 이미 사용 중인 인serter의 패턴 탭에서 삽입됨

[카테고리별 패턴](https://canvaswp.com/ko/editor/#patterns)

푸터 빌더

## 푸터와 저작권 바는 별도의 항목입니다

푸터는 헤더와 똑같이 작동합니다. 푸터 레코드에는 컬럼이 담기고, 저작권 레코드에는 그 아래의 얇은 바가 담기므로, 위쪽 디자인을 건드리지 않고도 사이트 전체의 저작권 문구를 바꿀 수 있습니다.

### 블록 6개와 옵션 17개

회사 소개 문구에는 Footer About, 주소와 전화번호에는 Footer Contacts, 피드에는 Footer Instagram, 위젯으로 할 수 있는 모든 작업에는 Footer Widget Area, 깔끔한 링크 목록에는 Widget Links, 하단 바에는 Copyrights를 사용하세요.

- 헤더와 같이 푸터를 사이트 전체 또는 페이지별로 지정
- 아래쪽 바를 위한 별도의 저작권 레코드
- 시작하기 좋은 푸터 패턴 16개
- 페이지를 만드는 동안 편집 캔버스에서 미리 보기

**테마 옵션, 푸터.** 푸터 레코드 뒤에 사이트 전역 필드 17개가 있습니다.

페이지 제목

## 4가지 스타일, 또는 직접 디자인하세요

헤더 아래 띠는 그 자체로 독립적인 디자인 영역이며, 57개의 옵션을 제공합니다. 게시하는 모든 페이지에서 페이지별로 설정을 재정의할 수도 있습니다.

**테마 옵션, 페이지 제목.** 필드 57개로, 제품에서 세 번째로 큰 섹션입니다.

### 기본, 미니, 템플릿 또는 커스텀

기본은 표준 밴드입니다. Mini는 하위 페이지용 간결한 버전입니다. Template는 지정된 전문 레이아웃 중 하나를 선택합니다. Custom은 직접 블록으로 구성한 페이지 제목 항목을 렌더링합니다.

- 페이지 제목, 제목, 부제목, 브레드크럼, 버튼 블록
- 사이트 전체에 적용되는 기본값으로, 개별 페이지에서 재정의할 수 있습니다.
- 배경, 높이, 정렬, 브레드크럼은 모두 설정 항목입니다.

[기능 목록의 페이지 제목](https://canvaswp.com/ko/features/#page-titles)

Hero 및 Slider

## 슬롯 블록으로 템플릿에 배치됨

Hero와 Slider는 헤더와 마찬가지로 각각 독립된 레코드입니다. 슬롯 블록은 블록 템플릿 안에 놓여 현재 보고 있는 페이지에 할당된 Hero 또는 Slider를 가져옵니다.

- 블록으로 구성된 Hero 레코드와 Slider 레코드
- Hero Slot 및 Slider Slot 블록은 콘텐츠가 아니라 템플릿에 들어 있습니다
- 템플릿 하나가 모든 페이지에 쓰이며, 각 페이지마다 고유한 도입부를 가집니다.
- 88개 데모 중 12개에 편집 가능한 슬라이더가 포함되어 있습니다

[Hero 및 Slider](https://canvaswp.com/ko/features/#heroes)

편집기에서

## 헤더를 보이는 그 자리에서 직접 만드세요

슬롯 블록은 헤더, 상단 바, 페이지 제목, 히어로, 푸터를 편집 캔버스에 그대로 보여 주므로, 페이지를 열면 단락 상자가 아니라 실제 페이지처럼 보입니다.

블록 편집기에 보이는 페이지이며, 헤더와 푸터는 방문자에게 보이는 것과 같은 코드로 콘텐츠 주변에 표시됩니다.

### 렌더러 하나

편집 화면에서 보이는 헤더는 방문자에게 표시되는 것과 같은 코드로 그려지므로, 따로 맞춰 둘 미리보기가 없습니다.

### 전체 또는 페이지별

사이트의 기본 헤더, 상단 바, 페이지 제목, 히어로, 푸터를 설정한 다음, 각 페이지의 설정에서 개별 페이지마다 원하는 항목을 재정의할 수 있습니다.

### 기본부터 반응형 설계

영역은 브레이크포인트별로 순서를 바꿀 수 있고 기기 등급별로 제한할 수 있어, 다른 사람이 보기 전에 편집기에서 휴대폰 레이아웃을 확인할 수 있습니다.

[편집기의 모든 기능](https://canvaswp.com/ko/editor/)

질문

## 헤더 빌더 소개

나머지 답변은 [전체 FAQ](https://canvaswp.com/ko/faq/)와 [문서](https://docs.canvaswp.com/how-to-build-a-header)에서 확인할 수 있습니다.

**추가 헤더가 모바일에도 필요한가요?**

하나의 Canvas 헤더로 대부분 모바일까지 함께 처리할 수 있습니다. 영역이 브레이크포인트별로 순서가 바뀌고, 각 영역을 기기 등급별로 제한할 수 있기 때문입니다. 헤더 레코드 하나로 휴대폰에서 로고를 가운데에 배치하고, 연락처 정보를 숨기고, 메뉴를 토글 뒤로 옮길 수 있습니다. 레이아웃을 고치려는 것이 아니라 정말로 다른 디자인을 원할 때만 두 번째 레코드를 만드세요.

**한 페이지에 다른 헤더를 사용할 수 있나요?**

네, 모든 Canvas 헤더, 상단 바, 페이지 제목, 푸터에는 사이트 전체 기본값과 페이지별 재정의 설정이 있습니다. 그래서 랜딩 페이지에는 투명 헤더와 로고만 있는 상단 바를 적용하고, 나머지 사이트는 고유한 설정을 유지할 수 있습니다.

**헤더는 위젯 영역인가요, 메뉴인가요?**

Canvas 헤더는 그 둘 중 어느 것도 아닙니다. 페이지와 똑같이 블록 편집기에서 편집하는 레코드입니다. 헤더 안의 내비게이션, 로고, 검색, 장바구니, 버튼은 각각 고유한 설정 패널을 가진 블록입니다.

**라이선스가 만료되면 내 헤더는 어떻게 되나요?**

Canvas 라이선스가 만료되면 헤더와 사이트의 나머지 부분은 지금과 똑같이 계속 렌더링됩니다. 일시 중지되는 것은 서비스입니다: 갱신하기 전까지 업데이트, 데모 가져오기, AI, 프리미엄 블록 편집이 중단됩니다. 라이선스 확인이 당사 서버에 연결되지 못하면 14일의 유예 기간이 있습니다.

**사이트 편집기를 계속 사용할 수 있나요?**

네, Canvas는 실제 블록 템플릿을 기반으로 만들어져 템플릿과 템플릿 파트는 WordPress가 보관하는 위치에 그대로 있으며, 헤더 레코드는 블록을 통해 템플릿에 배치됩니다. [편집기 작동 방식 알아보기](https://canvaswp.com/ko/editor/).