WordPress에 팝업 양식을 추가하는 방법(단계별 튜토리얼)

게시 됨: 2024-02-06

귀하의 사이트에 팝업 양식을 추가하시겠습니까?

팝업은 적시에 사용자의 관심을 끌어 뉴스레터 가입이나 구매 완료 등의 조치를 취하도록 유도합니다.

사이트에 팝업을 추가하는 가장 좋은 방법은 WordPress 팝업 플러그인을 사용하는 것입니다. 이를 통해 적절한 시간과 장소에 나타나는 사용자 지정 팝업을 쉽게 만들어 사용자의 참여를 유도할 수 있습니다.

이 단계별 튜토리얼에서는 10분 안에 WordPress 웹사이트에 팝업 양식을 만드는 방법을 보여 드리겠습니다.

WordPress 팝업 양식을 만드는 방법

이 튜토리얼에서는 OptinMonster라는 강력한 도구를 사용합니다.

옵틴몬스터

OptinMonster는 세계 최고의 WordPress 팝업 빌더입니다. 귀하의 사이트에 대한 멋진 팝업을 만들고 사용자 정의하는 데 필요한 모든 것이 포함되어 있습니다.

50개 이상의 미리 만들어진 템플릿 중에서 선택하거나 처음부터 시작할 수 있습니다. 팝업 빌더는 사용하기 쉬우므로 초보자에게 적합한 선택입니다. 드래그 앤 드롭 인터페이스를 기반으로 하므로 요소를 표시하려는 위치에 드래그 앤 드롭하여 팝업을 시각적으로 구축할 수 있습니다.

색상, 이미지, 비디오, 배경 등을 포함하여 팝업의 모든 측면을 완벽하게 제어할 수 있습니다.

OptinMonster에서 눈에 띄는 점은 강력한 타겟팅 규칙입니다. 이를 통해 사용자가 다음과 같은 경우 팝업을 표시할 수 있습니다.

  • 특정 페이지 보기
  • 웹사이트를 종료하려고 합니다.
  • 한동안 활동하지 않음
  • 특정 지리적 영역에 위치
  • 특정 추천 소스에서 발생
  • 페이지의 특정 지점으로 스크롤
  • 특정 추천 소스에서 발생
  • 장바구니에 항목을 추가했지만 체크아웃하지 않았습니다.
  • 신규 사용자 또는 반복 사용자
  • 노트북이나 휴대폰과 같은 특정 장치 사용

이와 같이 사용자가 응답할 가능성이 더 높은 적절한 시간과 장소에 팝업을 표시하는 데 사용할 수 있는 규칙이 너무 많습니다. 이는 SEO에도 도움이 되는 사용자 경험을 크게 향상시킵니다.

시작하려면 가장 먼저 해야 할 일은 OptinMonster 계정에 가입하는 것입니다. 그런 다음 별도의 탭에서 OptinMonster 계정에 로그인했는지 확인하세요.

OptinMonster에는 WordPress용 무료 커넥터 플러그인이 함께 제공됩니다. WordPress.org 저장소에서 사이트에 설치할 수 있습니다.

옵틴몬스터

활성화되면 기존 계정에 연결할 수 있습니다. OptinMonster는 다른 탭에서 로그인을 자동 감지하고 사이트를 연결합니다.

이제 첫 번째 WordPress 팝업을 만들 준비가 되었습니다.

1단계: 팝업 캠페인 만들기

WordPress 대시보드에서 OptinMonster » Popup 으로 이동합니다. 그러면 템플릿 라이브러리가 열립니다.

OptinMonster WordPress 대시보드에서 팝업 만들기

이 페이지에서 먼저 팝업을 선택하고 템플릿을 선택하세요. 여기에서 옵션을 탐색할 수 있으며 올바른 옵션을 찾았으면 해당 옵션 위로 마우스를 가져가면 나타나는 템플릿 사용 버튼을 클릭하세요.

OptinMonster에서 팝업 및 템플릿 선택

그러면 캠페인 이름을 추가할 수 있는 팝업 창이 나타납니다.

OptinMonster WordPress 플러그인에서 팝업 구축 시작

이는 모든 OptinMonster 캠페인을 체계적으로 정리할 수 있도록 내부 용도로 사용됩니다.

2단계: 팝업 맞춤설정

이제 오른쪽에서 선택한 템플릿의 미리보기와 함께 OptinMonster 캠페인 빌더가 표시됩니다. 왼쪽에는 새 블록을 추가하고 편집할 수 있는 옵션이 있는 작업 표시줄이 있습니다.

OptinMonster 빌더

예/아니요 캠페인 템플릿입니다. 즉, 사용자는 '예' 버튼을 클릭하여 다음 페이지에서 이메일 ID를 입력하여 혜택을 사용할 수 있습니다. 또는 '아니요' 버튼을 클릭하여 제안을 거부할 수 있으며 캠페인은 즉시 종료됩니다.

