dobyclick 가이드
AL_100 테마 배경 색상 바꾸는 법
워드프레스 사용자 정의 패널에서 색상을 바꾸는 방법을 알려드립니다.
1 관리자 진입
2 색상 팔레트 변경
3 특정 헤드 색상 CSS
4 코드 서식 적용
방법 A
전체 컨셉 색상 한 번에 변경
1
워드프레스 관리자 → 외모(모양) → 사용자 정의 클릭
워드프레스 관리자
→
외모 (모양)
→
사용자 정의
왼쪽 사이드바에서 외모(모양) 메뉴를 클릭한 뒤, 하위 메뉴에서 사용자 정의를 선택합니다.
💡 팁: 테마 목록에서 활성 테마에 “사용자 정의” 버튼이 직접 표시되기도 합니다. 그 버튼을 눌러도 동일하게 진입됩니다.
2
Colors & Fonts → Colors → Global Palette에서 색상 변경
Colors & Fonts
→
Colors
→
Global Palette
사용자 정의 패널에서 Colors & Fonts → Colors를 클릭하면 Global Palette가 나타납니다.
Accents(강조색), Contrast(대비색), Base(배경색), Notices(알림색) 팔레트 색상을 변경하면 사이트 전체 컨셉 색상이 자동으로 반영됩니다.
ℹ️ Palette 1 / Palette 2 / Palette 3 탭으로 전환하면 서로 다른 색상 세트를 미리 저장해 두고 빠르게 교체할 수 있습니다.
방법 B
특정 헤드(H2·H3·H4) 색상만 개별 변경
3
변경할 헤드 색상 미리 확인 — 이런 스타일이 CSS로 적용됩니다
위 이미지처럼 헤드(H2/H3/H4)의 배경 색상을 각각 다르게 지정할 수 있습니다. 색상은 HEX 코드로 자유롭게 변경 가능합니다.
#1B5E35 진초록
#1a7f6e 청록
#E87000 주황
#003458 네이비
#e03131 레드
4
사용자 정의 → 추가 CSS에서 H2·H3 background 색상 코드 수정
사용자 정의
→
추가 CSS
사용자 정의 패널 하단의 추가 CSS로 이동합니다. 기존 CSS 코드 중 h2, h3, h4 블록을 찾아 background 값을 원하는 HEX 코드로 교체하면 됩니다.
추가 CSS — H2 스타일 예시
수정 전
/* H2 스타일 */ .single .entry-content h2 { font-size: 25px; background: var(--wp--preset--color--theme-palette-2, #003458); color: white; border-radius: 0 10px 10px 0; padding: 5px 15px; }
추가 CSS — H2 스타일 예시
수정 후 (레드 계열로 변경)
/* H2 스타일 */ .single .entry-content h2 { font-size: 25px; background: #e03131; color: white; border-radius: 0 10px 10px 0; padding: 5px 15px; }
BEFORE
H2 제목 예시
AFTER
H2 제목 예시
💡 H3·H4도 동일한 방식: CSS 코드에서
h3, h4 블록을 찾아 background 또는 color 값을 같은 방식으로 교체하면 됩니다.
ℹ️
var(--wp--preset--color--theme-palette-2, #003458) 형태는 팔레트 변수 + 폴백 HEX입니다. HEX 코드만 직접 적어도 동일하게 동작합니다.📋 핵심 요약
1
방법 A: 외모 → 사용자 정의 → Colors & Fonts → Colors → Global Palette에서 전체 색상 팔레트 한 번에 변경
2
방법 B: 사용자 정의 → 추가 CSS에서 h2 / h3 / h4 블록의
background 값을 원하는 HEX 코드로 직접 교체
3
수정 완료 후 우측 상단 발행됨 버튼을 눌러 저장해야 실제 사이트에 반영됩니다.
🔗 테마 공식 소개
WPlaybook ALL100 테마 알아보기
wplaybook.com
바로가기 →