워드프레스에서 CTA(Call to action) 버튼은 방문자의 전환율과 체류기간을 높이는 데 중요한 역할을 합니다. 이번 글에서는 버튼만들기 툴을 활용하여 워드프레스 버튼을 만들고 꾸미는 방법에 대해 알아보겠습니다. CTA 버튼을 적절한 위치와 상황에 배치하여 사용자 경험을 향상시키는 전략적인 방법에 대해서도 살펴보겠습니다.
워드프레스 버튼 만들기
워드프레스에서 버튼을 생성하는 방법은 다양합니다. 블록 편집기를 이용해서 버튼을 추가 할 수도 있고 이미지로 만들어서 링크로 연결하는 방법도 있습니다.
이번 글에서는 버튼만들기 툴을 이용해서 버튼을 만들어 보도록 하겠습니다.
버튼 만들기 사이트에 접속하시면 아래와 같은 화면을 볼 수 있습니다.
좌측은 미리 셋팅된 버튼 모양들이 있습니다.
그리고 우측은 상세 설정하는 메뉴들이 있구요.
설정값들에 따라서 중앙 버튼의 모양이 실시간으로 변해서 확인하면서 생성할 수 있습니다.
이것저것 조작해보면서 버튼의 모양이 변하는것을 확인해 보세요.
아래 영상은 버튼만들기 사이트 시연 영상 입니다.
영상을 보시면 사실 사용법이 너무 쉬워서 설명도 필요 없을 정도 입니다.
CSS 코드 가져오기 버튼을 클릭하면 생성된 HTML 코드와 CSS 코드를 가져올 수 있습니다.
상단에 복사하기 버튼을 클릭하면 클립보드에 자동 저장이 됩니다.
워드프레스에 HTML 과 CSS 적용하기
초보분들에게는 이 부분이 가장 어려운 부분 입니다.
글로 설명하면 어려우니 영상으로 보여 드리겠습니다.
버튼만들기 사이트에서 생성된 코드는 아래와 같습니다.
이 코드를 바로 사용할 수는 없고 약간의 수정이 필요합니다.
이 부분은 사이트마다 조금씩 다를 수 있습니다.
저의 경우는 먼저 버튼이 왼쪽에 붙어 있어서 <div style=”text-align:center;”> 를 사용해서 버튼을 중앙정렬 시켰습니다.
그리고 CSS 코드는 사용자정의CSS 에 넣어도 되는데 그렇게 하면 모든 버튼에 반영이 되어서 저는 HTML 코드에 CSS 를 추가 하였습니다.
이렇게 하면 이 페이지에서만 적용이 되게 됩니다.
CSS 코드 앞뒤를 <style> </style> 로 감싸주면 됩니다.
그리고 기본 설정에 a 테그 색상이 파란색으로 되어 있어서 color:#ffffff; 를 color:#ffffff !important; 로 변경해 주었습니다. 이렇게 하면 기존 설정은 무시하고 강제로 이 설정으로 적용하는 것입니다.
버튼을 눌렀을 때 이동하는 페이지는 href 에 아래처럼 주소를 넣어 주시면 됩니다.
<a href="https://officehub.synology.me/design/design_cont/makeButton" class="myButton">버튼만들기</a>
이제 모든 설정이 끝났습니다.
아래 영상을 보시면서 따라해 보세요.
<a href="#" class="myButton">버튼만들기</a>
.myButton {
box-shadow:inset 0px 45px 0px -24px #e67a73;
background-color:#e4685d;
border-radius:31px;
border:1px solid #ffffff;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-size:21px;
font-weight:bold;
padding:13px 59px;
text-decoration:none;
text-shadow:0px 4px 0px #b23e35;
}
.myButton:hover {
background-color:#eb675e;
}
.myButton:active {
position:relative;
top:1px;
}