팝업 상자 안의 내용을 클릭하기만 하면 편집할 수 있습니다. 그런 다음 텍스트를 선택하고 삭제한 후 직접 입력하세요. 또한 글꼴, 서식, 크기 등을 변경할 수 있는 편집 도구 모음이 표시됩니다.

OptinMonster에서 텍스트 편집

다음으로 캠페인의 이미지를 변경해 보겠습니다. 이를 선택하면 왼쪽에 이미지를 교체하는 옵션이 표시됩니다.

OptinMonster에서 이미지 변경

로컬 컴퓨터에서 이미지를 업로드하거나 Unsplash 스톡 라이브러리에서 이미지를 선택할 수 있습니다. 이 메뉴에는 이미지 정렬, 너비 변경, 대체 텍스트 추가 등의 옵션도 표시됩니다.

CTA(클릭 유도 문구) 버튼을 변경하려면 해당 버튼을 클릭하면 왼쪽에 버튼 텍스트를 직접 입력할 수 있는 옵션이 표시됩니다. 그 아래에서는 사용자가 버튼을 클릭할 때 어떤 일이 발생하는지 결정할 수 있습니다.

OptinMonster 팝업의 사용자 정의 버튼

또한 이 버튼을 통해 전환을 추적하여 캠페인이 결과를 가져오고 있는지 확인할 수도 있습니다.

여기에서 고급 탭으로 전환하면 버튼 스타일, 배경, 글꼴, 간격 등을 변경할 수 있는 옵션이 표시됩니다.

OptinMonster의 고급 설정

새 블록을 추가하려면 미리보기에 끌어서 놓기만 하면 됩니다. Embed Form 블록을 살펴보겠습니다. 여기에 양식의 단축 코드를 입력하여 팝업에 양식을 추가할 수 있습니다.

OptinMonster에 양식 블록 삽입

OptinMonster는 WordPress의 가장 강력한 양식 플러그인인 WPForms와도 원활하게 작동합니다. 캠페인에 WPForms 블록을 추가한 다음 드롭다운 메뉴에서 양식을 선택하거나 단축 코드를 추가할 수 있습니다.

OptinMonster의 WPForms 블록

예를 들어 여기에 문의 양식을 삽입하여 사용자 이름과 이메일 ID를 수집할 수 있습니다.

WPForms로 양식을 작성하는 방법을 배우고 싶으십니까? 튜토리얼 » WordPress에 문의 양식을 추가하는 방법(5가지 쉬운 단계)을 따르세요.

HTML 코드를 사용하여 양식을 포함하려는 경우 이를 위해 사용할 수 있는 전용 HTML 블록이 있습니다.

마지막으로 빌더 페이지 하단에 있는 성공 탭으로 전환하고 싶을 수도 있습니다. 이는 팝업 양식을 제출한 후 사용자에게 표시되는 메시지입니다.

OptinMonster의 성공 메시지

전반적인 디자인에 맞게 맞춤 설정할 수 있습니다.

캠페인 디자인이 만족스러우면 빌더 상단에 있는 저장 버튼을 누르세요. 그런 다음 타겟팅 규칙을 추가하는 방법을 보여 주는 다음 단계로 넘어갈 수 있습니다.

3단계: 팝업에 타겟팅 규칙 추가

상단 메뉴 표시줄에서 표시 규칙 탭으로 전환합니다. 여기서는 기본적으로 사용자가 페이지에서 최소 5초를 소비하면 OptinMonster가 이 팝업을 표시한다는 것을 볼 수 있습니다.

이를 변경하려면 '페이지에 머문 시간'을 클릭하면 표시 규칙 라이브러리가 나타나는 것을 볼 수 있습니다.

OptinMonster 표시 규칙 탭

이 라이브러리에는 청중을 정확하게 타겟팅하기 위한 강력한 규칙이 가득합니다. 누가, 언제, 어디서, 온사이트 리타겟팅, e커머스별로 규칙이 깔끔하게 분류되어 있습니다.

OptinMonster 표시 규칙 옵션

클릭 시, 페이지 로드 시 즉시 또는 시간 지연 후 팝업이 표시되도록 설정할 수 있습니다.

이 튜토리얼에서는 Exit Intent 기능을 선택하겠습니다. 이는 사용자가 사이트를 종료하려는 시점을 감지하고 사용자가 사이트를 유지하도록 문의 양식 팝업을 표시합니다.

이제 'Exit Detected' 규칙이 추가된 것을 볼 수 있습니다. 모바일이 아닌 노트북 등 특정 장치 또는 모든 장치에 표시되도록 선택할 수 있습니다. 또한 감지기가 사용할 감도 수준을 선택할 수도 있습니다. 여기서는 '중간'으로 두는 것이 좋습니다.

두 번째 규칙의 경우 특정 페이지의 잠재고객을 타겟팅하도록 선택할 수 있습니다. 사용자가 결제 페이지에서 사이트를 이탈하는 경우 이 팝업을 표시하도록 선택합니다.

