WordPress 웹 사이트에 팝업을 자유롭고 빠르게 추가하는 방법

웹 사이트를 방문할 때 갑자기 화면에 이미지나 메시지가 표시되는 것을 본 적이 있습니까? 그것은 웹 사이트의 팝업 또는 알림 창입니다.

팝업은 많은 비즈니스 주자 및 웹사이트 소유자가 사용하는 인기 있고 효과적인 마케팅 전략입니다. WordPress에 이와 같은 팝업을 추가하려면 무료 플러그인을 사용하여 빠르고 간단하게 만들 수 있습니다. 전문가가 아니어도 안내에 따라 10분이면 충분합니다.

비즈니스 웹사이트에서 팝업을 사용해야 하는 이유는 무엇입니까?

아래 이미지는 비즈니스 웹사이트 팝업 예시입니다. 멋지지 않나요?

Popup은 훌륭할 뿐만 아니라(잘 어울리고 매력적인 디자인을 관리하는 경우) 다음과 같은 다른 많은 이점도 있습니다.

• 중요한 정보, 판매 및 마케팅 캠페인을 홍보하고…
• 클릭 유도문안, 전환율 증가
• 리드 생성

Popup Builder 플러그인을 사용하여 WordPress에 팝업 추가

WordPress 웹 사이트에 팝업을 추가하려면 신뢰할 수 있는 웹 디자인 회사 또는 코더를 고용할 수 있습니다. 그러나 시간과 비용을 절약하려면 플러그인이 가장 좋습니다. 많은 팝업 플러그인 중에서 Popup Builder가 가장 사용하기 쉽고 효과적일 수 있습니다.

무료 플러그인이며 wordpress.org에서 사용할 수 있으므로 대시보드에서 바로 플러그인을 설치하고 활성화하기만 하면 됩니다.

완료되면 아래 단계를 따르세요.

1단계: 팝업 유형 선택

이제 팝업 빌더 하위 메뉴가 대시보드에 표시됩니다. 거기로 이동하여 뉴스 추가를 클릭하고 제공된 4가지 팝업 유형 중 하나를 선택합니다.

아래 이미지는 더 나은 설명을 위해 이 플러그인에서 제공하는 4가지 유형의 팝업이 프런트 엔드에 표시되는 방식입니다.

원하는 유형을 선택한 후 다음 단계로 이동합니다.

2단계: 팝업에 콘텐츠 추가

먼저 팝업에 이름을 지정하여 보다 쉽게 ​​관리할 수 있습니다.

다른 유형의 팝업에는 다른 내용이 필요합니다. 각 유형을 파헤쳐 봅시다.

Facebook 팝업에 콘텐츠 추가

Facebook 팝업을 생성하기 위한 인터페이스에서 다음 정보를 입력해야 합니다.

1. 팝업에 표시되는 메시지입니다. 독자가 상호 작용할 수 있도록 유도하는 문장을 사용해야 합니다. 또한 이미지, 배너를 추가하여 더욱 멋질 것입니다.
2. 페이스북 URL을 삽입합니다.
3. 즉석에서 팝업 레이아웃을 선택합니다. 기본적으로 이러한 레이아웃은 크게 다르지 않습니다. 따라서 그것들을 시험해보고 좋아하는 것을 선택할 수 있습니다.
4. 원하는 경우 공유 버튼을 숨기려면 여기를 클릭하십시오.

그리고 이것이 내가 가진 것입니다.

이미지 팝업에 콘텐츠 추가

여기에서 이미지를 업로드하거나 이미지의 링크를 삽입하기만 하면 됩니다. 이 플러그인은 JPG, PNG 및 GIF를 지원합니다.

이것은 제 웹사이트의 블랙 프라이데이 캠페인을 위해 제가 직접 만든 아름다운 배너입니다.

HTML 팝업에 콘텐츠 추가

HTML 팝업에 콘텐츠를 추가하는 것은 WordPress Gutenberg 편집기에서 게시물을 작성하는 것과 같습니다. 이미지, 비디오, 표, 버튼, 인용문 등을 삽입하거나 WordPress 편집기가 지원하는 기타 콘텐츠를 삽입할 수 있습니다. 인터페이스는 Gutenberg 편집기와 다소 유사하므로 매우 친숙하고 기본적입니다.

그리고 이것은 프런트 엔드의 HTML 팝업입니다.

구독 팝업에 콘텐츠 추가

여기에는 구독 양식을 작성하고 사용자 정의할 수 있는 많은 콘텐츠가 있습니다. 그러나 가장 주목해야 할 것은 First name , Last name , Email 과 같은 양식의 필드와 해당 자리 표시자 및 필수 필드를 사용자 정의하는 것 입니다 .

그런 다음 아래로 스크롤하여 양식 배경 옵션, 입력 스타일, 제출 버튼 스타일 과 관련하여 양식 표시를 사용자 지정하여 웹 사이트와 더 잘 어울리도록 만듭니다.

특히, 성공적인 구독 후 섹션에서 적절한 메시지 또는 구독 후 사용자에게 표시하려는 정보를 재치 있게 선택하십시오. 예를 들어 이러한 구독자를 위해 감사 메모, 쿠폰, 선물, 기프트 카드 등을 표시할 수 있습니다. 그렇게 하면 사용자의 인상을 끌어서 경험을 개선할 수 있습니다.

예를 들어, 이것은 내 구독 이메일 팝업입니다. 일단 제출하면 블랙 프라이데이 세일 캠페인에 대한 알림을 표시하여 고객에게 쇼핑을 촉구합니다.

