워드프레스에 커스텀 버튼을 추가하는 방법

랜딩 페이지에서 가장 중요한 자산 중 하나는 콜투액션(CTA) 버튼입니다. 이는 방문자가 리소스를 다운로드하거나, 이메일 목록에 가입하거나, 상담 일정을 잡기 위해 클릭하는 요소입니다. 디자인을 잘하면 전환을 크게 유도하지만, 디자인이 형편없으면 사용자가 버튼을 지나쳐 스크롤하고 페이지를 이탈할 수 있습니다.

결과적으로 워드프레스에서 버튼을 추가하는 방법을 아는 것은 — 다른 페이지의 일반적인 버튼과 차별화되는 버튼을 만드는 것 — 새로운 고객을 유치하느냐 놓치느냐의 차이를 만들 수 있습니다. 하지만 말처럼 쉽지는 않습니다. 워드프레스는 구텐베르크 편집기에서 버튼 사용자 정의 옵션을 제공하지만, 이는 기본적인 수준입니다. 사용자들은 종종 혼란스러운 색상 설정과 애니메이션 옵션의 부족으로 어려움을 겪습니다. CTA 버튼을 멋지게 꾸미고 싶다면 구텐베르크 편집기만으로는 한계가 있습니다.

워드프레스 버튼의 한계를 우회하려면 두 가지 옵션이 있습니다: 무거운 타사 블록이나 플러그인을 설치하거나, 페이지 속도와 테마 코드를 보호하는 가볍고 무료인 서버리스 위젯을 사용하는 것입니다. 이 가이드에서는 웹사이트에 가장 적합한 옵션을 결정할 수 있도록 각 옵션이 어떻게 작동하는지 설명합니다.

Watch on youtube

How to Add a Custom Button to Wordpress

옵션 1: 전용 워드프레스 버튼 플러그인 설치 또는 사용자 정의 CSS 사용

워드프레스 사용법과 워드프레스에 버튼을 추가하는 방법을 배우고 있다면, 타사 플러그인이나 CSS 코드를 사용하여 버튼을 사용자 정의할 수 있습니다. 워드프레스 관리자 대시보드를 통해 사용 가능한 플러그인을 찾거나 워드프레스 편집기를 사용하여 직접 CSS를 추가할 수 있습니다.

이러한 옵션들을 살펴보기 전에, 다음과 같은 잠재적인 단점을 인지해야 합니다:

• 일부 플러그인은 과도한 JavaScript와 CSS를 사용하여 페이지 로딩 시간을 늦추고 코어 웹 바이탈(Core Web Vitals) 점수를 떨어뜨릴 수 있습니다.
• 개발자가 항상 플러그인을 업데이트하는 것은 아닙니다. 이는 향후 성능 문제로 이어질 수 있으며, 모니터링해야 할 사항이 하나 더 늘어나는 것을 의미합니다.
• 잘못된 사용자 정의 CSS는 웹사이트의 현재 글로벌 버튼 설정을 덮어쓸 수 있으며, 이는 사이트 전체의 다른 버튼 모양에 영향을 미칩니다. 또한 사이트의 모바일 반응성에 영향을 줄 수 있습니다.

가장 쉬운 옵션인 타사 플러그인부터 시작해 보겠습니다. 워드프레스에 버튼 추가하는 방법으로 사이트에서 플러그인을 찾고 설치하려면 다음 단계를 따르세요.

1. 워드프레스 관리자 대시보드에서 플러그인(Plugins) 옵션을 클릭합니다. 검색 창에 필요한 기능을 입력합니다. 이 예시에서는 “custom CTA button WordPress”를 입력했습니다.

2. 목록에서 플러그인을 선택하고 클릭하여 기능에 대해 자세히 알아보세요. 최고의 워드프레스 플러그인은 최신 상태로 유지되며 워드프레스 테마와 호환되고 긍정적인 사용자 리뷰를 가지고 있습니다. 마음에 드는 옵션을 찾으면 지금 설치(Install Now)를 클릭하세요.

3. 플러그인 설치가 완료되면 활성화(Activate) 버튼을 클릭합니다. 개발자의 지침에 따라 사용자 정의 버튼을 생성하세요. 

CSS에 능숙하다면, 사용자 정의 CTA 버튼을 직접 코딩할 수 있습니다. 그렇게 하려면 다음 단계를 따르세요.

1. 워드프레스 관리자 대시보드에서 외모(Appearance) > 편집기(Editor)를 클릭합니다. 클래식 테마나 타사 테마를 사용하는 경우 외모(Appearance) > 사용자 정의하기(Customize)를 클릭하세요. 

