워드프레스 Divi 테마 사용법의 출발점은 테마 커스터마이저(Theme Customizer)다. 커스터마이저는 사이트 전체에 공통으로 적용되는 기본 디자인 — 헤더와 푸터, 타이포그래피, 색상, 레이아웃 — 을 한곳에서 정의하는 글로벌 설정 도구다. 이 글은 개별 페이지를 꾸미는 Divi 빌더와 어떻게 다른지, 커스터마이저에 어떤 패널이 있고 각각 무엇을 정하는지를 개념 중심으로 정리한다. (이 글은 예전 Divi 운영 시절의 안내로, 캡처 이미지는 더 이상 제공되지 않아 텍스트 중심으로 다시 정리했다.)
테마 커스터마이저란 무엇인가
워드프레스 Divi 테마 사용법에서 가장 먼저 이해해야 할 것은 “전역 설정”과 “페이지별 설정”의 구분이다. 테마 커스터마이저는 사이트 어디에서나 똑같이 적용되는 기본값(global default)을 다룬다. 예를 들어 본문 글꼴 크기, 링크 색상, 헤더 형태, 푸터 구조처럼 모든 페이지에 공통으로 깔리는 토대를 여기서 정한다.
커스터마이저는 보통 워드프레스 관리자 화면의 Divi > Theme Customizer 경로로 진입한다. 진입하면 좌측에 설정 패널 목록이, 우측에 실제 사이트가 그대로 표시되는 라이브 프리뷰(live preview) 화면이 나타난다. 왼쪽에서 값을 바꾸면 오른쪽 미리보기에 즉시 반영돼, 저장하기 전에 결과를 눈으로 확인할 수 있다. 마음에 들면 상단의 게시(Publish) 버튼으로 적용하고, 아니면 그냥 닫으면 변경은 저장되지 않는다.
커스터마이저 · 테마 옵션 · Divi 빌더의 차이
Divi에는 디자인을 건드리는 도구가 여럿 있어 처음엔 헷갈리기 쉽다. 역할을 한 번 정리해 두면 길을 잃지 않는다.
| 도구 | 적용 범위 | 주로 하는 일 |
|---|---|---|
| 테마 커스터마이저 | 사이트 전역 (모든 페이지 공통) | 헤더·푸터·타이포·색상·레이아웃의 기본값, 라이브 프리뷰 |
| 테마 옵션(Theme Options) | 사이트 전역 (기능·통합 설정) | 로고·SEO·소셜·성능 등 기능성 옵션 |
| Divi 빌더 | 개별 페이지·게시물 | 그 페이지만의 섹션·모듈 디자인 (커스터마이저 기본값을 덮어씀) |
핵심은 우선순위다. 커스터마이저가 “사이트 전체의 출발점”을 정하면, 특정 페이지에서 Divi 빌더로 다르게 꾸민 부분은 그 페이지에 한해 커스터마이저 기본값을 덮어쓴다. 즉 전역 기본값은 커스터마이저, 예외적인 개별 디자인은 빌더가 담당한다고 보면 된다.
커스터마이저 주요 패널
커스터마이저 좌측에는 여러 패널이 있고, 각 패널이 사이트의 한 영역을 책임진다. 대표적인 패널을 개념 단위로 살펴본다.
일반 설정 (General Settings)
사이트의 토대를 정하는 패널이다. 사이트 ID(로고·사이트 아이콘/파비콘), 레이아웃 설정(섹션·행의 기본 상하 여백, 열 간격, 콘텐츠 폭), 그리고 기본 색상이 여기에 들어간다. 사이트 아이콘은 브라우저 탭과 즐겨찾기에 보이는 작은 이미지로, 사이트 ID 항목에서 바꾼다.
타이포그래피 (Typography)
본문과 제목 글꼴의 기본 모양을 정한다. 본문 글자 크기, 헤더 글자 크기, 글꼴 종류 등을 조정하면 사이트 전체 텍스트에 비례해서 반영된다. 한 페이지씩 일일이 손대지 않고 전역 글꼴 톤을 맞출 수 있는 곳이다.
헤더 & 네비게이션 (Header & Navigation)
상단 헤더와 메뉴의 형태를 정한다. 헤더 레이아웃은 기본형, 가운데 정렬, 로고 인라인 중앙, 슬라이드인, 전체화면 같은 여러 양식 중에서 고를 수 있고, 메뉴 글꼴·색상·고정(스크롤 시 따라붙는) 동작 등도 이 패널에서 조정한다. 원하는 디자인 양식을 선택하면 라이브 프리뷰로 바로 확인된다.
푸터 (Footer)
페이지 하단 영역을 정한다. 푸터는 보통 위젯이 배치되는 위쪽 영역과 저작권 문구가 들어가는 맨 아래 바(Footer Bar)로 나뉜다. 푸터 위젯 영역의 열 수(기본 4열) 같은 레이아웃, 위젯 텍스트 색, 푸터 메뉴 스타일, 그리고 하단 바의 배경색·글자색을 여기서 바꾼다. 푸터에 표시할 콘텐츠는 위젯으로 영역마다 채워 넣는 방식이다.
버튼 · 블로그 · 모바일 스타일
- 버튼(Buttons): 사이트 전체 버튼의 기본 모양과 마우스 오버(hover) 상태 스타일을 정한다.
- 블로그(Blog): 글 목록·단일 글 화면의 기본 표시 방식을 정한다.
- 모바일 스타일(Mobile Styles): 모바일·태블릿 화면에서 적용할 별도 스타일을 정한다.
이 밖에 메뉴, 위젯, 홈페이지 표시 설정, 추가 CSS(Additional CSS) 패널도 커스터마이저 안에 함께 묶여 있다.
참고: 누스쿨은 지금 Elementor를 쓴다
이 글은 과거 Divi 테마를 쓰던 시절의 기록이다. 현재 누스쿨은 Elementor 기반으로 운영되며, Divi 테마 커스터마이저에 해당하는 전역 설정 역할은 Elementor의 사이트 설정(Site Settings) — 글로벌 컬러·글로벌 폰트·테마 스타일 — 이 맡는다. 도구 이름과 메뉴 위치는 다르지만 “사이트 전체의 기본 디자인을 한곳에서 정의한다”는 개념은 동일하다. 그래서 이 글은 SEO·기록 보존 차원에서 그대로 남겨 둔다.
정리
워드프레스 Divi 테마 사용법에서 테마 커스터마이저는 사이트 전역의 기본 디자인을 정하는 출발점이다. 일반 설정에서 로고·여백·기본 색상을, 타이포그래피에서 글꼴 톤을, 헤더·푸터 패널에서 상단과 하단의 구조를 잡고, 라이브 프리뷰로 확인한 뒤 적용한다. 전역 기본값은 커스터마이저가, 페이지별 예외 디자인은 Divi 빌더가 담당한다는 역할 구분만 기억하면 길을 잃지 않는다. 빌더 종류는 달라도 이 “전역 → 개별”의 구조는 Elementor를 포함한 대부분의 워드프레스 디자인 도구에 똑같이 적용된다.
💬 댓글 0