사이트에 라이트박스 팝업을 만드는 방법(단계별)

게시 됨: 2021-12-31

사이트에 대한 라이트박스 팝업을 만드는 방법을 찾고 계십니까?

라이트박스 팝업은 리드 캡처에 매우 효과적일 수 있습니다. 그들은 설득하고 개종하도록 설계되었습니다.

그러나 처음부터 코딩해야 하는 것은 정말 고통스러운 일입니다. 우선, 언제 표시할지에 대한 트리거 규칙과 함께 팝업을 생성하려면 HTML, CSS 및 Javascript를 충분히 알고 있어야 합니다. 그런 다음 이메일 서비스 제공업체와 수동 통합을 만들어야 합니다. 마지막으로 개인 정보 및 보안 문제를 처리해야 합니다.

좋은 소식: 훨씬 더 간단한 방법이 있습니다.

이 기사에서는 10분 이내에 제로 코딩으로 라이트박스 팝업을 시작하는 방법을 보여 드리겠습니다.

뛰어들어봅시다.

라이트박스 팝업이란 무엇입니까?

라이트박스 팝업은 시네마틱 효과와 함께 팝업되는 옵트인 형식입니다. 라이트박스가 나타나면 백그라운드에서 사이트의 나머지 부분을 흐리게 처리합니다. 이렇게 하면 전체 초점이 팝업에 있습니다.

라이트박스 팝업 예시

원래 라이트박스의 개념은 옥외 광고에서 나왔습니다.

라이트박스 광고

그런 다음 일부 개발자는 이것이 정말 멋진 효과라고 생각하고 웹 자산에 동일한 효과를 재현하기 위해 Javascript 라이브러리를 만들었습니다. 나중에 라이트박스 팝업을 사용하는 아이디어가 등장했습니다.

라이트박스 팝업이 작동하는 이유

라이트박스 팝업은 기존 이메일 선택 양식보다 더 많은 이메일을 캡처합니다.

그러나 그들은 왜 작동합니까?

라이트박스 팝업이 잘 작동하는 주요 이유를 간단히 살펴보겠습니다.

#1. 라이트박스 팝업에는 명확한 클릭 유도문안이 있습니다.

대부분의 사람들은 고객에게 많은 옵션을 제공하는 것이 좋은 일이라고 생각합니다.

그러나 그것은 사실이 아닙니다.

직접적인 전환을 찾고 있다면 청중이 집중할 수 있는 하나의 명확한 클릭 유도문안을 원합니다. 이렇게 하면 사용자의 마음에서 모든 방해 요소를 제거할 수 있습니다. 그리고 라이트박스 팝업은 핵심 제안을 강조하고 사람들이 클릭 유도문안에 집중하도록 하는 훌륭한 역할을 합니다.

따라서 당연히 전환율이 상당히 좋습니다.

#2. 라이트박스 팝업은 무시할 수 없습니다.

라이트박스 팝업은 전체 화면을 차지하고 다른 모든 것을 흐리게 합니다. 따라서 이들을 무시하는 것은 사실상 불가능합니다.

애니메이션이 적용된 경우 특히 그렇습니다.

팝업 애니메이션 효과

물론 팝업이 방해가 되지 않는지 확인해야 합니다. 또한 사이트에서 다른 팝업을 트리거할 시점을 사용자 지정하여 이를 수행할 수 있습니다. 청중이 방해를 받지 않는 한 매우 쉽게 설득하고 전환할 수 있습니다.

#삼. 라이트박스 팝업에는 개인화된 트리거가 있습니다.

모든 웹 방문자에게 동일한 제안을 보여서는 안 됩니다. 전자 상거래 상점을 운영하는 경우 신규 고객과 재방문 고객을 위한 매우 다른 제안이 필요합니다.

신규 고객의 경우 환영 캠페인을 실행할 수 있습니다.

쿠폰 팝업

그러나 재방문 고객의 경우 다음과 같이 다른 제안을 보낼 수 있습니다.

약혼 쿠폰 팝업

두 제안에 대한 할인 금액이 정확히 어떻게 동일한지 확인하십시오. 그러나 제안을 구성하는 방식은 크게 다릅니다. 그리고 이것은 라이트박스 팝업이 연극 효과를 위해 만들어졌기 때문에 매우 중요합니다. 따라서 보다 개인화된 접근 방식을 사용하면 훨씬 더 나은 결과를 얻을 수 있습니다.

사용자의 콘텐츠 기본 설정에 따라 제안을 개인화할 수도 있습니다. 저녁 식사 레시피에 대한 기사를 읽는 경우 자동차 제안을 보여주는 것보다 저녁 요리 레시피와 관련된 제안을 보여주는 것이 더 합리적입니다.

시골 생활 출구 팝업

#4. 라이트박스 팝업으로 이탈하는 방문자를 포착할 수 있음

라이트박스는 팝업을 표시하는 방법일 뿐입니다. 따라서 원하는 만큼 트리거를 사용자 정의하는 것을 막을 수 있는 것은 없습니다. 이탈 의도 라이트박스 팝업을 만드는 것이 좋습니다.

종료 의도 팝업

방문자가 웹사이트를 종료하려고 할 때 종료 의도 팝업이 트리거됩니다. 결과적으로 사이트를 포기했을 수많은 방문자를 유지하게 됩니다. 따라서 사이트 이탈로 고통받고 있다면 반드시 이탈 의도 라이트박스 팝업을 만들어야 합니다.

라이트박스 팝업을 만드는 방법

이제 라이트박스 팝업이 무엇이고 왜 만들고 싶은지 이해했으므로 라이트박스 팝업은 어떻게 만드나요? OptinMonster를 사용하여 팝업을 만드는 것이 좋습니다.

