잘 디자인된 클릭 유도 문안 (CTA)은 웹사이트의 전환율을 높이는 열쇠가 될 수 있습니다. 워드프레스용 엘리멘터를 사용하면 원하는 방식으로 CTA를 디자인할 수 있는 강력한 도구를 손쉽게 사용할 수 있습니다. 이 튜토리얼에서는 클릭 유도 문안 요소를 페이지에 효과적으로 통합하고 즉시 시선을 사로잡을 수 있도록 사용자 정의하는 방법을 배웁니다.
주요 요점
- 콜투액션은 플립박스 아래 또는 가격표 아래에 위치하며 사용하기 쉽습니다.
- 다양한 디자인 범위(스킨) 중에서 선택하고 이미지 요소의 위치와 크기를 조정할 수 있습니다.
- 텍스트 디자인부터 시각 효과까지 다양한 사용자 지정 옵션이 제공됩니다.
단계별 지침
스킨 선택 및 이미지 추가
효과적인 콜투액션을 만들려면 먼저 스킨을 선택하세요. CTA를 커버 스타일로 표시할지 클래식 스타일로 표시할지 선택할 수 있습니다.
이제 이미지를 추가하여 CTA를 시각적으로 더욱 매력적으로 만들어야 합니다. 드래그 앤 드롭하거나 엘리멘터 영역의 설정에 액세스하여 간단히 추가할 수 있습니다.
이미지 위치 및 크기 편집
이미지를 추가한 후에는 위치를 조정할 수 있습니다. 이미지 설정에는 다양한 옵션이 있습니다. 이미지의 크기를 '중간'으로 설정하여 균형 잡힌 디스플레이를 얻습니다.
제목 및 텍스트 조정하기
이 단계는 의미 있는 제목을 선택하는 단계입니다. 전달하고자 하는 메시지에 대해 생각해 보세요. 예를 들어 "특별 혜택" 또는 "[날짜]까지 코칭 예약"을 추가할 수 있습니다.
버튼 추가 및 링크하기
이제 콜투액션 버튼을 디자인할 차례입니다. "오퍼 저장"이라는 텍스트를 추가하고 홍보하려는 페이지에 링크합니다. CTA 버튼은 사용자가 클릭하도록 유도하기 위해 명확하게 표시되어야 합니다.
리본 추가
선택 사항으로 "리본" 표시를 추가하여 CTA를 더욱 눈에 띄게 만들 수 있습니다. 오퍼에 더 적합한 리본에 따라 '인기' 또는 '베스트셀러' 중에서 선택하세요. 여기에서 배경과 텍스트 색상을 원하는 대로 조정할 수도 있습니다.
상자 크기 및 사용자 지정
CTA가 들어 있는 상자를 확대하고 원하는 대로 모든 항목을 사용자 지정할 수도 있습니다. 사용자가 혼동하지 않도록 시각적 계층 구조가 명확한지 확인하세요.
표지 스타일 사용자 지정
커버 스타일을 결정한 후에는 이미지를 CTA의 배경으로 사용하고 그 위에 텍스트를 표시할 수 있습니다. 시각적으로 더 매력적일 수 있으며 많은 사람들이 이 스타일을 선호합니다.
호버 효과 삽입
이제 흥미로운 부분인 호버 효과가 등장합니다. '성장' 또는 '슬라이드 인'과 같은 다양한 애니메이션을 사용할 수 있습니다. 이렇게 하면 CTA를 더욱 역동적으로 만들고 더 많은 상호 작용을 보장할 수 있습니다.
배경 이미지 편집
또 다른 측면은 배경 이미지를 편집하는 것입니다. 여기에서 CSS 필터를 사용하여 특별한 효과를 얻을 수 있습니다. 디자인에 따라 일반 배경 또는 흐린 배경 중에서 선택할 수 있습니다.
최종 조정하기
마지막으로 모든 요소를 확인하여 콜투액션이 매력적이고 보기 좋은지 확인합니다. 잘 계획된 CTA는 아름다울 뿐만 아니라 방문자가 행동을 취하도록 유도하는 데 효과적이어야 합니다.
요약 - Elementor의 콜 투 액션: 단계별 가이드
Elementor에서 매력적인 콜투액션을 만드는 것은 간단하지만 효과적인 방법으로 상호작용을 유도하고 전환율을 높일 수 있습니다. Elementor의 사용자 지정 옵션을 사용하면 시각적으로 매력적이면서도 기능적인 CTA를 만들 수 있습니다.
자주 묻는 질문
CTA에 적합한 스킨은 어떻게 선택하나요? 개별 디자인과 웹사이트의 목표에 따라 다릅니다. 커버 스타일과 클래식 스타일을 모두 사용해 보세요.
CTA의 색상을 변경할 수 있나요? 예. Elementor는 색상, 글꼴 및 크기에 대한 광범위한 사용자 정의 옵션을 제공합니다.
호버효과를추가하려면 어떻게 하나요? 스타일 설정에서 "성장" 또는 "슬라이드 인"과 같은 애니메이션을 선택하여 호버 효과를 만들 수 있습니다.
