Elementor에서 무료로 팝업을 추가하는 방법(Elementor Pro가 필요하지 않음)

Elementor Pro 비용을 지불하지 않고도 Elementor 에서 팝업을 추가할 수 있습니다. 무료 Elementor 는 팝업 빌더와 함께 제공되지 않지만 Pro 만이 팝업 빌더를 얻을 수 있는 유일한 방법은 아닙니다. 무료 Elementor용 마스터 애드온 플러그인에는 전체 내용이 포함되어 있습니다 팝업 빌더, 100+ 기성 템플릿, 다섯 트리거 유형. 모든 무료 플러그인에 앉아, 아니 평가판 타이머와 워터 마크가 없습니다.

당신은 두 가지가 필요합니다: 무료 Elementor,그리고 무료 마스터 애드온 WordPress 디렉토리에서 플러그인. 첫 번째 팝업을 설정하는 데 약 십분 정도 걸립니다. 이 가이드는 하나를 구축,그것이 발사 할 때 선택,그리고 그것을 보여주는 페이지를 따기,가장 자주 오는 질문과 함께 다룹니다: Elementor 무료 팝업 빌더가 있습니까,무엇을 elementor/popup/show 이벤트는 실제로 수행되며 JavaScript를 작성하지 않고 버튼 클릭으로 팝업을 여는 방법도 있습니다.

팝업을 만들려면 Elementor Pro가 필요합니까?

짧은 대답: 아니요. Elementor Pro 의 Popup Builder 는 유료 기능이지만 Elementor 내부에 팝업을 추가하는 유일한 방법은 아닙니다.

각 옵션이 실제로 제공하는 것은 다음과 같습니다:

따라서 Elementor Pro 를 보는 유일한 이유가 팝업이라면 무료 Elementor 에 머물면서 Master Addon 을 설치하고 동일한 드래그 앤 드롭 편집기로 빌드 할 수 있습니다. 이미 Pro 를 소유하고 있다면 두 가지가 충돌하지 않고 나란히 실행됩니다.

여기에 단어 “무료”에 대해 구체적으로 가치가. 팝업 빌더는 평가판 및 유료 모듈의 컷 다운 버전이 아닙니다. 마스터 애드온은 프로 버전을 판매 않습니다,하지만 프로는 다른 것들을 커버: 여분의 위젯과 전체 위젯 빌더 팝업은 그 밖에 앉아.

마스터 애드온 팝업 빌더란 무엇입니까?

마스터 애드온은 30,000+ 활성 사이트에서 사용되는 올인원 Elementor 플러그인입니다. 그것은 80 + 위젯,a 와 함께 제공됩니다 테마 빌더, 템플릿 라이브러리, a 위젯 빌더, 그리고 무료입니다 팝업 빌더니다. 팝업빌더는 따로 구매하는게 아니라 플러그인을 설치하면.

Elementor 편집기 내부에서 팝업을 시각적으로 디자인한 다음 팝업이 나타날 때 (트리거) 와 나타나는 위치 (표시 조건) 를 제어합니다. 코드 없음,추가 플러그인 없음,Pro 라이센스 없음.

사람들이 무료 마스터 애드온 팝업 빌더를 선택하는 이유

• 플러그인에 번들로 제공되는 무료 팝업 빌더. 업그레이드가 필요하지 않습니다.
• Elementor에서 이미 알고 있는 것과 동일한 드래그 앤 드롭 디자인 경험.
• 100 + 사전 구축 된 팝업 템플릿 한 번의 클릭으로 가져올 준비가.
• 5가지 트리거 유형: 클릭 시, 페이지 로드, 의도 종료, 스크롤 시, 비활성 이후.
• 모든 게시물, 페이지, 카테고리 또는 사용자 정의 게시물 유형에 대한 표시 조건.
• 무료 Elementor, 무료 WordPress 호스팅 및 최신 Elementor 버전에서 작동합니다.

어떤 유형의 팝업을 만들 수 있나요?

• 리드 생성 및 이메일 옵트인 팝업
• WooCommerce 프로모션, 판매 배너 및 카트 포기 제안
• 비디오 라이트박스 팝업(YouTube, Vimeo, 자체 호스팅)
• 이미지 갤러리 라이트박스
• 공지사항 바 및 상단 배너
• 로그인 및 등록 양식 팝업
• 쿠키 동의 및 GDPR 고지
• 피드백, NPS 및 설문조사 팝업
• 조건, 가격 세부정보 또는 제품 정보에 대한 모달 팝업입니다

마스터 애드온의 5가지 팝업 트리거

스크롤 트리거에 1

