첫 번째 팝업은 Ethan Zukerman이 상상한 시나리오에서 만들어졌습니다.편의 90년대 초 삼각대에 있는 그의 웹페이지. 웹사이트에 게재된 광고의 수에 대해 사용자들이 불만을 토로했기 때문에 그는 사용자가 페이지에 액세스할 때 열리는 별도의 페이지에 배너를 배치하기로 결정했습니다.

이 작은 코드는 지금도 모든 웹 사이트에서 볼 수있는 것처럼 실제 팝업이 아니었지만 모든 것이 시작된 곳입니다. 최신 웹 페이지에서 팝업은 광고뿐만 아니라 다양한 목적으로 사용됩니다. 문의 양식, 개인 정보 보호 정책 경고 및 구독 제안도 종종 팝업으로 표시됩니다.

팝업과 관련하여 사용자를 괴롭히는 두 가지 사항이 있습니다. 외관이 웹 사이트 스타일과 완전히 다른 경우 이 두 가지 문제는 최고 품질이 아닌 것으로 보이는 플러그인을 사용할 때 나타납니다.

초보자 개발자가 사용하는 대부분의 플러그인의 가장 큰 문제 팝 업 만들기 결과 메시지에 대한 제어 부족입니다. 그러나 Elementor를 사용하면 이러한 모든 문제를 피할 수 있습니다. 웹 사이트 만들기.

Elementor를 위해 특별히 제작된 멋진 플러그인 XNUMX개 페이지 빌더, 필요한 모든 유형, 모양 및 스타일의 팝업을 만드는 데 도움이 됩니다. 엘레멘터 팝업 빌더 et JetPopup. 둘 다 Elementor와 같은 육체로 만들어 졌기 때문에 질문해야 할 유일한 질문은 이러한 플러그인 중 선택할 것입니다. 이 결정을 내리는 데 도움이되도록 두 가지를 철저히 검토하고 장단점을 비교할 수 있습니다. 그럼 가자!

다운로드 및 설치

이것은 사용할 플러그인을 선택할 때 가장 중요한 기준은 아니지만 사용해 보려면 먼저 가져와야합니다. 이것이 제가 처음부터 시작하여 가격, 수반되는 노력, 설정 프로세스의 단순성 등이를 얻기위한 프로세스를 간략하게 설명하는 이유입니다.

팝업 빌더

Elementor

이 플러그인은 Elementor 팀에서 만들었습니다. 그러므로 우리는 그를 그의 진짜 "아이"라고 부를 수 있습니다. 이것은 고객의 요구를 충족시키기 위해 2019 년 XNUMX 월에 출시 된 Elementor의 마지막 업데이트입니다. 그러나 Elementor의 무료 버전 사용자는 사용할 수 없습니다.

Popup Builder는 프로페셔널 구독 플랜에 포함되어 있습니다. 따라서 팝업을 생성 할 수 있으려면 먼저 Elementor Pro가 있어야합니다. 단일 웹 사이트에 Elementor의 다양한 기능을 모두 사용할 수있는 가장 간단한 요금제는 연간 $ 49입니다. 따라서 첫 번째 단계 (Elementor Pro 구매)에서 Popup Builder를 얻는 알고리즘은 다음과 같습니다.

  • 프로 엘리멘터 구매 페이지 빌더.
  • 개인 계정으로 이동하여 플러그인을 다운로드하십시오.
  • 웹 사이트 대시 보드, 플러그인> 새로 추가로 이동하여 "플러그인 업로드"버튼을 클릭하고 적절한 .zip 파일을 선택합니다.
  • 설치가 완료되면 라이센스 키로 플러그인을 활성화하십시오.
  • Popup Builder는 Templates> Popups 탭에서 찾을 수 있습니다.

다소 먼 길이지만 Popup Builder를 사용하면 위젯, 템플릿 및 기타 추가 도구와 같은 Elementor에서 다양한 요소의 방대한 컬렉션을 얻을 수 있습니다.

팝업 빌더

JetPopup

