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

Updated by Editor

슬라이드 인


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



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

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



1. 버튼 추가

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



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




2. 버튼 설정

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





상세설정 > 텍스트 > 글자색

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





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

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



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

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





3. 버튼 위치 조정

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



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

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



4. 저장






💌ㅤ 메시지 디자인 만들기 가이드ㅤㅤ


👉 에디터 시작하기

👉 그루비 제안 템플릿으로 메시지 디자인 만들기

👉 통 이미지로 메시지 디자인 만들기 - 슬라이드인

👉 통 이미지로 메시지 디자인 만들기 - 플로팅 바

👉 배경 없는 PNG 이미지로 메시지 디자인 만들기

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

📌 CTA 버튼 사용 TIP!



How did we do?