방문자 후에 팝업이 발생합니다 페이지의 설정된 비율을 스크롤합니다. 콘텐츠 업그레이드 또는 이메일 옵트인이 독자가 실제로 무언가를 읽은 후에 나타나기를 원할 때 좋으며, 머물지 여부를 결정하지 않았을 때 페이지로드가 아닙니다.

2. 페이지로드 트리거

팝업 초 단위로 측정하여 설정한 지연 후에 나타납니다니다. 정장 환영 메시지,시간 제한 제공,그리고 모든 사람이 봐야 할 모든 것을 지연 값을 시청합니다. 2 초 미만은 느린 연결에 사람들을 성가시게하는 경향이 있습니다.

3. 종료 인텐트 트리거

팝업은 커서가 브라우저 탭 또는 닫기 버튼 쪽으로 이동 하는 때를 감지 하 고 최종 메시지를 발사 합니다. 이것은 사람들이 “로 검색 하는 것입니다elementor 종료 인텐트 팝업“, 그리고 그것은 무료 마스터 애드온 플러그인에 있습니다. 당신이 그것을 중심으로 캠페인을 구축하기 전에 한 가지주의 사항: 종료 인텐트는 데스크톱 동작입니다. 전화는 추적 할 커서가 없으므로 모바일 방문자에게 스크롤 또는 비활성 트리거를 대신 제공합니다.

클릭 트리거에 4

방문자가 특정 버튼,이미지 또는 링크를 클릭할 때만 팝업이 열립니다. a 를 구축하는 가장 쉬운 방법입니다 클릭-열기 모달 코드를 건드리지 않고 무료로 교체해 드립니다 elementor/popup/show 다음 섹션에서 다루는 JavaScript 이벤트.

5. 비활동 트리거 후

팝업 설정된 기간 동안 커서 스크롤이나 이동을 중단한 방문자를 다시 참여시킵니다독자를 잃는 가장 빠른 방법인 첫번째 전망에 발사 없이 주의를 회복하기를 위해 좋은.

elementor/popup/show 이벤트(및 무료 대안)를 사용하는 방법

Elementor Pro는 JavaScript라는 이벤트를 노출합니다 elementor/popup/show. 개발자는 코드에서 팝업을 트리거하는 데 사용합니다: 사용자 지정 양식 제출 후 팝업을 실행하거나 AJAX 응답 또는 Elementor 편집기 외부에 있는 버튼을 실행합니다.

Elementor Pro 의 기본 패턴은 다음과 같습니다:

jQuery( document ).on( 'elementor/popup/show', ( event, id, instance ) => {
    // your code runs when popup with this ID is shown
    console.log( 'Popup opened:', id );
} );

// To open a popup programmatically in Elementor Pro:
elementorProFrontend.modules.popup.showPopup( { id: 1234 } );

무료 Elementor 에 있다면 액세스 할 수 없습니다 elementorProFrontend.modules.popup.showPopup. 또한 대부분의 사용 사례에는 필요하지 않습니다. 마스터 애드온 클릭 시 트리거는 기본적으로 일반적인 것을 처리합니다:

• 페이지의 아무 곳이나 버튼을 클릭하면 팝업이 열립니다. 트리거 선택기를 CSS 클래스 또는 ID 로 설정하고 일치하는 요소가 팝업을 엽니다.
• 이미지, 아이콘 또는 텍스트 링크를 클릭하면 팝업이 열립니다. 동일한 선택기 논리가 모든 요소에 적용됩니다.
• 양식 제출 후 팝업을 엽니다. 양식의 리디렉션 또는 감사 작업을 팝업 선택기가 있는 숨겨진 버튼과 결합합니다.

AJAX 호출이 특정 값으로 다시 오는 경우에만 팝업을 여는 것과 같이 런타임에 결정이 발생하면 선택기 접근 방식이 실행되지 않습니다. 이를 위해 스크립트가 트리거 클래스를 전달하는 숨겨진 요소를 클릭하고 선택기가 나머지를 수행하도록 하십시오.

자신의 코드 (분석,사용자 정의 논리) 에서 팝업-쇼 이벤트를 듣고 싶다면 팝업이 열릴 때 팝업이 실행되는 전역 이벤트에 바인딩합니다. 정확한 이벤트 이름은 에 있습니다 마스터 애드온 문서 실행 중인 버전의 경우.

버튼 클릭 시 Elementor 팝업을 트리거하는 방법(무료)

가장 일반적인 요청 중 하나이므로 정확한 설정은 다음과 같습니다:

