# CTA 버튼을 삽입한 메시지 디자인 작성

## **CTA 버튼 삽입: 슬라이드 인**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/7egd6h1qhq/1606111628575/image.png" alt=""><figcaption></figcaption></figure>

* 그루비 에디터로 CTA 버튼이 포함된 메시지를 쉽게 만들기 위해서는 '배경 이미지 추가 > CTA 버튼 추가' 순으로 진행하는 것을 추천합니다.

{% hint style="success" %}
메시지 내에 여러개의 CTA 버튼을 넣어 고객의 특정 행동을 유도할 수 있습니다.

메시지 디자인 제작 가이드를 따라서 배너의 하단 영역에 CTA 버튼이 삽입된 메세지를 만들어보세요.
{% endhint %}

### **1. 버튼 추가**

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

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

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

\
**뷰 컴포넌트**

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

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

### **2. 버튼 설정**

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

* 추가된 버튼은 URL, 버튼 모양, 버튼 색상, 글꼴, 글자 크기 등 **상세설정**에서 설정할 수 있습니다.

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

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/j32p104r9x/1687412767291/3-a.gif" alt=""><figcaption></figcaption></figure>

* 글자 색 #DBB4A5 을 입력하여 글자색을 바꿀 수 있습니다.

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

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/j32p104r9x/1687412855385/5-a.gif" alt=""><figcaption></figcaption></figure>

* 배경색 : #4782FF을 사용하여 이미지 톤에 맞게 버튼색을 바꿀 수 있습니다.

**▪ 상세설정 > 텍스트 > 꾸미기 > 둥근 모서리**

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/j32p104r9x/1687412903082/5.png" alt=""><figcaption></figcaption></figure>

* 둥근 모서리 : 배경 이미지가 보이지 않게 하기 위해 각각의 둥근 모서리 값을 0 px로 설정합니다.

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

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

* CTA 버튼을 하단으로 위치. 시키고 싶은 경우, 메시지 배경 이미지의 세로 크기가 350px일 때 CTA 버튼 세로 크기를 50px, CTA 버튼의 상단 영역 값을 300px로 설정 합니다.

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

<figure><img src="https://files.helpdocs.io/p92xn84cjv/articles/j32p104r9x/1687412932402/6.png" alt=""><figcaption></figcaption></figure>

* 상단 영역 값을 지정하는 방법은 링크 블록의 '상세설정 > 모양 > 바깥쪽 간격 > 위 : 300px'을 설정하여 지정할 수 있습니다.

### **4. 저장**

***

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

👉 [에디터 시작하기](/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)


---

# 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.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.