버튼을 클릭할 때 Bloom Opt-In Form 팝업을 만드는 방법

요즘은 옵트인 양식이 없는 인터넷을 상상하기 어렵습니다. 우리는 특히 두 가지 주요 이유로 웹 사이트에서 사용합니다. 구독자 확보 또는 리드 생성

옵트인 양식을 사용하여 청중에게 접근할 수 있는 올바른 방법을 찾는 것은 정말 어려운 일입니다. 어떤 사람들은 안전한 게임을 원하고 방문자가 원치 않는 옵트인 양식으로 인터넷 거품을 '침범'하는 것처럼 느끼게 만들고 싶지 않습니다. 보통 사람들이 웹사이트의 특정 위치를 클릭한 후 표시되는 옵트인 양식을 선택하는 순간입니다. '클릭 시 트리거'.

오늘의 튜토리얼에서는 웹사이트의 가장 중요한 부분에서 이러한 클릭 트리거를 정확히 어떻게 사용할 수 있는지 보여드리겠습니다. 트리거 옵션 클릭을 포함할 수 있게 되면 진행 상황에 도움이 되는지 확인하기 위해 결과를 측정하는 것을 잊지 마십시오.

클릭 후 옵트인 양식을 사용하는 경우

기본적으로 웹사이트의 모든 것이 옵트인 양식을 트리거하도록 할 수 있습니다. 그러나 엉뚱한 곳에서 그것을 사용하면 빨리 당신에게 불리할 수 있습니다. 사람들은 항상 웹사이트를 무작위로 클릭하는 데 익숙합니다. 예를 들어 그들이 무언가를 읽을 때. 아니면 그냥 둘러볼 때에도 웹사이트 어딘가를 목적 없이 클릭하는 경우가 많습니다.

이제 당신이 방문자라고 상상해보십시오. 무작위로 클릭할 때마다 목적 없이 수행한 작업으로 인해 예기치 않은 옵트인 양식에 직면할 수 있습니다. 그것은 의심할 여지 없이 나쁜 영향을 미칠 것입니다. 왜냐하면 그 적절한 순간에 당신이 그 웹사이트를 방문할 때 당신이 전혀 통제할 수 없는 것처럼 느낄 것이기 때문입니다.

사람들이 자발적으로 클릭하거나 클릭하지 않기로 선택한 장소(일반적으로 버튼이나 클릭 유도문안)에 클릭 트리거 옵트인 양식을 배치하는 것은 또 다른 이야기입니다. 우리는 CTA(클릭 유도문안)를 클릭하는 것에 익숙하므로 두려워하지 않습니다. 우리는 다음 단계를 보기 위해 의도적으로 선택하고 있습니다. CTA 뒤에 무엇이 있는지 궁금하지 않다면 클릭하지 않을 것입니다. 하지만 우리가 원한다면 할 수 있습니다. 방문자는 이러한 '선택'을 통해 옵트인 양식이 표시될 때 더 쉽게 느끼고 뉴스레터에 실제로 등록할 가능성을 높입니다.

버튼을 클릭할 때 Bloom Opt-In Form 팝업을 만드는 방법

YouTube 채널 구독

옵트인 양식 만들기

사람들이 귀하의 CTA를 클릭하도록 하는 것은 일종의 예술입니다. 사람들이 구독하도록 하거나 CTA를 클릭한 후 옵트인 양식을 통해 리드가 되는 것은 예술에 대한 감상입니다. 양측이 결국 만족할 수 있도록 실험하고 타겟 청중에게 접근할 수 있는 올바른 방법을 찾아야 합니다.

이러한 종류의 옵트인 양식을 활용할 수 있는 웹사이트의 서로 다른 두 버튼에 대한 클릭 트리거를 만드는 방법을 보여 드리겠습니다. 버튼 모듈 및 전체 너비 헤더 버튼. 작업 방식은 동일하지만 다른 시나리오에서 보면 논리를 이해하는 데 도움이 될 수 있습니다. 그 후에 다른 모듈에도 사용할 수 있습니다.

이제 옵트인 양식을 CTA에 연결하는 방법을 보여주기 전에 옵트인 양식의 설정을 살펴보겠습니다. 이 게시물에서는 특정 디자인을 제공하지 않고 논리만 제공합니다. 클릭 트리거가 작동하는지 확인하는 데 필요한 몇 가지 설정이 있습니다.