1. Master Addons, Popup Builder에서 팝업을 만들고 디자인하세요.
2. 팝업의 설정에서 트리거를 다음으로 전환합니다 클릭 시.
3. 예를 들어 트리거 필드에 CSS 선택기를 입력합니다 .open-signup-popup.
4. 버튼으로 페이지 또는 템플릿으로 이동 버튼 위젯의 고급, CSS 클래스 필드 및 추가 open-signup-popup (점 없음, 클래스 이름만).
5. 둘 다 저장합니다. 이제 해당 클래스의 모든 버튼이 사이트의 어느 곳에서나 팝업을 엽니다.

동일한 선택기가 행,열, 제목,아이콘 또는 클래스를 줄 수 있는 모든 요소에서 작동합니다. 그렇게 하면 동일한 동작을 얻을 수 있습니다 elementor/popup/show 자바스크립트 한줄을 쓰지 않고요. 한가지 지켜봐야 할 점: 만약 여러분이 같은 ID 선택기를 사용한다면 #open-popup를, 페이지의 다른 요소가 ID를 공유하지 않는지 확인하고, 그렇지 않으면 잘못된 요소에서 발사를 클릭합니다.

무료 Elementor 팝업 템플릿: 100+ 디자인 가져오기 준비 완료

플러그인은 뉴스레터 옵트인,판매 배너,WooCommerce 프로모션,종료 의도 제안,비디오 라이트박스,쿠키 공지,로그인 양식을 다루는 팝업 템플릿 라이브러리와 함께 제공됩니다. 각 템플릿은 한 번의 클릭으로 가져오며 Elementor 내부에서 완전히 편집할 수 있습니다. 최종 목표에 가까운 디자인에서 시작하는 것이 좋다면 처음부터 구축하는 것보다 빠릅니다.

전체 라이브러리는 편집기 내부에 있으며 더 넓은 라이브러리의 일부입니다 마스터 애드온 템플릿 라이브러리 페이지 및 섹션 템플릿과 함께.

단계별: 마스터 애드온을 사용하여 Elementor에서 팝업을 추가하는 방법

1 단계: 마스터 애드온 설치 및 활성화

1. WordPress 대시보드, 플러그인, 새로 추가를 엽니다.
2. “엘리멘터용 마스터 애드온”을 검색하세요.
3. 클릭 지금 설치하세요, 그럼 활성화.
4. 새로운 마스터 애드온 wordpress 사이드바에 항목이 나타납니다.

사이드바 항목이 바로 나타나지 않으면 admin (Ctrl+Shift+R / Cmd+Shift+R) 을 하드 새로 고칩니다. 일부 캐싱 플러그인은 이전 admin 메뉴에 1 분 동안 매달려 있습니다.

2 단계: 팝업 빌더를 엽니다

1. 로 이동 마스터 애드온, 팝업 빌더.
2. 클릭 새 팝업 추가.
3. 팝업에 설명적인 이름을 지정합니다(예를 들어, 뉴스레터, 블로그 게시물).
4. 클릭 Elementor 로 편집.

3단계: 템플릿을 선택하거나 스크래치에서 시작합니다

1. Elementor 편집기에서 마스터 애드온 템플릿 라이브러리 아이콘을 클릭합니다.
2. 팝업 카테고리를 탐색하고 디자인을 미리 봅니다.
3. 클릭 삽입 캔버스로 가져올 모든 템플릿에서.
4. 또는 라이브러리를 건너뛰고 위젯을 빈 캔버스로 드래그합니다.

4단계: 팝업 콘텐츠를 디자인합니다

1. Elementor 위젯을 드래그하세요: 제목, 텍스트 편집기, 버튼, 이미지, 양식.
2. 이메일 캡처를 위해 Form 위젯을 사용하고 이메일 서비스에 연결하세요.
3. 핵심 Elementor 또는 Master Addons 위젯을 사용하여 카운트다운 타이머, 아이콘 또는 비디오를 추가합니다.
4. 스타일 및 고급 탭에서 글꼴, 색상, 패딩 및 간격을 조정합니다.
5. 레이아웃이 계속 작동하는지 확인하려면 모바일 및 태블릿 보기에서 미리 확인하세요.

5 단계: 팝업 트리거 구성

1. 편집기 왼쪽 하단에 있는 톱니바퀴 아이콘을 클릭하여 엽니다 설정.
2. 열다 트리거 탭.
3. 5 개의 트리거 중 하나를 선택하십시오: 클릭시, 페이지로드, 의도 종료, 스크롤시, 비활성 후.
4. 트리거별 설정 입력: 스크롤 비율, 지연 초, 클릭 선택기 또는 비활성 지속 시간.

6단계: 표시 조건 설정(팝업이 표시되는 위치)