Jet 플러그인의 "family"에는 이미 10 개 이상의 기사가 있으며 JetPopup도 그 중 하나입니다. Elementor를 위해 특별히 제작되었으며 사용 가능한 도구 수가 증가합니다. 이 플러그인은 t입니다JetPopups무료 및 유료 버전과 완벽하게 호환됩니다. 따라서 추가로 구매할 필요가 없습니다. JetPopup은 $ 15이며 일단 받으면 하나의 웹 사이트에서만 사용할 수 있습니다. 두 개 이상의 프로젝트에 필요한 경우 개발자 라이선스 ($ 45 비용)로 플러그인을 구매하여 XNUMX 개의 웹 사이트에 사용할 수 있습니다. 플러그인을 얻는 알고리즘은 조금 더 간단합니다.

  • TemplateMonster Marketplace에서 플러그인을 구매하십시오. 컴퓨터로 다운로드됩니다.
  • 웹 사이트 대시 보드, 플러그인> 새로 추가로 이동하여 "플러그인 업로드"버튼을 클릭하고 적절한 .zip 파일을 선택합니다.
  • 설치가 완료되면 플러그인을 활성화하십시오.
  • 짜잔! Elementor 사용자 정의 메뉴를 열면 ( "Elementor로 편집"단추를 클릭하여) 위젯의 왼쪽 메뉴에 JetPopup 섹션이 있습니다.

JetPopup

팝업 생성

이제 도구가 준비되면 두 플러그인으로 팝업을 작성하고 기능이 얼마나 간단하고 이해할 수 있는지 확인할 수 있습니다. 다음으로 기본 팝업을 작성하고 Popup Builder 및 JetPopup의 사용자 정의 옵션을 살펴 보겠습니다.

팝업 빌더

Pro Elementor에서 팝업은 사이트 페이지와 별도로 수행됩니다. 웹 사이트의 모양을 변경하려면 사용자 정의 할 페이지를 열고 "Elementor로 편집"단추를 클릭 한 다음 변경하십시오. 그러나 팝업을 만들고 편집하려면 템플릿> 팝업으로 이동하여 "새 팝업 추가"버튼을 눌러야합니다.

팝업 빌더
팝업 작성기를 지금 사용해보십시오.

열린 창에서 생성 할 템플릿을 선택하고 (예, 팝업뿐만 아니라 페이지 및 기타 항목에 대한 템플릿을 생성 할 수 있음) 이름을 지정해야합니다.

팝업 생성

"템플릿 만들기"버튼을 누르면 Elementor 개인 설정 메뉴로 리디렉션됩니다. 기존 항목을 처음부터 작성하여 쉽게 사용자 정의 할 수 있습니다. 따라서 먼저 적절한 모델을 선택하라는 메시지가 표시됩니다.

팝업 라이브러리

라이브러리 목록 상단에 표시된 모델 중 하나를 선택했습니다. 선택 직후, 아마도 익숙한 Elementor 작업 공간으로 이동합니다. 개인 설정 옵션은 화면 왼쪽의 사이드 바에 있습니다. 여기에 세 개의 탭이 있습니다.

"설정"탭에서 팝업의 레이아웃을 변경하고 모델 이름을 변경하고 미리보기를 할 수 있습니다. "스타일"탭에서 색상, 글꼴, 이미지 및 테두리 변경과 같은 디자인을 사용자 정의 할 수 있습니다. "고급"탭에는 추가 슬라이더 세트가 있습니다. 예를 들어, ESC 키로 팝업이 닫히는 것을 방지합니다.

팝업 설정

보시다시피-예기치 않은 것은 없습니다. Elementor를 사용한 적이 있다면이 플러그인에 문제가 발생하지 않습니다. 다음은 Popup Builder를 사용하여 팝업 창을 만드는 방법을 설명하는 자세한 비디오입니다.

JetPopup

이 플러그인은 대시 보드에 새 탭을 추가합니다. 워드 프레스 테마 도움을 받아 페이지와 별도로 팝업도 생성됩니다. 즉시 사용 가능한 팝업은 "팝업 라이브러리"라는 탭에도 저장됩니다. 새 팝업을 만들려면 미리 정의된 템플릿에서 "추가" 버튼을 누르거나 JetPopup > 새 팝업 추가로 이동하여 템플릿에 이름을 지정하고 "Elementor로 편집"을 누릅니다.

