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

Free Elementor에는 팝업 빌더가 포함되어 있지 않습니다. 팝업 빌더는 Elementor Pro 기능입니다. Pro 비용을 지불하지 않고 팝업을 얻으려면 무료로 설치하십시오 마스터 애드온 팝업 빌더을, 일반 Elementor 편집기 내부에 팝업을 디자인하고 페이지로드에서 열리도록 설정하고 게시하십시오. 그 경로는 무료이며 Elementor의 무료 버전에서 작동하며 약 5 분이 소요됩니다.

이 가이드는 Elementor 4.2.4 및 Master Addons 3.2에서 찍은 스크린 샷으로 모든 것을 안내합니다. 또한 대부분의 튜토리얼이 건너 뛰는 부분을 다룹니다: 트리거는 실제로 무료이며 페이지 타겟팅이 Pro 기능 일 때 모든 페이지에서 팝업을 유지하는 방법 및 대체되는 JavaScript API elementorProFrontend.modules.popup.showPopup pro 가 없을 때.

Elementor free 에는 팝업 빌더가 있습니까?

아니요. Elementor 의 자체 팝업 빌더는 Elementor Pro 만 함께 제공됩니다. 무료 Elementor 를 설치하면 메뉴의 어느 곳에도 팝업 항목이 없습니다 elementor/popup/show 페이지에 이벤트가 존재하지 않습니다.

당신은 세 가지 방법이 있습니다:

마스터 애드온은 팝업이 이미 사용하는 것과 동일한 Elementor 캔버스에 내장되어 있기 때문에 여기에서 다루는 옵션이므로 배울 두 번째 편집기가 없습니다. WordPress.org 에서 실행되는 무료 플러그인입니다 30,000+ 사이트그리고 Popup Builder에는 무료 다운로드가 함께 제공됩니다.

먼저 여러 도구를 비교하고 싶다면 별도의 검거를 유지합니다 워드 프레스에 대한 최고의 팝업 빌더 플러그인.

무료 팝업 빌더가 실제로 제공하는 것

아래의 분할은 플러그인의 제어에 의해 제어 확인되었다, 그래서 당신은 당신이 건물을 시작하기 전에 무료 버전이 중지 위치를 볼 수 있습니다.

그래서 무료 버전은 실제 디자인 컨트롤과 함께 실제 팝업을 제공합니다. 그것이 당신에게주지 않는 것은 트리거 다양성과 페이지 수준 타겟팅입니다. 그 두 가지 모두 해결 방법이 있으며,둘 다 아래에서 다룹니다.

Elementor에서 단계별로 무료로 팝업을 추가하는 방법

1 단계: Elementor 및 Master 애드온 설치

WordPress 대시보드에서 다음으로 이동합니다 플러그인 → 플러그인 추가를 검색합니다 엘리멘터를 설치하고 활성화합니다. 그리고 검색을 합니다 Elementor용 마스터 애드온 그리고 똑같이 하세요. Elementor Pro 는 어느 시점에서도 필요하지 않습니다.

해당 스크린샷의 Get Elementor Pro 링크는 이것이 무료 빌드라는 경품입니다. 아래의 모든 작업은 정확히 해당 설정에서 수행되었습니다. 전체 설치 노트는 라이브로 제공됩니다 설치 문서.

2 단계: 마스터 애드온 열기 → 팝업 빌더

플러그인을 활성화하면 다음이 추가됩니다 마스터 애드온 워드 프레스 사이드 바에 항목. 그것을 열고 클릭합니다 팝업 빌더.

이 목록은 보기보다 유용합니다. 각 행에는 활성 또는 비활성 팝업의 표시 조건과 이를 단일 페이지에 놓는 데 사용할 수 있는 단축 코드가 표시됩니다. 해당 단축 코드 열을 염두에 두면 나중에 무료 페이지 타겟팅 문제를 해결합니다.

3단계: 팝업 이름을 지정하고 활성화를 켭니다

클릭 새 팝업 추가. 두 개의 필드로 작은 대화 상자가 열립니다.

6개월 후에 알아볼 수 있는 이름을 지정한 다음 차례로 지정하세요 활성화 켜짐. 비활성 상태로 둔 팝업은 게시하거나 단축 코드로 배치하더라도 프런트 엔드에서 렌더링되지 않습니다. 이것이 완성된 팝업에 아무것도 표시되지 않는 가장 일반적인 이유입니다.

4 단계: 팝업이 나타나는 위치를 설정합니다

로 전환하십시오 조건 같은 대화상자에 탭.