따라서 여기서는 '현재 URL 경로에 체크아웃이 포함됨'으로 규칙을 설정했습니다.

OptinMonsterdisplay 규칙 마무리

준비가 되면 '완료?'를 클릭하세요. 작업'으로 이동합니다. 다음 페이지에서 이 팝업 메이커 플러그인을 사용하면 캠페인에 애니메이션과 음향 효과를 추가하도록 선택할 수 있습니다.

이렇게 하면 캠페인이 정말 돋보일 것입니다!

OptinMonster 몬스터효과

변경 사항을 저장하고 다음 단계로 넘어가세요.

4단계: 이메일 및 분석과 통합

새로운 리드를 이메일 마케팅이나 CRM 계정으로 직접 보내고 싶다면 OptinMonster를 사용하면 쉽게 처리할 수 있습니다. 통합 탭에서 HubSpot, Constant Contact, Mailchimp, Zapier 등과 같은 플랫폼의 계정에 빠르게 연결할 수 있습니다.

OptinMonster 통합

여러분이 해야 할 일은 연결하려는 서비스를 클릭하고 화면의 지시에 따라 통합을 완료하는 것뿐입니다. 복잡한 단계는 없습니다.

지속적인 연락처에 연결

계정을 연결하면 모든 새로운 리드가 자동으로 태그되어 이메일 목록에 추가됩니다.

다음 탭 '분석' 에서는 기본적으로 OptinMonster에 분석 기능이 내장되어 있음을 확인할 수 있습니다. 이는 캠페인 조회수, 클릭수 및 수익도 추적합니다.

데이터를 수집하려는 경우 캠페인을 Google Analytics에 연결할 수도 있습니다. WooCommerce 데이터에 대한 귀중한 통찰력도 얻을 수 있습니다.

OptinMonster의 분석에 연결

이제 캠페인을 게시할 준비가 되었습니다.

5단계: WordPress에 팝업 게시

OptinMonster 캠페인 빌더에서 '게시' 탭을 엽니다. 여기에서 캠페인을 여러 사이트에 연결할 수 있습니다. OptinMonster는 또한 오른쪽 사이드바에 팝업 설정에 대한 개요를 제공합니다.

OptinMonster 팝업 게시

캠페인을 게시하려면 상태를 '게시' 로 설정하면 상단 메뉴가 녹색 체크 표시와 함께 '게시됨'으로 변경되는 것을 볼 수 있습니다.

새 팝업을 미리 보려면 여기에서 할 수 있는 옵션이 있습니다. 그러면 OptinMonster 캠페인 테스트 도구로 이동됩니다. WordPress 사이트나 특정 웹페이지에서 팝업이 어떻게 보일지 실시간 미리보기로 보여줍니다.

OptinMonster 캠페인 테스트 도구

그게 다야. 귀하의 캠페인이 활성화되었습니다.

WordPress 커넥터 플러그인을 사용하고 있으므로 WordPress 대시보드로 이동하고 싶을 것입니다. OptinMonster » 캠페인 으로 이동합니다. 여기에서 캠페인 상태가 게시됨으로 설정되도록 게시 버튼을 눌러야 합니다 .

OptinMonster 캠페인을 게시로 설정

사용자가 팝업과 상호작용하기 시작하면 캠페인과 함께 이 페이지에 통계가 표시됩니다. 웹사이트 방문자 수, 전환수, 전환율을 확인할 수 있습니다. 작업 열 아래에는 분석 아이콘도 있습니다. 이를 통해 모든 OptinMonster 캠페인에 대한 더 깊은 통찰력을 얻을 수 있습니다.

마지막으로 A/B 테스트 캠페인을 설정하여 청중에게 더 효과적인 것이 무엇인지 알아볼 수도 있습니다.

그게 다야.

사이트에 팝업을 성공적으로 생성, 사용자 정의 및 게시했습니다. 또한 OptinMonster를 계속 사용하여 사이트에 대한 모든 유형의 팝업을 구축할 수 있습니다.

OptinMonster는 프로 플러그인입니다. 무료 버전의 팝업 메이커를 찾고 있다면 리드 및 매출 증대를 위한 최고의 WordPress 팝업 플러그인 가이드를 확인하세요.

이 튜토리얼이 도움이 되었기를 바랍니다.

WordPress 양식 작성에 대해 더 자세히 알아보고 싶다면 따라하기 쉬운 비디오 WordPress 튜토리얼이 포함된 WPForms 101 코스를 확인하세요.

다음으로, 다른 가이드를 확인하는 것이 좋습니다.

  • WordPress를 위한 7가지 최고의 Form Builder 플러그인(비교)
  • 19가지 최고의 WordPress 페이지 빌더 검토(전문가 선택)
  • 13가지 최고의 WordPress 리드 생성 플러그인(비교)

이 가이드는 사이트에 양식과 페이지를 구축하기 위한 최고의 도구를 더 많이 보여줍니다. 마지막 게시물은 귀하의 사이트에서 더 많은 리드를 얻는 데 도움이 될 것입니다.