새 팝업 추가

이제 더 작은 창을 만들고 있기 때문에 작업 영역은 표준과 약간 다릅니다. 왼쪽 메뉴에서 팝업에 모든 유형의 항목을 추가 할 수 있습니다.

팝업 요소

JetPopup 플러그인은 위젯 메뉴에 상황 별 작업 버튼이라는 단일 항목을 추가합니다. 이를 통해 사용자가 버튼을 누를 때 발생하는 작업 유형을 정의 할 수 있습니다.

팝업 동작 버튼

팝업 동작 편집 버튼

팝업 창에서 설정을 여는 것은 분명하지 않습니다. 메뉴 하단에있는 유지 보수 버튼을 클릭해야합니다. 설정 메뉴는 Popup Builder와 매우 유사하지만 사용자 지정 탭은 두 개뿐입니다. "일반 설정"을 사용하면 애니메이션 효과를 정의하고 모델 이름을 바꾸거나 조건을 정의 할 수 있습니다. "스타일"탭에서 레이아웃, 색상, 이미지, 글꼴 및 테두리를 변경할 수 있습니다.

팝업 일반 설정

JetPopup은 기능이 약간 덜하지만 상세하고 유용한 비디오 자습서를 보완합니다.

트리거

유용하고 방문자를 성가 시게하지 않으려면 팝업이 적시에 표시되어야합니다. 팝업이 표시되는 조건을 "트리거"라고합니다. 사용 가능한 조건이 자세할수록 팝업 플러그인이 더 유연합니다. 가입 양식 팝업 창이 나타난 후 사용자가 사이트를 떠나지 못하게하려면 정밀도가 매우 중요합니다.

팝업 빌더

팝업 빌더 편집

팝업 게시

이 플러그인은 팝업 창을 사용자 정의한 직후에 필요한 조건을 정의하는 데 도움이됩니다. "게시"버튼을 누르면 조건 (이 팝업이 표시 될 페이지), 트리거 (팝업 창이 표시 될 때) 및 고급 규칙을 정의 할 수있는 창이 나타납니다.

Popup Builder에는 한 번의 스크롤 및 클릭에 대한 표시와 같은 XNUMX 개의 트리거와 설정된 세션 수 후 표시 또는 특정 장치에 표시와 같은 XNUMX 개의 고급 규칙이 있습니다. 트리거 및 고급 규칙에는 간단한 슬라이더 스위치가 있으며 원하는 모든 매개 변수를 매우 빠르게 설정할 수 있습니다.

JetPopup

팝업 설정

팝업의 앞 페이지

모든 트리거, 조건 및 시작 이벤트는 매개 변수에서 함께 그룹화됩니다. 유지 관리 버튼을 클릭 한 후 설정 탭을 열고 즉시 트리거를 설정할 수 있습니다. 스크롤 후 페이지의 백분율, 표시 할 컨텍스트 메뉴 또는 사용자에게 메시지가 표시되는 시간 (초)을 설정할 수 있습니다.

창은 사용자가 특정 작업을 수행 할 때마다 한 번만 또는 매번 표시 될 수 있습니다 (권장하지 않습니다. 사용자를 행복하게 만들지 않습니다). 이 구체적인 팝업이 표시 될 게시물 또는 페이지를 매우 정확하게 선택할 수도 있습니다. 일반적으로이 플러그인은 매우 유연하며 매우 정확하게 팝업을 표시 할 수 있습니다.

위치

사용자는 확실히 화면 중앙에서 바로 튀어 나오는 창을 피할 수 없지만 웹 사이트에서 방문자의주의를 분산시키고 정말 짜증이 날 수 있습니다. 모든 팝업이 중앙에 배치되어야하는 것은 아닙니다. 상단의 좁은 리본은 눈에 잘 띄지 않지만 훨씬 더 효과적 일 수 있습니다. 즉, 창의 위치를 ​​제어하고 화면에서 이동할 수 있어야합니다.

위치