옵트인 양식 유형 선택

새로운 옵트인 양식을 추가할 때 가장 먼저 마주하게 되는 선택은 사용하려는 옵트인 양식의 유형입니다. 클릭 시 트리거를 생성하려면 팝업 및 플라이 인의 두 가지 유형을 사용할 수 있습니다. 가장 많이 선택하게 되는 유형은 팝업입니다. 하지만 조금 더 섬세하게 만들고 싶다면 플라이 인을 사용할 수도 있습니다.

설정 탭

만들고 있는 옵트인 양식의 설정 탭에서 옵트인 양식의 이름을 지정하여 시작합니다. 그런 다음 양식을 이메일 공급자에 연결합니다. 이메일 공급자, 계정 및 이메일 목록이 없으면 양식이 비활성화됩니다.

디자인 탭

디자인 탭에서 사용할 양식의 스타일을 지정할 수 있습니다. 이 포스트에서는 그렇게 하지 않을 것입니다. 작동 여부를 확인하기 위해 수정 없이 표준 옵트인 양식을 선택하겠습니다. 나중에 언제든지 변경하기 위해 만든 옵트인 양식으로 돌아갈 수 있습니다.

디스플레이 설정 탭

이것은 선택 양식을 버튼 중 하나에 연결할 탭입니다. 결과가 제대로 작동하는지 확인하려면 옵트인 양식이 작업하려는 페이지에 표시되도록 허용해야 합니다. 전체 웹 사이트에서 동일한 양식을 사용하려는 경우 아래 이미지와 같이 모든 항목에 대해 양식을 쉽게 활성화할 수 있습니다.

또한 클릭 시에만 트리거에 대한 옵트인 양식을 사용하려고 합니다. 이것이 우리가 다른 모든 옵션을 비활성화하고 '클릭 시 트리거' 옵션만 활성화하는 이유입니다. CSS 선택기 필드가 즉시 나타나는 것을 볼 수 있습니다. 이 게시물의 뒷부분에서 이 필드를 사용하여 우리가 만들고 있는 옵트인 양식에 버튼을 연결할 것입니다. 나중에 바로 액세스할 수 있도록 이 페이지를 탭에 열어 두십시오.

시작하자

다른 모듈에 클릭 트리거 옵트인 양식을 추가하는 논리는 동일하지만 두 가지 예에서 설명하겠습니다. 버튼 모듈 및 전체 너비 헤더 버튼입니다. 로직을 이해하지 못하면 이 게시물의 단계를 따르면 됩니다.

그러나 아래에 설명된 것과 다른 위치에서 클릭 트리거가 작동하도록 하려면 약간 수정해야 합니다. 변경될 유일한 것은 이 클래스가 항상 다르기 때문에 우리가 사용하는 클래스입니다. 이 클릭 트리거가 웹사이트의 다른 부분에 발생하도록 하려면 아래에 표시되는 것과 동일한 단계를 수행하고 사용 중인 항목에 따라 CSS 클래스를 변경하기만 하면 됩니다.

버튼 모듈을 연결하여 옵트인 양식 팝업

우리가 안내할 첫 번째 예는 버튼 모듈입니다. 버튼 모듈에 대한 클릭 트리거를 생성할 때 좋은 점은 가능성이 무한하다는 것입니다. 버튼 모듈이 포함된 모든 유형의 섹션 또는 행을 만들고 원하는 만큼 창의적으로 만들 수 있습니다.

더 이상 기한 없이 버튼에 대한 클릭 트리거를 생성해 보겠습니다. 두 가지 방법이 있습니다. CSS 클래스를 사용하거나 모듈에 할당된 CSS ID를 생성합니다.

CSS 클래스를 사용하여

클릭 트리거가 작동하도록 하려는 페이지를 열거나 페이지를 만듭니다. 그런 다음 버튼 모듈을 추가하거나 작동하려는 버튼의 버튼 모듈 설정을 엽니다.

고급 탭으로 이동하여 아래로 스크롤합니다. Main Element 필드를 클릭하고 버튼에 할당된 CSS 클래스가 나타나는 것을 확인하십시오. CSS 클래스를 복사하면 바로 필요합니다.