무료 버전에서는 하나의 규칙을 얻을: 포함 → 전체 사이트. 다른 규칙 (Front Page,Singular, Archive,Search, 404), Exclude 타입,조건 추가 버튼은 Pro 입니다. 한 페이지에만 팝업을 원하고 자유롭게 머무르고 있다면,앞으로 건너뛰세요 단축 코드 방법.

이제 클릭하세요 Elementor 로 편집.

5 단계: 템플릿 또는 빈 캔버스에서 시작

편집기는 빈 팝업 프레임으로 열립니다. 드롭 영역에는 Elementor 의 자체 추가 버튼 옆에 보라색 Master Addons 버튼이 있습니다. 팝업 템플릿 라이브러리를 열려면 클릭하십시오.

거기에 25 팝업 디자인이 있습니다, 그들 모두는 무료 플러그인에서 사용할 수, 판매를 포함, 제품 출시, 계절 제공, 곧 및 페이지에 대해. 카드를 호버링하고 클릭합니다 삽입 가져오려면 모든 것이 일반 Elementor 요소로 가져오므로 텍스트를 다시 작성하고 색상을 바로 바꿀 수 있습니다.

동일한 라이브러리 아이디어가 플러그인 전체에 걸쳐 실행됩니다. 기성 페이지와 섹션도 원한다면,그것이 바로 마스터 애드온 템플릿 라이브러리.

6 단계: 팝업을 디자인합니다

자신만의 것을 만드는 것을 선호하시나요? 어떤 페이지에서든 원하는 방식으로 위젯을 캔버스로 드래그하세요. 제목,텍스트 편집기 및 버튼은 일반적인 옵트인을 다룹니다.

여기서 할 가치가 있는 몇 가지:

• 한 약속에 복사본을 유지. 헤드 라인, 지원 텍스트의 한 줄, 하나의 버튼.
• 상단의 장치 아이콘으로 태블릿 및 모바일 뷰를 확인하십시오. 노트북에서는 640px 팝업이 괜찮고 전화기에는 비좁습니다.
• 이메일 캡처를 위해 이미 실행 중인 양식 플러그인에서 양식 위젯을 드롭합니다. 문의 양식 7 과 MC4WP 는 모두 팝업 내부에서 작동합니다.
• 모두 80+ 마스터 애드온 위젯 팝업 내부에서도 사용할 수 있으므로 카운트다운 타이머와 가격표는 페이지와 동일하게 작동합니다.

7 단계: 트리거를 선택하십시오

클릭 MA 팝업 설정 상단 툴바에서. 왼쪽에서 네 번째 아이콘으로,기어가 있는 문서처럼 보입니다. 이전 튜토리얼은 Elementor 4 이전에 살았던 왼쪽 하단 모서리의 기어를 가리킵니다.

7 개의 트리거가 나열됩니다. 페이지 로드에 는 자유로운 자이며, 그리고 페이지 로드 후 지연(초) 0 에서 60 까지의 모든 것을 0.1 단계로 받아들입니다. 2 초에서 3 초는 합리적인 출발점입니다. 느린 연결에서 즉시 발사하면 사람들을 괴롭 히며 10 초가 지난 모든 것은 일반적으로 방문자를 완전히 놓칩니다.

그 아래, 다시 표시 지연 팝업을 닫은 사람에게 팝업을 다시 표시하기 전에 대기 시간을 제어합니다. 무료는 지연 없음,1, 3 및 5 분을 제공합니다. Pro 는 이를 시간,일, 월 및 다시 표시하지 않음으로 확장합니다.

페이지 스크롤 비활성화 는 무료이며 기본값은 팝업 뒤에 있는 페이지를 잠그는 예 입니다.

8 단계: 레이아웃, 위치 및 애니메이션을 설정합니다

열다 레이아웃 같은 패널에 있는 섹션. 모두 무료입니다.

로 표시 세 가지 모양 사이에서 팝업을 전환합니다:

• 팝업 모달: 대부분의 사람들이 팝업으로 의미하는 중앙 상자.
• 알림 표시줄: 페이지 상단에 고정된 스트립으로 공지 사항 및 배송 제안에 적합합니다.
• 전체 화면: 단일 강력한 제안에 가장 적합한 뷰포트를 인수합니다.

그런 다음 모달 레이아웃은 중앙 센터에서 오른쪽 하단까지 9 개의 위치와 대략 70 개의 입구 애니메이션을 얻습니다. 400ms 에서 페이드 인이 안전한 기본값입니다. The 팝업 설정 참조 전체 맵을 원하는 경우 모든 컨트롤을 나열합니다.

9 단계: 게시하고 프런트 엔드에 테스트