팝업 빌더 > 모든 구독자 로 이동하여 구독자 를 관리합니다.

뉴스레터 탭에서 구독자에게 이메일을 보낼 수도 있습니다.

콘텐츠를 추가한 후 아래로 스크롤합니다. 다른 많은 설정 옵션이 표시됩니다. 4,5,6단계에서 각 옵션을 파헤쳐 보겠습니다.

3단계: 팝업 표시 위치 및 조건 설정

표시 위치 설정

팝업 표시 규칙 섹션에서 팝업이 표시되거나 표시 되지 않는 위치를 조정해야 합니다.

Everywhere 를 선택하여 모든 페이지, 게시물, 태그 또는 사용자 지정에 표시하거나 원하는 특정 위치에 표시할 수 있습니다. (?) 도구 설명을 클릭하여 자세한 내용을 볼 수도 있습니다.

예를 들어 위치를 특정 페이지로 선택하고 "is" 를 선택하여 표시하고 표시 페이지를 "Home" 으로 선택합니다. 또한, 추가를 선택하여 다른 위치를 추가 할 수 있습니다.

표시 조건 설정

팝업 이벤트 섹션에서 팝업이 표시되는 시간을 선택합니다(웹사이트가 몇 초 동안 로드되었을 때, 사용자가 어딘가를 클릭했을 때 등). 이 플러그인은 다음 표시 조건을 지원합니다.

• 로드 시 : 사이트 로드 가 완료된 후 몇 초 후에 팝업이 자동으로 표시됩니다( 지연 탭에서 시간을 추가할 수 있음).

• CC 클래스로 설정 : 사용자가 일부 구성 요소를 클릭하여 팝업을 활성화할 수 있습니다. 이 구성 요소는 해당 구성 요소의 ID를 기반으로 합니다. 이 부분은 다소 복잡하므로 설명서를 주의 깊게 읽는 것이 좋습니다.

• On click : Set by CSS class 섹션과 유사하지만 활성화하기 위해 "버튼"을 설치하기 위해 팝업의 ID를 사용할 필요가 없습니다.

대신 옵션 섹션에서 기본값 을 선택하면 플러그인은 아래와 같이 기본 클래스 섹션에서 팝업에 대한 기본 클래스 를 생성합니다.

Custom CSS 를 선택하는 경우 Custom Class 섹션에서 직접 생성한 클래스를 입력 합니다.

그런 다음 팝업의 클래스를 원하는 구성 요소의 CSS에 추가합니다.

예를 들어 이 포스트에서는 추가 CSS 클래스 섹션에 원하는 버튼과 클래스를 추가했습니다 .

이것은 프런트 엔드의 결과입니다.

• Hover Click : 컴포넌트에 마우스를 가져가면 팝업이 나타납니다. On Click 섹션에서와 동일하게 수행할 수 있습니다.

4단계: 팝업 표시 사용자 지정

3단계 후에 기본 팝업이 표시됩니다. 그러나 더 멋지게 만들고 싶다면 디자인 섹션으로 스크롤하십시오. 여기에서 인터페이스, 오버레이, 배경과 같은 일부 구성 요소를 사용자 정의하여 원하는 대로 완벽하게 만들 수 있습니다.

그 외에도 치수 섹션에서 사용자 정의 모드 를 선택하거나 반응 모드 를 선택하여 너비와 길이를 조정하여 크기가 내용과 자동으로 일치하도록 합니다.

5단계: 기타 고급 설정 사용자 지정

이러한 고급 설정을 사용하면 팝업 표시 및 상호 작용을 보다 세부적으로 구성할 수 있습니다.

예를 들어 설정 닫기 섹션에서 팝업 창을 닫는 방법을 선택할 수 있습니다. Esc 키 를 누르거나 닫기 버튼을 추가하는 것과 같이 닫는 방법에는 여러 가지가 있습니다.

팝업 닫기 및 열기 효과를 추가하거나 한 사용자에게 표시되는 시간을 조정하려면 ... 팝업 옵션 섹션으로 스크롤하십시오. 원하는 옵션을 클릭하기만 하면 됩니다.

무료 Popup Builder 플러그인을 사용할 때 아래 이미지와 같이 노란색으로 표시된 잠금 해제 옵션 이라는 섹션은 프로 버전의 기능입니다. 이 플러그인을 사용하려면 더 많은 확장 프로그램을 구입해야 합니다.

마지막으로 사이드바에 매우 흥미로운 옵션이 있습니다. 클릭 시 팝업을 표시하도록 웹사이트에 고정 버튼을 추가하는 것입니다. 이 플로팅 버튼은 사람들이 언제 어디서나 볼 수 있도록 하여 정말 편리합니다. 디자인도 쾌적하고 거슬리지 않습니다.

이것은 웹사이트의 플로팅 버튼입니다.

또는 비활성화 를 클릭하여 비활성화 할 수 있습니다.

마지막으로 게시 를 클릭하여 완료합니다.

이렇게 기본 설정부터 고급 설정까지 6단계를 거쳐 팝업이 완성되었습니다. 잘했어!

마지막 말

보시다시피 WordPress에 팝업을 추가하는 것은 그리 복잡하지 않습니다. 디스플레이를 사용자 정의할 때 약간의 인내심이 필요합니다. 그게 전부입니다!

이 외에도 웹사이트의 전환율을 높이기 위한 많은 것들이 있습니다. 효과적인 랜딩 페이지를 만들고 싶다면 전환율이 높은 랜딩 페이지를 만드는 방법이나 제품 페이지를 만드는 방법에 대한 기사를 읽는 것이 좋습니다.

행운을 빕니다!