Kadence 무료 테마 헤더에 버튼 2개 넣는 방법 (HTML 요소 활용)

Kadence 무료 테마를 쓰는데 헤더 오른쪽에 버튼을 하나 더 넣고 싶으신가요? 예를 들어 "바로가기" 버튼 옆에 "문의하기" 버튼을 나란히 두는 식이죠. 그런데 헤더 빌더를 아무리 뒤져도 버튼 요소가 하나밖에 없어서 막막했다면, 이 글에서 5분 만에 해결하실 수 있습니다.

왜 기본 설정으로는 버튼이 하나뿐일까?

Kadence 무료 테마의 헤더 빌더에는 Button(버튼) 요소가 딱 1개만 제공됩니다. 이미 그 버튼을 쓰고 있다면, 헤더 빌더에서 버튼을 하나 더 끌어다 놓을 수가 없습니다. (버튼을 자유롭게 여러 개 배치하는 기능은 유료인 Kadence Pro에 있습니다.)

하지만 돈을 들이지 않고도 방법이 있습니다. 헤더 빌더의 ‘HTML’ 요소를 이용하면 기존 버튼과 똑같이 생긴 두 번째 버튼을 만들 수 있습니다. 핵심은 기존 버튼과 동일한 CSS 클래스를 그대로 재사용하는 것입니다.

따라 하기: HTML 요소로 두 번째 버튼 추가

1. 사용자 정의하기 열기 — 워드프레스 관리자에서 외모 → 사용자 정의하기(Customize)로 들어갑니다.
2. 헤더 편집 모드 진입 — 왼쪽 패널에서 헤더(Header)를 클릭하면 화면 아래쪽에 헤더 빌더(드래그 영역)가 나타납니다.
3. 기존 버튼 위치 확인 — 지금 버튼이 있는 섹션(보통 오른쪽 Right 섹션)을 찾습니다.
4. HTML 요소 추가 — 그 섹션의 ＋(요소 추가) 버튼을 누르고 목록에서 HTML을 선택해 기존 버튼 옆에 놓습니다.
5. 코드 입력 — 추가된 HTML 요소를 클릭하면 나오는 입력창에 아래 코드를 붙여넣습니다.
6. 게시 — 상단의 게시(Publish)를 눌러 저장하면 끝입니다.

붙여넣을 코드

<a href="https://링크-주소를-여기에"
   class="button header-button button-size-medium button-style-filled"
   style="margin-left:8px;">두 번째 버튼</a>

• href 값을 실제로 연결할 링크 주소로 바꿉니다.
• 두 번째 버튼 자리에 원하는 버튼 문구를 넣습니다.
• class는 기존 버튼과 똑같이 넣었기 때문에 디자인이 동일하게 나옵니다.
• margin-left:8px는 첫 버튼과의 간격입니다. 좁거나 넓으면 숫자만 조절하세요.

버튼 스타일 바꾸기 (색·크기)

두 번째 버튼을 첫 버튼과 다르게 강조하고 싶다면, 코드의 클래스 이름만 바꾸면 됩니다.

예를 들어 첫 버튼은 꽉 찬 색(filled), 두 번째 버튼은 테두리형(outline)으로 두면 "주 버튼 / 보조 버튼"처럼 위계가 생겨 보기 좋습니다.

자주 묻는 질문

Q. 버튼 두 개를 한 곳에 묶어서 관리하고 싶어요.
A. 기존 Button 요소를 삭제하고, HTML 요소 하나에 <a>...</a> 두 개를 나란히 넣어도 됩니다. 다만 기존 Button은 그대로 두고 HTML로 추가만 하는 편이 설정을 덜 건드려 안전합니다.

Q. 모바일에서 버튼이 이상하게 보여요.
A. Kadence 헤더는 데스크톱/모바일(트랜스패런트·모바일) 레이아웃이 분리되어 있습니다. 헤더 빌더 상단에서 모바일 탭으로 전환해, 모바일 헤더의 원하는 위치에도 같은 HTML 요소를 넣어 주세요.

Q. 버튼을 진짜 여러 개(3개 이상) 자유롭게 쓰고 싶어요.
A. 그 정도라면 Kadence Pro를 고려하세요. 헤더에 Button 요소를 복수로 배치할 수 있어 HTML을 직접 다룰 필요가 없어집니다.

정리

• Kadence 무료는 헤더 Button 요소가 1개 제한 → 두 번째는 HTML 요소로 추가
• 기존 버튼과 같은 CSS 클래스를 쓰면 디자인이 동일
• 클래스만 바꾸면 색·크기 등 스타일 변형도 자유

워드프레스 테마 커스터마이징이나 사이트 제작·이전이 필요하시면 이온디가 도와드립니다. 댓글이나 문의로 남겨 주세요.