히트 출판하다을, 다음 개인 창에서 사이트를 엽니 다. 여기에 팝업이 페이지로드 후 2 초 발사, 무료 Elementor에 만 활성화된 무료 마스터 애드온 플러그인.

편집기 미리보기가 아닌 개인 창에서 테스트합니다. 편집기는 의도적으로 팝업을 억제하고 일반 브라우저 탭이 캐시된 페이지를 제공할 수 있습니다.

한 페이지에 팝업만 무료로 표시합니다

페이지 수준의 표시 조건은 Pro 입니다. 단축 코드는 무료이며,다른 방향에서 동일한 결과에 도달합니다.

팝업 빌더 목록의 모든 팝업에는 다음과 같은 단축 코드가 있습니다 . Elementor 에서 페이지,게시물, 위젯 영역 또는 단축 코드 위젯에 붙여 넣으면 해당 팝업이 해당 페이지에만 로드됩니다. 이렇게 배치하면 표시 조건이 완전히 건너뜁니다.

알아야 할 두 가지 규칙:

• 팝업은 게시되어야 하며 그 활성화 토글이 켜져 있어야 합니다. 비활성 팝업은 단축 코드든 아니든 아무것도 렌더링하지 않습니다.
• 단축 코드는 붙여 넣을 위치에 표시되지 않는 마크업을 출력합니다. 팝업은 바닥글에 인쇄되어 있으며 트리거에 따라 열립니다.

따라서 페이지별 무료 팝업은 다음과 같습니다: 전체 사이트에 조건을 남겨두고 해당 팝업이 있어야 하는 한 페이지에 단축 코드를 놓습니다.

7개의 팝업 트리거와 어떤 팝업을 무료로 받을 수 있나요

Exit Intent 는 본질적으로 데스크톱 전용입니다. 전화기에는 창을 떠날 커서가 없으므로 트리거가 감지 할 수있는 것이 없습니다. 버그를 제출하기 전에 데스크톱 브라우저에서 테스트하십시오.

무료 On Page Load 트리거에는 자체적인 기능이 있습니다 설정 문서 짧은 버전을 원하신다면.

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

이것은 페이지로드 후 가장 많이 요청 된 트리거이며,사람들이 가장 자주 JavaScript 로 가짜를 시도하려는 것입니다. Master Addons Pro 로 텍스트 필드입니다.

1. 평소처럼 팝업을 디자인하고 저장하세요.
2. 에서 MA 팝업 설정, 세트 팝업 열기 에 클릭 시.
3. 에서 선택자로 열기예를 들어 점을 포함하여 선택기를 입력합니다 .open-newsletter-popup.
4. 열어야 하는 버튼을 편집합니다. 로 이동 고급 → CSS 클래스 및 유형 open-newsletter-popup, 이번에는 없이 점.
5. 둘 다 업데이트한 다음 프런트 엔드에서 테스트합니다.

3 단계와 4 단계의 도트 불일치로 인해 우리가 보는 “내 클릭 트리거는 아무 작업도 수행하지 않습니다” 보고서의 대부분이 발생합니다. 트리거 필드는 CSS 선택기를 사용하고 Elementor 필드는 클래스 이름을 사용합니다.

선택기는 버튼으로 제한되지 않습니다. 작업에 클래스를 줄 수 있는 모든 요소: 컨테이너,헤딩, 아이콘,이미지. 와 같은 속성 선택기를 가진 기존 링크를 타겟팅할 수도 있습니다 a[href="#pricing-popup"]. 관련 있습니다 팝업 트리거 위젯 팝업 자체 내부에 닫기 및 리디렉션 작업을 배치하기 위한 것입니다.

Pro 가 없으면 4 줄의 JavaScript 가 동일한 작업을 수행합니다. 해당 코드는 다음 섹션에 있습니다.

elementor/popup/show 이벤트, 그리고 Pro 없이 이를 대체하는 것

elementorProFrontend.modules.popup.showPopup 그리고 the elementor/popup/show 이벤트 둘 다 Elementor Pro 에 속합니다. 팝업 모듈은 에 자신을 등록합니다 elementorProFrontend 객체, 그래서 무료 설치에 그 객체는 정의되지 않은 이벤트 결코 발사. 어떤 조각이 그것을 다시 가져 오지 않습니다, 그것을 방출 할 코드는 프로 플러그인에 있기 때문에.

무료 마스터 애드온 플러그인은 동일한 땅을 커버하는 자신의 API를 제공합니다.

Master Addons는 라는 전역을 노출합니다 JltmaPopups 팝업이 있는 모든 페이지에서. here is the mapping:

각 팝업은 DOM id 로 인쇄됩니다 jltma-popup-id-<post ID>. 게시물 ID 는 팝업 빌더 목록 화면의 단축 코드에 있는 번호입니다. 자신의 코드에서 팝업 441 을 열려면:

jQuery(function ($) {
  var $popup   = $('#jltma-popup-id-441');
  var settings = JltmaPopups.getLocalStorage(441);

  JltmaPopups.openPopup($popup, settings);
});

이를 클릭으로 연결하려면 On Click 트리거의 무료 대기 기능입니다:

jQuery(function ($) {
  $(document).on('click', '.open-newsletter-popup', function (e) {
    e.preventDefault();

    var $popup   = $('#jltma-popup-id-441');
    var settings = JltmaPopups.getLocalStorage(441);

    JltmaPopups.openPopup($popup, settings);
  });
});

그리고 다시 닫으려면:

JltmaPopups.closePopup(jQuery('#jltma-popup-id-441'));

세 가지 볼거리:

• getLocalStorage() 반환 false 팝업이 페이지에서 초기화될 때까지 DOM 준비에서 발생합니다. 내부에서 코드를 실행하세요 jQuery(function ($) { ... }) 그리고 당신은 괜찮습니다.
• 팝업이 페이지에 있어야 이 중 하나라도 작동합니다. 조건에 페이지가 포함되거나 단축 코드와 함께 배치됩니다.
• 스크립트는 일부러 Elementor 편집기 내부에서 건너뛰므로 프런트 엔드에서 테스트합니다.

왜 elementor/popup/show 가 두 번 발사되는지

Elementor Pro 에서 두 번 실행되는 핸들러는 거의 항상 두 번 바인딩되었음을 의미합니다: 한 번 켜짐 elementor/frontend/init 그리고 다시 스니펫이나 테마 파일에서, 또는 여러 개가 존재할 때 팝업 인스턴스당 한 번씩. 플래그로 보호하거나, 로 바인딩합니다 .off('elementor/popup/show').on(...) 리바인딩하기 전에요 엘리멘터만의 팝업 이벤트 문서 전체 이벤트 서명을 나열합니다.

마스터 애드온에 해당하는 것은 이중 바인딩할 문서 이벤트가 없으므로 문제가 이월되지 않습니다. You call openPopup() 팝업이 열리기를 원하는 순간에 직접.

Elementor 팝업이 표시되지 않는 이유

각각의 원인이 얼마나 자주 나타나는지 대략적으로:

1. 활성화가 꺼져 있습니다. 마스터 애드온 → 팝업 빌더를 열고 상태 열을 확인합니다. 비활성 상태란 아무 것도 렌더링하지 않음을 의미하며 단축 코드가 포함되어 있습니다.
2. 팝업은 여전히 초안입니다. Elementor 에서 디자인을 저장하는 것은 팝업을 게시하는 것과 동일하지 않습니다.
3. 편집기 미리보기에서 테스트 중입니다. 팝업은 설계에 의해 거기에 억제됩니다. 개인 창을 사용합니다.
4. 캐시. 캐싱 플러그인과 CDN 을 제거한 다음 개인 창에서 다시 로드합니다. 캐시된 HTML 페이지에는 새로 게시된 팝업이 포함되지 않습니다.
5. 다시 표시 지연이 이미 실행되었습니다. 팝업을 닫으면 플러그인은 브라우저 저장소에 타임스탬프를 저장합니다. 반복해서 테스트할 때 사이트 데이터를 지우거나 브라우저를 전환합니다.
6. 클릭 선택기의 점 불일치. 트리거 필드가 원합니다 .my-class, Elementor CSS Classes 필드가 원합니다 my-class.
7. 전화에서 인텐트 종료. 커서가 없어 아무 것도 발사되지 않습니다. 데스크탑 전용.

마스터 애드온 대 Elementor Pro 팝업

팝업이 원하는 유일한 Pro 기능인 경우 무료 Master Addons 빌더와 단축 코드가 이를 다룹니다. JavaScript를 작성하지 않고 종료 인텐트를 원하거나 트리거를 클릭하려면 비교하세요 마스터 애드온 가격 elementor Pro 갱신에 반대하여 Master Addons 라이센스도 제공됩니다 테마 빌더 그리고 위젯 빌더 그것으로.

자주 묻는 질문

관련 읽기

• 마스터 애드온 팝업 빌더모든 설정이 나열된 기능 페이지입니다
• 워드 프레스에 대한 최고의 팝업 빌더 플러그인, 도구를 비교하고 싶다면
• 팝업 설정 및 옵션, 전체 제어 참조
• WordPress.org의 마스터 애드온, 다운로드 및 지원 포럼