옵틴몬스터 홈

OptinMonster는 세계 최고의 변환 툴킷이며 우리가 직접 사용했습니다. OptinMonster를 사용하면 변환하는 강력한 팝업을 매우 간단하게 만들 수 있습니다. 그리고 코딩을 전혀 사용할 필요가 없습니다.

OptinMonster에 대한 전체 리뷰도 작성했습니다.

확인하거나 지금 바로 캠페인을 시작할 수 있습니다. OptinMonster에 가입하고 이 기사의 나머지 부분을 따르기만 하면 됩니다.

1단계: 캠페인 만들기

OptinMonster 대시보드로 이동하여 만들기 버튼을 누르십시오.

새 팝업 캠페인 만들기

라이트박스 팝업 캠페인 유형 선택:

라이트박스 팝업 생성

그런 다음 캠페인 템플릿을 선택합니다. 원하는 템플릿을 선택할 수 있지만 이 자습서에서는 단순 캠페인 유형을 사용합니다.

팝업 캠페인 테마 선택

이제 캠페인에 이름을 지정하십시오. 이 캠페인 이름은 귀하를 위한 것이며 다른 타겟팅 옵션을 사용하여 이러한 팝업 전체를 생성할 가능성이 높습니다. 따라서 캠페인에 의미 있는 이름을 지정하십시오. 그렇지 않으면 나중에 정말 혼란스러워집니다.

또한 계획에 따라 여러 사이트에서 OptinMonster를 사용할 수도 있습니다. 따라서 캠페인을 표시할 웹사이트도 선택하십시오.

캠페인 아이덴티티 만들기

완료되면 건물 시작 을 누르십시오.

2단계: 팝업 편집

OptinMonster를 사용하면 시각적인 끌어서 놓기 팝업 빌더를 얻을 수 있습니다. 캠페인 생성이 완료되면 팝업에 대한 가장 작은 세부정보도 수정할 수 있습니다. 팝업 헤드라인을 수정하여 시작하세요.

광고 제목 수정

여기서 가장 놀라운 부분은 편집하려는 텍스트를 클릭하고 인라인으로 변경할 수 있다는 것입니다. 양식을 작성하거나 팝업에서 HTML 코드를 편집할 필요가 없습니다.

그런 다음 버튼 텍스트와 모양을 조정하여 명확한 클릭 유도문안을 만듭니다.

CTA 맞춤설정

팝업 모양이 마음에 들면 고급 설정으로 이동할 수 있습니다.

3단계: 표시 규칙 설정

표시 규칙은 캠페인이 사이트에 표시되는 시기와 보는 사람을 정의하기 위한 것입니다.

팝업 표시 규칙

트리거 조건을 종료 의도로 변경하는 것이 좋습니다.

이탈 의도 라이트박스 팝업

다음 단계 를 클릭하여 작업 을 선택합니다. 여기 에서 캠페인 보기 표시 를 Optin 보기로 설정하고 MonsterEffect와 함께 쇼 를 원하는 진입 애니메이션으로 설정하고 사운드 효과를 팝업의 사운드 효과로 재생 하는 것이 좋습니다.

캠페인 액션 설정

그런 다음 다음 단계 버튼을 클릭합니다. 요약 탭에서 설정의 전체 범위를 볼 수 있습니다.

4단계: 이메일 통합 설정

다음 단계는 이메일 통합을 설정하는 것입니다. 통합 탭에서 새 통합 추가 를 클릭하고 이메일 서비스 공급자를 선택합니다.

OptinMonster 통합

이메일 서비스 제공업체가 아직 없는 경우 이메일 마케팅에 Drip을 사용하는 것이 좋습니다.

5단계: 라이트박스 팝업 게시

새 캠페인을 만들면 기본적으로 일시중지 됩니다.

게시 옵션 을 보려면 상단 메뉴에서 게시 탭으로 이동합니다. 그런 다음 상태를 게시 로 설정하고 웹사이트 플랫폼을 선택합니다.

OptinMonster 캠페인 게시

WordPress 사이트를 실행하는 경우 OptinMonster 플러그인이 나머지 설정을 자동으로 처리합니다. Shopify와 BigCommerce도 마찬가지입니다. 다른 사이트의 경우 모든 사이트를 클릭하고 웹사이트 헤드에 포함 코드를 붙여넣습니다.

글로벌 임베드

그리고 당신은 끝났습니다!

마무리

이게 다야, 여러분!

이 기사가 도움이 되었는지 알려주세요. 사이트에 팝업을 생성하면 트래픽을 이메일 구독자 및 진정한 비즈니스 리드로 전환하는 데 도움이 될 수 있습니다. 그리고 라이트박스 팝업 생성을 즉시 시작하는 것이 좋습니다.

트래픽을 늘릴 수 있는 저렴한 방법을 찾고 있다면 푸시 알림을 사용하는 것이 좋습니다. 푸시 알림은 더 많은 반복 트래픽과 사이트 참여를 유도하는 데 도움이 될 수 있습니다. 판매를 생성하는 자동 푸시 알림 캠페인을 만들 수도 있습니다.

확신하지 못하셨나요? 다음 리소스를 확인하세요.

  • 고객 참여를 높이는 7가지 스마트 전략
  • 푸시 알림이 효과적입니까? 7가지 통계 + 3가지 전문가 팁
  • 버려진 카트 푸시 알림을 설정하는 방법(쉬운 자습서)

푸시 알림 캠페인을 생성하려면 PushEngage를 사용하는 것이 좋습니다. PushEngage는 세계 최고의 푸시 알림 소프트웨어입니다. 따라서 아직 시작하지 않았다면 지금 바로 PushEngage를 시작하십시오!