2. 스타일 > ⋮ > 추가 CSS를 클릭합니다. 클래식 및 서드파티 테마에서는 추가 CSS를 클릭합니다.

3. 텍스트 상자에 버튼의 사용자 정의 CSS 코드를 입력합니다.

직접 버튼을 코딩하는 대신, 워드프레스에서 버튼을 추가하는 방법 중 하나로 사용자 정의 CSS 대안인 Jform 버튼 위젯을 사용해 볼 수 있습니다. 다음 섹션에서는 이 옵션에 대해 살펴봅니다.

옵션 2: 무료 맞춤형 버튼 위젯 추가(권장)

Jform 버튼 위젯을 사용하면 독특한 그라데이션, 아이콘 및 호버 효과가 있는 CTA 버튼을 만들 수 있습니다. 이 옵션은 안정적인 호스팅 임베드 방식으로 실행되므로 사이트의 CSS에 영향을 미치거나 로딩 속도를 저하시키지 않습니다.

이를 사용하려면 Jform에서 버튼을 구성하고 사용자 정의 HTML 블록을 사용하여 워드프레스에 맞춤형 버튼을 임베드합니다. 요구 사항에 맞는 완벽하고 반응형이며 독립적인 버튼으로 즉시 업데이트됩니다. 다음 단계를 따라 시도해 보세요.

1. Jform 버튼 위젯으로 이동하여 버튼에 대한 기본 정보를 작성하세요. 계속을 클릭합니다.

2. 색상, 아이콘 및 기타 스타일 옵션을 추가합니다. 모서리 스타일, 여백, 텍스트 크기 및 글꼴을 조정하거나 그림자를 추가하여 더 강조할 수 있습니다. 완료되면 계속을 클릭합니다.

3. 레이아웃 옵션을 검토하고 선택한 다음 웹사이트에서 무료로 사용해 보기를 클릭합니다.

4. 지침에 따라 Jform에서 무료 계정을 만든 다음, 임베드 코드를 복사하여 워드프레스 웹사이트의 사용자 정의 HTML 블록에 붙여넣습니다. 버튼을 표시할 페이지와 섹션을 올바르게 선택했는지 확인하세요. 워드프레스에 버튼을 추가하는 방법에 대한 완벽한 단계를 제공합니다.

Jform의 무료 노코드 워드프레스 콜투액션 대안은 버튼의 외관과 기능을 완벽하게 제어할 수 있게 해줍니다. 텍스트, 색상, 테두리 반경을 사용자 지정하거나 호버 애니메이션을 추가하고 싶을 때, 워드프레스에 버튼 추가하는 방법에 대한 완벽한 해답을 제공하는 Jform은 이 모든 작업을 훌륭하게 수행합니다. 

스마트한 서버리스 위젯으로 워드프레스 사이트 강화하기

Jform은 맞춤형 버튼 디자인 그 이상을 제공합니다. 무료 웹사이트 위젯 디렉토리를 검색하여 전환율을 극대화하고, 페이지 용량을 줄이며, 매우 빠른 로딩 속도를 위해 사이트 데이터베이스를 가볍게 유지하는 다른 도구들을 찾아보세요. 가장 사랑받는 몇 가지 위젯은 다음과 같습니다:

• Google 리뷰 위젯: 기본 설정에 따라 브랜드의 Google 리뷰를 표시합니다.
• 카운트다운 타이머 위젯: 이벤트 등록과 같은 특정 작업을 수행할 수 있는 남은 시간을 방문자에게 보여줍니다.
• FAQ 위젯: 풍부한 미디어가 포함된 답변과 맞춤형 스타일링을 갖춘 검색 가능한 FAQ 도구를 제공합니다.
• 워드프레스 양식: 맞춤형 양식을 만들어 웹사이트에 임베드할 수 있습니다.

크리에이터, 블로거 또는 마케터로서 여러분의 주요 목표는 훌륭한 콘텐츠를 제작하고 퍼널을 최적화하는 것이지, CSS나 플러그인과 씨름하는 것이 아닙니다. 워드프레스에 버튼 추가하는 방법을 비롯해 Jform의 무료 오프서버 도구를 사용하면 프리미엄 수준의 높은 전환율을 자랑하는 기능을 몇 분 만에 배포할 수 있으므로, 여러분이 가장 잘하는 일에 집중할 수 있습니다. 지금 바로 Jform으로 시작해 보세요.