팝업 빌더 et JetPopup 화면을 XNUMX 개의 섹터로 나누고 그 중 하나에 팝업을 배치 할 수 있습니다. 포지셔닝은 왼쪽-오른쪽 및 위-아래 스케일을 따라 정의됩니다. 매우 유연하지는 않지만 팝업에는 충분합니다.

애니메이션 효과

페이지에서 창이 슬라이드 (또는 롤링 또는 점프)하는 방식은 매우 중요합니다. 창이 너무 빠르거나 느리게 움직이면 효과가 없습니다. 바운스, 간지럼 및 떨림도 매우 정확하게 사용해야합니다. 애니메이션 효과는 사이트를 더욱 역동적으로 만들지 만 전체적인 인상을 망칠 수도 있습니다.

애니메이션 효과

팝업 빌더 다양한 방향의 슬라이딩, 펼치기, 확대 / 축소, 바운스 및 회전을 포함하여 36 가지 유형의 입력 애니메이션이 있습니다. 애니메이션 기간과 함께이 모든 내용은 설정 탭의 "레이아웃"섹션에서 찾을 수 있습니다.

제트 팝업 설정

플러그인에는 13 가지 유형의 애니메이션이 있습니다. JetPopup페이드, 세로 뒤집기, 다른 슬라이드, 수신 거부 및 확대 / 축소를 포함하여 설정 탭의 "설정"섹션에서 찾을 수 있습니다.

모델

어떤 경우에는 특정 구조로 팝업을 만들고 어떻게 표시되어야 하는지 정확히 알고 싶을 때가 있습니다. 그러나 이것은 다소 드문 경우입니다. 팝업에 어떤 요소가 포함되어야 하는지 모르는 경우가 훨씬 더 많습니다. 이때 템플릿이 유용합니다. 미리 구성된 샘플을 사용하지 않더라도 처리하면 좋은 개요를 얻을 수 있습니다. 물론 기본 요소를 사용자 지정하는 것이 처음부터 구성하는 것보다 훨씬 빠르고 쉽습니다.

Elementor 모델 라이브러리

팝업 빌더 Elementor의 템플릿 라이브러리에 카테고리를 추가했습니다. 이전에 말했듯이 팝업을 만드는 새로운 프로세스가 시작될 때 바로 볼 수 있습니다. 다양한 팝업 템플릿이 충분히 큽니다. 100 개 이상의 항목이 있습니다. 왼쪽 상단에서 드롭 다운 범주 별 정렬 도구를 사용하면 검색 속도를 높일 수 있습니다. 범주는 이해할 수 있으며 필요한 팝업을 찾는 데 오랜 시간이 걸리지 않습니다.

제트 팝업 미리 설정 라이브러리

JetPopup 또한 방대한 템플릿 라이브러리가 있습니다. 모두 상황 별 라이브러리 탭에 저장되며 미리보기 버튼 및 사용량 카운터와 같은 편리한 기능이 있습니다. 더 많은 정렬 옵션이 있으며 목록은 특정 유형의 모델을 표시하도록 구성한 다음 임의의 순서로 배치 할 수 있습니다. 예를 들어 생성 날짜에 따라 다릅니다. 사용 가능한 정확한 모델 수를 말할 수는 없지만 확실히 100 개가 넘습니다.

비교표

엘레멘터 팝업 빌더 JetPopup
가격 $ 45 $ 15
모델 100+ 100+
트리거 6 트리거, 7 고급 규칙 추가 매개 변수가있는 5 열기 이벤트
Animatio 36 유형 13 유형
자습서 선적 서류 비치 문서, 9 비디오 자습서

JetPopup vs 팝업 빌더

결론

이 두 플러그인 중 어느 것이 더 나은지는 말할 수 없습니다. 그들을 판단하기에는 너무 복잡합니다. 각 케이스와 각 개인은 플러그인 선택에 대한 고유 한 요구 사항이 있습니다. 직접 정의해야한다고 생각합니다.이 두 가지 중 어느 것이 가장 적합할까요? 귀하의 웹 사이트에 멋진 팝업을 추가하는 데 행운이 있기를 바랍니다!