워드프레스 Divi 테마의 헤더 디자인은 방문자가 사이트에서 가장 먼저 마주하는 영역이자, 브랜드의 첫인상과 사이트 전체의 탐색 경험을 좌우하는 핵심 요소입니다. Divi의 Theme Builder를 활용하면 코드 없이도 사이트 전역에 적용되는 글로벌 헤더를 직접 설계할 수 있습니다. 이 글에서는 좋은 헤더의 조건부터 Theme Builder로 헤더 템플릿을 만드는 절차, 로고·내비게이션·강조 버튼 배치, 스티키·투명 헤더, 모바일 반응형 헤더까지 개념과 절차를 차근차근 정리합니다.
헤더의 역할과 좋은 헤더의 조건
헤더는 단순한 장식이 아니라 사이트의 길잡이 역할을 합니다. 방문자는 헤더를 통해 “여기가 어떤 사이트인지”, “원하는 정보를 어디서 찾을 수 있는지”를 즉시 판단합니다. 따라서 헤더는 정보가 과하지 않으면서도 핵심 동선을 분명히 보여줘야 합니다.
좋은 헤더는 보통 세 가지 요소로 구성됩니다. 각 요소가 명확한 위계를 가질 때 헤더가 깔끔하게 정리됩니다.
- 로고 — 브랜드 정체성. 보통 왼쪽 상단에 배치하며, 클릭하면 홈으로 이동하도록 합니다.
- 내비게이션(메뉴) — 사이트의 주요 페이지로 가는 길. 항목 수는 5~7개 이내로 압축하는 것이 좋습니다.
- 강조 버튼(CTA) — “문의하기”, “회원가입”, “수강신청”처럼 방문자가 취하길 바라는 핵심 행동을 유도하는 버튼.
이 세 요소가 한 줄에서 시각적 균형을 이루도록 배치하는 것이 헤더 디자인의 출발점입니다.
Divi Theme Builder에서 글로벌 헤더 템플릿 추가하기
Divi는 ‘Theme Builder’라는 전용 도구로 사이트 전역에 적용되는 헤더·푸터·본문 템플릿을 만들 수 있습니다. 글로벌 헤더는 한 번 만들면 모든 페이지에 자동으로 적용되므로, 페이지마다 헤더를 따로 만들 필요가 없습니다.
- 워드프레스 관리자에서 Divi > Theme Builder로 이동합니다.
- 중앙의 ‘Default Website Template'(기본 사이트 템플릿) 영역에서 Add Global Header(글로벌 헤더 추가)를 클릭합니다.
- Build Global Header를 선택해 빈 캔버스에서 직접 만들거나, 미리 만들어진 레이아웃을 불러올 수 있습니다.
- 편집기가 열리면 섹션과 행(Row), 모듈을 추가해 헤더를 구성합니다.
- 완성 후 저장하면 헤더가 전 페이지에 글로벌로 적용됩니다.
글로벌 헤더 캔버스에서는 일반 페이지 빌더와 동일한 방식으로 작업하되, ‘Menu'(메뉴) 모듈처럼 헤더에 특화된 모듈을 활용하는 점이 다릅니다.
로고와 메뉴(내비게이션) 배치하기
가장 빠른 방법은 Divi의 Menu 모듈을 사용하는 것입니다. Menu 모듈 하나에 로고와 워드프레스에서 만든 메뉴를 함께 담을 수 있어, 별도 모듈 없이도 헤더 한 줄을 완성할 수 있습니다.
- 행에 Menu 모듈을 추가합니다.
- Content 탭의 Logo 항목에서 브랜드 로고 이미지를 업로드합니다.
- Menu 항목에서 미리 외모 > 메뉴에서 만들어 둔 메뉴를 선택합니다.
- Design 탭에서 메뉴 글자 크기·색상·간격, 로고 너비를 조정합니다.
- 로고는 왼쪽, 메뉴는 오른쪽 정렬이 가장 보편적이며 안정감을 줍니다.
로고와 메뉴를 더 자유롭게 배치하고 싶다면, 행을 여러 열(Column)로 나눠 한쪽 열에는 Image 모듈(로고), 다른 열에는 Menu 모듈을 넣는 방식도 가능합니다. 이 방법은 CTA 버튼을 함께 배치할 때 유용합니다.
강조 버튼(CTA) 추가하기
헤더에 행동 유도 버튼을 두면 방문자의 전환을 크게 높일 수 있습니다. Divi에서는 Button 모듈을 메뉴 옆 열에 추가하는 방식으로 구현합니다.
- 로고·메뉴가 있는 행에 열을 하나 더 추가하고 Button 모듈을 배치합니다.
- 버튼 텍스트는 “무료 상담”, “지금 신청”처럼 행동을 명확히 표현합니다.
- 배경색은 브랜드의 강조색(포인트 컬러)으로 지정해 다른 메뉴 항목과 시각적으로 구분합니다.
- 버튼은 헤더에 단 하나만 두는 것이 좋습니다. CTA가 여러 개면 집중도가 떨어집니다.
스티키(고정) 헤더와 투명 헤더 개념
스티키 헤더는 페이지를 아래로 스크롤해도 헤더가 화면 상단에 계속 고정되는 방식입니다. 방문자가 언제든 메뉴와 CTA에 접근할 수 있어, 긴 페이지나 랜딩 페이지에서 특히 효과적입니다. Divi에서는 섹션이나 행의 Advanced(고급) > Scroll Effects 또는 Sticky Position(스티키 위치) 옵션을 ‘Stick to Top’으로 설정해 구현합니다.
투명 헤더는 헤더 배경을 투명하게 만들어 아래의 히어로 이미지나 영상이 헤더 뒤로 비치도록 하는 기법입니다. 시각적으로 세련된 인상을 주지만, 글자가 배경에 묻히지 않도록 주의해야 합니다.
- 헤더 섹션 배경을 투명 또는 반투명(rgba)으로 설정합니다.
- 스티키 상태일 때만 배경색이 나타나도록 ‘Sticky Styles’에서 별도 배경색을 지정하면 가독성이 보장됩니다.
- 투명 상태와 스크롤 후 상태의 로고·메뉴 색을 다르게 줘 대비를 유지합니다.
모바일 반응형 헤더(햄버거 메뉴)
모바일 화면에서는 가로 메뉴를 모두 펼칠 공간이 부족하므로, 메뉴를 접어 아이콘 하나로 표시하는 햄버거 메뉴가 표준입니다. Divi의 Menu 모듈은 화면 폭이 좁아지면 자동으로 햄버거 아이콘으로 전환됩니다.
- Menu 모듈 Design 탭에서 햄버거 아이콘 색상과 모바일 메뉴 배경색을 지정할 수 있습니다.
- Divi 편집기 상단의 모바일/태블릿 미리보기 아이콘으로 각 화면에서의 모습을 확인합니다.
- 로고 크기는 모바일에서 별도로 줄여 헤더 높이가 과해지지 않게 합니다.
- CTA 버튼은 모바일에서 숨기거나 햄버거 메뉴 안으로 옮겨 화면을 깔끔하게 유지합니다.
헤더 디자인 팁: 여백·정렬·대비
같은 요소를 쓰더라도 디테일에 따라 완성도가 크게 달라집니다. 다음 세 가지 원칙을 기억하면 헤더가 한결 정돈되어 보입니다.
| 원칙 | 핵심 포인트 |
|---|---|
| 여백(Padding) | 헤더 위아래에 충분한 여백을 둬 답답함을 없앤다. 로고와 화면 가장자리 사이 간격도 일정하게. |
| 정렬(Alignment) | 로고·메뉴·버튼의 세로 중앙선을 맞춘다. 어긋난 정렬은 즉시 어색해 보인다. |
| 대비(Contrast) | 배경과 글자 색의 명도 차를 확보해 메뉴가 또렷이 읽히게 한다. CTA는 강조색으로 차별화. |
참고: 현재 누스쿨은 Elementor 기반입니다 (Divi → Elementor 브리지)
이 글은 누스쿨이 Divi 테마를 사용하던 시기의 자료를 바탕으로 작성되었습니다. 현재 누스쿨은 Elementor 기반으로 운영되고 있어, 위에서 설명한 Divi Theme Builder의 헤더 기능은 Elementor에서 대응하는 방식으로 구현합니다. 개념은 동일하니 아래 대응 관계를 참고하세요.
Divi의 Theme Builder 글로벌 헤더에 대응하는 기능은 Elementor Pro의 Theme Builder에서 만드는 Header 템플릿입니다. Elementor Pro에서는 Templates > Theme Builder > Header에서 새 헤더 템플릿을 만든 뒤, 표시 조건(Display Conditions)을 ‘Entire Site'(전체 사이트)로 지정해 사이트 전역에 적용합니다.
- 로고·메뉴 — Divi의 Menu 모듈 대신 Elementor의 Site Logo 위젯과 Nav Menu 위젯을 조합해 배치합니다.
- CTA 버튼 — Elementor의 Button 위젯을 헤더 컬럼에 추가해 강조색으로 디자인합니다.
- 스티키 헤더 — 헤더 컨테이너의 Advanced > Motion Effects > Sticky를 ‘Top’으로 설정합니다.
- 투명·반응형 — 컨테이너 배경 투명도와 반응형(데스크탑/태블릿/모바일) 편집 기능으로 동일하게 구현하며, Nav Menu 위젯이 모바일에서 햄버거 메뉴로 자동 전환됩니다.
즉, “글로벌 헤더 템플릿을 만들어 전역 적용한다”는 핵심 흐름은 Divi와 Elementor가 동일하며, 도구의 메뉴 위치와 명칭만 다를 뿐입니다.
자주 묻는 질문(FAQ)
글로벌 헤더를 만들면 모든 페이지에 적용되나요?
네. Divi Theme Builder의 ‘Default Website Template’에 글로벌 헤더를 만들면 사이트 전 페이지에 자동 적용됩니다. 특정 페이지에만 다른 헤더가 필요하면 별도 템플릿을 만들어 해당 페이지에만 조건을 지정할 수 있습니다.
투명 헤더에서 글자가 잘 안 보이는데 어떻게 하나요?
투명 상태와 스크롤 후(스티키) 상태의 스타일을 분리해 설정하세요. 투명일 때는 밝은 배경 위에서 잘 보이는 색을, 스티키일 때는 불투명 배경과 그에 맞는 글자색을 지정하면 어떤 상황에서도 가독성이 유지됩니다.
메뉴 항목은 몇 개가 적당한가요?
일반적으로 5~7개 이내를 권장합니다. 항목이 너무 많으면 선택 부담이 커지고 모바일에서도 정리가 어렵습니다. 하위 페이지는 드롭다운(서브메뉴)으로 묶어 상위 항목 수를 줄이는 것이 좋습니다.
정리
좋은 헤더는 로고·내비게이션·CTA가 명확한 위계로 정돈되고, 여백·정렬·대비의 기본기를 지킨 헤더입니다. Divi의 Theme Builder를 쓰면 글로벌 헤더를 한 번에 만들어 전 페이지에 적용하고, 스티키·투명·반응형까지 코드 없이 구현할 수 있습니다. 현재 누스쿨처럼 Elementor를 사용한다면 Theme Builder의 Header 템플릿으로 같은 개념을 그대로 옮기면 됩니다. 도구가 무엇이든, 방문자가 헷갈리지 않고 원하는 곳으로 갈 수 있게 돕는 것이 헤더 디자인의 본질입니다.
💬 댓글 0