# 버튼 생성

🔘 WordPress 버튼 만들기 가이드

> 방문자에게 **링크 클릭을 유도**할 수 있는 Call to Action 버튼을 삽입하는 방법

***

### ✅ 1. 버튼 블록 추가하기

1. 페이지 편집 화면에서 `+` 버튼 클릭
2. **검색창에 `버튼` 입력**
3. **“버튼” 블록**을 클릭하여 추가

<figure><img src="/files/is8QBSBKcirZG1LPkiIf" alt=""><figcaption></figcaption></figure>

***

### ✅ 2. 버튼 텍스트 수정

* 기본으로 "버튼"이라는 텍스트가 들어감
* 원하는 텍스트로 변경 가능

예:

```
자세히 보기
신청하기
바로 가기
```

<figure><img src="/files/F9G47TGyEkg4kkp33FeS" alt=""><figcaption></figcaption></figure>

***

### ✅ 3. 버튼 링크 설정

1. 버튼을 클릭하면 상단에 링크 아이콘 🔗이 표시됨
2. 클릭 후 연결할 URL 입력

예:

```
https://yourdomain.com/notice  
#faq-section (페이지 내 앵커로 이동)
```

3. 외부 링크는 “새 탭에서 열기” 체크 가능

<figure><img src="/files/oQAL0vZwaQEVZKjFCOcs" alt=""><figcaption></figcaption></figure>

***

### ✅ 4. 버튼 스타일 조정

오른쪽 설정 패널에서 다음 항목을 조절할 수 있습니다:

| 항목                       | 설명                    |
| ------------------------ | --------------------- |
| **정렬**                   | 왼쪽, 가운데, 오른쪽 정렬 가능    |
| **스타일**                  | 채워진 버튼 / 외곽선 버튼 선택 가능 |
| **색상**                   | 배경색, 글자색 선택 가능        |
| **모서리**                  | 둥글게 처리하거나 사각형 지정      |
| **아이콘** (일부 테마/플러그인만 지원) | 버튼에 화살표나 아이콘 삽입 가능    |

***

### ✅ 5. 여러 개의 버튼 나란히 만들기

1. 버튼 블록 또는 그리드를 추가하고&#x20;
2. **“버튼” 블록 위에 마우스를 올리면 + 버튼 클릭**
3. 버튼을 계속 추가하면 **수평 정렬**로 이어서 생성

예:

```
[자세히 보기]   [신청하기]
```

<figure><img src="/files/OJdhQUj3SBPo112GJ304" alt=""><figcaption></figcaption></figure>

***

### ✨ 예시 결과

```plaintext
📦 "바로 가기" 버튼을 누르면 신청 페이지로 이동
🔗 외부 페이지 / 앵커 링크도 자유롭게 연결 가능
🎨 버튼 색상과 크기를 브랜드에 맞게 커스터마이징 가능
```

***

### 📌 활용 팁

| 목적          | 버튼 텍스트 예시             |
| ----------- | --------------------- |
| 서비스 소개 후 유도 | `지금 시작하기`, `플랜 확인하기`  |
| 블로그 글 끝 CTA | `관련 글 보기`, `문의 남기기`   |
| 섹션 이동       | `FAQ 바로가기`, `하단으로 이동` |


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://s-organization-887.gitbook.io/hostyle-web/wordpress-2/undefined-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
