# CTA 버튼 설정 TIP

## **2개 이상의 CTA 버튼 설정하기**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/50fmojns46/1605147158506/image.png" alt=""><figcaption></figcaption></figure>

* 메시지 내에 고객의 특정 행동을 유도할 수 있는 CTA 버튼을 여러개 만들 수 있습니다.

### **1. 컬럼 블록 추가 (영역 설정)**

▪**블록추가 > 컬럼 블록** **>** **1단 컬럼** **/** **2단 컬럼**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/50fmojns46/1687410817569/1-a.gif" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
배경 이미지 추가는 [통 이미지로 메시지 디자인 만들기](/old-admin/onsite/guide/editor/slide-in.md)를 참고해 주세요.
{% endhint %}

* 컬럼 블록을 드래그 앤 드롭으로 추가해주세요.
* 1단 컬럼 블록을 이용해 로고 이미지 영역을, 2단 컬럼 블록을 이용해 버튼 영역을 추가합니다.

**뷰 컴포넌트**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/50fmojns46/1687410834018/2.png" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
요소를 넣기 위한 정확한 위치를 확인하기 위해 '뷰 컴포넌트'를 켜두시는 것을 권장합니다. 뷰 컴포넌트는 실제 사이트에서는 노출되지 않습니다.
{% endhint %}

### **2. CTA 버튼 추가**

▪**블록추가 > 링크 블록 >버튼**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/50fmojns46/1687410844984/3.png" alt=""><figcaption></figcaption></figure>

* 링크 버튼을 드래그 앤 드롭으로 셀에 추가해 주세요.

### **3. 버튼 조정**

▪**상세설정 > 텍스트 > 글자크기 12pt(권장)**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/50fmojns46/1687410117996/6-a.gif" alt=""><figcaption></figcaption></figure>

* 추가된 버튼 크기와 글자 크기가 상대적으로 크기 때문에 크기를 조정합니다.

▪**상세설정 > 모양 > 안쪽 간격**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/50fmojns46/1687410209685/4.png" alt=""><figcaption></figcaption></figure>

* 버튼 안의 간격 조정이 필요할 경우 추가된 버튼 블록을 클릭 후 '상세설정 > 모양 > 안쪽 간격'을 설정합니다.

### **4. CTA버튼 상단 영역 조정**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/50fmojns46/1687410434475/8-a.gif" alt=""><figcaption></figcaption></figure>

* CTA 상단영역의 body를 클릭 후 드래그하여 상단 영역을 조정하여 CTA 버튼 위치를 잡아주세요.

### **5. 버튼 설정**

* 메시지 디자인에 맞춰 CTA 버튼을 설정해주세요.

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/50fmojns46/1605163136106/image.png" alt=""><figcaption></figcaption></figure>

\
▪ **상세설정 > 텍스트 > 글자색**

* 글자 색 #DBB4A5 을 입력하여 글자색을 변경합니다.

▪ **상세설정 > 텍스트 > 꾸미기**

* 배경색 : #4782FF을 사용하여 이미지 톤에 맞게 버튼색을 변경합니다.
* CTA 버튼 글자색, 배경색 바꾸는 방법은 [여기](http://doc.groobee.io/article/j32p104r9x-cta)를 클릭하여 **'2.버튼 설정'**&#xC744; 확인해 주세요.

### **5. 저장**

***

## **💌 메시지 디자인 가이드**

👉 [에디터 시작하기](/old-admin/onsite/guide/editor/getting-started.md)

👉 [그루비 제안 템플릿으로 메시지 디자인 만들기](/old-admin/onsite/guide/editor/template.md)

👉 [통 이미지로 메시지 디자인 만들기 - 슬라이드인](/old-admin/onsite/guide/editor/slide-in.md)

👉 [통 이미지로 메시지 디자인 만들기 - 플로팅 바](/old-admin/onsite/guide/editor/floating-bar.md)

👉 [배경없는 PNG 이미지로 메시지 디자인 만들기](/old-admin/onsite/guide/editor/png.md)

👉 [CTA 버튼을 삽입한 메시지 디자인 작성](/old-admin/onsite/guide/editor/cta.md)

📌 [CTA 버튼 사용 TIP](/old-admin/onsite/guide/editor/cta-tip.md)

<br>


---

# 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://docs.groobee.ai/old-admin/onsite/guide/editor/cta-tip.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.