그런 다음 생성 중인 옵트인 양식의 디스플레이 설정 탭으로 이동합니다. 이전 부분에서 우리는 이미 마술이 일어나는 곳을 보여주었습니다. 'Trigger On Click'을 활성화하고 언급된 다른 모든 가능성을 비활성화했습니다. 'Trick On Click' 바로 아래에 다음 줄을 붙여넣어야 합니다.

*.et_pb_button_0.et_pb_button.et_pb_module

보시다시피, 이 단계 직전에 복사한 클래스가 뒤에 오는 '*' 기호일 뿐입니다.

이 방법을 사용할 때 한 가지 염두에 두어야 할 사항이 있습니다. 버튼 CSS 클래스는 같은 페이지의 버튼마다 다르지만 다른 페이지에 버튼을 추가하는 즉시 '0'부터 시작됩니다. 이는 모든 페이지 및 게시물에 대해 옵트인 양식을 사용할 수 있는 경우 모든 페이지의 모든 첫 번째 버튼 모듈이 옵트인 양식을 트리거함을 의미합니다.

이를 방지하려면 CSS ID를 통해 클릭 트리거를 발생하도록 만들 수 있습니다. 그러나 전체 모듈에 특정 CSS ID를 할당하는 경우 가장 쉬운 방법은 CSS 클래스를 사용하는 것입니다.

특정 옵트인 양식이 옵트인 양식의 디스플레이 설정에 표시될 수 있는 페이지를 결정할 수 있습니다. 이렇게 하면 할당된 버튼을 클릭한 후 옵트인 양식이 어떤 페이지에 표시되는지 제어하고 정확히 알 수 있습니다.

CSS ID를 사용하여

두 번째 방법은 CSS ID를 사용하는 것입니다. 버튼 모듈을 열고 고급 탭으로 이동하여 CSS ID를 지정합니다. 이 경우 '팝업'을 사용합니다.

계속해서 버튼 모듈의 콘텐츠 탭으로 이동하여 "#" 기호 다음에 원하는 것을 입력하세요. 이렇게 하면 방문자가 버튼을 클릭하는 동안 페이지의 같은 위치에 남아 있는지 확인할 수 있습니다.

계속해서 옵트인 양식 설정으로 돌아가서 클릭 시 트리거 필드에 "a#popup"을 추가합니다. 버튼 모듈에 할당한 CSS ID 다음에 항상 "a#"을 작성해야 합니다.

a#popup

전체 너비 헤더 버튼을 옵트인 양식에 연결

클릭 시 트리거 옵트인 양식을 수행하는 방법을 보여줄 또 다른 예는 전체 너비 헤더 버튼입니다. 여기서 우리가 할 수 있는 유일한 가능성은 버튼 CSS 클래스를 사용하는 것입니다. 특히 버튼에 Divi 빌더를 통해 CSS ID를 할당할 수 없습니다.

CSS 클래스를 사용하여

클릭 시 트리거 옵트인 양식을 추가할 전폭 헤더를 생성하거나 전폭 헤더를 엽니다. Fullwidth 헤더의 고급 탭으로 이동하여 'Button One'이 나타날 때까지 아래로 스크롤합니다. 필드를 클릭하고 버튼에 할당된 CSS 클래스를 복사합니다.

그런 다음 콘텐츠 탭으로 이동하여 버튼 #1의 URL 필드에 "#" 기호를 입력한 다음 다른 항목을 입력합니다.

마지막으로 옵트인의 디스플레이 설정 탭으로 이동하여 "*" 기호를 입력하고 버튼에 복사한 클래스를 입력합니다.

*.et_pb_fullwidth_header_0 .header-content-container .header-content .et_pb_button_one.et_pb_button

마지막 생각들

이 튜토리얼은 클릭 시 트리거 및 Bloom 옵트인 양식을 시작하는 데 도움이 될 것입니다. 현재 구독자 또는 리드를 확보하려는 방법을 재고하게 만들 수도 있습니다. 질문이나 제안 사항이 있는 경우 아래 댓글 섹션에 자유롭게 댓글을 남겨주세요. 그리고 당신이 거기 있는 동안; 어떤 경우에 Trigger On Click 옵트인 양식을 사용하는지 알려주십시오.

중요한 발표, 유용한 팁 또는 Divi 공짜를 절대 놓치지 않도록 이메일 뉴스레터와 YouTube 채널을 구독하세요!

BarsRsind / shutterstock.com의 주요 이미지