디스플레이 조건은 실제로 팝업을 표시하는 페이지를 결정합니다. 대부분의 팝업 문제는 여기에서 시작됩니다. 표시 규칙이 없는 팝업은 전혀 나타나지 않으므로 편집기에서 괜찮아 보이지만 프런트 엔드에 아무것도 표시되지 않을 때 가장 먼저 확인해야 합니다.

1. 열다 표시 조건 팝업 설정에서 탭.
2. 선택 포함하다 규칙: 전체 사이트, 특정 페이지, 특정 게시물, 카테고리, 태그 또는 사용자 정의 게시물 유형.
3. 추가 제외하다 건너뛰고 싶은 모든 항목에 대한 규칙 (예를 들어, 사이트 전체 팝업에서 체크아웃 페이지를 제외하거나, 그렇지 않으면 이미 전환한 사람에게 잔소리를 합니다).
4. 게시하기 전에 조건을 저장하세요.

나중에 표시 조건을 편집하려면 팝업을 다시 열고 기어 아이콘을 클릭한 다음 표시 조건으로 이동하여 규칙을 변경하고 업데이트합니다. 디자인과 트리거는 동일하게 유지됩니다. 타겟팅만 변경됩니다.

7 단계: 게시 및 테스트

1. 클릭 출판하다 또는 업데이트 편집기 왼쪽 하단에 있습니다.
2. 일반 브라우저 창에서 팝업을 표시해야 하는 페이지를 엽니다(편집기 미리보기가 아님).
3. 구성한 방식으로 팝업을 트리거합니다: 버튼을 클릭하거나 스크롤하거나 기다리거나 닫기 탭 쪽으로 이동합니다.
4. 실제 전화에서 반응형 동작을 확인합니다. 편집기 미리보기가 가깝지만 정확하지는 않습니다.
5. 첫 주 동안 양식 제출 및 전환율을 모니터링합니다.

팝업이 나타나지 않는 이유

팝업은 편집기에서 작동하지만 결코 사이트에 나타나지 않는 경우, 그것은 거의 항상이 다섯 중 하나입니다, 얼마나 자주 원인 것으로 판명의 대략적인 순서로:

1. 표시 조건이 설정되지 않았습니다. include 규칙이 없는 팝업은 페이지가 없는 것과 일치하므로 아무 곳에서도 렌더링되지 않습니다. 표시 조건을 열고 하나를 추가합니다.
2. 팝업은 여전히 초안입니다. 디자인을 저장하는 것은 게시하는 것과 같지 않습니다. 편집기 왼쪽 하단의 상태를 확인하십시오.
3. 캐시가 이전 페이지를 제공하고 있습니다. 캐싱 플러그인과 CDN 을 제거한 다음 개인 창에서 다시 테스트합니다.
4. 클릭 선택기가 일치하지 않습니다. On Click 의 경우 트리거 필드가 걸립니다 .my-class 버튼의 CSS 클래스 필드가 걸리는 동안 점으로 my-class 그것없이. 그 두 가지를 혼합하면 우리가 보는 대부분의 보고서에 대한 계정.
5. 휴대폰에서 종료 인텐트를 테스트 중입니다. 뷰포트를 떠날 커서가 없으므로 아무 것도 실행되지 않습니다. 데스크톱 브라우저에서 해당 커서를 테스트합니다.

마스터 애드온 대 Elementor Pro 팝업 빌더

마스터 애드온은이 작업을 수행하는 유일한 무료 방법이 아닙니다. 팝업 메이커와 같은 독립형 팝업 플러그인도 무료 계층을 가지고 있으며 팝업이 필요한 유일한 것이라면 살펴볼 가치가 있습니다. 그들은 어떤 Elementor 애드온보다 더 자세하게 변환에 대해보고하는 거래는 Elementor 의 인터페이스 대신 인터페이스에서 디자인하고 하나의 작업을 수행하는 플러그인을 실행하고 있다는 것입니다. 마스터 애드온은 사이트의 나머지 부분과 동일한 편집기,위젯 및 스타일로 구축 된 팝업을 원할 때 더 의미가 있습니다.

다른 옵션도 무게를 측정? 의 우리의 검거에서 나란히 상단 도구를 비교 워드 프레스에 대한 최고의 팝업 빌더 플러그인.

이 설정이 가장 잘 작동하는 대상

• 팝업만을 위해 Pro를 구입하고 싶지 않은 프리랜서 및 웹 개발자.
• WooCommerce 매장 주인은 판매 배너와 카트 회수 제안을 운영하고 있습니다.
• 이메일 구독자를 캡처하는 블로거 및 콘텐츠 제작자.
• 예산이 부족한 많은 클라이언트 사이트를 관리하는 대행사.
• 프리미엄 도구 비용을 지불하기 전에 제안을 검증하는 스타트업 및 중소기업.

자주 묻는 질문